Motion Design Theory

Utility and elegance are the goals of every great motion designer, and this chapter explores a handful of techniques for achieving those goals. Because the focus here is on the theory of motion design—not its implementation—there are no code examples. The techniques discussed can be broadly abstracted across all languages, devices, and platforms.

Improves the user experience

Let’s examine the phrase motion design: To design motion is to decide which visual properties of an object should change, and how that change should accelerate. For example, say you want to call attention to a button by changing its color: you might change the background color from red to blue over a 1000ms duration with an easing style of ease-in-out. In this case, background color is the target property and red is the desired end value. The timing of the property’s transition toward its end value is subject to a 1000ms duration whose acceleration curve is defined by ease-in-out. Great motion designers deliberately choose each one of these components—not because they look good or hit on popular trends, but because they reinforce the intentions of a UI. Whimsical motion design, in contrast, is not only inconsistent but also appears inelegant and diverting to the user.

There are hundreds of tutorials on the minutiae of UI design, but very few on motion design. This isn’t surprising given that motion design is less important to a webpage than UI design. Until recently, browsers and devices weren’t actually fast enough to accommodate rich motion design. But while UI design lays the structural foundation for interacting with a page, motion design enriches that foundation with the furnishing and decoration that make the page usable and comfortable. Furnishing is the utility that motion design serves, and decoration is the elegance it provides.

Borrow conventions

Let yourself be inspired by the motion design in your favorite sites and apps. Popular motion design conventions are worth leveraging because they already hold meaning in the user’s mind. Repeated exposure to conventions leads the user to form expectations about how certain animations “should” look. If you use a convention for a purpose other than what the user has come to expect, your app will feel unintuitive.

Preview outcomes

When an element on your page has an ambiguous purpose, give the user a preview of the outcome of the interaction. This provides reassurance that the element does what the user thinks it does. A simple example of this would be a button that initiates a file transfer sending out visual radio wave pulses when hovered over. This leverages a common graphic design trope to tell the user that a data transfer action will occur.

Distraction over boredom

When a user performs a rote, non-engaging task on your page—such as filling out a long-form—you can use color and movement to raise her level of awareness and intrigue. For example, you might animate a checkmark when she successfully completes each form field. This keeps the user’s mind superficially engaged with the interface, which lessens the dullness of the task at hand. Similarly, you could show the user an eye-catching loading indicator while she waits for content to load. A great example of this can be found in Lyft, a popular ride-sharing app, which animates a balloon rhythmically floating up and down on a blank canvas while the app loads into memory.

Last word

To understand the psychological benefit of this technique, consider how motion works in the real world: when you pull a lever, a series of mechanical parts causes a connected object to move. Connected is the key word: real objects don’t move unless a force is exerted upon them. Likewise, it’s important to treat every element in your UI as an element capable of exerting its own force. Every action should feel connected to a trigger. This sort of seamless experience is what helps an interface transcend from the digital into the physical. The more physical an interface is, the more responsive and emotive it feels.