The importance of good animation in UX

Few things are more delightful in a digital product than well-designed animations. They make us grin, and they help us understand the product. But animation is more than just an afterthought of smile-inducing touches. Good functional animation makes a user interface considerably more appealing and usable.

When we talk about functional animation, what we’re talking about is the type of subtle animation that has a clear, logical purpose. It reduces cognitive load, it prevents change blindness, and it establishes a better understanding of spatial relationships. Put simply, animation brings the user interface to life.

Why good animation is important

When it comes to great UX design, animation can be multipurpose. First, it can showcase or infer functionality. In a way, it acts as mini-onboarding. In addition, it can add a layer of delight and fun. It can also provide reassurance and meaning to interactions.

You are at ease when you do something and an animation implying the expected result happens, like when you delete an item and it fades away or slides off the screen. It’s much less jarring than simply having an item disappear while the items on a page reorder. Animation lets us not only unlock meaning in our designs but also provide new models for interaction in general.

Related: 5 examples of web animation done right

The right ways to use UX animation

Animation is a useful supplement to content, and it takes on a secondary role in making UX clearer. A site’s functionality, layout, and navigation should be designed for usability while animation fills in the gaps.

One of our in-house senior designers Steven Fabre said, “Good animation is invisible. You shouldn’t notice that you’re looking at animation. You want to make sure the timing and easing of your animation is right. In real life, things never show up and stop abruptly. When you stop a car, you go slower and slower then stop. The same thing should happen on the screen.”

Here are some simple ways to incorporate animation into your UX design:

Use loading sequences that keep users interested

Various studies have shown that more than 40% of users expect a webpage or an app to load in 2 seconds or less. If it takes more than 4 seconds, the average user starts getting frustrated. After 8 seconds, they leave. As little as one second worth of delay in your site speed can result in a 7% reduction in customer conversions. Loading time is crucial to the success of your site, app or program and if you can keep the user engaged for those few seconds/milliseconds, even better.

Animate based on where the user should focus

Often when opening an app or webpage, you’re presented with a screen full of items, and you’re not sure where to start. Animation to the rescue! A great way to help your users is to give clues about the proprieties of those objects.

If you have a list of posts, sliding them (instead of having them just appear) could help your users understand that they can keep swiping to see more. You could even add another layer of animation by timing the appearance of the items so that they slide one after the other. This style of animation can serve to reinforce that these items are separate and the user can interact with each one individually.

“When it comes to great UX design, animation can be multipurpose.”

Keep users from getting lost

Once you’ve cleaned up your UX to the point that it’s nearly seamless, it becomes more vital that you give your users a sense of spatial awareness. Consider this: if an object moves out of the screen to the left, it should re-enter (if necessary) from the space where it exited. This will help your users understand how your app works and will help them feel more comfortable when interacting with it.

Related: Animation principles in UI

Use feedback to show what’s been accomplished

According to TomTom lead designer José Torre, “In a world where your finger often covers the button you’re pressing, animation plays a huge roll in providing the user the reassurance they need.”

Animation can give visual feedback that shows when the site is working properly. As Katie Sherwin from Nielsen Norman Group said, this can “inform users of the current working state and make the process more tolerable to the user by reducing uncertainty.” Just don’t be too cute or take up too much time. Those factors can cause an animation to get stale.

“Animation is a useful supplement to content and can play a role in making UX clearer.”

Designing animation in InVision Studio

We thought long and hard about all of these practices when we were deciding how to implement animation design in InVision Studio. Studio is a design tool with animation at its core, so you don’t have to worry about switching tools. You can focus on your work and remain in that state of flow.

From the first time you open Studio, you simply connect the screens you want to animate, and it works. Out of the gate. We have an algorithm that matches layers and automatically creates the connections between them. If you like, you can dig deeper and fine tune the animation through the easing curve, the timing of individual layers, and more.

You can create very large flows with hundreds of screens if you want to. With Studio, you get a real sense of how your entire design is going to feel, and if you want, you can then dig deeper and work on micro-interactions and animations in specific areas.