Animation for the sake of “cool” can often hurt conversions since it’s distracting, but not always. There are 4 ways animation, when used properly, can actually strengthen UX. And better user experience can lead to higher conversions.
You don’t need to overhaul your site to take advantage of animation. Just about any site can utilize basic animation in it’s loading sequence, calls-to-action, or navigation.
New web development capabilities allow for animations to be implemented easily. CSS3 has an entire library of animation functions that can be used on any element of the page. This means that animation is accessible to almost any website, and not just advanced web and mobile apps.
Here are some rules to follow when implementing animation into your digital designs:
1. Use loading sequences that keep users interested
Animation can keep the user engaged even before the website fully loads. This keeps users from leaving too soon. Even a 1 second increase in load time can equal a 7% loss in conversions. Animation can hide this load time by visually occupying the user.
2. Animate based on where the user should focus
Animation influences a user’s eyes and it can control where they focus. This is great as long as the user’s eyes are on the right thing. When animation is in the wrong place or at the wrong speed, it becomes a distraction from the content.
Visuals that move onto the screen attract different amounts of attention based on their speed and location on the page.
A good example is a ‘Back to Top’ button. They allow users to jump back up to the menu after scrolling down the page and can either be a subtle functionality — or a complete distraction from the content.
3. Keep Users from getting lost
Users risk losing the context of what they are seeing if web pages change instantaneously. Animation can be used to make transitions more obvious, so it’s clear what happened between where the user started and ended up. Two ways you can use animation to make your site navigation more intuitive:
Example 1: Animated Page Scrolling
Clicking a link doesn’t always take you to a new page. Sometimes, it jumps you to a new position on the same page. If there’s no transition, this is confusing, and it isn’t clear that the page was automatically scrolled down. Animation shows how the user caused the action. Compare the following two images:
Animation can show where new objects are coming from. If a user sees new fields cascading down from where the user clicked, then he knows that he caused it to happen. When the new fields expand, there’s a clear indication that additional information is necessary.
4. Use feedback to show what’s been accomplished
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.” Here are 2 ways you can use animation to provide instant feedback (and user gratification):
Example 1: Don’t-click-again warnings
Sometimes, animated feedback can do what text can’t: let the user know the action has been completed in real time.
‘Don’t-click-again’ warnings try to prevent users from sending a query twice while the first is still processing. However, the warning is still not telling the user whether the click was a success.
“the user is uncertain as to whether the computer even received the command in the first place or whether it may have crashed. Plenty of extra clicks and double orders have resulted from such user-hostile design.”
-Katie Sherwin, Nielsen Norman Group
A simple way to fix this is to disable the button after it is pressed. Animation can be used to emphasize the submission and make it obvious that the button is disabled.
The feedback is immediate. The button shrinks and darkens when clicked. A progress icon appears while the submission is made followed by a checkmark animation that completes the action. This is a much clearer and engaging interaction than a button that gives no feedback.
Key Takeaways
- Loading doesn’t have to be boring. Just about any site can utilize a skeleton screen or subtle animation when loading it’s content to prevent users from clicking away.
- Use animation to guide (and not distract) the user. Quick animations and motion on the left side of the screen attract attention. Be sure not to distract from the important content.
- Use animated transitions to move to a different part of the page or reveal a new part of the site. This clarifies where the user started and ended on the page.
- Show, don’t tell. Use animation to confirm clicks, purchases, and signups from your users. This shows that the action was complete and the site hasn’t frozen.
Many Thanks!
I’m Atheek Ahamath. a UI/UX Engineer and based in Colombo, Sri Lanka.
Craft | Digital Products | Web/Mobile Applications.