Since early pioneers like Walt Disney first began telling stories with animation, it has been a tool to create delight, wonder, and awe in audiences. In recent decades, animation has become an increasingly critical tool for the digital product designer, not only to create moments of delight, but to inform and engage the user, and help them navigate successfully through a product. Good motion design makes a product more usable and intuitive, as the principles of animation help digital interfaces mimic our real-world experiences.
That’s why we’re happy to announce the release of our Animation Handbook, a new addition to the Design Better library. It’s a brand new collection of insights to help designers not only learn animation, but craft exceptional customer experiences.
In the book:
- Learnings from author Ryan McLeod, is the designer and developer of the Apple Design Award-winning Blackbox, a game that has been played by over six million people.
- A battle-tested framework for understanding why motion is important in products, and how best to implement it.
- Real-world examples of motion design to create successful products from the teams at Headspace, Lyft, Zova Fitness, and Google.
- The core principles that help them keep animation relevant and helpful, as well as the business case for including motion design from the very start of a project.
- Best practices for folding animation design into your workflow.
Watch the book trailer video for Animation Handbook.
In this article, we’ll outline six key takeaways from the book, but if you’re excited to dive in you can head straight over to the Animation Handbook page on DesignBetter.com and download a free copy, or read it online.
Takeaway #1: Use motion to “show” not “tell”
In the world of physical products, designers typically have the advantage of interfaces that change visibly upon interaction: switches flip, knobs turn, buttons depress. For software products, which are accessed through a two-dimensional screen, it can be easy for users to get confused when their actions create an unexpected result. For this reason, as author Ryan McLeod writes, “The greatest value animation adds to software is context. Animation takes something with no moving parts and adds the appearance of visible change.”
Motion also invites discovery and enlivens software. It catches the eye, directing attention where it’s needed, in a way that shows the user rather than telling. Motion captures emotion, whether it’s the playful gestural animations of Tinder, or the calming, subtle animations in Headspace’s interface.
“Animations can really evolve and escalate the concept behind what you’re trying to do with a feature”
Christine Cha, Product Designer at Headspace
Animation is rapidly becoming critical to creating experiences that not only keep the user headed in the right direction, but, in Ryan’s words, “transform technical tools into extensions of our minds.” Read Chapter 1: Motion’s Purpose, to learn more about why motion matters.
Takeaway #2: Master animation’s 7 basic principles
If you’re new to animation, the process for creating good motion design can seem overwhelming. But there are seven basic principles, drawn from Frank Thomas and Ollie Johnston’s book, Disney Animation: The Illusion of Life, which can make the magic of animation approachable: timing, pacing, staging, follow-through, secondary action, overlapping action, and appeal. These principles are drawn from a different era and medium, but they can very much inform the work that digital product designers do today.
Let’s start with follow-through. When you see Bugs Bunny, or Wile E. Coyote, running, dancing, or hitting a brick wall, their floppy ears don’t come to a complete stop when they do. Rather, they have a natural springiness to them, continuing in their trajectory even after the main body comes to rest.
The same principle can be applied to motion in digital products. As author Ryan McCleod says, letting objects “slightly overshoot their final resting place with a bit of spring makes even futuristic interfaces feel more real.”
Read Chapter 2: Principles of animation, to learn more about follow-through, and the other six principles.
Takeaway #3: Make your product more human to engage
Another of the seven principles is appeal. If you look at popular animated characters, from classics like Mickey and Goofy, to more modern examples like SpongeBob and Squidward, they all share exaggerated, larger-than-life features: giant eyes, long floppy ears, drooping noses.
Ryan McLeod notes why this makes these characters more appealing: “It’s unintuitive, but sometimes by making something brighter and bolder than it really is, we make it more human and relatable.”
There is also a business case to be made for imbuing products with appeal. Not only can it serve as “the animated equivalent of branding” as Ryan says, but the character and appeal of a product can help bring users back for more, creating engagement that can be measured qualitatively. With the meditation app Headspace for example, the quirky, friendly animations make the abstract concepts of mindfulness accessible, using metaphor and endearing characters to take the edge off of an activity that can feel daunting. Watch more about Headspace’s animation process:.
“The more polish and personality we infuse, the more we see people responding on those qualitative metrics.”
Vicki Tan, Headspace
Read Chapter 2: Principles of animation, to learn more about Appeal, and the other six principles.
Takeaway #4: Collaborate early to win
Like any other aspect of product design, collaboration is critical to create and implement motion in interfaces. We spoke with four companies (Zova Fitness, Headspace, Google, and Lyft) to get their unique perspectives on how their designers and engineers collaborate while creating animation for their products.
Each one advocates for including animation at the start of the design process. At Zova Fitness, it begins with the static layout of the screen.
“We would include animation right at the start of the layout process…we think it’s really important that the animation has to be deliberately included right from the start…it’s tough to include animation at the end as an afterthought,” says David Fumberger, Chief Design Officer at Zova Fitness.
Additionally, by bringing feedback from their engineering counterparts in while animations are being prototyped, designers can become more aware of the limitations and constraints of the developer’s environment.
“It’s important for designers to help their engineering counterparts be aware of the limitations of the medium that they’re working, [and] understand the constraints of the programming environment that they’re targeting.”
David Fumberger, Chief Design Officer at Zova Fitness
Including animation early in the design process has other advantages. Doing so ensures that the team has enough time to build and test animations for accessibility and assistive technologies. Read Chapter 3: Animation collaboration, to learn more about how considering motion early can help with accessibility, collaboration with developers, and more.
Takeaway #5: Scale with design systems
As companies scale, design systems become a crucial part of keeping products consistent, reducing duplicated effort, and helping teams build products faster. Building animation into a design system is, therefore, a critical part of integrating motion design into products at scale.
Every year, Google hosts the Material Design Awards, highlighting companies using their design system
At Google, the Material design system has become a way to scale efforts across a wide variety of products, platforms, and devices, as a way to:
- Document and centralize a single source of truth for all motion design decisions
- Establish core principles as a north star for all design efforts
- Thoroughly define every interaction to create shared understanding of usage
By building motion into their design system, they can help their product teams focus on where to use motion with the greatest impact, rather than having to re-design the experience for each new product or feature.
“Motion celebrates moments in the user journey that are important. So either something good or something bad happened, and we express delight or sympathy…basically it’s a way of demonstrating empathy.”
Eric Henry, Senior UI Designer at Google
Read Chapter 3: Animation collaboration, to learn more about how using motion in your design system can help you scale the power of animation.
Takeaway #6: Build trust through consistency
Just as design systems are important in creating consistency between products, consistency within a product is key to a good user experience. Being inconsistent with the use on motion can add cognitive load to the experience, and for this reason Ryan McLeod says that it’s crucial to “understand and stick to the principles of your interface to maintain confidence and promote exploration.”
In addition to consistency, in the final chapter of the book Ryan recommends three principles to take animation further: nuance, humanity, and fluidity:
- Nuance: Ensuring motion adds clear value without stealing attention from what matters most.
- Humanity: Digital animation serves to humanize software by slowing down the instant in thoughtful ways.
- Fluidity: Fluid interactions happen while we make decisions, giving us the ability to redirect, cancel, and change our decisions mid-gesture.
By considering all of these elements in your motion design, you’ll make your interactive experiences more cohesive, subtle, and human. Once you’ve read the Animation Handbook you’ll understand how motion provides context to user, the basic principles of animation, the power of cross-functional collaboration and the opportunity to build motion into your design system, and more. You’ll be well on your way to, in Ryan’s words, “craft interfaces that are a seamless extension of body and mind.”
Finally, Austin Sarner, who is well known from his motion work with Push Pop Press, and who we interviewed for this book, sums up some of the core values of animation succinctly in the quote below :
“…when you need to allow the user to feel out what’s possible in an interface that they’re touching and manipulating, motion provides context. It is an extension of their gestures, of their manipulations. And it guides them as to what’s possible to do, and encourages them to explore more.”
Austin Sarner, Software Engineer & Product Designer
Read the Animation Handbook, the guide for UI animation, now at DesignBetter.com.
by Eli Woolery
Eli is the Director of Design Education at InVision. His design career spans both physical and digital products, and he is a lecturer in the Product Design program at Stanford University. You can find Eli on Medium or on Twitter.
