How to use animation to improve user experience

Using animation responsibly, to improve user experience, is a fine art. Guide, satisfy, and delight users with these ideas for using animation on your site.

You are reading: How to use animation to improve user experience

I love a good reaction GIF. Their explosion as a legitimate communication tool has brought me both joy and laughter. A timely, well-placed GIF has the power to act as the perfect punchline and the fact that certain animations have become classics and regular go-tos in certain situations shows that I’m not the only one to feel this way.

That cool kid who's using an old PC who looks up from his monitor and gives a sweet thumbs up to the camera
Reaction GIF status: Classic

Tell you what, though; they can be so annoying.

I was reading a blog post this week and actually had to bail because every other paragraph was followed by a GIF and I couldn’t concentrate on what I was reading. I even tried a bit of strategic scrolling (you know, so that the animation was off the page while I read the text in between) but no sooner did one disappear off the top of the page, than another rose from the fold.

Animation attracts users’ attention

… and that can be a huge advantage, so long as it’s adding value. Beyond the rise of the GIF, animation in itself is pretty trendy in web design. There are loads of tools and guides available online to teach devs and designers how to animate their web pages and more, but with it becoming easier, there is a risk of overuse – and too much animation becomes confusing, distracting, even overwhelming.

Animation can help guide a user in their journey, and improve it, but it can also be a distraction; and that’s when the user experience becomes a frustrating one. Bad news. So how do we use animation responsibly?

Questions you should answer before using animation

Nielsen Norman Group suggests defining the animation’s purpose and goal before deciding if it’s appropriate. Do so by asking yourself the following questions:

1. Where do you think the user’s attention would be if not for the animation?

2. Are you trying to attract their attention?
… to have them react immediately?
… to indicate a transition between two areas of their journey?
… to confirm a relationship between two areas within their journey?

3. Will the animation occur frequently through their journey?

4. What are the mechanics of the animation?
… does it occur automatically?
… does it occur as a result of their action?

Animation to improve user experience

So what does helpful animation look like? It’s the kind of animation that explains changes on a page or a certain area of a page, like the result of a user’s action, revealing or hiding content, or navigating to a new area of the page or site. They can be fun as well as useful, and incorporating a trend like animation indicates “an updated brand that is current and knowledgeable”.

Help the user focus: If animation is in the wrong place, occurs at the wrong time, or is at the wrong speed, it hinders the user rather than helping them. It controls attention and focus and so can act as both a distraction, or as a guide.

Try using subtle animation to highlight important elements on a page such as a contact/live chat tab or navigational elements like anchors or “back to top”.

Help keep the user engaged: If a user is waiting longer than a second, their flow of thought is interrupted. Animation between screens and actions will occupy load time and therefore give users something to focus on while they wait.

Try using “skeleton screen”, a mixture of slow and speedy animation, or “BigPipe” to occupy idle loading time.

Help guide the user: Animation can act as a sort of sign post or guide by occurring as a result of a user’s action or movement between elements on a page. Transitions clarify what happened between a user performing and action and the end result.

Try using expanding forms so users know when more information is required, such as revealing address fields if they require something by post, or card details should they choose this payment method.

Help the user celebrate progress and success: As users move through their journey, use animation to tell them so. It reduces friction in conversions by minimising the amount of mental effort required to understand what’s happening.

Depending on the nature of your site, you could try: indicating progress through an action with a status bar; reinforcing a successful submission with reactive button copy; or preventing the user from asking “did I just add that to my cart?” with a cute “fly to cart”.

Functional animation and user experience

While some types are definitely unhelpful, unnecessary, and downright confusing, animation can also be a valuable tool in improving user experience. Remember that your users’ time and attention span are limited, and use (or don’t use) animation accordingly. Fill in UX gaps with transition-style animations, but don’t delay progress through the journey with frivolous over-use.

Consider whether shifting users’ focus with animation will enhance their experience or impair it.

Latest from the blog