“The Excessive Use of animation on many websites results in a horrible experience for many Website visitors”
Perhaps you’ve been actively encouraged to include ‘showy’ animation on your website – after all it is an easy sell. Naturally you might be initially impressed by a web designer showing all these wonderful animated ‘slides’ and ‘fades’ you could have on your site. Dare we say, with that “sales pitch” you might be more inclined to use their services?
What you might be less aware of – is how excessive animation can have a enormous detrimental effect on your website.
Animation Devours Resources
All computer-based devices – be that a Smartphone or a Laptop – have limited resources. Recalculating the position of complex elements on a screen, multiple times a second, requires computing power. Many devices just aren’t up to the job.
Your website shouldn’t devour people’s computing resources for the sake of some ‘pizzazz’! But that’s what animation does, and it’s what so many poorly designed websites do.
Poor Web Design – Poor Experience – Poor Results
The consequence for the owner of a resource-hungry, poorly designed website, is that many of those visiting it will have an terrible user experience (UX).
Excessive animation means the site takes too long to appear – waiting for the animation scripts to download, before it can even start. The animations then begin skipping frames and ‘janking’, because the user’s device has limited capabilities. The whole site begins to lag behind the user’s interactions, causing confusion and frustration… the user decides it’s time to leave.
Use Animation to Enhance, Not Hinder, the User Experience (UX)
Animation can actually improve the user experience if used intelligently:
Highlight
As you might with different colours or text sizes, subtle animation offers an additional technique to draw attention to, or differentiate between, elements on your website. A slowly evolving, subtle colour change on a element may help it to stand out?
Prompting
Animation is an excellent option for assisting with any interactive processes you may have on your website. A ‘pulsing’ button indicating to the user what they should do next, helps make the interaction quicker and easier.
Enhanced User Interface (UI) Interaction
Animation can help with making website UIs more user-friendly too.
It’s important, when making dramatic interface changes on your website, to make sure the user understands what has occurred. Instantaneous UI changes can be disorientating.
An example of this, most of us have experienced, is with website navigation menus being hidden on small screens. The ‘hamburger’ icon ☰ is used to indicate a ‘closed’ menu, and on click/touch, ‘slide-over animation’ is used to show the user how the UI has transitioned to reveal the links.
Animated drop-down menus, ‘modal’ overlays and accordion-style ‘slide-to-reveal more’, are other such examples of how animation can help enhance website UIs.
Temporal Feedback
Animation is, by definition, a perfect way to offer temporal feedback. If your website includes any activity where a user must wait for a process to complete, offering animated feedback reassures and helps them to stay patient. A 0% to 100% completion counter, is a widely used example.
Animate to Make Things Better, Not Worse
When we design websites, our mantra is “everything must be justified”. Why have we included that image there? What purpose does it serve? The same should be true when using animation.
This is not to say that aesthetic qualities aren’t important too, they most definitely are (justifiably so). But not to the detriment of usability, accessibility or the user experience.