Website builders and new technology have made it super easy to add animations to your web pages. But just because you can do something doesn’t mean that you should.

When I first learned how to animate page elements, I wanted to animate everything. Make things flow, pop, fade in, fade out, create a dance on my webpage. In my mind, slick animations would make for a luxuriant experience and showcase how edgy my design is and how smart I am.

That theory quickly falls apart when you need to load a page often, and you have to wait for animations to kick in or finish, and everything seems to fly in all directions.

For movement to look good and guide the user, it needs to be choreographed, have a flow, and purpose: it needs to guide the user into experiencing your site. Otherwise, it quickly turns into jarring distractions!

There are two main uses of animation that make sense:

• evoke a feeling or emotion
• help increase your conversion rate that will turn visitors into customers.

The first use is very subjective, and I believe it is more art than science, and it takes study and practice to get it right. Just because you now have a video recorder on your phone does not make you a master motion picture creator. In the same way, just because you can animate things, it does not mean it’s easy to create a coherent storytelling experience. 

The second use, which is to increase conversions, I have much more experience with, and it is easier to measure and get right.

Here are the rules of animation

1. Do not animate anything unless you know it will bring you closer to your goals.
2. The animation must have a purpose. E.g., a blinking notification icon that needs the user’s attention; a sliding in and out navigation panel to will subtly inform the user where to go if they need to find the navigation element; a page transition animation that will hide a slow loading time keeping the user engaged with the page. 
3. The animation must make sense. E.g., text flying in will undoubtedly grab the attention, but it is impossible to read until the animation ends.
4. All the animations on the page must work together. They need to feel choreographed. So not only it’s more pleasing to the eye, but if done well, it shows to the user where everything is and how to navigate the site best.
5. If your user notices the animation instead of the story you are trying to convey, you are doing it wrong.

Some good examples:

• Apple products are great examples of animation done well. Both the website and the user interfaces on their devices. (At the moment of writing, there is no animation of the home page. As I said above, just because they can do it doesn’t mean they should do it!)
• Displaying live data in animated charts can use good animation that makes it easier for the brain to digest what is changing. 
• Navigation hints: new elements (like dialog boxes) slide in from the right, and when you dismiss them, they slide out to the left. New pages fade in. Notifications pop up. Using a consistent system like this allows our brains to quickly figure out what we are looking at just by how it is animated. 

Keep performance in mind.

Animation requires more resources in both bandwidth and processing power. In addition, page speed affects conversion rates. Therefore, if you choose to animate, make sure it will not affect your loading times and works fast enough on older devices.

Resources

• The ultimate guide to proper use of animation in UX
• 7 Animations That Enhance UX and Increase Conversions

Audit your website animations and keep only those that get you closer to your goals.