The classic principles of animation weren’t written for the digital space. We’re designing animations that are meant to interacted with, not just watched. That means we have to play by a different set of rules! In this episode Cennydd and Val discuss the modern principles for interactive animation and reveal the one animation faux pas that drives them both crazy.
Welcome to Episode 3 of Motion & Meaning; a little podcast about motion for digital designers. I’m Val Head and I’m an independent designer based in Pittsburgh, and with me is Cennydd.
Hi, I’m Cennydd Bowles, I’m a digital product designer based in London.
In our last episode, we talked about the twelve classic principles of animation and whether they apply to digital design or not.
And I think we sort of concluded that they didn't all; there were definitely some that are relevant these days and some that are less relevant, shall we say.
We had a top five list and a list of ones we’re voting off the island, I think was the terrible thing I decided it was! Anyways, today we’re going to take things a little further and talk about specific principles for the kind of interactive motion design that we all do as digital designers because, while the twelve principles are useful and good, as we pointed out last time, we work in a different medium and we have different goals so we have to consider some different principles when it comes down to it. So, we’ve made a shortlist of principles that we think we need to consider as digital designers and I guess we’ll kinda talk through them now.
The first one that I always think of when it comes to this topic and one that I think is a really big one is what I call the responsiveness of an animation and I know on the web we're already using responsive for something else but I mean more like does it feel like the user’s action caused something; does it feel like you’re almost in a conversation with the interface using, the idea of, you want to see the effect of what you’ve done, you don’t want to be sitting there waiting, wondering what the heck just happened. A lot of the times this comes down to speed and timing; how long your animation takes: if it’s really slow it’s going to feel like it’s not responding to you and you’re going to hate your life, or maybe not that dramatic! But it can even come down to the kind of easing we’re using: if we use easing that starts out very slow it can feel like the interface is responding in a very sluggish way and that can be something that’s hard to pinpoint; someone’s like, oh, it feels really slow and you’re like, well why? So it’s a big one to keep in mind.
So, you’re talking here about the duration of an animation itself or the gap between the user taking some kind of action on the screen and then the animation beginning, or is it kind of a combination of both?
I think it’s both when it comes to the responsiveness of it. If it starts very shortly after you clicked a button but it takes a really long time, I feel like when you’re the person using it, you start wondering: wait, did I do something wrong? Why is it going so slow? I feel like it’s a combination of the two of how quickly it starts and becomes showing that it’s doing something based on your input and then the speed of your animation kind of plays in there as well. But you’re right; it is mostly how quickly it responds, where that gap is between user input and animation starting.
And one thing that reminds me of then I guess is good old Jakob Nielsen. We’re talking about him way more than I expected to on this podcast, but he wrote this article, way back in the mid-nineties, I think, about response times for interfaces and he provided I think three limits, three approximate limits and one was 0.1 seconds is the maximum gap really you need for a system to respond in order for it to feel instantaneous, that you’ve actually taken something, the system has responded immediately and I think beyond that and there’s that kind of lag. So that’s presumably, I haven’t seen any more recent research to see if that figure is different or has been refined in any direction but presumably that’s the kind of gap we should be looking at as a maximum before things start
Now, one thing that strikes me there as well is sometimes we have a touch-screen lag as well, 200 milliseconds or whatever it is on certain devices, so that I guess probably makes it even more important that we make sure that the animations that we put in our interfaces start as briskly as possible, at least show that there’s some kind of system response to what’s happened from a user’s action.
Yeah, that something’s actually there and I know there’s the Jakob Nielsen research about that 0.1 seconds. I also have noticed some others in some of the White Papers I’ve read that actually say you have between 0.1 seconds and one second, which I think is a little crazy.
One seems too much.
If you took one second, maybe in a research lab, but yeah, I think 0.1 seconds seems super-instant or seems instantaneous and if you’re any shorter, it’s basically like it didn’t happen, so what’s the point there? But it’s interesting how those numbers play into things.
So, more on, or I guess getting more specifically again to the speed of the animation, not the gap between user input and when the animation starts, but how fast animations should be. I think it’s really important for us to keep them quick, which is I think why I tend to talk about the responsiveness of an animation or how the response time and the speed together…I feel like there’s maybe a trend or something where a lot of people complain about transitions on websites in particular are way too slow.
Which is probably very true and I see tweets every once in a while of people being like, aaargh, terribleness; make all your transitions faster. And I know in the book, Designing Web Interfaces I think it’s by Bill Scott by O’Reilly: he actually says in there, actually there’s a second author [Theresa Neil], so it might have been her, but one of them in that book says, “make any animation you use half as long as you think it should be”, which I think is a good rule when you’re starting out but I feel like as designers, as we do this more and more, we get a better feel for how fast things should be so we don’t always constantly have to be cutting things in half!
Yeah, I think I’m a little bit wary of blanket recommendations for something like this because as you get more sophisticated and more experienced at these things, you recognise that some transitions, some animations, some motions should be lightning quick and some you should take longer over. I remember a project I was working on at Twitter where we deliberately slowed an interaction down and it didn’t actually have any motion in it, but we deliberately stalled it, essentially, so that the user had an opportunity to understand exactly what was going on because there was some quite complicated number-crunching and account merging things which we could have done instantaneously but then we would have got to the other end and the user would be blinking and going, what just happened there? So I think there are going to be instances where you want a slow one and instances where you do want a quick one.
I will say, I do agree with Bill and the general vibe that most of the time, our animations in digital products are still too slow.
Yeah, they definitely are! And I think a lot of it is just that when we’re designing them, especially when you’re newer to it, or even when you’re not, you’re obsessing over every little detail of what’s happening; you’re like, does this move in first, does that go? And you want to see it really slow to make sure you’ve hit all those things you want to hit, and then when you get used to seeing it so slow, or just like, here it is! And everyone else is like, oh God: painful! So I think the trick is, and it goes into what you’re saying about how some of them need to be slow as well is that we just need to try this stuff out; get it somewhere where you can actually try to use it and see how using it feels. If it does feel like it’s gone too fast because you’re like, wait: what happened? Then make it slower. But I totally agree; it’s impossible to make a blanket recommendation or set a specific number on this because it’s so context dependent.
I think maybe there’s a case for saying you should make them as fast as makes sense for that particular interaction, but no faster. But I think your point about…
I like to say…
Go on, sorry…
I like to say make them as fast as they can still be readable; you can still tell what’s going on, then it’s probably not too fast yet!
But you only get a feel for that in the context of the thing. When you’re designing an animation, you need to consider its broader context. It’s a way to get from something to something else, quite frequently, so your animation can be the thing in the way, so just bear that in mind and maybe that will encourage you to shorten it a bit.
Yeah, definitely and actually I’m going to change the order of our list just a little bit because you just made a perfect segue into the idea of making sure animations have purpose, because that context has everything to do with why that animation is there, what it’s reason for existing is, to get all philosophical!
This idea about animations having purpose: purpose is quite a tricky thing to pin down sometimes because it comes in different flavours, doesn’t it? So when I think about it, I think maybe there are three potential purposes for animations or transitions, whatever.
The first is, I guess, probably the most obvious which is that it directly communicates something, so if you’re taking something and putting it in a trashcan, for instance; seeing it move across the screen communicates that this document, this object, is now in this container and that’s how you get it back out again, presumably is you reverse that swipe or you open that folder up or whatever, so that potentially is the sort of thing that needs to be a bit slower anyway because if the user doesn’t understand it, then suddenly their grasp of the system, the model that they’ve formed, isn’t really there.
If you miss that, you’d be like: wait a minute; where did my stuff go?
Right, exactly. You lose control if you like of the system. So that’s probably the first reason and maybe the biggest or maybe the heaviest reason, if you see what I mean by that. The second is for more kind of indirect reinforcement and this is one I like to use quite a bit, actually, where it doesn’t directly tell you something but it supports your understanding of the system.
One example of this might be if you’re using spatial metaphor, this type of screen lifts to the right, this type of object, say a contact list or something, can be found if you pull down from the top and so on. Just little animations support that spatial metaphor and they help you to get a feel for where you are in the system as part of this kind of entity; where do you sit within it?
Oh yeah, but it’s a way of keeping your orientation in the system: where that thing just was, how you can find it again.
Right, exactly; I actually wrote a post about this a while back, a couple of years ago now, for A List Apart an article, I think I called it Better Navigation through Proprioception and for people who aren’t familiar with proprioception, it’s sometimes known as the sixth sense; it’s essentially the physical sensation we get of our position in space. If I’m held upside-down, I can feel it, even if I have my eyes shut and I can’t hear anything and so on, so you have that sort of physical sensation of where you are and how you are orientated to the world around you, and so I was trying to go for really just using that as a metaphor. Clearly, it’s just a metaphor rather than a real physical feeling, but where am I in this thing? What is to my right? Is my left arm above my right arm and so on; you kind of get that sensation if you like of where you are. So I really like that way of using motion to help reinforce that kind of thing.
And then the third one I suppose is this idea of delight and delight obviously comes up a ton when we’re talking about motion.
Does get talked about a lot but it’s still important, even if you’re sick of hearing the term, surprise and delight, it’s a completely legitimate thing!
Yeah, that’s true. I am a little sick of hearing it but you’re right, the concept is still strong; maybe I’m tired of the label!
I also think sometimes it’s used as a bit of an excuse for bad motion design; you put something in, oh but it’s delightful, people are going to love it, particularly again for the slow ones or the ones that get in the way. They’re not delightful after a hundred times; they may be the first couple of times but that delight wears off.
Not much is! It’s definitely one that gets misused and maybe over-used but I don’t think it should be totally ignored. When you find yourself in that situation where you have a place to add delay and it makes sense, it makes sense for your product’s personality or your brand’s personality, you should take advantage of that because it’s hugely effective; it’s just forcing it in there isn’t going to work and I find that kind of fits into the idea of using animation to help communicate your brand’s personality and story; I guess a lot of the time that’s delight as well or there’s probably a big overlap there, but I find a lot of people think that’s not a good enough reason; they’re like, oh well, it’s not directing someone to something, it doesn’t have a very specific user flow purpose, therefore I can’t add animation at all; and I feel like that’s going too far the other end. It’s like no, maybe you still could: if the reason is to show the personality of what’s going on and it’s done in a non-intrusive, non-annoying way; go ahead, there’s no reason not to.
I think that’s fair; I’ve actually been on both sides of that debate: I’ve occasionally been that person to say, this doesn’t do anything and then occasionally I’ve had struggles with developers or product people and so on I’ve worked with saying, come on, we should put this in, it adds a bit of personality, a bit of human feel to that kind of thing, so I think you’re onto something with that idea of having this kind of brand personality and I think I may have talked very briefly about the idea of a signature interaction that really represents your brand, that could only happen within your product, for instance, that really screams, this is a Twitter-like interaction or a Google-like interaction or whatever it is, so there’s something there as well; maybe that’s the fourth type of animation, beyond just pure delight: it also communicates something about the app itself.
Yeah, definitely. It’s not something that can get used every day in every single thing but especially when we’re dealing with all this, so many apps and so many sites people saying, flat design’s taking personality out of things, whatever, it’s like, here’s a really great way to put personality back in. It’s going to take some thinking and planning but it could totally work.
Sure. So, I’m going to add another potential principle here. One that might work for our current age and it’s something I call, "This Becomes That". I should probably explain that in a bit more detail. I’m kind of a literalist when it comes to motion. I like the fact that digital allows us to do whatever we want really. I guess probably the earliest cartoonists probably had something similar, like physics doesn’t really matter for them, an animal will always fall slower than anything underneath it, all those kind of cartoon clichés, but I do like motion that’s intelligent and at least has some kind of good mapping between the start and the end states so let’s say I’ve got a little video preview, and I tap it and it expands to the full screen and starts playing. When I close it, I also expect it to go back into that slot again that it was. I don’t expect it to fly off the screen in a random direction because really, that just kind of breaks the literal feel that I was trying to get; it doesn’t reinforce the metaphor, again, of what happened, so that’s just my kind of personal bias and maybe I’m just being a bit pedantic and boring there, but I think if you’ve got State A and State B, move between them sensibly rather than just throwing in State C for no damn reason.
I’m laughing because I just recently ran into something like that last night and I was complaining about it to my officemate, I was like, why is it leaving in that direction if it came in in this direction? And he was just like, oh seriously?
But these things matter.
It does; sometimes I feel it’s like the designer didn’t even think about how it got there, they just were like, well now it’s time to animate it out, whoo….but having a plan and just thinking about, like you said, if this thing came in from the bottom, maybe it should go back down to the bottom because that’s what it was and that’s what it does. It’s like a continuity thing almost of thinking of these objects almost as characters or players or actors, I guess, of what their personality of themselves is and what their properties are, even if you’re not programming that in, just thinking about it as the person designing it. But yeah, maybe I’m too pedantic as well, but that makes me angry too!
Well that makes two of us; that’s fine, that’s good, we can be pedants together! I think you can take it too far; you can be too literal that it’s just flat and it’s boring and it’s just a movement without any kind of personality. What I kind of think of is this idea, again I have a phrase for it; I call it "Magical Realism" which is like a literary phrase and they use it for when they’re talking about novels where magic is commonplace and it’s just like, yeah, of course magic is commonplace or yeah, of course there are dragons, or whatever; I kind of think something similar for digital design. We should probably be realistic and gravity should have an effect and things should collide sensibly and so on. But not all the time. One that’s surprising or communicate something if it moves in a different way; again, coming back to that cartoon physics: yeah, sure, stuff mostly goes down but if it’s funnier or more appropriate to do it a particular way, I think you can also have that little bit of magical realism there as well.
What’s the saying? The rules are there to be broken or something? There’s rules but there’s always exceptions to those rules and we find that all the time in design; it’s like you set them, and you have this system and you create it, but sometimes you find a good reason to break that system and break those rules and you almost want to look for those in a way, those important pieces that would make sense to do it. It still might make us angry if you make your modal boxes come from the bottom and then just flip off to the side!
Right; exactly that.
Anyways…so I guess that totally segues into the next one; the idea of having a suite of animations, of having some kind of coherence across all the animations in a product because it’s probably I’m going to say impossible, that you would only have one animation in your entire product, solely just by itself.
Yeah, I can’t see many situations where you’d do that. Maybe you could but frankly, if you’re going down that route where you’re going to be prototyping and building animations, you’re probably going to want to get a bit more bang for your buck; you’re going to want to do a couple. But it’s all about creating a thematic, coherent group of animations and not necessarily just ones that appear at the same time; not simultaneous ones. That’s more in the realm of choreography, which we’ll talk about, I’m sure, at some point.
Yeah, maybe even next episode!
Yeah, that might be interesting. But also across the whole length of use of the product and you don’t know how long that’s going to be. A user might be using your product for a minute or an hour and you need to make sure that at least the animations make sense in relation to each other as well; velocities should be relatively consistent for instance or again, if things are flying off in a particular direction, maybe it should be the same direction and so on. I think a lot of this is just like due diligence, just good practice, just making sure that you’ve rounded off all the corners and so on and it’s the sort of thing you get wrong if you’re careless with your motion design but it really shows up over the course of use of the product.
Yeah. You wouldn’t design just one single page or screen of a site in isolation, not considering anything else you’ve already done. In the same kind of way, you don’t want to design each individual animation without any regard to what you did in the last one: you don’t have to start over from scratch every time.
There’s that quote from Naoto Fukasawa [Correction: actually by Eliel Saarinen], “Always design a thing by considering it in its larger context” which obviously works for chairs in rooms and rooms in houses and so on as well, but it also works brilliantly, I think, for animations within a wider product, within even a wider product suite, for instance, as well.
Yeah, that’s a good quote; it totally fits, even if it was meant for furniture!
So, there’s one other I thing I just want to talk about which is the end of animations: are these animations blocking the user from doing something? And potentially there’s a reason why they would, or are they non-blocking? Are they going to make you wait ’til they’re complete before you do something else?
Yeah, this is something I see way too often on the web where sites will just assume you’re going to wait for their transition; usually it’s a page transition or like an accordion opening and closing; I’ve even seen sites go so far where they’ll disable the open-close button which an accordion is opening until it’s finished opening, and then you can close it. Like, really? You have to wait for it to open all the way before you’ll let me close it? Really? Then I go on one of those office rants again! My office mates hate that! But it’s like you said, when you’re blocking the user’s ability to use the product, to give input, to do anything, it’s really frustrating and I feel like we do it too much to make our jobs easier; I figure the person who, at least in this case I noticed, the one that I’m talking about but I won’t actually mention because I don’t want to say bad things about people, but whatever, this particular one I noticed they actually turned off the button with JQuery; I’m assuming they couldn’t figure out how to make it be interruptible, how to interrupt its open, so they were just like, we’ll turn off the button and we’ll wait ’til it’s all the way open and then you can close it. It’s like: no, that’s not a good way to code something, that’s not a good approach. I’m sure there are some times when you do want to turn off input; if you could actually break something, but opening and closing an accordion, if you try to close it when it’s half way open, that doesn’t count as breaking!
Is there a case for saying here then that our hypothesis is that you should try and make animations non-blocking wherever possible?
Unless it makes sense, when you really need to make sure the user understands what’s going on or it’s just so wildly complicated it shouldn’t be interruptible. But that’s going to be your last resort, to select it.
Exactly. My default would be to make it non-blocking whenever possible, but just make that by default unless you run into a case where really, truly, things will break if someone can click a different button or decide to close it or go to a new page, but I feel like those cases are so rare and by default, we should be making these, whether it’s animated or not, the interface should be as easy to use as possible and you should be able to actually use it and not be cut off randomly, for no reason really; no good reason anyways.
Exactly. OK. Shall we talk a bit about what we’ve been reading recently, because this is something I think we want to try and make a regular thing because there’s a ton of great stuff happening out there.
So it’ll be our regular segment.
Yeah, absolutely. Try and point people to the great work that’s happening. I’ll go first if I may, because there were two things, two articles that really caught my eye this week.
One was, there’s an article called How to Captivate Your Audiences with Motion and this is by Amanda Phingbodhipakkiya, which I hope I’m pronouncing right, and it’s a good article. It talks about neuroscience and essentially our perceptions of motion and why it can be so attractive and also potentially so detrimental if it’s used for the wrong purposes. And it also links quite nicely to the topic of proprioception which we talked about previously, it considers that, by way of also discussing Monument Valley, so for me it hit some really interesting angles. So I recommend that one, we’ll put a link to that in the show notes as well, and apologies to Amanda if I did pronounce her name incorrectly!
I wouldn’t have even…I would have been worse!
ell, I had a go; I like trying to get people’s names right for obvious reasons! A second one that really grabbed me was something that possibly a few people have seen which was a Keynote motion graphic experiment by Linda Dong. Linda used to be a Prototyper at Apple and she’s recently left; she’s now on sabbatical travelling the globe and good for her, but she found some time to create this quite astonishing Keynote Deck which she’s converted into video and the video, if you play it, it’s probably less than a minute long, but the last thing you’d think it would be done in was Keynote. It looks like it’s been done in After Effects or something like that; all sorts of cartoon-ey animations and transitions and animations between slides and very whimsical interesting and busy, a lot really happening on screen. And then Linda also includes a couple of tips at the bottom, basically how she’s done it. So she’s got the Keynote doc which you can download and definitely warrants some poking around and I’m probably only about ten per cent of the way poking through that and really understanding how she’s done everything. But she talks about a couple of tips as well, and there’s one I hadn’t come across which was the idea that you can Magic Move along a path, so it doesn’t have to be just a straight transition between Position A and Position B: you can actually create a shape or a curvy line or something, you can animate along that and I wish I’d known that sooner: that would have been terrifically useful for a ton of things; I’m going to have to hack them…
You want to go back?
Yeah, I want to go back to my previous self and fix these things! I had to do all these kind of hacky these kind of cludgy fixes where I put in three or four different states so it roughly moves in the right direction and man, if I’d known that, it would have saved me a ton of time. But that’s a really great post as well and it’s astonishing what can be done with Keynote.
I read that one too this weekend and I was really impressed with it; I’m like, how did you do that with Keynote? That’s amazing! I haven’t gotten to dig around the file yet but I’m looking forward to doing that because I feel like I’m going to learn so much about Keynote. And when I tweeted about that one actually, my friend Patrick reminded me of another animating with Keynote article that was posted, I think it’s a year or two old, it was from Thoughtbot and it’s a lot about how they’ve used Keynote for prototyping and how they get animation done in Keynote and I thought it was a good pairing to that one. A little more practical, not as cool and cartoon-ey or anything, but Keynote’s a really decent prototyping tool and as Linda’s article shows, possibly a really good animation tool so it’s something to look into more.
Yeah, absolutely. I think it’s one of these things, it’s surprising when you see someone really master a tool, just how far they can push that thing; I think it really inspires me to go a bit further and learn that as well.
know; I’m like, what have I been doing with Keynote all these years? Clearly, nothing!
Seriously, I don’t even know how to use Master Slides properly: I’ve got a lot to learn about that tool!
We’ll start a Keynote podcast next!
Oh, hell no!
Not really. No.
Don’t worry world, we’ll spare you that one.
Allright, so you’ve been listening to Episode 3 of Motion & Meaning with me, Val Head and Cennydd Bowles. You can find more about the show at motionandmeaning.io and we’d love to hear your feedback over Twitter @motionmeaning is us on Twitter and we’ll see you again soon!
Transcribed by Alison