Animation is great, but it shouldn’t be treated purely as decoration. Like everything in UX and UI design, it’s essential to think about the overall user experience (and how animation may enhance or hinder it). In this post, we’ll outline five golden rules for using animation in your UI designs.
So what are our key animation guidelines?
- Ensure it adds value to the user experience
- Let users feel like they are in control
- Use it sparingly
- Leverage it for purposeful distraction
- Keep the interface natural
- Key takeaways and further reading
Let’s take a look at these in more detail.
1. Ensure it adds value to the user experience
If there is a single takeaway you should try to remember from this post, it’s that animation of any kind should always improve the user experience and never detract from it. It should be relevant, functional, and add a little extra depth to the UI. Here are some examples of how you can use animation to improve the UX:
Transitioning from one screen to another
Such animations are especially common in mobile applications. Because the screen is so small, people often experience multiple steps of a user journey on separate pages to minimize scrolling fatigue.
Say you’re booking a hotel room. The first screen might show a calendar with dates; the second would offer room options; the third may ask for your credit card information. You might not even think about the transition between the screens, but UI designers sure do!
A popular transition method is having the screen “follow” a user’s swipe action, so they feel like they are physically moving from one page to another. It’s a tactic to mimic direct manipulation in an environment where it would be physically impossible, given current technological limitations. Without this transition animation, the change in screens could feel abrupt and disconnected from the user experience.
State changes
Another useful way to deploy animation to help users feel like they are physically engaging with digital content is by designing state changes. Tapping a button is a simple example of this. Whether the user is tapping with a finger, clicking a mouse, or pressing a key on a keyboard, watching a seemingly reciprocal act on screen (like a button changing color or appearing to depress) helps this action seem like a more visceral experience.
Introducing new elements
The introduction of new elements on a digital screen can be jarring—animation helps smooth out this experience. For example, having a chatbot slide out from the bottom corner is a lot less distracting and stressful for users than simply having it appear out of nowhere. The whole point is to make the experience seem seamless, not to shock users when random components appear out of nowhere!
Never let it detract from the UX
While it is imperative for an animation to add value to a user experience, it is equally critical that it does not diminish the experience in any way. That means paring down the total animations to what is absolutely necessary, even if you’ve spent hours creating works of art! Ruthlessly ask yourself (and others) if each one is essential; if the answer is no, remove it.
Animation designers need to strike a delicate balance between enhancing and detracting from the user experience, which is not always easy to achieve.
2. Let users feel like they are in control
We’ve already established that animation in UI can help users feel like they are more involved in a digital experience. One way to boost that feeling is by empowering them to control some of the animation themselves. Allowing viewers to pause an animation video or minimize a chatbot to limit distractions is vital to ensuring a top-notch user experience.
There’s nothing more annoying than an intrusive animation that you cannot get rid of! With so many options for purchasing goods and services online, today’s consumers will not hesitate to jump ship from your site to a competitor’s after experiencing poor UI, so take heed.
3. Use it sparingly
This guideline aligns nicely with the golden rule of ensuring your animations add value to the UX. At its core, an animation is a distraction. It is meant to draw attention; therefore, if you cram your digital content full of whizzy moving parts, your visitors may experience cognitive overload. Confused by what they should focus their attention on, they may miss the point of your site entirely and leave empty-handed. Don’t fall into this trap!
4. Leverage animation for purposeful distraction
In today’s digital environment, people expect instant results. Long gone are the days of dial-up modems when a web page would load excruciatingly slowly, pixel by painful pixel. Now a delay of a few seconds can cost you precious conversions. People can no longer stand to be bored, whipping out their phones and scrolling through social media feeds in situations where no other immediate distraction is at hand.
So what happens when your app or website needs a little time to process behind-the-scenes operations? Add a purposefully distracting animation! These handy inserts will keep your audience engaged while they wait for results and act as “proof” that there is work going on behind the scenes. Some businesses opt to use these “loading animations” to boost their product’s credibility even if they have no need for them—and use them as an additional branding opportunity.
5. Keep the interface natural
Any animation you add to your digital content should be smooth and seamless. Whether it’s a video, direct manipulation where users can move elements around a screen, an anchor link that gently brings you to a particular section of a page, or any other animation, don’t rush things! Jerky, quick movements are the antithesis of an effortless user experience. You don’t want to surprise people or make them anxious.
That being said, you don’t want your website or app to drag or seem challenging to use. Conduct user research and testing to identify the optimal timing for your animations.
Key takeaways and further reading
While there is undoubtedly more to UI animation than what can fit in a short blog post, this article should give you a foundational understanding of how to use your animations to improve the user experience!
Great animated UI is the result of focusing on the user. The instant you veer away from optimizing for their best experience, you risk diminishing it at the expense of your own goals. If you’re keen to get started with animation, check out these free animation libraries, and read through these useful guides: