Why motion matters in a user interface

Why are motion graphics important in UI?

Brands need both personality and direction in their UIs, and motion graphics can achieve both.

Does Mark Ruffalo behave like Kanye West? Does Tom Hanks act like Al Pacino? Does Katy Perry sing like Adele? Of course not. We expect different personalities to behave differently.

The same applies to brands and products: they should look and feel distinct. A brand's appearance gives us valuable information about who it is, what it does, and, most importantly, how we should feel about it: a sports brand wants you to feel inspired; a beverage brand hopes to evoke feelings of bubbles and refreshment; and a bank site wants you to feel safe and secure.

One of the best tools a UI designer has for evoking feeling is animation.

When you are designing a product, website, or interface, take time to think about the story you are trying to tell. Then consider: how can animation help you tell this story?

Guiding principles of motion graphics in UI

Below are some simple guiding principles to make your UI interactions more meaningful through animation.

Informative principle

An interface is designed to deliver information to a user, and animation can communicate information that a static interface can't. Motion can show connections and hierarchical relationships between different interface elements and can reveal new actions to a user as they become available. By changing an object's shape, color, size, or mask based on a user's interactions, the UI designer educates the user about the interface, without needing separate micro-tutorials. This makes it easier for them to understand what is happening and what to do.

One example is parallax scrolling, a visual effect where an object in the foreground moves more quickly than an object in the background. Parallax clarifies a design's hierarchies: it helps a user know where to look by making it visually clear what is foreground and what is background.

Animated interfaces can also convey more tangible information. For example, a slider or fader can adjust a numerical value, just like a volume dial on a real-life, analog interface. Since users can see the effect of their action, the interface is easy for them to understand.

Focus principle

Animation can be used to attract attention to whatever is important at any given moment. Putting an object into motion attracts a user's eye, and blurring or darkening part of an interface draws focus to any elements that are still bright or unblurred. The animator can control where people look and can move the user's focus dynamically as the needs of the interface change.

Expression principle

As any Disney animator will tell you, the way an object moves can convey a lot of personality. This makes animation a powerful tool for communicating a brand's identity and style. An animator can make an otherwise-simple interaction elegant, whimsical, sleek, playful, or fun.

But animation can also powerfully miscommunicate a brand when it is not used well.

One simple way to affect an animation's personality is speed. An animated object needs time to accelerate or decelerate, and by changing the speed (or "ease") of the object's motion, an animator can create a quite different user experience: boring mechanical moves can be made snappy, modern, or cartoonish by increasing the ease of the motion.

Animations can also be used as purely ornamental components, to attract users or showcase a brand's style. However, it is crucial to employ this kind of animation with caution: too much can be distracting and can overload the interface.

Conclusion

With a little planning, a little creativity, and a little practice, animation can add enormous value to a design — by guiding a user's focus, offering them feedback on how to use the interface, and communicating the tone and story of the brand. When motion-design principles are applied effectively, even basic UI components can be transformed into sophisticated tools for human communication.