Photo by Markus Spiske

Originally Posted On: https://xd.adobe.com/ideas/principles/human-computer-interaction/animation-principles-for-ux-designers/?sdid=C12Y2YPB&mv=social&mv2=orgsoc

 

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 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 (HCI). 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.