Animation is a powerful tool in a designer’s toolkit. Animated effects can help transport users between navigational contexts, explain changes in the arrangement of elements on a screen, and reinforce the hierarchy of UI elements. Consequently, they are an essential element of interaction design.
When it comes to digital product design, animation is often an afterthought for many product teams. Teams often introduce motion language when the work is almost over. What makes things worse is that many designers have no UX animation experience, and they animate based on their gut feeling, which can lead to bad user experience.
In this article, I want to describe the concept of motion design and share a few fundamental animation principles that are worth keeping in mind when working on animation.
What is motion design?
Motion design is a discipline that applies
graphic design principles to digital products through the use of animation and
visual effects. Motion designers are responsible for creating animated effects.
To create decent animated effects, motion designers should have skills in
graphic design, digital choreography, and storytelling. They should be able to
use tools like Adobe After Effects.
Principles of UX animation
Motion design UX drives the entire user interface. It creates a more natural experience by adding a new level of depth to the interaction design. All this happens when you implement the motion language properly.
Make animation meaningful
Adding animation to digital products without much thought is one of the common mistakes among product teams. What looks nice doesn’t necessarily add value to user interactions.
Don’t animate just for the sake of
animation. Both functional and delightful animations should be meaningful for
users. Animations should always serve a purpose. When an animation doesn’t fit
a purpose, it can feel awkward or annoying, especially when it is slowing down
a process that could be faster without any animation. Good animation aligns
with users’ goals; it allows users to understand what to expect from the
interface.
Here are a few common cases when the animation is especially helpful.
State transitions (animation can prevent change blindness)
State changes in
UI often involve hard cuts (the change from one screen to another without any
transition effects in between) by default, which can make them difficult to
follow. In the real world, most things don’t just appear or disappear
immediately. When you drive a car and want to stop at a red light, you go
slower and slower, and only after that, you stop. The same rules apply to
digital products. When something has two or more states, the changes between
states will be much easier for users to understand and follow if the
transitions are animated instead of being instantaneous.
Good motion design UX gives the viewer a clue as to
what’s about to happen. Let’s look at the example below where the user taps on
the small card, and the item is zoom-in into its detailed view. Animation makes
it’s crystal clear to users how they got the new state.
UX Animation can fill the gap between states by creating an in-between state that gradually turns the initial state into the final state. Image by Dribbble.Visual cues (animation helps us understand how to deal with UI)
When the user starts using a product, it
might be unclear to them where to look and what to do (especially if your
product has a lot of different features). The role of animation is to create
the visual cues necessary for letting the user know where they are and what
they’re doing. A well-designed, animated transition guides your user’s
attention—it helps direct user’s focus to the right spot at the right time. It
emphasizes the right elements depending on what the objective is. That’s why
animation is especially good at onboarding new users.
UX animation drives the user’s attention and hints at what will happen if a user makes this gesture. Image by Material Design.Visual feedback (action and reaction)
The interaction between humans and computers is an essential part of human-computer interaction. Graphical user interfaces are reactive by nature. When users interact with digital products, something constantly changes on their screen. As one of Jakob Nielsen’s 10 original heuristics for usability, visibility of system status remains among the most important principles in user-interface design. Users want to know their current context in a system at any given time, and products shouldn’t keep them guessing — they should tell the user what’s happening via appropriate visual feedback.
Animation is an
excellent tool for providing visual feedback for user actions. Visual feedback
makes you feel like you’re interacting with real elements on the screen and
demonstrates the result of this interaction (whether it was successful or not).
Almost any user interaction can benefit from using animation. For instance,
when you press a button, you expect a reaction, and animation can make this reaction
more memorable.
Visual feedback on like reaction. Image by Li Junfei.Visual feedback is also helpful when you
need to inform users about the results of an operation. Cases in which
operations aren’t done successfully, animation can provide information about
the problem in a fast and easy way.
Users see this animation and immediately understand the problem. Image by thekineticui.Animate as minimum objects as possible at one time
Less is more concerning animation and transitions
in particular. Every motion on the screen attracts attention, so too much
animation at the same time creates chaos. It becomes hard for the user to track
the movement if they see more than one moving object. Therefore, if you have
several elements that you want to animate, you need to clearly define the
sequence of their motion and animate as few objects as possible at one time.
Select an optimal duration and speed for the animation
Timing is arguably one of the most important considerations when designing transitions. It plays a huge role in creating realistic animations. When it comes to selecting the duration of the functional animation, you need to have a balance. Regardless of an animation’s style, transitions shouldn’t be jarringly fast or so slow that they keep the user waiting. The animation should be slow enough to give users the option to notice the change but quick enough not to cause waiting.
The animation should be quick and precise, with little or no lag time between the user’s initiating action and the beginning of the animation. The animation on the top example makes the user wait for the content is this causes bad UX. Image by Material Design.Researchers have discovered that optimal speed for interface animation is between 200 and 500 ms. Any animation shorter than 100 ms is instantaneous and won’t be recognized at all. On the other hand, an animation longer than 1 second would convey a sense of delay and thus will make the user wait.
At the same time,
don’t rely on those rules when you are working on a decorative animation. For
decorative animation, you can select the time based on your needs.
Make sure the easing of your UX animation is right
All live objects that we have in the physical world move with some acceleration or deceleration. When it comes to animating UI objects, you should follow the same rules. Avoid using linear movement (when objects move with a constant speed); otherwise, the movement will look mechanical. Linear animation is only applicable for decorative animated effects when the object doesn’t change position.
Ensure the motion language fits the nature of your product
The motion language that you choose to use should resemble the nature of your product. Imagine you design a banking app and want to introduce a bouncing animation on the money transfer confirmation screen. By its nature, bouncing animation creates a sense of something not serious, so it’s probably not a good choice for business products.
For financial operations it’s better to use subtle animated effects such as sliding. Image by Olga Tsebro.Keep longevity in mind
Even good animation can be annoying when
it’s overused. When designing an animation, ask yourself a question: “Will the
animation get annoying on the 100th use, or is it universally clear and unobtrusive?”
Delight your users with animation
Focusing on user emotions plays a huge role in UI interactions. As Aarron Walter said in his book Designing for Emotion: “Personality is the mysterious force that attracts us to certain people and repels us from others.” It’s possible to reward the user with an animation when they accomplish personal goals. For example, when a user reaches inbox zero in the email app or completes certain tasks in the task management tool, it’s possible to create deeper engagement with a product using animation.
Asana shows an animated unicorn when the user completes certain tasks.Design accessible UI
Animated interactions will need some additional consideration to make them accessible. The Web Content Accessibility Guidelines provide a number of recommendations for animated content and interactions. These include guidelines for on when to provide pause and play controls, limits for blinking or flashing the screen, and advice on when to provide reduced motion options for users with motion sensitivities.
Both the web and native platforms also provide a way for users to indicate they require reduced motion effects (the prefers-reduction-motion query on the web), and it’s a good practice to provide a reduced version of highly animated content when that preference is present.
Prototype and test your UX animation
Prototyping is the absolute best way to convey how you intend to use animation in your design. If you use interactive prototypes, you will get a clear picture as to what works and where the flaws in your app are hiding. Very often, this leads to a complete rework because the look of your animation differs from how it feels. Thus, don’t think that you will create a perfect animation effect right from the first attempt. Instead, iterate often and iterate fast! Iterating numerous times on even the tiniest detail will make your animation great.
Conclusion
UX animation is an
essential ingredient of modern digital products because it brings the user
interface to life. It not only makes products more usable but also makes them
more visually appealing for end-users. However, it happens only when designers
use proper motion language.
Good animation is
invisible. Users shouldn’t notice that they are looking at animation. But they
should notice the great user experience that you provide.