Animation for the sake of “cool” can often hurt conversions since it’s distracting, but not always. There are four ways animation, when used properly, can actually strengthen user experience. 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 its 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 one second increase in load time can equal a 7% loss in conversions. Animation can hide this load time by visually occupying the user.
Here are three ways to do it.
Example #1: Multi-part transitions
Luke Wroblewski, a frontrunner of interaction design, gave a presentation for Intel on how to make websites and apps seem more active when they are loading.
One example Luke gives is the Google Search app, which uses transitions to keep the screen animated while the app loads search results.
The app loads pages in a three-part transition:
- The page slides in from the right.
- The loading bar progresses from the left.
- Content fades in smoothly onto the page.
The UX research firm Nielsen Norman Group outlines principles of web page animations. They explain that fast animation grab users’ attention. On the other hand, slower transitions draw less attention and allow the user to maintain their previous focus.
A combination of fast and slow transitions occupy the user when he would otherwise be idle. Google’s Search app executes this perfectly.
We want people to feel like things are responsive and the application is acting while they wait.Luke Wroblewski
Example #2: Skeleton screens
Luke Wroblewski’s second example is skeleton screens. The screens complete the UI incrementally before the content is fully loaded. This keeps users interested during slower load times. Animation is achieved by the content cascading onto the page skeleton.
…you’re not sitting there staring at a loading indicator as content comes down from the server. You’re actually seeing it, bit-by-bit, make its way to the interface and become useful to you.– Luke Wroblewski
Skeleton images load quickly since it’s a small image that is often made up of rectangles. This technique can be taken even further on a mobile app because the skeleton can be stored locally on the mobile device, which allows for more complex screens.
Example #3: Loading a webpage in pieces
Rudimentary animation can be achieved with backend web development. Facebook Engineering uses a process called BigPipe to make Facebook load faster and in a more dynamic way.
If you watch your own Facebook homepage load up, you will see this chunking effect in action.
- The timeline loads over its skeleton layout, immediately followed by the right-hand column with stories, events, pages, and videos column.
- The lefthand menu pops up.
- The chat column pops up on the right.
Users begin consuming content, starting with the timeline, during the first crucial microseconds while the page finishes its loading process. This is crucial given the number of times Facebook is loaded per day.
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.
The ‘Back to Top’ button springs up instantly on the left side of the Festival of Marketing site. There are two problems with this:
- Users spend most of their time on the left side of the screen and consume content left-to-right, giving this animation undue priority over the copy.
- The speed of the object attracts attention immediately. The button is supposed to be used when the user is done reading the content on the page.
Since we reviewed their site, Festival of Marketing made some changes and don’t feature the ‘Back to Top’ animation anymore. (In fact, they made some cool animations to emphasize their speaker lineup as you hover over them with your mouse.)
Back to the ‘Back to Top’ buttons.
They can be used much more effectively. Here’s what happens when you fix both factors that Festival of Marketing got wrong in the past:
The button is on the right side of the screen, lowering its priority in the user’s visual field. The button doesn’t change position, but instead fades in slowly. This grabs less attention, which aligns with the goal of the page: have users see the content before jumping back to the menu.
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. Here are 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:
The first example clearly shows what is happening when you click the ‘Contact’ menu button. The moving bar and scrolling animation shows that the ‘Contact’ page is on the same screen underneath ‘Home’ and ‘About.’ The second example is less clear and may leave the user wondering why a new page didn’t load.
Example 2: Expanding forms
Making forms friction free for your prospects is important. Give them a reason to leave or give up, and they probably will.
As users fill out forms, they will sometimes be shown additional fields. It’s important that the user know the reason for these additional fields.
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 two ways you can use animation to provide instant feedback (and user gratification).
Example 1: Animated shopping cart
Animated feedback can supplement a busy interface by dominating the visual hierarchy when necessary. Moving objects attract a user’s attention, so they can be used to confirm if an action was actually completed.
In this case, motion is used to draw the eye to the top right of the screen where the shopping cart is located. Without this movement, it would be easy to miss the feedback with all of the objects on the page. With this functionality, the site can use a complicated shopping cart and you still won’t miss the purchase notification.
Example 2: 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.
Stripe is a good example:
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.
Animation is a useful supplement to content, and takes on a secondary role in making UX clearer. A site’s functionality, layout, and navigation should be designed for usability. Animation should fill in the gaps. This is an easy conversation to have with your web designer or developer, as CSS3 has made basic animation very accessible.
Interactive, embeddable animation tests, courtesy of Felix Rilling
Investing in animation not only optimizes your current site, but gives you many UX options that you otherwise wouldn’t have, like complicated forms and long, scrolling websites. This gives you more control over the user experience as a whole. Here are some key takeaways:
- Loading doesn’t have to be boring. Just about any site can utilize a skeleton screen or subtle animation when loading its 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.