10 useful examples of mouseover effects for 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... 

Pros and cons

The idea is to reduce the effort that the shopper has to make to view more product details, access key information, or see different views. 

According to Digital Juggler's James Gurd: 

It can be a great idea, if executed well. It reduces click paths as you don't have to go to the next level of the site if you know what you want. I'd always advise testing though to see if it aids conversion or puts people off.

Ecommerce expert Depesh Mandalia:

It depends on the type of product but for me if it helps to scan multiple products quickly and it makes sense to do so like this then it's a winner. Clothing is definitely a great use.

Think about the inverse analogy of going into a clothing store and having to pick the item up off the rail to take it to a separate viewing area away from the aisle you are in in order to view the apparel in more detail or read the care label or price. You then decide to look at the next dress and so go back to the previous aisle to pick up another item to view in more detail. How annoying is that? 

I use this analogy in particular because even i still prefer to view items of clothing in a store or shopping centre because of the speed at which I can scan aisles or racks, pick out items of interest, take a quick peek, put them down and view other items. I find this slow and cumbersome online.

There are potential drawbacks though. Pop-ups of any sort can be an annoyance for users, while sites should consider how these effects work when customers are using tablets or mobile devices. 

Ecommerce consultant Dan Barker points out some other things to be careful of: 

It's also worth thinking about hover effects from a speed point of view too, particularly if your category/search pages are already slow. It's worth being careful to implement these in a way that doesn't slow the page further.

I worked with a site which was showing reviews on rollover and one doing the same with price. Users actually found that very frustrating - moving between different products and trying to remember what the review ratings/prices were while mentally comparing products - a bit like that 'pairs' card game.

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 hiver 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 (thanks to GetElastic for this): 

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. 

What do you think? Do hover effects work for you, or are there drawbacks? Seen any better examples? Let me know below...