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.

In the previous chapters you’ve read how integral animation is to modern product design, learned about some animation guiding principles, and heard how a few of the best design teams bring motion into their workflows. Now let’s take a look at how you can take animation further with fluidity, nuance, consistency—and humanity.

Nuance

While many products use animation, few do so in ways that respect our attention and make us react the right way at the right time. When you search for “coffee” in the Google Maps app, the red pins that mark your options quickly fade in without distracting you. While Google’s designers might have been tempted to overdo the animation with a volley of dropped pins calling for your attention, they were wise to keep the motion to a minimum.

When we learn new animation techniques, we have a tendency to go overboard in attention-grabbing ways. But when we design for real-world contexts and scenarios—like searching for a destination while biking, or searching in a dense metropolitan center with dozens of results—digital hand-waving is distracting and even dangerous. It’s important that we frequently step back and consider the diverse contexts in which the animations will be deployed.

With no physical restraints or real-world gravity, it’s natural to want our interfaces to take giant animated leaps and bouncy bounds. But the restraint of nuance is all about ensuring motion adds clear value to the interface without stealing attention from more important matters. Nuance means whittling away as much as possible until it’s subtle, felt, and nearly unseen. The disapproving shake of a password field, for example, communicates just as much as an animated alert, but without taking attention away from the task at hand.

Animation accessibility

When you replace text with other forms of visual communication, like the shake of a password field, be sure to provide accessible ways of informing those who can’t rely on sight alone. On the web, this might mean setting an aria attribute like `aria-invalid`. On mobile, it might mean setting a clearly written bit of accessibility hint text.

In his article “Good to great UI animation tips,” Pablo Stanley provides a concrete example of how nuanced thinking leads to better animation design.

---

When animating between different states, see if there are any shared elements between them and connect them. A good animation uses transitions like push left or slide up to show the content on a detail screen. A great animation establishes a connection between two states by animating the shared content.

Pablo Stanley

InVision

When animating between different states, see if there are any shared elements between them and connect them. A good animation uses transitions like push left or slide up to show the content on a detail screen. A great animation establishes a connection between two states by animating the shared content.

Consistency

Consistency is meeting expectations and intentions. As we add physicality to the movement of our designs, we must maintain consistency of motion just as we do for typography, layout, color, and the like. When we maintain material, spacial, and physical consistency, we make a product feel more cohesive, and we encourage discovery by building confidence and trust. Then our animations communicate not just how something works, but also the way the digital world around them functions.

Contradictions between what we expect and what actually happens introduces a cognitive load that prevents our designs from becoming usable without exertion—we force our users to think, rather than make our product feel like an extension of their minds. Product designer and engineer Austin Sarner explains:

---

…when you need to allow the user to feel out what’s possible in an interface 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

Impending

…when you need to allow the user to feel out what’s possible in an interface 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.

Consistency doesn’t mean everything we do should move with the same timing for the same duration through every screen. We just need to ensure that everything we make is influenced by common principles. Shared components and design systems help, but like we learned in the nuance section, we should evaluate all elements in their contexts of use.

In the Tinder app, for example, a core interface principle is that everything you see on screen is “real.” The interface relies on a highly realistic card metaphor, with cards so lifelike that they appear to be cut from paper and could be held in your hand.

While everything you can touch in the Tinder interface is interactive, different elements act in different—yet consistent—ways. When you touch and drag a card from the flash card-like stack, the card “feels” light because of how it swivels and pivots around your finger. Other parts of the interface extend offscreen, lending additional weight; when you swipe to move these other parts, they feel heavier and move more rigidly. Despite having similar gestures, neither element’s motion is designed as a variation of the other; rather they’re designed around a consistent principle.

Going further, the simple design of the iOS control center belies its complexity. The buttons in the control center use bouncy, overlapping animations to bolster implied interactiveness. On devices with Apple’s 3D Touch functionality, certain buttons can be pressed harder to reveal even more options. Since all the buttons look and animate the same way, we expect them to react to touch the same. If we attempt to press buttons without those additional options, our finger is met with a gentle spring-back animation that implies, “nothing to see here.”

This spring-back maintains physical consistency by behaving in a way that makes sense to the rest of the interface. Just like a house with floors that inexplicably emit odd creaks or doors that swing of their own volition feels haunted, an interface that breaks our mental model of how things should behave adds cognitive load to the experience. Understand and stick to the principles of your interface to maintain confidence and promote exploration.

The buttons in the control center use bouncy, overlapping animations to bolster implied interactiveness. On devices with Apple’s 3D Touch functionality, certain buttons can be pressed harder to reveal even more options.

Humanity

Things like bikes, door handles, and toasters are approachable because of their human-geared affordances and clear, intuitive workings. Digital objects like cell phones, computers, and microwaves, on the other hand, are so complex that their inner workings are abstracted and inaccessible without advanced training.

When digital systems were first built, we lacked the ability to create the affordances we demand from our software today. Command line interfaces and hierarchical file systems reflect machine capabilities more than people’s demands. As computing advanced and became a consumer product, we began to bend our technology to be more familiar, intuitive, forgiving, and inviting.

The approachability of the analog world doesn’t exist in the digital world, so we use sleight of hand to make the digital more intuitive. Modern software employs plenty of tricks we rarely think about to make the digital appear more human. As animators, we have license to bend the truth to make something feel truer.

Just because we can teleport images across pixels on a screen in milliseconds doesn’t mean we should. We can move things in from off screen to cover what we previously looked at, like a printer spitting out page on top of page. This fakery gives us a sense of physical space in a digital environment, which lets us mentally map both what we see and what’s out of view.

Digital animation serves to humanize software by slowing down the instant in thoughtful ways. When we reach the end of a long passage of text, we might come up against a bit of tug when there’s no more content to scroll. This tug is a playful, non-jarring indication that we’ve reached the end.

When we have face-to-face conversations, we look and listen for cues, like hesitations or gestures, as part of a natural back-and-forth. In our text messaging apps, animated typing indicators—like the bobbing ellipses that signal someone is typing—reintroduce humanity to a digital experience. We should always be on the lookout for non-obvious ways to bring the human element to our products.

Fluidity

It takes more than snappiness, responsiveness, and gestures to make an interface feel fluid. Chan Karunamuni, in his Apple’s WWDC talk, says fluidity “boils down to when a tool feels like an extension of your mind.” It takes a considered use of motion to build a tool that anticipates our needs with minimal effort.

Most software interactions—like entering a command or pressing a button—happen after we make a decision; once we commit to an action or get a response it might trigger an animation. Fluid interactions happen while we make decisions, giving us the ability to redirect, cancel, and change our decisions mid-gesture—like dragging a file to the trash or to a folder.

While we can play a defined animation at the touch of a button, a fluid gesture contains too many possibilities to cover this way. Instead, fluid interfaces should draw inspiration from the physical movement of the real world to align motion with intent. Because these motions are tightly coupled with their related interactions, they must be designed collaboratively from the start with interactive prototypes to fine-tune the details.

Touch the future

Good animation takes principles and know-how, but it’s refinement and nuance that sets a project apart. Thoughtful animation introduces humanity to a project, and makes an interface feel intuitive and alive under our touch. With the knowledge you now have about motion, you’re primed to not just animate but to craft interfaces that are a seamless extension of body and mind.