Web Animation using JavaScript: Develop and Design (2015)

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.

The utility of motion design leverages user psychology. When a user presses a button, can she be confident that the press was acknowledged by the UI? An easy way to ensure her confidence is to animate the button’s transition to a depressed state. When a user is waiting for content to load, can she be confident that progress is being made or is she left with the unsettling feeling that the app has frozen? These are psychological expectations that motion design can address by providing ongoing visual indications of the UI’s state.

The complementary elegance of motion design is what elevates an app from merely looking good to feeling good. It’s the source of that “ooh ahh” feeling that reminds the user how magical technology can be.

Let’s master both of these aspects. Let’s dive in.

Utility

How do you ensure your motion design choices are valuable additions to your site? Here are some techniques.

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.

The more you copy motion design effects from elsewhere, the more familiar your app will feel to the user. The more familiar an app feels, the quicker the user will feel comfortable with it and confident about it. While there’s utility in novelty, the motion design of everyday UI elementsshouldn’t be novel. Reserve novelty for animation sequences that carry little meaning or are hard to misconstrue, such as a page’s loading sequence or a status indicator animation, respectively.

Preview outcomes

When an element on your page has an ambiguous purpose, give the user a preview of the outcome of 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.

A less ambiguous kind of previewing outcomes is to show part of the animation that occurs when the user actually takes an action. For example, if an in-progress file transfer indicator animation begins running when the user clicks a button, implement motion design such that hovering over the triggering element partially runs the in-progress animation. When the user hovers off the element, reverse the partial animation so the file transfer indicator returns to its default state. This type of previewing technique helps the user immediately understand the effect that her actions will trigger, which helps to reassure her of the purpose of UI elements. The more confident the user feels, the more in control she feels. The more in control she feels, the more pleasant her experience.

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 check mark 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.

Allowing the user’s brain to relax and feel the pleasurable momentum of repeated movement keeps her more engaged with your content. However superficial this may seem, it works. But recognize that this technique should be used only in situations where the user will experience an unavoidable stretch of boredom; avoid using it as a Band-Aid any time you feel like spicing up your UI.

Let’s consider another example: when Facebook loads text content into its News Feed, it animates a continual blurring of dummy text until the real text is ready to be shown. This rhythmic blurring animation not only indicates that the interface is hard at work (as opposed to having stalled), but also specifically tells the user which portion of the UI she’s waiting on. This technique is called inline status indication. Compare this to the ubiquitous single status indicator, which is as old as the web itself: the superimposition of a single, looped animation graphic on a page that’s discomfortingly devoid of content. Users are tired of this. Inline status indication, in contrast, lets you show as much of the interface as possible by blocking out only the specific subsections whose content has yet to load. This is not only more nuanced, but also gives the user more content to fix her eyes on while she twiddles her thumbs waiting for the page to fully load.

The takeaway here is simple: the more you give users to engage with, the longer it’ll take for them to get bored.

Leverage primal instincts

The human brain has a region dedicated to visual processing. We’re programmed to respond to sudden movements whether we want to or not. So, if an important action is occurring on the page that requires the user’s immediate attention, consider leveraging movement to flag her attention. A common way to alert the user is to “bounce” an element by repeatedly translating it up and down. This implementation sits in contrast to animating the element’s color, which doesn’t exploit primal instincts; we’re not programmed to instinctively interpret color changes as worthy of our immediate attention. (However, consider how through repeated exposure in some countries, people are trained to interpret red as “stop” and green as “go”, which are examples of socially reinforced meaning. When designing motion, take this phenomenon into consideration as well.)

Diving a bit deeper into psychology, the user interprets movement toward her as an urgent notice that requires action, whereas she interprets movement away from her as getting out of her way and, consequently, not requiring action.

Make interactions visceral

Big, squishy buttons with rich color gradients make the user want to click. Elements like these reward clicking with a satisfying sense of pressure exertion and color explosion. The lesson here is one of incentivization: the more intriguing it is to click a button, the more a user will do it. Leverage this phenomenon for important calls to action that you want the user to engage with, such as buttons for registering a new account or checking out of a shopping cart.

Reflect gravitas

If the user has taken an action with irreversible consequences, reinforce that notion by using motion design that feels equally important. For example, the animation associated with clicking a Delete button should feel more significant than the animation associated with hovering over a standard navigation dropdown. While the latter may entail a simple color change, the former might consist of a sudden jump in size and a thickening of the element’s border. By divvying up motion design along a gradient of severity, you’ll help the user intuitively grasp the hierarchy of the available actions. This technique, along with the others detailed in this chapter, serves the goal of increasing user understanding and confidence.

Reduce concurrency

