Animation Handbook
01

Motion’s purpose

The impact of animation


by Ryan McLeod

While the standard flavors of salty, sweet, sour, and bitter are obvious to us and easy to experience, the fifth flavor—umami—is ineffable. It’s the salience of parmesan cheese, anchovies, dried tomatoes, fish sauce, and dashi. Though it can be oversaturated and overused, umami is an essential taste modifier that makes the sum of its parts stronger when it’s properly used.

Animation plays a role similar to umami to elevate good design to a more satisfying experience. Over the years, we’ve built small affordances into our interfaces with animation and motion. Whether the familiar blinking I-beam cursor of our text editors, or the simple disapproving shake of a bad password, motion is an essential—yet largely unexamined—bridge between our physical and virtual worlds. Although motion is an obvious component of telling stories on film, in games, and in our software, we’ve only recently begun to elevate animation to a first-class design ingredient in consumer software.

The greatest value animation adds to software is context. Animation takes something with no moving parts and adds the appearance of visible change. These noticeable changes provide us with tangible and familiar context, which makes our software more intuitive, discoverable, emotive, and recognizable.

The rediscovery of motion

A number of forces propelled interface animation to where it is today. Commercial animation tools like Flash introduced expressive and limitless animation experimentation, but eventually lost favor as new technologies like CSS animation delivered similar functionality without the dependence on a plugin. And no force influenced modern interface motion and animation more than the iPhone.

The iPhone took the concept of making a virtual world feel physical to a new level. No longer were we indirectly prodding elements from afar with tools like a mouse; we were touching them. Unlocking the phone was not unlike sliding a chain lock; the glimmer on the text of the lock invited our attention and directed our swiping.

As an app closed, it shrunk to its resting place and taught us where to find it next time. The momentum of iOS scrolling mimicked the friction and physics of physical objects making it feel both familiar and efficient. Pinching and stretching an album was all that was needed to fan out hundreds of photos onto a tiny virtual surface.

This was a significant step in creating a natural user interface, which makes complex software interactions so intuitive that they almost become invisible. The fluid movement of objects in the real world began to make their way into software as a core design component.

Motion communicates change and context

We’re wired to see and learn from motion. A simple flipbook of frames fools us into seeing a cohesive and continuous story of motion, an innate human ability that opened the door to animated film, television, and all forms of cross-reality. While video games and movies embraced motion to share vivid and incredible stories, digital products have taken a more timid approach. However, adopting more considered and consistent animation experiences will make software a more comfortable extension of the human mind.

To make software feel familiar, it should behave like the real world. Most natural forces demonstrate observable motion. Those few natural forces that happen instantaneously—like lightning—are harder to process, to the point that we describe them as supernatural. Like lightning, computers operate at speeds so fast that elements appear and disappear on screen instantly, with no inherent need to slow down to human-perceptible speed. If we were to show a person from the early twentieth century a computer in action they would, no doubt, be mystified by the sudden appearance of shapes and text on screen because it defies perceptions of how the physical world works. Consciously or not, our modern minds have adapted to these unnatural gaps in context.

By closing these gaps, we make software less esoteric and more natural to use, with fewer of the subversive mental gymnastics that tend to exclude and frustrate users. Simple acts—like darkening a button when it’s pressed or tapping an image to expand and fill the screen while everything else fades and shrinks away—tell us changes are afoot. Though there’s no functional need to animate an application window shrinking into its resting place, such visible motion gives us time to observe the change while also providing a sense of space and where things reside.

Animation gives the brain clues and context to build a necessary bridge between the real and virtual worlds. By filling contextual gaps in an interface’s storytelling, we can make our virtual world more human, graspable, delightful, and empowering to all.

Motion catches the eye

We’re often presented with terms and conditions, newsletter signup forms, and other such text and dialog as we interact with digital content, which we reflexively close or dismiss. We must assume that anyone using our software is ignoring large swaths of it.

Motion has an evolutionary command of our attention that shows what we’re telling to greater effect than static text boxes. For instance, through immersive animation, rather than a lengthy list of rules, video games require little explanation to get someone on the road to mastery. Animation is more than look and feel; it’s a way to seamlessly integrate nuance and context better than most words could.

