5 Ideas How to Use Animation in UX

Using Animation in UX

What's the first idea that comes to your mind when you think about user experience design? It's all about making the design useful for the users, right? But how about useful and fun?

If you explain things through text, the users may perfectly understand what you say. When you include animations to accompany that explanation, however, they won't even need to read the text. They will intuitively understand the instructions without wasting any time. If they do read the text, the animation will help them understand it better.

In some situations, such as loading pages, text isn't even applicable. You may throw in a quote, but it would be much better to include a fun element into the design. Animations would be much better!

So let's go through some ideas, shall we? We'll list them along with examples on how you can use animation to boost UX design.

1. Use animation to make the loading process less boring

Who likes loading?

No one.

But sometimes it's necessary for your website to go through some loading, so the users will get the features they need. Have you seen how Canva does it?

Loading process animation

If you cannot shorten the loading time, the least you could do is make it more pleasant. In Canva's case, a simple loading bar with a quote is good enough to keep the user engaged. While the user is reading the quote, the feature will load and everyone will be happy. The bar shows the progress and you can see it's quick, so it doesn't make you nervous.

2. Use animations to explain something

In almost every website, there's a destination that cannot be reached. Sometimes these are deleted pages, but sometimes the users are trying to reach a destination that simply doesn't exist within the site. In such situations, the 404 page is inevitable.

Illustrations and animations play a huge role here. You can make even the most unpleasant online experiences fun.

The Oatmeal takes this one step further. It's not your usual 404 page; it's a page that offers a product – a coloring book.

404 page animation

This is an animated video that tells a story. It perfectly explains what the product is about, and it makes the fans eager to get it.

Related article: Emotionally Intelligent Design: Why You Need It in Your Mobile App

3. Convey the brand's vibe through the animation

A cute animation can serve the purpose of improving UX design, but why not achieve two goals at once? You can also use the animation to convey the brand's vibe.

When you look at the example from The Oatmeal, you'll recognize the brand all over the place. It's that familiar design, voice, and style the fans are used to.

You need that kind of personality to all content you produce. When developing animations for the sake of UX design, think about the brand's tone and style. If you serve something that doesn't fit there, you'll only confuse the visitors.

4. The animation must not waste the user's time

So you have the coolest idea of spaceships and unicorns taking over the page while it's loading? That's great! But be careful; too much enthusiasm with animations can get you in the wrong direction.

If the animation is too long and completely irrelevant, you're just forcing the user to watch something they didn't come here for.

Let's say the user has to wait for 5 seconds to get to the feature of the website they are headed to. This may be a payment processing step, image alternation, file upload, or anything else that takes some loading time. The first thing you should do is make your website as fast as possible. When you're sure you're achieved the minimum numbers of loading time, you can use that space for a minimalistic animation that will keep the user engaged. Do not prolong this time just because you have the coolest idea for an animation.

Let's look at an example: when you use Neil Patel's tool to analyze a website, you have to wait while the tool does its job. But the waiting takes too long and the animation is irrelevant. You see some stats that you don't even get to read because they change too quickly. The last one stays there and it stays… and it stays… until you finally see the results.

Animation must not be boring

The whole process is boring and you feel like it's wasting your time. That's not an impression you want to create.

Related article: The Portrait of Modern Users: How Mobile Apps Users Have Changed and What They Need Today

5. Animate important elements of the site

This is something we've all noticed: when you scroll over an emotion when trying to react on a Facebook post, the emoticons come to live.

Animate important elements

That's a cool example that could work with most site's menu icons. Just think of a way to smoothly transition the icons into animated versions. That adds an element of fun to the interaction, and it certainly makes the user's experience more enjoyable.

Animation is both useful and fun

In most situations, animation is an element of UX that helps you make a point. It makes your website more fun, it draws attention to important elements, it makes the waiting process less boring for the user, and it brings context to the menu options.

But you have to remember: it's not just about adding animated elements to your website. It's important for these elements to be appropriate and relevant, so the user will perceive them as a natural part of the experience. Hopefully, the above-listed tips will help you achieve such an impression.



This is a guest post by Silvia Woolard. Silvia is a writer at Careers Booster and novice entrepreneur from Phoenix. In her free time, she travels and writes in a field of marketing and popular psychology. Read Silvia at her Twitter.

Get in Touch