Improve user experience with hover animations
By dictionary definition, hovering is ‘to remain poised in one place, in an uncertain manner’. Generally speaking no one likes a hoverer (especially in public places), unless of course you’re hovering online and making the most of one of this year’s key web design trends ~ hover animations.
With the increased popularity of tiled wireframes, hover animations are really coming into their own, allowing browsers to hover their mouse over various elements of the on-screen design to reveal more information. All-in-all it makes for a great user experience, optimising the benefits of both images and key messages in what is essentially the same space.
Hovering on the go is a bit of a no-no
Hover animations may be one of this year’s digital design must-haves but before you start demanding more marketing budget, stop and ask yourself this question:
“Are my customers sat at their desks when they browse my website?”
If the answer is yes, then great, hover animations could be the breath of fresh air your website needs. If the answer is no, then it could be back to the drawing board for you because not all hover animations are suitable for touch screen devices.
Mice hover, fingers scroll
As a general rule, hover animations only work when the person is using a mouse, making it a great design choice for businesses targeting other businesses. This is because chances are, your customer (or potential customer) is the person looking at your website will be doing so from the comfort (or confinement) of their office.
If you’re targeting consumers then there’s a fair chance they are browsing on a smart phone or tablet, which means concealing important information or navigational options behind hover animations will limit how effectively they can move around your site.
Routes around this issue are in development, with some iOS devices now offering the hover view momentarily before the screen changes, but for now at least, hover animations are best left for desktop viewing.
Here are four places we think hover animations can really bring a website to life:
- Homepage tiles: Use snippets of information from further within the site to entice readers
- Portfolios: Display company logos or work as well as written information in the same spot
- Product pages: Showcase colourways, size options, complementary products or action shots
- About us: Switch from friendly staff shots to punchy biogs and back again in a flash