A typical podcast app has you tap a button to download an episode, perhaps indicating via a bounce or a notification banner when the episode is ready to play. This use of motion tells us when the episode is downloaded, but doesn’t make clear where to find it when it’s downloaded. A better download alternative might illustrate exactly what’s happening, perhaps by animating an icon of the episode itself moving from the download button to an inbox. Motion eliminates the burden of filling in the gaps between action and result. It teaches the relationship between parts of the interface and building familiarity with the layout.

Of course, every rule has exceptions. We shouldn’t replace all text with motion or iconography—some warnings or explicit statements are clearer as text. More critically, nothing should diminish the accessibility of the user experience. Ensure that for any change you communicate visually you also provide appropriate accessibility descriptions and announcements for those who rely on assistive technology.

Good animation serves an underlying purpose that makes it obvious, felt, and nearly invisible all at once. Look for opportunities to visually explain cause and effect. By replacing telling with showing as much as possible, we ensure that every animation serves a meaningful purpose.

Motion captures emotion

Animation does more than build context and support wayfinding. Animation provides a universal language to imbue emotion, augment feeling, and explain hard concepts. Like in all design, we can instill emotional qualities in our animations that make them feel a certain way—exuberant, tranquil, sharp, or playful.

A dating app like Tinder chooses springier, playful animations, while an exacting synthesizer like AudioKit Synth One keeps its animations fast and tight. A buttoned-up social media app suddenly releases an explosion of animation around an event, like favoriting a photo, as a way to signify the emotion of a compliment in a way words cannot. Both overt and subtle animations play an important and assistive role in building the memorability and trust of a brand experience.

Animation need not only be an accent, though. Animation can stand on its own to help convey hard emotions and concepts where words falter. Headspace leverages animation to bypass stigmas and stereotypes when explaining concepts like meditation and managing anxiety. Animation is just relatable enough—but not too real—that it makes a perfect bridge to unfamiliar concepts.

Tyler Hoene, Christine Cha and William Fowler discuss how animation influences the way that Headspace educates its users.

Even utilities like MailChimp use animation to help assuage the nerve-wracking act of hitting the send button. No matter how many times you check for typos, hitting send on a newsletter to five or 50,000 people is going to come with a moment of hesitation. An animation of a sympathetically sweating and shaking hand about to press the send button alongside you conveys, “It’s ok to feel stressed right now!” The animated high-five that appears after sending is a nice bit of reassurance.

Figure 4. Mailchimp uses animation to assuage the nerve-wracking act of hitting the send button. The animated high-five that appears after sending provides a bit of reassurance while celebrating the completion of a big task.

Motion invites discovery

The use of expressive animation in an interface invites play, which leads to experimentation and a deeper understanding of what’s possible. Think about the “pull to refresh” action we see in interfaces everywhere. As we swipe down, we glimpse something just out of view—a hint that ensures we’ll continue our pulling motion to discover what we’re not seeing.

Motion and animation do more than just reveal hidden interactions; they provide guidance on how less obvious interactions work. For instance, on the Apple iOS lock screen, we can turn on the flashlight or launch the camera—but only if we apply just enough intentional pressure on the buttons. We learn this by not pressing the buttons hard enough at first and seeing them spring back with resistance. The buttons grow and dim in proportion to the duration of our touch, which invites us to adjust the pressure we use to “see what happens.”

The core components of your interface should always be near the surface and ready to use. However, the secondary—but useful—bits can be safely tucked away and hinted at with animation.

Motion enlivens software

Motion is powerful. It’s a vital and overlooked part of our physical world and a difficult-to-place ingredient of great interface design. It makes the sum of our design parts stronger by dissolving the barriers between thought and interface.

While animation and motion may be relatively new disciplines of software design, they’re critical to creating experiences that transform technical tools into extensions of our minds. Read on to learn the principles that turn the complex into the approachable, whether on your own or as part of a team.

Animation Handbook
03

Animation collaboration

How others approach it


by Ryan McLeod

Great motion design feels obvious and right when we experience it, but pulling it off requires careful work behind the scenes. It takes unique collaboration between design and engineering to transform a dynamic medium into a more natural part of the world around it, with a rationale for every move, a shared understanding of the end goal, and a common language to describe it all.

Like any creative discipline, we see tried-and-true principles applied in radically different ways by different practitioners and teams. In this chapter, we’ll take a spotlight to four unique organizations and their respective approaches to animation.

Include animation at the start

The most dynamic interface animation takes both engineering and design thinking. Both mindsets have biases, perspectives, and skills that complement one another. Close collaboration between the two leads to great work—something exemplified well by Zova Fitness.

