Chapter 3. 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.
Motion design 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.
Great apps leverage utility and elegance to make the user feel like she’s interacting with
an interface that’s living, breathing, and tangible. An interface that reacts the way things
do in the real world is one that she’ll engage with more deeply. In contrast, an interface
that’s devoid of motion design reminds the user that she’s simply dragging a cursor across
a screen or tapping her finger on a piece of glass. A UI without motion design makes the
user painfully aware of the artifice before her.