Best Practices for mouseover effects on ecommerce sites

Mouseover (or hover) effects can be a useful way for sites to convey information quickly when used well, and can aid conversion. 

Of course, such things should be tested for effectiveness, but there are some good examples of their use on ecommerce sites.

Here are ten examples, please suggest any other good ones you have seen…

Activating drop-down menus

Large drop-downs, such as those used by John Lewis, are often activated on mouseover. This does make it easier for customers to see the various sub-categories on offer, but the timing and sensitivity of menus is key for good UX. 

For example, menus that vanish too quickly or too slowly when the cursor moves away can be an annoyance.

In this case, John Lewis’ drop-down is big enough to allow users to easily move the cursor around within it:

Show add to basket options on mouseover

The Amanda Uprichard site shows options for selecting size, colour and quantity when you move the cursor over preview images.

This provides a useful shortcut for people to add items straight to their shopping baskets and bypass the product page.

However, it does make it slightly harder to access the product page, as users cannot click the product image to do so, and instead have to click the product title.

(Click on the image the view this effect on the site).

Scroll through product views

On Bottica, hovering over product images on results / category pages triggers multiple product views, so shoppers can gain a better idea of the product with little extra effort.

Show price

Annoushka shows the price and some additional detail when you hover over product images.

Showing the back of dresses

On lillypulitzer.com, you can see the back of the dresses by hovering over the preview image:

Show alternative colours

On Land’s End, you can quickly view the item in different colours by moving the cursor over the one you want to see.

Out of stock messaging

If you hover over a size and colour which is unavailable on House of Fraser, it will produce a message on the product image:

Zooming into product images

Here, the Lego site automatically zooms into product image when you move the cursor over them:

Showing basket contents

Again on House of Fraser, hovering over the shopping basket links produces a pop-up showing a summary of its contents and cost:

It also disappears as soon as you move the cursor away, so it doesn’t interfere with the user experience. Very handy.

Use in checkout forms

Here, OfficeMax uses a hiver effect for users to quickly see information

This is a good use of hover, as it allows users to quickly access the information, and avoids distracting them too much from the checkout form.

“For a free consultation with a member of our team call us now on +971-544177921  or  send query via this link / email . “