Designing Interface Animation
I’ve been spending time with Val Head’s new book Designing Interface Animation: Meaningful Motion for User Experience and it’s so fantastic. I’m going to admit something here: I’ve never been all that intrigued by animations. I’m usually worrying about accessibility, performance and maintainable CSS so I haven’t taken the time to learn and discover all the great things animation can do for a site.
Well, I’m intrigued now. Val starts at the very beginning with the classic principles of animation taken from the early work done at Disney and takes those and translates them into principles for animation on the web. I loved all the history and explanations of the various principles as it gave such a great foundation for the rest of the book. Val’s tone when writing is so easy to read and it’s like I’m chatting with her about this as I read, which I loved.
The real strength of this book are the examples. Val has mined the web to find good and bad examples of how to use animation in a site and it’s great to see them all over the place in the book. And as I thought about animation and web sites as I was reading, I was also thinking about how the case is being made, very strongly, for how animation can increase the value of your site. Val argues for the business value of using animation, showing how it can help ease users through transactions and hopefully increase engagement.
And to wrap it up there is an entire chapter on accessibility and thinking about how motion may create difficulties for certain users and the ways in which you can account for that and help these users as you do your work. This is a great book. I learned a lot. Thank you so much for writing it Val!
Highlights below are from the epub version of the book broken up by chapter. NOTE: please remember that these are my highlights and that if you just read these, you’ve lost the context of the book, so I do recommend reading the book yourself.
Web animation is starting to come into its own, and every designer or developer who uses it in their work can influence what it will stand for in the future. You can have a hand in shaping what its new definition will be.
Well-designed animation is becoming part of the definition of sophisticated, current, and trustworthy design.
It feels easier because you, as the user, have to do less work to keep track of what’s happening on-screen—a huge advantage of well-designed animation.
Physical things like gravity and friction don’t actually apply to animation on a screen, but you still evaluate the movement you see on-screen based on what you know of the real world.
You can use animation as a way to connect these contexts and create a common feel across all mediums and contexts. In fact, it’s a very powerful one.
When you have interface elements that animate in a similar manner on screens of all sizes or platforms, that’s one more thing that can remain constant, even while things like the layout may change.
A key part of designing good UI animations is remembering that adding animation is an opportunity to communicate a little something more. Any motion you add is going to communicate something; it’s really more a question of whether it’s saying what you’d like it to say.
Using it well, and with more positive intentions, gives you the ability to reinforce the hierarchy of content and to highlight what’s most important at a specific point in time.
Users subconsciously pick up on cues about an object’s personality or the forces that might be acting on it, just by seeing it animate. Paying close attention to timing and spacing puts you in control of what your animations are saying, instead of leaving it up to chance.
In the digital world, spacing is most often expressed by the easing or timing functions you use. You won’t be drawing individual frames yourself, but the browser or other rendering methods will be doing that for you under the hood.
Paying attention to the timing and spacing of your animations will accelerate your animation skills exponentially. The mark of a good animator is a good sense of timing. That takes time to develop (no pun intended), but the more you animate, the better your sense of timing will become.
Adding keyframes to the animation, in whatever language or tool you choose, gives you added control over the follow-through action, since you can manually adjust the easing used between each keyframe and explicitly spell out the change in position you want to see with the additional keyframe values. This approach will make it easier to add to the action by animating some child elements as well.
Offsets create a subtle wave-like motion that is much more pleasing to the eye, while also reinforcing the independence of each item within the group.
Very few movements in real life occur without some kind of anticipation hinting at what is about to happen next. That’s why using this principle in interfaces can help make movements seem more lifelike or relatable to your audience.
…[H]any interface elements do have related elements, child elements, and elements that move together. Those are prime candidates for secondary action.
Computers are very good at creating precise motion in straight lines. Nearly everything in real life, on the other hand, doesn’t move in precise straight lines at all. Most movements in real life follow a slightly curved path as opposed to a straight line, and that is the concept of arcs.
…[E]mploying this principle even in small amounts injects a large amount of lifelike feeling to your work. Squash and stretch is one of the hardest principles to master and also an easy one to overdo.
Slow in and slow out describes a specific variation of spacing that best reflects how things move organically in real life.
When working in the digital space, you may never have to create slow in and slow out manually, but it’s important to be aware of when and how your tools are making these decisions for you.
Exaggeration is a useful way to make just that little bit more effort to get a user’s attention when you really need it.
Appeal is what makes a character or object in an animation interesting—what draws you to it and makes it appealing to watch or look at. The way you design the items you’ll be animating can add to their appeal.
Storytelling isn’t always something that applies to interface animations, but the idea of making sure that the main action is clear certainly is.
Look for styles of animation that resonate the most with you, or for the projects you’re working on, and identify which principles they use most often and how.
The way your animations behave during an interaction affects how your users perceive them just as much as how they look.
The very first rule of interface animation is that all interface animations must have a purpose for being there.
The only purpose I’d say isn’t allowed is “delight” all on its own. Delight isn’t something that can be created by animation alone.
Good interface animations need to be flexible and always feel responsive to a user’s input even if the animation is currently animating.
The fact that the animation responds to their input, no matter when they give it, makes the interaction the kind of conversation that they want to continue. It builds trust by always appearing to be listening to them and by never making users feel like they’re being ignored.
Good timing is more an art than a science. Thinking in terms of guidelines, as opposed to hard-and-fast rules, will serve you much better in your design work.
Readability should be your standard for judging the timing of your interface animations, instead of one single duration that’s used for all animation.
It’s often difficult to judge the timing of your own animation objectively, so an outside opinion can be very helpful.
The more animation experience you gain, the better your timing instincts will become. You’ll start picking durations that feel right sooner and develop your own rules of thumb for animating. Timing is more of an art than a science. The more you do it, the better you’ll be at it.
Try to match the complexity of the technology you choose to the complexity of your animation needs to avoid unnecessary performance strain.
Perceived performance is harder to measure because it is less concrete than fps, but it is often the best benchmark to use, because the difference between 50fps and 60fps may not be perceivable to your audiences in the context of your project or the task at hand.
The model of how the menu objects are related in space has been revealed to them in a way that requires no more effort than to observe the movement on-screen. Their brainpower is saved for more important tasks.
Animated layer transitions use that metaphor to create a shared understanding of space. It’s a very effective technique to establish layers within an interface, even when the layering is more complex and more than two layers are used.
Using animation to keep users on task, and to provide a hint to what comes next, can help users complete the task more easily.
Using animation to visually smooth out and inform context changes can reduce the chances of disorienting users by making the context change play out in plain view and guiding the eye through the shift.
Visual persistence is very useful for showing continuity.
Good animation can never make up for poor design, but it can absolutely enhance good design decisions and make them even better.
Nearly all of the web animation we’ve been exposed to until recently has been poorly executed and has exploited the power of animation to annoy and distract.
Much like you might use a contrasting color in your color palette to denote important content, you can use contrasting easing to do the same.
The key is creating a palette of easing for your project and using it to create contrast and hierarchy, much like you might do with a color palette. Creating a palette that includes both complementary and contrasting options and using them consistently throughout the design system adds an extra layer of polish and cohesiveness to your design.
Showing causality is very much related to the concept of giving feedback, although they are separated in this book because the timing of the information and the kind of information shown for each differs slightly. Cause and effect shows the potential effects of what could happen or what has happened during an interaction. Feedback, on the other hand, lets users know that something has taken place behind the scenes based on their actions.
The easiest way to remember it is to think of affordances as the possibility of an action that can be taken with an object.
Using animation to reveal and offer options as they’re needed can work to cue users as to what the next step could be based on their recent actions.
To be sure that your animations are demonstrating cause and effect well, prototype often and iterate on the animations and interactions until you’ve reached a combination that feels pleasurable to use and fits well with the other interactions in your app or site.
Their small experiment found that participants were more willing to wait for custom loading animations than generic loading animations. And participants were even more willing to wait for loaders with novel and engaging animations.
Both the research on loading animations and the potential perceived performance gains are very convincing evidence to consider designing a more creative loader solution when wait times must occur. A more creative solution that hints at the content to come, could mean the wait times are perceived as taking less time by focusing on the progress being made.
Each animation in an interface tells a micro story, and as a user encounters more and more animations throughout your site or product, these micro stories add up to reveal the personality and story of the brand or product behind them. The animations create an impression; they give your brand a certain personality. It’s up to us as designers to take control of the combined story that animations are telling about the brand we’re working on. Your animations will be much more effective if you intentionally design the additional messages they’re sending.
…[H]aving a website is enough of a reason to need a motion style guide these days.
The earlier in the process animation comes up, the greater the chances that it will be purposeful and make it to the final product.
At some point in your career, you’ve probably fought for the importance of design in a project because you know that design is so much more than just decoration. Purposeful animation needs to be fought for in the same way.
Even a roughly drawn storyboard on a white board can save time in meetings by presenting a shared visual document of what’s being discussed for everyone to participate. The fast and messy nature of hand-drawn storyboards can show that the idea is still open for input and development.
When you’re creating prototypes, you take a deeper look at how animations can inform the interaction at hand and start getting into details, like what action triggers an animation, how the animation will be timed, how one object on-screen may influence another, and what each individual animation might look like.
Having your team’s animation design decisions documented and easy to access means there’s a greater chance of having a cohesive experience for your users.
Communication between those responsible for designing the animations and those responsible for building the animations is especially key. Storyboards, prototypes, and documentation are all meant to turn design ideas and decisions into tangible, visual artifacts to keep the conversation going along the way. But don’t forget that the conversation itself is the most important part.
Smart prototyping means matching the prototype you make to the information you need.
Different people have different conditions and reactions, of course, but the potential triggers are more nuanced than just assuming any or all animation will be problematic. There are three factors in particular that play a big part: the relative size of the animation(s), the direction of movement, and the perceived distance an animated object covers.
No other medium but the web has the potential to create animation that is accessible, responsive, and progressively enhanced all at the same time.