Episode 10: Design problems animation can answer
In this episode Val and Cennydd discuss common design flows or situations that animation can be particularly helpful solution for and why.
Episode Links
Transcript
Welcome to Episode 10 of Motion & Meaning; a little podcast about motion for digital designers. I'm Cennydd Bowles.
And I'm Val Head. In our last episode, we were talking about workflow and kind of going through some question and answers that we've gotten about how to fit motion in your design process. In this episode which happens to be the last in this first series of episodes, we're going to be talking about solving particular design problems through motion, kind of like trouble-shooting, here's what went wrong and how you can fix it. We touched on a lot of these things before in previous episodes but never all at the same time and we haven't tied them back to the original scenarios of when they'd be useful, so we thought that would be a good way to end this first series.
I think that's probably kind of an important thing, isn't it, because we talked about choreography, we talked about a lot of these kind of tactical things, but they all stem from a design challenge and a problem, so I think what we're trying to do here is alert you to a situation where motion may be useful so that you kind of do a bit of pattern matching and go, oh wait: no, I heard about this; Val and Cennydd were talking about it. Here's something that motion could maybe help with and then we can tie into some of the things that we've talked about throughout the series or that we talk about in this particular episode.
Definitely, because there's so much it can help with, but without being able to identify those places, it's kind of this parallel thing where you're like, hey, motion would be great, but I'm designing this thing over here and how do I connect them? So, hopefully, we can help with that.
And particularly, I suppose, because sometimes it's hard to get started with motion because again, we talked about this in previous episodes as well; sometimes it's seen as an add-on. If we can help you to recognise that it can be a viable solution to some significant design problems, then that gives you almost the excuse, if you like, to get started with it and say, oh actually I know how we can fix this: we need some motion here.
Yeah, if it's addressing your problem, it can no longer be just the icing on sprinkles on the ice cream.
Right, exactly that! Well, shall I kick off with the first one then, which is the problem that I'm sure pretty much anyone has had if you're working on a complex product, is that if it's big, if there are lots of screens, users can get disorientated; they can get lost, just not really knowing where they are within the structure of that space and that also means that it's hard to move between so people kind of lose their anchoring, their positioning but then also their familiarity with where they can go from that. And of course, motion can help a lot here. Really it's around improving orientation. Again, we've talked a little bit throughout the series of this idea of helping to signify and to make concrete where you are within this larger space of a product and I think central to that is to help show where things are and where they can be found again, particularly through motion when they're moving on and off screen, right?
Yeah, yeah, and when things are…we've mentioned it in previous episodes too, the idea of when we're dealing with a lot of smaller screens and a lot of complex things, so we layer a lot of elements behind other layers or off-screen or just in this various 3D depth and motion is a great way to help people get oriented to where things are: what's behind what; what's in front of what. There's that whole spatial metaphor there.
Right. And I think one thing that works for me here, that seems sort of central for me is, sometimes users get lots when they navigate into a product. You tend not to get lost on the very first screen you see: it's once you've gone a couple deep or you've tapped around a bit, then how do you re-trace those steps, so the idea of at least considering whether your motion should be reversible: something's flown off to say the top and the right. Is it going to come back from that direction or if I've swiped something away in a particular direction, will I be able to swipe from the screen edge, for instance, to bring it back and so on, because you're kind of using what the user has already learned and just extending and saying, OK, well, clearly it's just reversing, it's just flipping that, which makes it fairly guessable, it makes it relatively deducible.
Yeah, if you have a system that you're using or a specific set of rules that you really stick with as how things move in and out, it could just become a natural attempt: I'll try the reverse of that. And if it works: hey, you just made something really easy to use.
Absolutely, because discoverability is not this kind of binary thing. We hear about discoverability a lot, again, particularly on small screens because you can't have visible UI for a lot of this stuff. Discoverability isn't just about, can I see some perceived affordance on screen; it's also, can I discover functionality through a bit of exploration, through a bit of play, and I think motion can. It can help to signal what's happening, just little nudges and tweaks and things popping into view and so on, but also you can discover just by going…I wonder if…and reversing the gesture that you just used and lo and behold: because you have that spatial metaphor, because you've thought about the motion that you're trying to use, lo and behold, hopefully it works.
Yeah, yeah and those kind of things just make it a little bit…I don't know, when you find that stuff as someone using the product you're just like, wow, I've figured it out; it's kind of like a little magical moment.
Yeah, exactly. So long as it's not core functionality: for that you probably need a button or something like that; you don't want to rely on a gesture. I sent a Tweet a while back: never send a gesture to do a button's work! Which was fairly popular.
I could see why. That's a good Tweet!
I was proud of it! But for some things, it will work absolutely fine to have that; there simply isn't enough space on a phone screen to put every single button you need. Not that that would be a good thing, even if you could.
More buttons; that's what I got out of that point! No, not really! OK, so, our second problem is about when things feel slow or disjointed or even just when you get to a point where maybe it's difficult to tell what's going on or if an action has actually…if someone did press a button or click a button, did anything happen? Sometimes there's that delay in feedback that, maybe you have to contact a server, get more information, or there's a place where the action itself requires some waiting and it's probably good if we help people not get confused by that or wonder what's going on.
Yes, absolutely. I think maybe there's a performance angle here as well.
Oh, definitely. There's definitely a perceived performance angle of just when things take a while to happen; it's kind of a good match. Animation takes time, it's part of its definition and sometimes using an interface takes time, so if you can put animation in those places where time was going to be…there was going to be waiting anyways, you can make it seem shorter; it'll be perceivably shorter because something is happening, even though you maybe didn't make your server call any faster.
Yes. And I know there are studies talking about how the perception of delay in interfaces can be affected by the design and the motion of progress bars, for instance. I also just came from a conference in Prague called WebExpo and I saw a talk from Andy Hume, who's my former colleague at both Clearleft and Twitter and he was talking a lot about performance and so on and breaking it down very much into essentially, all the different things that can go wrong; all the different points of failure: DNS look-up, re-directs, your waterfall charts if you're JavaScripted; your core functionality and all this sort of stuff.
That sounds like a scary talk!
Yeah! It was a great talk. I'll see if they've put it up and if it is up already, I'll pop it in the show notes. But it made me think: yeah, there is a lot of delay in interfaces. Now, with something like a DNS look-up and a re-direct, you're not going to be able to have a single piece of motion obviously, because each time it'll go to a new page and kind of refresh that, but for instance, with inside an app or something like that, if you have lots of bouncing around getting different datasets and so on, sure, that stuff's going to add up, particularly on a lower or less reliable connection, so it makes it even more important, I think, if you're designing an app to be used across all sorts of bandwidth constraints and so on, you'd better make sure you have good ways to communicate what's happening in the system and again, motion can be a really helpful way to do that.
Yeah, and a lot of the time it's not just even spinners or loading bars; whenever possible, I think it's more helpful to do something a little bit more informative. I know they've done some studies that like, skeleton content, even kind of fading things in feels faster than just watching a spinner, which makes sense because you're like, this thing is spinning and you're like, it's just spinning, what's happening? But something kind of fading in or I've even seen some loaders that say things like, hey, now fetching this, now doing that; I'm not sure if they're a hundred per cent accurate but they feel like you're like, OK, something is happening: I'm convinced. I also read something actually, I'm pretty sure it was in the Seductive UI book; I'm going into the past to read recently, and they were talking about how long the cycle of a loader is affects how long people think it takes, so if you're waiting for a second and the cycle of a loader takes half a second, it only repeated twice, so it feels faster than something that might have a tenth of a second sequence and then it repeats many, many times, which I thought was really interesting; I'm like, that's a study I would like to read more about because are we really counting that in our heads? How many times this loader's repeating, or just subconsciously?
What you said there: there are two things that I'm reminded of. The first is Facebook on iOS has this place-holder sort of pseudo-content and there's a little bit of motion along those because they sort of have a little pulse along the lines, don't they?
Yeah, there's a little gradient flowing through which is kind of like softly, like waves…your content is coming through the ocean of data. I don't know!
It's quite nicely done though, now I think about it, never really kind of deconstructed it, but it's saying, hey, content's on the way; don't worry, this is what you should expect here, but it's also then combining that with a light kind or progress signification which is really nice.
Yeah, it's like a bunch of tiny progress bars!
And the second thing I was reminded of, just kind of tangentially, was when you're talking about saying interfaces that say, now loading this, now loading this, was Sim City 2000 which I don't know if you ever played…
No.
… it generates these landscapes and it was back in the day when there wasn't that much processing power and so it came up with all these things like, aligning grids or whatever it was and then it just got stupider and stupider and it had like….reticulating splines was this phrase, and I'm sure it's kind of a bit of a internet meme, to be honest, so you can take that too far; you can definitely take it in the kind of ridiculous direction.
Yeah, you could have fun with loading, that's a crazy idea!
Right, exactly.
I guess that the feedback too can also be not even necessarily that waiting area and loaders but even just that an action has been taken and it's been recognised. We do a lot of re-ordering things; moving things into different buckets. When you take action on some item, if you have a list of orders and you fulfil an order and it used to be a pending order; now it's a fulfilled order, you can use motion to give that feedback as well, watch it move to fulfilled orders or watch it appear or have it appear in fulfilled orders or disappear; reinforce that action that you did accomplish something. And those obviously are a lot shorter and smaller, probably more subtle than a loading feedback animation, but it's really useful as well, just to let people know, the thing they were doing got done and they feel more like they had an effect on the content and what they were trying to do; makes it harder for them to miss that it works too, which we don't always pay attention to this stuff.
No, you're right. It's important though, isn't it? I'm reminded here of some of the work Dan Saffer's done around the idea of micro-interactions, essentially just closing those little feedback loops so that there is no doubt in the user's mind that the system is responsive and I didn't do the wrong thing and it's fine, it's in hand, even if there's a bit of a gap before I move to the next screen or the basket or whatever it is, it's telling you, that thing has been done; there may be something happening as well in the background but rest assured, we're on the case.
Yeah, those little loops are important, I totally forgot about micro-interactions; I didn't even read it that long ago but it's a great book for this stuff. Though, he's not super pro-motion about stuff; I think he actually said something mean about motion in the beginning, I don't know about that, but anyways, but he does bring it up occasionally and it's true, looking for those little tiny feedback loops, not this giant thing of we're waiting for the server, but just a thing happened, we're listening to you, things are progressing in some way or getting things done, you accomplished what you needed to; those little things are super-important: they add up in the end.
Absolutely. Let's move onto another problem which is really about if you have a screen where there's maybe unclear priority or it's unclear what you're meant to interact with. Now, this happens a lot. A lot of the time, you'll have a visual solution to that, that flags that you need to clarify the information architecture of the page or the visual priority of certain elements and so on. But again, you can also use motion here: you've got another string to your bow, if you like, another way of tackling this problem, which is to use motion to direct attention. Now, we see this probably most clearly probably in a fairly negative way which is banner ads and flashy, unpleasant advertisements; obviously ads are very much a hot topic at the moment…
Oh, right, right; we've been using this quality of motion for evil for so long! Assuming banner ads are evil: I don't know if they really qualify that badly.
I think certainly ones that use motion to artificially distract, grab attention from the article. I have fewer ethical qualms about blocking those particular ones than I do any others.
No, that's true.
But we can certainly try and spin that, use that power for good as well. Obviously, things that move, they sit at the top of the hierarchy stack, really; they grab attention. I think it's a sort of pre-cognitive thing; we don't even think about it. It's just our eye is physically, evolutionarily drawn to something…look at this because it might be a tiger or something!
Yeah, apparently because of that, it's especially in our peripheral vision which is what makes banner ads even more evil, because they're just off to the side of what you're trying to read and apparently that's where that has the most effect on us, those jerks!
Right! So, let's talk about spinning that for a positive advantage like I say, to help call attention to the most important content. If, for whatever reason, you can't resolve that tension visually, then motion might be a good way to tackle that; either like a pulsing animation or our classic bouncing arrow or whatever it is; or changes that otherwise might be missed as well, if there's a state change for instance; maybe not one that the user themself has done but a new item appearing or say you've got a game and you've just earned a new coin or a new something like that so you can play again…
New messages showing up.
Right, totally, something like that, that's not a mode the users need to go in and look at; it's just here you go, here's something else. Then obviously motion can help draw attention to what's happened on that screen.
Yeah, and like you were saying, it doesn't need to be the only thing; obviously if there's some huge thing that everyone is missing, it's probably a bigger design problem than just animate it but if you use other design tools and create really good hierarchy and use colour to make it stand out and then also in addition use motion to make it stand out, you have three little things all working towards making this item stand out, then there's a better chance it's going to get caught, whether it's someone…you have the motion for people that don't see the colour or you can layer these on top; it doesn't just have to be one thing that's doing all the work. And it's probably more effective, at least in this case, if it's not just one thing.
Yes, absolutely. I think you're using essentially the principle of redundancy there, aren't you? Which is to say well, if you have three things that try to suggest the same use or the same message then hopefully at least one of them is going to stick.
Yeah; maybe one or two of them will work!
Right.
At least one, hopefully. Redundancy is a better way to say that. But there's more to it than just animating things that people can't see or don't notice.
Yeah, for sure.
No more banner ads! Let's ban those or something; I don't know, that's a whole other topic! So, another problem is when you end up with a really complex flow to communicate, maybe a complex set of steps, just a complex user-flow that people have to get through to accomplish what they need to get done, which is something that happens, I think, a lot in more complex products and things; probably not so much websites, unless you have a crazy, long form I guess. And motion can be a really good way to help guide people through those tasks to do things like helping them see what the next step is, showing them where they are in the entire…linear process they're going through, where they are. Even things like making…depending on how you set it up, things like making buttons not available until they really can be activated, so you don't find yourself trying to click a button that's not available yet, things like that. Helping to use motion to guide people through the task in such a way that they're guided towards doing it kind of seamlessly or correctly. Not that them clicking a button they shouldn't or that doesn't work yet is making a mistake necessarily; that's probably more you making a mistake but guiding them through the most efficient way to get through the task and whatever …having them focus on one thing at a time and leading them to the next task or the next step in the task.
Interesting. I totally see what you're saying about maybe it's less common on websites, but I do think if you have a small screen device, not that that's necessarily an app, but let's say I have a mobile app on a relatively small screen; they tend to be broken down in a much more linear way….
Oh, that's true.
You fill in this screen, you tap this button; it's pretty obvious what's next. But if you have a wider viewport, be that a larger tablet or be it a desktop computer or whatever it is, maybe you have more information on screen and therefore maybe there's more need of that hand-holding, because it's not artificially broken down in the same way it has to be on a small screen. Again, I think of games here a lot; I think of tutorials.
On-boarding as well, like us.
Yeah, on-boarding. I wouldn't suggest you use this for the really bad…welcome to app X and then pulse this thing at the top; this is your inventory, this is where you …and then pulse something else. It's just as bad as those coach-marks where it's the arrows and the kind of scribbly hand-drawn looking writings like, tap here to open…
So, you really like those? You're a fan of that approach?
Um…I.,..I think they're…unsophisticated, shall we say? I think there are probably better ways to do it. But using motion at least to help draw people through the interface at the right time where it's maybe supplementary to their activity or let's say …again, coming back to a game, they've learned how to fire a weapon and now you want to say, all right, we've now give you some grenades; here's how you use grenades. That's when you might use that kind of attention-direction we talked about before; the grenade indicator flashes to five; suddenly it's like, this is a new thing that's available to me: I'd better investigate how it works.
Yeah, it's kind of …it is about offering the information at the right time; it's more of a timing thing of when they most need it or when it's most going to be useful and it can help get people through or find things they might not have otherwise found, so it's definitely good for that kind of stuff.
Yeah, I've heard it called the inductive UI; it sort of draws you through it.
Yeah, that's a good name for it.
That kind of progressive disclosure of functionality and so on. Again: consider how motion can help you through that so you don't have to just cram everything on screen or you don't have to artificially separate your product into all these different steps.
Yeah; and it's definitely similar to the directing attention one where you probably don't want motion to be the only thing doing that. It's probably something that does need redundancy, especially if it's something you really need to get done or that is critical to using the app or the game or the site; you might want to do it in more than one way.
Yeah, I think you're probably right.
That probably goes for most of these, actually, I think. A little redundancy doesn't hurt!
It probably goes for motion generally, I think to be honest. It's like all these things: never use one thing, one treatment alone to suggest priorities like the old thing of don't just make it red: make it big. Don't just make it big and red: make it flash as well or make it pulse or something like that, and then definitely people are going to notice it, right?
Sounds like something I've seen in a banner! Anyways….moving onto the next problem…
I wanted to talk about this one because we've not talked about the idea of appeal that much throughout the series; we've much more been focussing I think almost in attempt to legitimise motion and take it away from some of the more shallow applications of it, but if you have an application that feels kind of flat, static, kind of drab; a lot of iOS apps back in the good old days, because the human interface guidelines suggested very much a page to page model and if you want to bring more of that vitality, more of that appeal and just user enjoyment to the product, then absolutely, motion is something you could look at there; it's all these things that are talked about, about a bit of delight, a bit of curious…huh, I never expected that to happen; like I say, we've pretty much downplayed them, I think, through the series but let's be honest, that is an important aspect of designing good products and clearly motion can help you achieve that.
Yeah, yeah. It definitely can and I think the thing that gets surprise and delight a bad name is that often people assume that you can take something that's really boring and otherwise very drab and just throw motion on it and that will fix everything, but it kind of has to be…there has to be a little bit more than that to get real delight; it can't be something that only animation or motion takes care of. It has to fit with the design; there has to be something enjoyable about it that you're emphasising, versus just…oh, this sucks; it's…some really boring banking spreadsheet app thing; let's make it spin: that's never going to work! Don't do that, that was the worst idea ever! But there is a lot that it can do in that sense and having those bits of surprise and even just showing a personality that's different than the next app or a similar app, motion can do a lot for that and can convey that personality.
Yeah. I think it's important, what you say, to have at least enjoyable functionality or enjoyable content; don't just have a spinning headline: we see it in so many apps when you sign up for something; it says, congratulations: you have signed up for our email newsletter and like, you're over-stating it, how much this is an enjoyable experience. So motion would have to deliver something that's not just a congratulations message or just a bare piece of functionality; that's not going to be enjoyable, but if it's a wonderful piece of motion to introduce a little surprise that actually there's free shipping on this order, or something…oh, I didn't expect that: that's even nicer than if it just told me.
Yeah, because free shipping is something that's actually good!
Right, exactly that.
It's the delight thing I think is tough to do really well, but when you see it done really well it's just the best thing ever: it's delightful. Oh Jeez! All right, so that's five problems that motion can help solve, five design problems that motion can help give you an answer to. Probably not all of the things; I'm sure we could go on, basically, all day with other things motion could do as well but I think those are five of the more important ones or more effective ways to use motion, when you run into these kinds of things. So, next step we have what we're reading which this week is a really short list!
Well, you mentioned the Seductive Interactions book. Is it Seductive UI or Seductive Interactions? I can't remember.
I think it's Seductive UI.
: But it's Stephen Anderson's book, isn't it?
Yeah, and it's kind of old: that's what I've been reading the last few days. I just never read it when it first came out, I guess maybe it's not that old, but it's a few years old and it's really interesting to read it now even though some of the examples are a bit out of date, a lot of it is talking about the psychology of why we find design things interesting or attractive and he goes into a lot of detail on the whole idea of good design is good business or rather, why things that are designed well feel like they work better or seem to perform better.
Ah, I see.
Which I think is really interesting because I've never really…I've heard of that mentioned and referenced but I've never really read into why that worked and its really interesting stuff and still pretty relevant, even though a lot of the screen-shots you're like, that site doesn't look like that any more! And he totally talks about you in it!
Oh, that's…
In like the second or third chapter, he references a blogpost you wrote and I thought that was kind of funny!
Oh bless, thank you Stephen, that's very nice! Yeah, the aesthetic usability effect I think it's sometimes called, isn't it, that idea that things that look easy to use end up being easy to use. I know Don Norman has spoken about that a bit as well and…
Yeah, he gets referenced a lot in this book.
Emotional Design, his book, talks about that kind of stuff a lot. And essentially, that kind of hits at the heart of a lot of the stuff we've been saying about motion all along is if something looks easy and more coherent, more sensible, more understandable because of motion, then guess what: it actually will be, you'll find users will be able to achieve their goals, they'll be able to perform all the wonderful things that you want them to do for you to be a success as well, so it's nice to tie those ends together, I think.
Yeah, yeah, it's interesting that it has so much relevance to what we've been talking about, even though it barely mentions motion specifically at all, so it's kind of like, oh, hey, that's a nice little tie-in I wasn't expecting!
Yeah, very nice. For me now, I remember at the end of Episode 9 I said, many apologies, that I hadn't read any articles and I was going to make sure I had for 10. Well, I've been travelling again. I will say, I was just at WebExpo and I saw…well I didn't see the talk, unfortunately, but Marie Schweiz was talking about animating interfaces and I think there was another animation talk there as well, so hopefully those have been published by now and I'll try and dig them out and pop them in the show notes as well; like I say, I didn't see them so I can't vouch for them, but I'm sure they're terrific from what I've heard on Twitter so I think they'll hopefully be valuable and maybe they'll get me a little bit off the hook for not having more URLs to recommend. I have also started dipping into some Framer workshop videos that were done at US2, an agency in London, they're also the agency that did Monument Valley and they had…I can't remember who it was, I think it was one of the Framer folks in, and there's a little playlist of one hour YouTube videos.
Oh, nice.
So we mentioned Framer a couple of episodes ago: if that's kind of put the hook in you, this is going to be a good place to get started, just to understand the basics of Framer and how you might be able to use that for prototyping motion as well. So I'll pop that playlist URL in the show notes as well, so feel free to dip into those two.
So, it sounds like if they're an hour long they're fairly in-depth? I know they have some pretty short tutorials on their site but these might be more detailed than those?
Yeah, I think it's going into relative detail; it's a tool you need to put some time into to learn. It's nowhere near as shallow a learning curve as something like Keynote; you have to put in effort. But the flexibility it offers at the other end, I think once you've picked up the basics, you see exactly the scope of what it can do, it's worth that investment, for sure.
Yeah, it's definitely something I know I need to invest a little more time in; I've been just surface-value getting into a lot of these prototyping apps and I just need to really actually commit to one and learn it really well!
Well, I have the YouTube playlist for you here!
That's going to be the one!
Great! All right, folks, so this has been our last episode of the series. We hope it's been useful; we don’t know yet if there's going to be a second series, or not. We're going to take a break and ponder all this stuff. In the meantime, while we're on that break, please do say hi on Twitter. Val, you're @vlh, correct?
That's me!
Yep, and I'm @Cennydd. We'd be very happy to answer any questions you have about motion and just generally chat more about the topic.
Definitely up to talk about this stuff pretty much all the time!
Yeah, absolutely. So, I hope you've had fun with us on the first series of Motion & Meaning and we hope to chat with you soon. You've been listening to Episode 10 of Motion & Meaning with Val Head and Cennydd Bowles. You can find out more about this show at motionandmeaning.io and we'd love to hear your feedback via Twitter @MotionMeaning. We are also now in iTunes. If you're enjoying the show, please give us a rating or a review in iTunes so more people can find out about the podcast. See you again soon.
Transcribed by Alison