Animation in UX/UI design: How and When?

Should you be using animation in your UX/UI design? We’ll give you the answer to that one straight away: yes. Why, how, and when or where - that, we’ll cover in this blog.

Why should you use animation in UX/UI design?

As we all know (and experience), people’s attention span has gotten shorter and shorter. We are used to constant stimulation and boring and bland just won’t cut it anymore. This is why videos were all the rage when they first showed up on websites; that’s why TikTok is so popular. 

It’s not just about user retention. Motion effects are a way for the designer to communicate with the website visitor. It can help add the “e” in motion if you get what we mean.

Animation can be many different things on the website, (as we’ll discuss a bit later) and the one thing we believe it should be, is: entertaining and/or convenient.

What does that mean?

Motion effects can help guide the user intuitively through the website or an application.

They can add a little flare to a usually boring and repetitive task.

They can be the difference between the user staying on the website or clicking off.

And no, we don’t want to add more pressure and stress to your life by saying that. It’s actually quite the opposite: we want to inspire you to think abstractly. To imagine a whole world surrounding the product. 

Think about a mascot that could come to life; imagine the motion and colors that could ride through the page while the user is scrolling; capture the spirit of the product and let it shine on the pages of the website.

As always, try and put yourself in the shoes of the user. Is there something about the product they might wonder about? Is there something that needs explaining? Is there a story to tell?

When?

As with everything, the key to using animation in UI/UX design is to not overdo it. We’ve got some suggestions as to what you could design. Mix and match, see what works for the brand, and be creative - when you can.

Waiting for a page to load is boring. Due to this, loading screen animations are the most common ones. The main goal of loading screens is to let the visitor know they will arrive at the destination - they might just need to wait a while. So, while they’re waiting, why not add a little flair to your loading page to make it more interesting? It doesn’t have to be quirky but it can complement the product. 

Think about the way a loading screen animation could be tied to what the website is selling. 

Is it a restaurant? Make an animation of a pizza being made.

Selling paint? How about a brush painting over a screen?

If you think about it, the possibilities are endless.

Hover animation is also an obvious one. This type of animation is even somewhat expected nowadays as users are already used to seeing whether an element is clickable once they hover (move a cursor across the element but don’t click on it) over it.

But you don’t have to make it bland. Use color or an interesting detail to add a bit of charm to the hover animation.

Hero image in web design is referring to an attention-capturing image usually placed in the above-the-fold zone of the webpage, below the website header. It is the first thing website visitors will see, so we don’t need to stress how important it can be.

Adding animation to the hero image will add originality and can help keep the visitor on the website. It can tell a story about the brand, it can show what the brand is all about, or explain the product more. 

Keep in mind that the style of your animation should match your core audience’s taste. Look and feel is subjective, which may be tricky - but that’s why a good brief and understanding of your target audience is so important.

The heart sparkling and then turning red on Twitter. Moving interaction buttons on Facebook, such as Like, Love, Sad, etc. These are all microinteractions.

Small, yet significant details that will add a bit more fun to your design.

Dan Shaffer, who coined this term in his book “Microinteractions: Designing with Details”, says:

“A microinteraction is a contained product moment that revolves around a single use case - a tiny piece of functionality that only does one thing. They are small moments that can be dull and forgettable or pleasurable and engaging. They are everywhere.”

And just like features make the application/product useful, microinteractions make it convenient. 

How?

There are several software you can use to bring your design and illustration to life.

Adobe After Effects is perhaps the first one that comes to mind when we think about animation. It’s really good software, especially if you’re an experienced designer. It could seem a little overwhelming to beginners - but don’t let that scare any of you. The good thing is, once you learn how to design in such a software, learn its environment and basics, that knowledge will come in useful in using any such similar software. 

Other software you could use:

Maya - 3D animation and visual effects software

Nuke - a node-based digital compositing and visual effects application

Blender - free and open-source 2D/3D computer graphics software toolset

You can start with Adobe After Effects or do some research and look for software that you believe will suit your concrete needs more; the point is to just start animating. Once you conquer the basics, it’ll be a lot easier to tackle more advanced software and tasks.

A tip: Brainstorm

Before you decide what you’ll animate and how - brainstorm! Talk it over with friends, and coworkers and skim through the internet.

Aesthetics is important but so is functionality. Humor is great but will your core audience find it funny as well?

Sometimes, when we’re out of ideas or feel stuck, just talking it over with friends, family, coworkers, etc can spark an idea in your mind! Next time you’re struggling, try it. Let us know if it worked.

Conclusion

To sum up:

• Animation (as well as video) will increase user engagement, and user retention, and give a brand that special pizzaz it needs to separate itself from the rest 
• Use it to spark your creativity and express yourself in a clever and funny way, in different segments of the website: hero, loading screen, hover animations, microinteracions, etc.
• Entertain the visitor, keep them on the website, and you got yourself a potential customer
• Designing the animation in a style that will match and resonate with your core audience - having a strong visual style may narrow down the audience it resonates with but it’s usually better than having a water-downed design that might reach a wider audience
• Animation can help educate the visitor or tell them a story
• There are different software you can use, depending on your needs and knowledge level