Animation principles in UI

More and more frequently, designers are acknowledging the importance of motion design in the context of user experience. Motion is no longer merely a way to delight the people using our products, but a functional tool that makes experiences easy and fun. Most of us have heard the time-old (and still true) saying that good design is about telling a story. Well, motion can help us tell that story in less time and with more clarity.

Motion within UI enables us to:

• Direct focus
• Establish hierarchy and spatial relationships between objects
• Build brand character

Animation in the context of user interfaces is still a very new field. There are little to no resources to teach best practices for page transitions or show common patterns for loading screens. What we can do is develop a usable motion library by studying traditional animation principles and learning how to apply them to abstract shapes and patterns such as those we see in digital interfaces.

“Motion is no longer merely a way to delight the people using our products, but a functional tool that makes experiences easy and fun.”

One of the most commonly referenced resources for animation techniques is Disney’s 12 Principles of Animation, introduced by Frank Thomas and Ollie Johnston in the 1980s. These principles are meant as a guide to creating the illusion of natural movement in character animation. While motion designers know these principles well, looking at them through the lens of user interfaces allows us to add an aspect to the principles that weren’t there before: function. Using them as a guide, we can give feedback and provide clarity in order to more effectively communicate with our users.

Related: Improving UX with Pixar’s 22 rules of storytelling

By looking deeper into these principles, we can pull out valuable information about how each can be used functionally to create a better experience for our users:

Solid drawing

This principle is more or less the basis of Material Design. Solid drawing refers to treating shapes as if they are solid objects, and are therefore subject to the natural laws of physics. Using the concept of solid drawing is crucial to developing spatial relationships between panels or information. All objects maintain a set weight and volume and are subject to forces such as gravity, friction, and inertia, so any result of movement should reflect this. When objects abide by natural law, where they belong and where they are going is more intuitive to users, and just plain feels better.

As panels are interacted with, the shadows, layers, and speed change according to the laws of physics.

Arcs

The direction in which an object moves is telling of the type of object it is. Typically only mechanical objects move in perfectly straight lines, while objects with more organic qualities move in arcs. Whether you want your product to be received as technical, goofy, or graceful, altering the arced motion can make it feel true to the brand’s character.

Straight lines of motion keep this app clean and professional, while addition of the soft easing make the movement feel more natural.

Staging

Staging is all about setting the scene for what’s about to happen. In the case of interfaces, good motion design leads the eye to the important content. As they transition through screens, staging animations bring focus to what should be addressed next, or call attention to potential interactions that could be initiated. This helps establish hierarchy and clarifies the action flow for the user.

The submit button only appearing after the user has started typing the review sets the stage for what action they should take next.

Exaggeration

Exaggeration is exactly what it sounds like: making something more dramatic in order to call attention to something or to make a point. This can manifest in a shaking notification bell, or in response to an interaction error. Exaggeration directs focus and makes it clear that the user should pay attention.

Exaggeration can emphasize both confirmation and error states.

Secondary animation

When it comes to transitions, if it’s too fast or abrupt of a movement it’s easy to leave users confused; secondary animation makes sure that doesn’t happen. It reiterates the main action so the user can be sure of what’s happening. It’s a subtle and sometimes unnoticeable nudge of affirmation.

The primary movement of the My Collection category being selected and moved to the top is reinforced by the rest of the screen’s upward movement.

Appeal

Appeal is centered on delight. If your animation makes a user widen their eyes, turn the corners of their lips, or give a light chuckle, you’ve made an appealing interaction. This gives interactions a more memorable experience and builds character for your brand. Appeal takes your product to the next level—it not only solves a problem, but it has an emotional pull, which is what keeps people coming back to use your product and not a different one that can help them achieve the same goals.

Appeal makes a standard interaction more fun

Knowing these principles will only get you so far

Learning these principles will get you a solid foot in the door of UI animation, but sometimes even when you’ve followed all of the rules, your animation still seems off. One of the most important lessons to learn as a motion designer is the importance of developing taste—that muscle in your brain that tells you when something just feels right. Paying close attention to how things move in the real world can significantly improve your eye for motion. How does your best friend walk? What does it look like when the tide rolls in? How do the objects around you react to your own movement? Start to take in the movements of everyday life and it will translate into your digital work in a surprising way.

“Every movement should be intentional and benefit the user experience in some way.”

Conclusion

These principles of animation are timeless for good reason—keeping them in mind when designing for user interfaces can greatly improve your product’s functionality. If used well, animation can even positively impact the success of your product and brand as a whole. When animating for products, always keep in mind the motion’s functionality—every movement should be intentional and benefit the user experience in some way. Use the natural law of physics as a guide to how objects should move and interact with one another.

Lastly, keep it fun! Purposeful design shouldn’t have to be boring. Design a delightful experience, and your users will keep coming back for more.

The upcoming InVision Studio has microinteractions and animations that help you move as quickly as you think. Its advanced prototyping capabilities allow you to easily interact with your evolving dynamic design in unprecedented ways. Sign up below for early access to InVision Studio!