Insight

7 Principles for Great UI Animations

by Alex Carr
Date
Aug 14, 2020

This article is part of a series of talks given to the Maark engineering team as part of our continuous crosstraining program.

In a previous article, I talked about the importance of feedback in product design. That the feedback loop within a product can help users understand what the system is doing, know if their input was captured, and learn if they had made mistakes.

Feedback can take many forms, but one way to provide and elevate feedback is through animation. Animation is great for telling the user “we’re working on it” or orienting their path through the navigation or drawing attention to relevant and timely information.

At Maark, we operate under seven principles for good interface animation. These guidelines help us create useful feedback for users while also being respectful of their attention and time.

1. Serve a Purpose

Animation should increase the usability of a product. It should deliver clues as to how a system works, provide feedback, and direct attention. If it does not serve a practical purpose, it might be a good idea to consider if it is necessary or appropriate in that context.

1. Serve a Purpose

2. Keep it Quick

Animations should be quicker than you think—especially if the animation will run often. You should never feel like you are waiting for an animation to finish.

Generally speaking, short, or small animations that do not have to travel far can be faster. As animations get larger (more significant areas and traveling farther distances), they should take more time.

2. Keep it Quick


3. Mimic the Real World

Nothing in the real world moves continuously at the same speed—things accelerate and decelerate. Animations in interfaces should mimic this behavior with easing, so the movement feels more natural.

3. Mimic the Real World


4. Orient Space

Use animations to help orient the user within the “space” of the app. It can help them understand how the app is organized and where they are within the navigation.

4. Orient Space


5. Carefully Attract Attention

Animation is very good at grabbing attention—especially when everything else is still. Be considerate of how you use animation to inform the user. Do they need to know this information now? Or is it less important, and thus the animation can be more subtle.

5. Attract Attention


6. Keep Continuity

Carry over focused elements from one screen to another during full transitions, helping the user understand the correlation between the two states.

6. Keep Continuity


7. Move Together

Many animations include multiple properties animating at the same time. If those individual animations do not, optically, move together, they will feel disjointed and distracting. Coordinate all the animations so they seem to be a single motion, even if in reality, they’re not.

7. Move Together


The details of each animation, how it moves, how long it takes, and when it happens, all contribute to how users perceive feedback in your tool and the quality of your product. As you look at how your product currently works, look for those moments of feedback that would benefit from animation and keep these principles in mind to deliver a best-in-class user experience.


Less right-brained than whole-brained, Alex brings a serious creative, analytical, and research-driven approach to solving business problems. Big ones. Alex has created design systems across enterprises, executing in media ranging from motion graphics and print to embedded applications, interactive installations, and marketing assets. He and his team deliver strategy, concepts, design systems and experiences from the ground up.

Design
Design
It Takes a (Design-Led) Village
Design creates incredible value when allowed to lead, but is it possible for design to have too much sway?
Design
7 Principles for Great UI Animations
Animation in a UI is a great way to give the user feedback about the product experience...if done right.
Design
4 Things I Didn’t Expect When I Transitioned from Print Design to Digital Design
M. Saito describes the newfound joys and challenges of digitizing her profession.