To some extent, users are always trying to make sense of your UI. Consciously or subconsciously, they ascribe meaning to every design and motion design choice you make. So, if you present the user with extended animation sequences consisting of many elements animating into view concurrently, you’ll compromise her ability to parse the meaning of all the movements taking place.

In short, if you’re using motion design to indicate something important, make sure you’re not indicating many different things at once. If you are, consider breaking animations into steps or reducing the total animation count.

Reduce variety

Related to the best practice of reducing concurrency is the concept of limiting animation variety: the fewer animation variations you have, the more reassured the user will feel that she’s fully abreast of what each animation in your UI connotes. For example, if you use one type of animation for bringing big images into view, but a different type for bringing small images into view, consider consolidating them into one. If the differentiation between them was merely for aesthetic purposes rather than for improving usability, you’ve successfully eliminated unnecessary complexity from your UI, and reinforced behavioral consistency in the process. Consistency leads to pattern recognition and understanding. Understanding leads to increased user confidence.

Mirror animations

A tangential aspect of limiting animation variety is consistency in your choice of animation property and option combinations. For example, if you have a modal that animates into view by transitioning opacity and scale, ensure that the modal animates out of view with these two properties reverting to their original values. Don’t change properties for the two sides of the same coin. Doing so will make the user question what prompted the differentiation, and needlessly raised questions are the hallmark of a bad user experience.

When working with properties that affect translation (for example, translateX, left, marginLeft in CSS), mirroring applies literally: if a modal animates into view by sliding down from the top of the page, have it animate out of view by sliding back up toward the top of the page. Conversely, if you were to have the modal animate out of view by further sliding down off the page, you’d be indicating to the user that the modal has been sent somewhere new as opposed to having gone back where it came from. Typically, you want to imply that the modal dialog has gone back where it came from now that the user is done, say, changing account settings. If the user were instead sending an email, then having the modal animate down off the page would be contextually appropriate because it reinforces the idea that the email is being sent from its origin (the user) to a new location (the recipient).

Limit durations

Designers often make the mistake of letting animations run too long, causing the user to wait needlessly. Never let UI flourishes slow down the apparent speed of your page. If you have a lot of content fading into view within a larger animation sequence, ensure that the total duration across the entire sequence is short.

Similarly, if there’s a part of your UI—a profile image, for instance—that transitions into or out of view on a frequent basis due to the way users interact with your page, be extra careful not to allow protracted durations. Seeing a piece of motion design unfold is nice the first time, but seeing it unfold a dozen times every time a user interacts with an app becomes burdensome very quickly—especially if the user feels that repeatedly waiting for the animation to play out is significantly increasing the overall UI wait time.

Since it’s difficult to judge the appropriateness of your animation durations after seeing them play out dozens of times during testing, a good rule of thumb is to speed up all animations by 25 percent before you push a site live to production. This will help ensure that they always lean toward the faster side. (See Chapter 4, “Animation Workflow” for tips on how to quickly time-shift your animations.)

Limit animations

If removing an animation altogether doesn’t detract from the user’s understanding of your interface, consider dropping it and using an instant styling change in its place. The more animation you have throughout your UI, the more the user will get used to seeing them. The more she gets used to seeing them, the less attention she’ll pay to them, and the less likely she’ll be able to differentiate between the different types of motion design and what each signifies.

The vast majority of your motion design should be subtle—minor color changes on hovers, for example—so the few instances of grandiose motion design that do exist should pop to convey their intended message.

Elegance

The line between frivolous and consequential motion design is an easy one to discern: does a particular piece of motion design satisfy one of the best practices discussed in the “Utility” section of this chapter? If not, remove it. It’s frivolous, and it’s jeopardizing the usability of your UI.

Don’t be frivolous

To hone your judgment about what is frivolous, download the most popular apps, play with each extensively, and judge whether they feature animation to a greater or lesser extent than your app does. Play close to attention to what each animation conveys, and why it conveys it. If you feel that these apps use animation to a much lesser extent than yours does, consider toning back the motion design in your UI.

There’s one exception to this don’t-be-frivolous mantra—read on!

Your one opportunity to be frivolous

A page’s loading sequence—when all of your elements animate into view from an initial state of invisibility—is your one opportunity to be over-the-top and frivolous with your animations. Why? Because this sequence happens only once, and it won’t repeatedly get in the way of the user’s interaction with your site. Also, this is your moment to leverage your motion design skills to deliver a great first impression on your site.

If you have a really cool idea for animating your content into view, then do it here. But be sure to respect all the other rules in this chapter, especially limiting durations.

Consider personality

