Published: 11 November 2016
When and how to use animation, and how to achieve consistency
Gerry Gaffney:
This is Gerry Gaffney with the User Experience podcast. Today’s guest is a designer based in Pittsburgh in the USA. She teaches, talks and writes about animation and her new book is called Designing Interface Animation: Meaning Motion for User Experience. [For 20% discount use code UXPOD.] Val Head, welcome to the User Experience podcast.
Val Head:
Hi, thanks for having me on.
Gerry:
Given that you’ve used both words in the title of the book, can you start by telling us perhaps what’s the difference between animation and motion?
Val:
Right, right it’s kind of funny because we often use those two words interchangeably and you know that’s totally fair, they do, they really do mean very similar things. Motion is basically like a subset of animation in a way, like a part of animation because, you know you can, the animation by definition is just something changing over time, some property, some factor and that doesn’t necessarily have to be position. So you can have animation without motion. It’s just you know if you’re doing something like fading opacity or something, the thing doesn’t necessarily have to be moving which means it would be animation and not motion, even though you might call that motion too. I think it’s mostly interesting to talk about the difference just to note that animation doesn’t necessarily mean things moving across the screen and moving around. It can also just be that sense of depth and time visually.
Gerry:
How did you get interested in animation in the first place?
Val:
I started out actually getting interested in it taking a Flash workshop ages ago all around animation, and somewhere along the line in that course they revealed that you could like create interactive animation with Flash and to me that was just kind of like completely life-changing, like why are we not all doing this? And I worked a bit making some Flash sites for some of my first agency jobs and interestingly enough also worked on a lot of like Flash kiosk projects which was kind of hilarious because that had nothing to do with the Web at all, it just happened to be Flash to run on one single computer in a museum or something.
Gerry:
Yeah Flash had a bit of a bad reputation at times, didn’t it?
Val:
Yeah, it did. I was actually just talking about that with someone the other day. We’re like, we’ve sort of, based on everything that happened and the way Steve Jobs killed Flash or however you want to summarise it, you know, we tend to focus on all the bad things that happened with Flash and there was like a lot of really terrible things but there was also a lot of innovation in just design and interaction ideas that we’ve kind of completely forgotten about and we’re kind of at a point now where we can start innovating in that area again and that’s pretty exciting.
Gerry:
Yeah and I guess, is it fair to say that the world of animation has opened up in recent years from being something that you needed, you know something like a Sun microstation or some sort of, I can’t remember what they call them actually, some sort of a high end piece of equipment to do animation to something that the average web designer can access with relative ease. Is that right?
Val:
Yeah, I mean these days you don’t really need anything fancy. I mean I guess if you were going to go really hard core animation and use like Cinema 4D and things then probably you do but anything short of that I mean especially when it comes to animating for the Web, like you can do even like fancy WebGL things with your MacBook or your whatever other computer and there’s nothing really, there’s no special equipment needed, at least not for screen-based animation right now which is pretty neat actually. It’s like it’s really come down to where anyone can jump into it.
Gerry:
And has HTML5 been instrumental in kicking off that accessibility, that openness?
Val:
I’m not sure if HTML5 specifically, but you know kind of things happening all around that time where it’s just like the capabilities of the technology we’re using to make websites has just expanded so much in what it can do.
Gerry:
Yeah, and you talked about anyone being able to jump in. I guess when any technique becomes broadly available for the first time, we tend to see a lot of very poor implementations and if we think back even to desktop publishing in the old days suddenly everyone used every font because they could. Are you seeing something similar in animation?
Val:
[Laughs.] I think yes and no. It’s like you said, there’s always going to be bad designers and there’s always going to be places where we’re like “Oh, wow we can do this, let’s totally overuse it!” But I think there’s always going to be pockets of that, right?
Gerry:
Yeah.
Val:
I think that there’s a lot more people, at least, and this could also be a biased thought because of the kind of people I hang out with but I feel like there’s a lot more web designers out there that are looking for the ways to use this well and create interesting solutions, not over the top, I’m just showing off what I can do solutions and I find that very encouraging.
Because when you think about how easy it is you’re like “Oh, no what are we going to do”’ But thankfully I don’t think we’re at that point. Hopefully we won’t be ever at that point.
Gerry:
Maybe the industry as a whole has matured past that particular...
Val:
I think so because we saw a lot of really crazy like terrible skip intros and like auto playing music and everything with Flash sites and I feel that happens a lot less now even though we can do that with all the things we have. I don’t feel like that’s coming back as a trend which is very heartening.
Gerry:
Indeed, thank God for that. I’ve been involved in many religious wars over skip intros over the years.
Val:
Isn’t it crazy to think that that’s a thing we used to fight over like if there should be an intro. [Laughter.]
Gerry:
Oh my God, don’t remind me. So why animate at all? What’s the point? What’s the value?
Val:
Oh, well like on the biggest scale I guess is it’s another way to communicate your message and you know what’s going on to the user, you know we use type and colour and hierarchy and all these things in design to help people figure out what’s going on and where they are and to kind of like tell them, you know to kind of express a personality and a point of view of the site or app they’re using, and we can use animation for all those things as well. It’s just a matter of kind of treating it like a design tool and thinking about do we, is there something we need to call specific attention to? Could animation be useful for that? Is there a complex amount of information or a complex flow going on? Maybe animation could be helpful in sorting that out and making it seem easier too. So there’s a lot of places it can add value and really it’s just a matter of thinking of it as a design tool as opposed to like this thing off in the corner that we don’t touch.
Gerry:
Yeah. You mentioned a couple of phrases there, “personality” and “point of view” and “flow” which I guess point to my next question which is the relationship between animation and storytelling. Is that a strong relationship?
Val:
Yeah I think so. I mean both kind of have that dimension of time, right? You know I mean storytelling, we often think of like film or video and we have that sense of like the passage of time and stating facts or telling stories over time and animation definitely fits into that pretty closely. In a way, every animation kind of is its own little micro-story, right? It’s got, some meaning will be drawn from it. You can kind of think of it that way.
Gerry:
Yeah and I guess Dan Saffer talks about microinteractions, maybe the two have some sort of connection.
Val:
Yeah I think so. He talks about animation a little bit in his microinteractions book so I was happy to see that.
Gerry:
Yes. You also use the term in the book, which is an excellent book by the way, I thought, but you also use the term “choreography.” What drives the thinking behind that?
Val:
Mostly just the idea of thinking about all the motion you’re using overall because a lot of the animation we use in UIs might be small hover effects or just like little things here or there and it can get really easy to just focus on like what that button does or what that form does and never think about how they go together. But as someone coming to use your site, you know you never know where they’re going to start and if they use like a button that moves one way in a form that has some other sort of motion like that’s going to feel incongruent to them. So we need to think of that bigger picture of like what’s common between all the animations we’re doing, you know what things are they all based in? And how can we make them feel like they belong together? Much like you do with like typography and stuff, you wouldn’t use a different type face on every page of your site. So it’s really just taking that same top-down look at your animation and making sure there’s some consistency there that makes it feel that they belong together.
Gerry:
I don’t want to get all deep and psychological here but I was interested to hear you use the word “incongruent” whereas you know I guess if we’re talking text we typically talk about inconsistency, and “incongruent” does have that idea I guess of an image or a graphic, doesn’t it?
Val:
Yeah, yeah. It’s any time you get to that point where what you are seeing maybe doesn’t fit with the other things or doesn’t fit with your impression of what you’re using, you know you can really get those kind of, not like, I don’t think anyone using your site’s going to be like “Oh, I’m so confused, I’m just going to give up,” but there’s like little hints and these little places that if you’re not thinking of the big picture you can really be sending mixed messages and that can feel weird to someone experiencing it.
Gerry:
Designers, I think in the digital space, are sometimes criticised I guess for acting as if they’ve emerged full blown, you know fully formed out of the ether without any kind of background behind them but animation in particular has got a very strong tradition. Do you feel that you and other people you work with in animation are part of the tradition or have you emerged fully formed?
Val:
[Laughs.] I think there’s a lot we can learn from you know the tradition of animation. I mean places like Disney have been doing animation since ages ago, right? Like decades if not more than that and they’ve done a lot of work to figure out, especially around the area of like how to make these things that are you know just 2D shapes on a screen, how to make it seem like they are in the real world, how to make it seem like they’re alive. And those kinds of things I think we can really learn a lot from because if we can create interfaces that have natural movement or like reference natural movement that’s going to feel better to most humans that exist in you know the real world as we know it. So there’s a lot of that kind of the way you can say things with animation, the way you can make things seem to feel real that we can learn from traditional animation. And of course like we are doing different things. Most of our animation has to be interacted with, we need to think more about you know also the task at hand. No-one’s generally just sitting back and watching a website for the most part, they’re trying to get something done. And that affects how we animate and the kinds of things we want to do. But I still think we can learn a lot from what’s come before us, just we need to add our own things in as well.
Gerry:
I was, with the whole internet of things thing and I was reading, I can’t remember the authors, book on understanding industrial design over the last few days and they talked about objects being response, have you thought about animation being associated with particular objects, even perhaps to the extent that they might actually move in the real world?
Val:
Yeah, I mean you can definitely create that sense of like object-ness on screen by the way something moves, like you can almost make any, well we really can make any inanimate object like seem animated and seem alive and we can do that same thing on screen…
Gerry:
But can we do it in the real world though? Like if you’ve got something like, I don’t know a box in front of you that is responsive in some way to some event?
Val:
Aha. Yeah I think so. I mean depending on how it moves and how it works. I know there are entire schools of research around like how to make robots behave physically in a way that makes people want to approach them and trust them and not think of them as like a machine. Maybe that all ties in to that, it’s like we’re going to have all these little things that our house that are basically like...
Gerry:
…annoying us?
Val:
[Laughs.] Yeah, it’s like when is it, I don’t know I feel like I may already have too many things in my house that talk to the internet.
Gerry:
Yeah well Marie Kondo is always talking about decluttering you know? Getting rid of everything, just throw it all out.
Val:
Yeah where do you throw the things of the internet of things when you want to declutter? I don’t even know.
Gerry:
Oh my God, that’s getting too deep. You enumerate in the book twelve classic animation principles and you’ve already sort of mentioned Disney and so on but where do those principles come from and can you tell us briefly about at least the key ones?
Val:
Yeah. Most of them, well the 12 classic principles of animation comes from a book that Disney wrote called The Illusion of Life and the twelve principles are basically what they came up with among the early Disney animators of like how they made animation seem so real and be so emotive and you know tell stories with it. That was something no-one else was doing at the time and the 12 principles are basically how they taught new animators what to do and the kind of rules they followed to keep up that Disney tradition and now they’re kind of you know they’re 12 things that kind of explain how to make animation either feel very physical or express certain emotions and express certain things.
The biggest and most important one, I think, is just the idea of like timing. It’s sort of the thing that all the other principles are kind of based on or tied into, you know the sense of having a good sense of timing and how long something should take and then also thinking about the spacing and the easing of like if this motion takes one second to complete, how does it change speed across that one second and what do those changes in speed suggest about the object itself? You know there’s a lot in that timing and spacing you can say about, that you can suggest rather of like the physical sense of that object and the emotional sense of that object. I think those are probably the biggest one.
Other ones kind of have to deal with like the sense of energy and the transfer of energy, things like you know follow through and anticipation, which I think are also really interesting to think about on an interface idea. Just kind of you know like anticipation is sort of a bit of suggesting what might come next and follow through is the idea of having so much energy that maybe not everything stops at the same time, things kind of overshoot or have that sort of wavelike motion. So, there’s a lot we can, there’s a lot we can learn from those about making things just feel a little more natural. I think that’s what makes them really interesting. Of course there’s also some that have nothing to do with the way we work anymore because we have computers and you know browsers but they’re still fascinating.
Gerry:
Is that a book you’d recommend people pick up and read?
Val:
Yeah, I think it’s a really interesting story. I’m not sure that there’s any kind of e-book version. It might be the kind of book you can only get in your library or like you know buy a used copy of but totally worth looking for.
Gerry:
And I see the authors are Frank Thomas and Ollie Johnston.
Val:
U-huh, yeah. Two of those Disney animators.
Gerry:
Yeah, yeah and there’s a picture from Pinocchio on the cover which is a great movie. Now animation can be annoying and we’ve already alluded to that, how can you avoid just annoying the hell out of people?
Val:
[Laughs.] Yeah I mean it’s like all design things, right? You can design horrible annoying things no matter what you’re using and I think animation definitely has the sort of gravity that tends to pull more attention to itself. So I think it can often get blamed for annoyingness even if maybe it’s not totally the factor. But really it’s just a matter of you know keeping in mind why it is you’re animating a thing. Like is there a reason why you’re animating it? And is that reason something that’s going to benefit your end-user or your audience? You know or are you just doing it for you or are you doing it for them? And I think most of the time if you are doing it for them you can make it something that’s useful and if you find yourself just kind of like making animation because you want to, that’s probably where you get into the realm of like too much. You know it also has a lot to do with context, right? The same animation in one context may fit in perfectly well and seem just fine and in another context it might seem way over the top and like horribly out of place. So taking a step back, right, and kind of thinking about like is this really doing something helpful? Is this adding something?
Gerry:
What’s the connection between animation and humour?
Val:
Animation and humour?
Gerry:
Yeah.
Val:
Um, I’m not sure about that one. I mean I guess there’s definitely, it’s one thing that you can really easily make feel playful and have a sort of light energy so you can definitely create some humour that way. Humour’s so hard to do well though you know?
Gerry:
I often think it’s very dangerous.
Val:
Yes, yeah, especially in things like copy and stuff, you don’t want to be making jokes when something is like going horribly wrong. It’s definitely a tricky one.
Gerry:
Yeah, years ago one of the ATMs on a bank here had a, if you had no money it showed a little cartoon character with its pockets emptied out you know and it was supposed to be funny but of course the context was completely wrong, yeah.
Val:
[Lauther.] Oh, no! Oh my goodness. And here I was complaining about the bad noises my bank has at their ATM but that’s so much worse.
Gerry:
Well noise is a whole new frontier, isn’t it yeah? I was really pleased to see in the book you pay a lot of attention to the issue of accessibility but there does seem that there’s an inherent risk of creating inaccessible content and I guess you know you could say creating animation or adding animation almost by definition means you’re creating a two-layer experience. What are your thoughts on that? I mean I know it’s a difficult question.
Val:
Well I think the idea of creating like a two layered experience really depends on your approach to building things. You know if you kind of follow a progressive enhancement sort of approach where you make sure the core functionality of your site can happen no matter what you know like just with the most basic of technologies and then kind of you know add these enhancers as those enhancements are supported you know no-one’s going to be unable to reach the most important things. People with more capable browsers or more capable devices might get a more nuanced experience but nobody’s going to be locked out of the thing they actually need to do. So I think it’s one of those kind of planning ahead sort of things, you know if you kind of build that progressive enhancement idea in mind you can create things that maybe are very forward thinking and do a lot of things with new technologies but also are not going to be broken for someone who comes on you know like an old Android phone or old IE or anything like that.
Gerry:
Mm yeah. You’re a big fan of prototyping. What’s involved in prototyping animation?
Val:
Mostly just testing things out. I mean there’s so many different ways you can prototype these days. I feel like there’s a new motion prototyping tool on the market like every day. I don’t think one was released today but maybe I haven’t checked the right sites. [Laughs.] You know it’s definitely a really hot market for software right now which is great for us because it means someone is going to make a really good tool. But also overwhelming because no-one has made that really great tool yet. But the biggest thing with prototyping is just finding a way that’s good for you to kind of test out your animation ideas on screen, right? You know you might have this idea of like “Oh we can animate these form fields in this way and have this like helpful message come up” or whatever your plan might be. But you’re really not going to know if that’s going to feel right to use, if it’s going to be a smooth interaction until you actually try it out.
So if you build a little like small version of that just to test maybe one small part of it, you know maybe just put together that one message and see how that feels to use and see how that looks in context, can be really informative for your design decisions. I find it’s really hard to know in your head if an animation idea is going to make sense or if it’s going to work. But what you can get, test something, a small indication of it on screen in a prototype you can judge much more easily.
Gerry:
What software do you use day to day?
Val:
For prototyping?
Gerry:
Well generally for your work yeah.
Val:
Kind of the same things as most other design folks do, use a lot of Sketch, do a lot of Illustrator, Photoshop stuff. If I’m trying to make like a motion-specific mock-up I might use like After Effects though I’ve been trying as much as possible to mock things up with motion in the browser as most of what I do is going to be on the Web. There’s definitely some tools that make it easier, things like Framer or Atomic that can kind of give you this starting point so you’re not like coding everything from scratch because that can be time consuming, yeah but really a lot of all the same Web things you’d normally use just using them with the focus on motion.
Gerry:
What about pen and paper?
Val:
Oh yeah definitely that! I have piles of terribly scrolled sketches for basically everything I do. I tend not to share those too much because my drawing and writing is pretty horrible.
Gerry:
Is that a starting point for you, pen and paper? Or do you start on screen and then revert to pen and paper to work things out or what’s your approach?
Val:
I mostly start with pen and paper just because it’s so easy, it’s just like you know quickly jot down some little shapes and ideas and notes to yourself and be like “OK this is what I’m going to do.” I find myself that I am very, it’s very easy for me to like “Oh I have this idea but I can’t do it right now, I’ll just do it later.” If I don’t like at least try to draw something that will remind me or I’ll forget what that idea was. So a lot of it is mostly for my own memory, to be like this is an idea I had, let’s try to think about it more and work it out in more detail.
Gerry:
Something you mentioned earlier was about things becoming incongruent; how do you achieve consistency across animations within a product or a suite of products?
Val:
That’s a good question. I mean...
Gerry:
Come on, all my questions are good questions!
Val:
Oh, yes sorry, sorry. They are all good questions. [Laugher.]
Gerry:
But this one is particularly good, yeah?
Val:
Yeah this one is particularly good. I think it’s one that a lot of people wonder about. You know it’s like you start to realise “Oh I have multiple animations in my site. Oh crap they probably should, I should probably be thinking of them as a whole.” And I think one of the best ways to do it is to tie your animation decisions about things like easing and timing and duration and things that really affect how it looks to some of your brand or product design values. You know generally all products and brands have some sort of brand values or certain personality traits they want to convey or even like voice and tone or something that describes what it is they want their core point of view and personality to be. And you can pull from those same things to build your emotion, you know kind of like how you might think about your brand’s personality to pick colours, you can think about your brand’s personality to pick the traits you’ll use for your animation. And when they’re all coming from that same source of personality, that same definition of brand personality, they’ll fit together as a whole much better.
Gerry:
And I guess as a consequence of that how do you communicate that consistency, particularly if you’re dealing with multiple designers or outsourcing some of your work, how do you ensure that’s consistent as well?
Val:
Definitely in those cases some sort of brand guidelines or style guide is super helpful. You know whatever you want to call it, design system, style guide, people call it all sorts of things but really just that sort of basis of you know maybe the main things you’re trying to do with motion, maybe like a specific set of easing palettes or a specific set of properties that you animate or even you can go as far as having like a collection of like canned animations essentially or pre-defined animations, that’s a better way to say it. It’s like you know here’s our fade-in animation, here’s our slide animation and having that sense that kind of central documentation that people can consult or pull from will help you make consistent decisions despite the fact that there’s you know any number of people working on it.
Gerry:
Yeah I guess related to that, one of the things I really liked about the book is you included lots and lots of links to explanatory examples on Vimeo.
Val:
Yeah, it was one of those things where people were like; “What, you’re going to write a book about animation. Isn’t that weird?” I’m like ah. I feel like a lot of it is helpful to see. It’s also really funny when you take a lot of these videos of websites and then you realise how frequently websites redesign, oh my goodness.
Gerry:
Yeah.
Val:
You know even some videos that I took like I don’t know less than six months ago now because the book’s still very new, some of those sites have changed. But I think it’s good to have that sense of reading the words about it, reading that description about it and also being able to see it, to kind of judge for yourself how you would describe it. You know because we all use different words to describe the things that we see and not everyone has to use the same words I do as long as your team all agrees on how you define these things you’re good to go.
Gerry:
Yeah, I must say I find it very useful because I’m not you know I don’t work in animation and I’ve got no skills in that area so it was great to see “Oh that’s what she’s talking about, that’s a good example.”
Val:
Yeah, you probably have more skills than you think because we all are exposed to it so much. I think we’re pretty good judges of when things are animated well. It’s just a matter of kind of breaking it down and articulating to yourself what it is that makes that good so you can also make your own work you know be also as good.
Gerry:
Sure, yeah. I must admit I really hate the term “delight” and people seem to use it a lot, particularly banks and telcos and the like but animation really can establish an emotional connection, can’t it, and we do tend to humanise or anthropomorphise things that we look at that move on screen don’t we?
Val:
We really do. It’s, you know I do it a lot and I always thought maybe that was just me because I’m like maybe I’m just like you know not a very grown-up person and put personalities on all the things I see. But it’s actually something that’s been studied and we really do, when we see something moving we try to explain or give it some reason to be acting in an emotional way or give it some personality or like human traits which is fascinating all on its own. But it really is, there really is that potential for emotional connection with animation that I think it’s stronger there than it is with like you could you know pick, picking colours or picking type can also evoke emotions but I feel like animation has a stronger pull in that sense.
I think the word “delight” gets overused a lot too. I think we kind of a lot of the times it’s almost a short form to mean like anything, like maybe it just means easy or like you know fitting or energetic. I think we do need to expand our vocabulary around animation because we seem to roll up so much into this one word “delight” and either you love the word or you hate the word but either way none of us really know what it means and that’s not helpful anymore.
Gerry:
What’s the ideal background for an animator? Should they have some sort of fine arts training or… what do you think?
Val:
You mean for someone to be like UI animation kinds of things?Gerry:
Yeah.
Val:
I think, I mean for the most part most web people don’t have a motion design background. I think if you do have one that’s probably super helpful and I think that makes people approach things just a little bit differently because they do have that basis in motion design, they just, they’re kind of predisposed to thinking about things in that sense. But it’s also really fascinating to learn about even if you don’t, it’s something that you can easily take some online courses or read up about it and practice. So I think a strong sense of design, a strong ability in story telling I think is also really useful and that’s just I think a fascinating topic in general, like how do you tell a good story? There’s so much to learn about that.
Gerry:
Yeah.
Val:
But you know a lot of that visual design sense and then also that story telling sense come together really well in animation.
Gerry:
So would you have any general advice, you partially give it there, but for somebody who’s currently working in web design and maybe is either interested in doing animation or is being required by their work to produce animation and may be well and truly out of their comfort zone. Imagine someone like me has been told to do animation, for example, what sort of advice do you have for them?
Val:
I would think at first you try and search out examples of animation that you think are good or the kind that the sort of animation you want to make. You know you can look at sites like artofthetitle.com which talks all about titles from movies and TV and talks to the designers about how they made all those animations or even things like User Interface, which is a collection of web-based animation, just kind of little snippets here, there, and there’s also a really great gallery for mostly for iOS animation but also mostly just like native app animation called Capptivate and you look at these galleries and even on like Dribble or CodePen and things and find yourself examples of things you think are well done or would fit the kind of animation you want to make and then you dig in and see if you can build that same kind of feeling motion yourself.
You know I think a lot of, I think the hardest part about doing animation especially in UI things is knowing what good animation looks like and once you have that reference point it’s easier to judge your own work to decide like, “Did I make something that looks good or did I make something that looks weird?” The more you expose yourself to that good animation the easier it will be for you to judge your own work. So mostly just dive in and have fun and play around with it. I mean with things like CodePen and all those other tools you can just go write some code online or poke around with a tool like Atomic or Principle, you know you can just kind of pull some assets in and start animating them and see what you can come up with. I think that’s a great way to start.
Gerry:
And I’d highly recommend for somebody who’s interested in getting into this area or somebody currently working there, Val’s book. Again the title is Designing Interface Animation: Meaning Motion for User Experience. and it really is a thoroughly enjoyable read even for someone like myself who doesn’t have a particular bent in this area. You can get a 20% discount on the book or any other Rosenfeld Media publication by using the code UXPOD on the Rosenfeld Media website.
Val Head, thanks so much for joining me today on the User Experience podcast.
Val:
Thanks so much for having me and I’m really glad to hear you liked the book.