Website animation has become commonplace these days. And there’s a good reason for that:
Because it works.
But have we reached a point where there’s too much animation on the web? Or, rather, are we moving into a phase where animation is longer as useful to us as it once was?
In the following guide, we’re going to debate the value of animation in web design and lay down some ground rules for animation going forward.
The pros and cons of website animation
Every animation choice we make — from the slight “wiggle” of a button to a full-blown animated hero image — directly affects our visitors.
Let’s have a look at all the reasons why animation can be great for a website and its visitors’ experience as well as some reasons why we should be more careful about using it:
The pros:
More engaging than static content which can help drive more conversions
More effectively calls attention to important elements and messages
Succinctly tells a story in a small space
A multitude of animations means many different ways to surprise visitors
Unique animations can improve a brand’s competitiveness
The cons:
Ill-timed or poorly designed animations become distractions and roadblocks
Too much motion can slow down the loading of a web page
Too many animations prevent visitors from knowing which parts of the page to focus on
Website animation doesn’t always translate well to mobile, which leads to poor experiences
Can present accessibility issues for disabled or elderly visitors
Tips for designing website animation the right way
Clearly, animations in web design range from the effective to the distracting. That said, I don’t believe it justifies doing away with website animation altogether. It just means being more mindful of how it’s used.
Here are some things to keep in mind as you design with animations in the future:
1. Start by designing them on mobile
Over the last couple of years, more and more visitors are searching the web on mobile devices, and, consequently, the mobile version of a website has become an important part of the user experience. In tandem, Google has repeatedly stated that we need to design websites with a mobile-first approach.
So, what happens when you animate a website with only the desktop user in mind?