Animation Principles in UI

More and more frequently, designers are acknowledging the importance and effectiveness 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. 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 like digital interfaces.

One of the most commonly referenced resource for animation techniques is Disney’s 12 Principles of Animation, introduced by Frank Thomas and Ollie Johnston in the 1980’s. These principles are meant as a guide to creating the illusion of natural movement in character animation. Using these principles, we can more effectively communicate with our users.

Let’s check out a few of these principles, and how they can be applied to UI design to create a better experience for our users:

Solid Drawing

This principle is more or less the basis of the material design language developed by Google. 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 like 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 establishes 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:

You know when you click on something and think you’re finished, but aren’t confident you completed the task? 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 reinforces by the rest of the screen’s upward movement.

Appeal

Appeal is centered on what is known to many designers in the industry as 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 surprises and has 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.

Conclusion

When used correctly, traditional animation principles can greatly impact the effectiveness and usefulness of your product design. 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.