Web design: Improving UX through animation
Animation is a great tool for improving the user experience of a website. When used wisely of course. Back In the days of flash we quickly learnt what was overkill. But flash also took us beyond static HTML so we could learn that with moderation and purpose, even the most subtle animations can make a website feel more engaging and intuitive. Here’s a few examples of how we like to utilise it:
We’re all familiar with loading animations - you know, that rotating circle. These communicate that a website is indeed loading the page, and to hold tight until it has finished. On our site we utilise a preloader that appears before reaching the home page. The purpose here is to preload all the content (and yes, animation) so it can be presented uniformly. We use animation so this experience is visually interesting, not tedious, and we also take the opportunity to give people a heads up on what we do.
This is perhaps the most useful place for animation on the web - helping inform the user that their action (clicking, for example) has been registered. Whether it’s a product dropping into a shopping basket, or a button morphing into a thumbs up, we are drawn to motion, and pretty much expect it as a response from our interfaces.
Animating page transitions can help guide a user around a website interface. When page content simply changes instantaneously, you risk users losing context of what they’re viewing. Animating page transitions makes it obvious to users where they started and where they ended up. They’re particularly a handy feature on smaller touch devices.
Shits and giggles
The primary reason for using animation in web design should be to improve usability. But of course it is also a great way to have some fun, to inject life and personality to an interface, contributing to the overall experience. On our homepage we use animation to inject life into the story we're telling. But even subtle nuances - like the cool animation of the button below, can put a smile on someone’s face.