Zova Fitness is a small startup based in Sydney, Australia. Their fitness app has gained attention for its great content and the thoughtfully designed experience, which won the team an Apple Design Award.

Animation is a key part of the Zova Fitness experience. David Fumberger, chief design officer, shared a bit about his animation workflow. It included the four key steps he goes through with his team.

  1. The first step is to layer. This means the team includes animation at the start of the layout process when creating a screen in a static layout tool.
  2. The second step is to move static assets into a timeline animation app to mock up the animation. This ensures the concept works and that the animation holds up. That asset is also useful for the engineers and stakeholders to get an idea of the direction animation is headed.
  3. The team’s third step is to prototype that animation. David sits with an engineer and uses everything from the static layouts to the comped animation to prototype it in code—though he doesn’t build it into the actual Zova Fitness app. This prototype gives the team a chance to rapidly adjust timings and iterate on animation variables to ensure everything fits and flows before its public.
  4. The fourth and final step comes after that process of prototyping is finished; the engineer takes everything and pushes it into the product. By that point, all the design details should have been solved.

For David and his team, it’s crucial to consider animation from the start of the design process. Failing to do so may create animated elements that feel tacked on or don’t solve a specific problem.

David also believes designers should be aware of the limitations of their medium and work with engineers to understand those limitations. Likewise, engineers should communicate and help navigate less obvious limitations, such as data and platform constraints, that might help their design counterparts.

Support the journey

Crafting great motion requires more than images, arrows, and blueprints; it calls for shared language and motivation, a consistent set of tools, and methods. For the team at Headspace, a singular focus on the user journey is the foundation for an uncompromisingly consistent experience.

Anyone who has used the Headspace app for guided meditation will be familiar with their quirky educational animations. They somehow elucidate abstract mindfulness practices and deal with serious subjects like anxiety and depression, all while maintaining a feeling of engaged playfulness.

Christine Cha and Jon Brennan discuss the animation process at Headspace.

The design team at Headspace integrates interface animations into the product in a way that supports people along their journey. Jon Brennan, senior product designer, and product designer Christine Cha shared about their process.

At Headspace, they rely on four building blocks of motion (some of which we covered in the animation principles portion of chapter two):

  • Behavior: the action an object takes, or where it enters the screen
  • Easing: the rate at which something moves from Point A to Point B
  • Duration: how long the animation lasts
  • Sequencing: the order of operations

During a transition from one screen or state to the next, multiple elements move at once; each of the building blocks above can describe how that movement takes place. As people go through the Headspace experience, the animations reinforce the stages of the process and clarify what came before and what’s coming next. Animation helps tie a thread through it all.

Because it’s such a critical part of the product, the animation process starts just after user research. By starting to think through animations while the product is still being designed in wireframes, designers can quickly iterate on and evolve their concepts.

One example the team gives is the sleep experience. From a user need perspective, the app should be smooth and fluid, and not disruptive to someone’s state of mind. So not only are the colors muted and dark, but the information is paced in such a way that nothing jumps out and everything flows smoothly.

Across the app, the Headspace team’s goal is to present a seamlessly peaceful and serene environment where every interaction or transition maintains a calm meditation space.

Animation at scale

As a company scales, making user experiences coherent across product lines becomes increasingly challenging. At the same time, the risk of disparate teams duplicating their efforts in designing interactive elements also increases. For this reason, design systems have become a popular way to support the design and development process when building features more efficiently and delivering cohesive experiences.

Like a good interface, a design system should always guide us toward the best solutions. It’s important to treat design systems as living documents, and update them to address common scenarios, pitfalls, and other problematic situations.

As animation becomes more core to the user experience, leaving it out of a design system can be a big mistake. It’s a key component of the user experience, and should be treated as a first-class design ingredient rather than something tacked on later with little forethought. At Google, the designers and engineers working on their design system called Material made motion a foundational part of the company’s design system.

Richard Fulcher, the UX director of the Material design team, and senior UI designer Eric Henry explain how animation is integral to Material with three core principles: motion should be informative, focused, and expressive.

Informative motion, according to the Material design system, “shows spatial and hierarchical relationships between elements, and what will happen if an action is taken.” Informative motion is akin to what Headspace describes as motion’s behavior.