If you were designing a corporate site, you wouldn’t use a bounce effect to transition elements into view. Bounciness is playful—not a quality that corporate sites often want to convey. And if you were designing an educational or government app, you wouldn’t use easings that result in movement that starts very quickly before finishing very slowly (thereby conveying a whizzing-by-your-face futuristic slickness)—these would probably be too glossy and stylized for the content at hand.

Always be considerate of the personality expressed by your animation decisions. As a designer, it’s hard to judge the tone of your own work, so it’s a good idea to get third-party feedback early and often. Ask test users whether a UI feels suitably professional, friendly, and sleek, and tweak your motion design according to your preference for each of those three traits.

Go beyond opacity

The most common means of transitioning an element into or out of view is to animate its opacity from 0 to 1, and vice versa. This can be rather boring. Opacity is just the base property that has to be animated when displaying or hiding content—it’s not the only property. You can spice up your property choices by scaling an element down into view, sliding it up out of view, or changing its background color. As you add more properties to an animation, consider leveraging multistep effects, which you’ll learn about in the next technique.

Break animations into steps

The simplest path to professional-looking motion design is to break animations into multistep effects. For example, if you’re animating an image into view by transitioning its opacity and scale from 0 to 1, instead consider first animating the element’s opacity to 0.5—half of its final value—followed by animating its scale from 0 while simultaneously animating the remaining half of opacity. Breaking the animations of properties into steps like this removes the linearity that’s common to most amateur motion design on the web—wherein all properties animate perfectly in sync. In the real world, the properties of objects in motion don’t all accelerate in sync: Consider how, when a bird flies, it moves forward (translateX) at a different rate than it moves up and down (translateY). If it were instead to move linearly in both of its X and Y axes, it would look more like a bullet than an animal. Great motion design borrows from the movement of living, breathing things because UIs are made for humans—not machines—and humans like to feel expression and reaction.

If you pay attention to the futuristic UI animation depicted in movies, you’ll notice that intricate multistep animations are a key component in making them look so sleek. The reason for this is simple, and it further supports the case for avoiding linearity: humans are attracted to variety and contrast. Consider how, when you break up an animation, you’re contrasting and juxtaposing the individual components of that animation against each other. Just like layering up clothing to create pleasant color and texture combinations, you should layer animations to create pleasant motion design combinations.

For advice on the technical implementation of multistep effects, read Chapter 4, “Animation Workflow.”

Stagger animations

When multiple sibling elements—say, a series of images in a gallery—are animating into view at the same time, consider adding a tiny successive delay between them. (That is, after the first image loads, a delay occurs before the second image loads, and so on.) To delay the animation of sibling elements in this way is called staggering, and its purpose is similar to that of breaking an animation into steps: it adds visual layering by preventing all your elements from animating perfectly in sync, which can look plain and inelegant compared to staggered loading. Why? Because animating a series of elements in sync lacks any semblance of granularity or gradience. Consider this: Birds don’t fly side by side in a straight line. What makes their aerial movements so graceful is their successive formation and timing. It’s their juxtaposition, and the motion of their juxtaposition, that makes them so elegant to the human eye.

Flow from the triggering element

If clicking a button causes a modal to appear, have the modal animate out from the button’s location. In other words, have animations flow from the elements that trigger them. This bridges the cause-and-effect relationships in your UI, making individual elements feel better coupled and better organized.

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.

Use graphics

Make use of scalable vector graphics (SVG) to animate individual graphic components of a larger element that the user can interact with (learn more in Chapter 6, “Scalable Vector Graphics Primer”). A common example of this is the trio of horizontal lines that constitute a “hamburger menu” icon, or the dots that form a circle in a loading indicator. In both of these examples, arbitrary shapes are grouped together to form a common UI component. Before SVG animation was possible on the web, the common approach to animating a graphic like either of the two described was to embed the full graphic as a PNG image and then animate the entire shape by transitioning its opacity in CSS. By leveraging SVG, however, you can animate these unique elements on an individual shape-by-shape basis and subject them to many types of property animations.

Graphic animation is a surefire way to add nuance to key portions of your UI. This nuance is partially a result of the fact that web-based animation primarily deals with solid, rectangular shapes. (Sometimes they have rounded corners, but the shapes nonetheless remain solid and whole.) Animating the individual shapes of an element instead lets you delight the user with motion design that she might not have realized was even possible.

Beyond novelty, you can also uniquely leverage SVG animation to transform shapes into brand-new ones. Pairing this with the techniques for previewing outcomes and flowing from the triggering element, you can use graphic transformations to indicate UI behavior and provide feedback to the user. For example, if hovering over the dots in a loading indicator causes those dots to rearrange themselves into an X shape, that would indicate to the user that clicking the status indicator graphic would cancel the loading of content.