Animation is an easy way to grab user’s attention. Advances in programming make it easy to create graphics without bogging down page speed.
By Matt Shealy
But like every element of your website, animations used inappropriately will send visitors elsewhere.
Check out the following best practices for including video, motion graphics and other types of animation on your site.
Follow the basic principles of animation
Disney illustrators Ollie Johnston and Frank Thomas published the definitive volume on animation in the 1980s. Though web UI animation didn’t exist then, this book inspires innovative web graphics today.
The principles are:
- Squash and stretch
- Anticipation
- Staging
- Straight Ahead Action and Pose to Pose
- Follow Through and Overlapping Action
- Slow In and Slow Out
- Arc
- Secondary Action
- Timing
- Exaggeration
- Solid Drawing
- Appeal
Incorporate Loading Bars
Loading bars show visitors what percentage of your site is already loaded. These progress indicators help increase perceived loading time. Loading bars inform users of when they begin interacting with your site, but not the actual time the site completes loading.
The key to success with loading bars is to include the percentage of the page loaded. Otherwise, users will grow impatient and click elsewhere. This example by Samuel Melvin combines creativity with the information website visitors need to stick around.
Don’t go it alone
Animation isn’t as easy as it looks. Instead of trying to create your own animations from scratch, hire an animation designer for your next project. Look for pros experienced in CSS and video. Graphic designers often don’t have the technical chops for animation projects.
Show menu selections
When users have lots of options to choose from, animation keeps them from forgetting what they’ve selected. This enhances user experience and keeps them engaged.
The filters on this mobile app prototype created by Dribbble artist Marina Reznik change colors and include green checks so the user knows which options they’ve selected.
Text-heavy pages should include less animation
Animation naturally attracts the eye and distracts would-be readers. Stay away from looping videos or adding several animated elements on a page with lots of text. A better option is to use animations that begin when page visitors mouse over the image.
If your page includes several blocks of text, a flashing arrow after each block lets users know there’s more good stuff below.
Use animation to onboard new website users
Today’s distracted masses are difficult to engage. If you have a web application, it’s critical to hook users during the onboarding process by teaching them how to start using your app right away.
Animation allows you to walk new app users through creating their first interaction with your product. Experts state these small wins provide users incentive to continue using an app.
For a stellar example of highlighting and contextual animation, Pinterest gets new users hooked right away by teaching them the foundations of pinning or walking them through creating their first pin.
Wrapping it up
Web UI animation is an easy way to take a website from drab to fab. With just a few well-placed contextual clues, you can boost conversions and keep visitors from bouncing.
Matt Shealy is the President of ChamberofCommerce.com. Chamber specializes in helping small businesses grow their business on the web while facilitating the connectivity between local businesses and more than 7,000 Chambers of Commerce worldwide.
Loading bar stock photo by Mehemmed Memmedov/Shutterstock