Focused motion points to what’s important in a design or interaction. And expressive motion adds humanity, personality, style, or brand attributes to a design, playing on the animation principle of appeal from chapter two.

The Material design system goes on to define and explain how and when to use motion in interfaces, and provides motion guidelines to establish hierarchy and how elements are related to one another. From establishing how to use motion to offer feedback, to indicating how to offer hints and guidance, the Material team leaves nothing to chance in clearly defining the use of motion at Google.

Expressively helpful

While Google’s Material design system is a resource for an organization at scale, a design system can also support an organization as it grows. A strong design identity is crucial for differentiation in a crowded marketplace.

From the pink mustache that once graced the company’s ridesharing vehicles to their undercover rides with celebrities like Chance the Rapper, Lyft designs to delight. It’s no surprise that animation is a core part of their product design process.

Linda Dong, design manager of core design at Lyft, explains their core animation principles, how they design their animations for accessibility, and why animation is an important part of their design system.

The principles of motion at Lyft are be intentional, be responsive, and be expressive:

  • Be intentional: every animation in the Lyft product has a purpose, whether that’s to direct the riders’ or drivers’ focus to show information changes, or to assist in navigation
  • Be responsive: the product needs to quickly acknowledge any choices or actions someone has taken, without getting in the way. It should also shorten the perception of loading time
  • Be expressive: motion should represent Lyft’s brand voice—be bold, simple, and a little rebellious

Together, these principles communicate an animation system that balances an expressive brand voice (“Hey, we’re Lyft!”) with an understanding of the real-world scenarios they’re trying to improve with animation.

These real-world scenarios—usually while someone is driving or looking for a ride—include designing for accessibility. For example, notifications might pop up on the screen saying, “Hey, your driver has arrived.” A screen reader should have time to process that notification before it disappears from the screen. In designing the animation, it’s very important that the team sets minimums for animations to make sure someone actually has time to digest the content before it goes away.

Scenarios like this are represented in Lyft’s motion design system, the Lyft Product Language, which both teaches principles of motion and exposes the ethos behind their particular brand of motion. By sharing principles and ethos together, designers are better equipped to work with their teams and evangelize those principles and guidelines.

For the people ultimately using Lyft’s products, the design system contributes to a more cohesive and intuitive experience by informing how and when motion should be executed: is design different for Lyft riders than for drivers? Where can designers use motion to reduce the perception of interface load or wait times? When are the best moments for expressivity?

The moment a team starts designing something, like the driver arrival notification, is when they start choreographing motion. For this to work effectively, it’s critical that the design and engineering teams collaborate on a daily basis and share responsibilities. This close collaboration makes for the most efficient use of time and leads to the best solutions while still allowing for a healthy amount of exploration and refinement.

The job of the Lyft design systems team is to build up the principles and integrate them into reusable components. This frees a designer and engineer to simply plug-and-play, safe in the knowledge that things like timing curves and durations have been considered carefully. It’s how they ensure that every animation effort maintains both Lyft’s brand expression and commitment to supporting its drivers and riders.

Advice that scales

As we’ve seen from Zova Fitness, Headspace, Google, and Lyft, it pays off to consider animation from the beginning of the design process, no matter the size of the company that you’re at. Designers and teams who integrate motion from the beginning will be much more likely to benefit from a cohesive user experience, increased ease of use, and the overall delight that animation can bring to a product. Going further, documenting animation principles and examples as part of a design system assures that every interaction maintains the right balance of brand identity, quality, and accessibility.

About the Authors

Ryan McLeod
Blackbox

Ryan McLeod is a puzzle maker and self-taught designer with a masters in Computer Science. He designs and develops the infamous and infuriating game Blackbox, which won an Apple Design Award in 2017. In addition to being a game, Blackbox has also become a testbed for interaction design and accessibility innovation. Off the computer, he cooks a lot and once accidentally bartended the Nobel Prize after-party.

  • Currently listening to: The XX and RÜFÜS DU SOL when I’m writing. I rock DJ sets like Nora En Pure‘s when I’m coding.
  • Inspired by: Brett Victor, who likes to blow holes in immutable things like mathematics. He’s great at questioning these subjects but also offering ways in which we might improve with things like new interfaces for learning and teaching math.
  • Cultural thing I’m lovin’: Amsterdam is removing traffic lights. The result is less traffic traffic/delays and sees no increase in accidents. Makes me wonder what other situations can be improved by similar patterns of thought.