{{ searchResult.published_at | date:'d MMMM yyyy' }}

Loading ...
Loading ...

Enter a search term such as “mobile analytics” or browse our content using the filters above.

No_results

That’s not only a poor Scrabble score but we also couldn’t find any results matching “”.
Check your spelling or try broadening your search.

Logo_distressed

Sorry about this, there is a problem with our search at the moment.
Please try again later.

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 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 (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...

Graham Charlton

Published 12 September, 2013 by Graham Charlton

Graham Charlton is the former Editor-in-Chief at Econsultancy. Follow him on Twitter or connect via Linkedin or Google+

2565 more posts from this author

Comments (13)

Comment
No-profile-pic
Save or Cancel
Avatar-blank-50x50

Edward Woodcock

The 'Show price' UX feature is negative to user experience because it's actually more a case of 'hide price, until rolled-over'

There are few people to which price isn't a critical element and customers regularly scan over products by price. Having to reveal the price of each item is slow and irritating - especially on a touch device.

On the other hand however, the basket options on rollover is a very nice feature as it facilitates enhanced progression within context of the item.

almost 3 years ago

Avatar-blank-50x50

Ed Mandell

I think you've shown good examples of both where this works well - like the hint in the checkout form and where (in my opinion) it's totally misplaced like the out of stock message or the price as Edward pointed out.

Too often it's just misused as a way to save space on the screen.

almost 3 years ago

Stewart Longhurst

Stewart Longhurst, Director at V1 Digital

How do these "useful examples" translate to a touchscreen device?

almost 3 years ago

Graham Charlton

Graham Charlton, Editor in Chief at ClickZ Global

@Stewart They don't, they are really meant for desktop sites. I've tried these examples on mobile, and they are just replaced by other ways of accessing menus, seeing alternative views etc.

The important thing is that they don't harm the user experience on touchscreen devices.

almost 3 years ago

Avatar-blank-50x50

Bill Walsh

I feel that an implementation like they use to reveal the selling features of golf shoes at The Golf Warehouse site is excellent. When you mouse over the "i" icon the details appear. Mouse away and they disappear. Unintrusive but very helpful. Here's an example:

http://bit.ly/17tq9uy

almost 3 years ago

Graham Charlton

Graham Charlton, Editor in Chief at ClickZ Global

@Bill - that is a good use, thanks. Just the kind of thing I meant - making it quicker for users to see the information than if they clicked a link.

Btw - I bit.ly-fied the URL as it was very long.

Cheers

almost 3 years ago

Avatar-blank-50x50

Rupert Hunting

@Graham Mouse-over effects do not always work well on mobile devices, for example, if you look at main navigation menus at www.cipd.co.uk on an Android device (specifically a tablet), it can be difficult to select a sub-menu item before the page reloads (dependent on site speed).

This is a good example of checking mobile compatibility before implementing mouse-over effects - curiously, seems to be OK on iPads (Safari) but not on Android (Chrome).

Obviously, we plan to correct this subject to resource constraints but our Android user base remains (stubbornly) low as a percentage of visits so hard to justify additional investment.

almost 3 years ago

Avatar-blank-50x50

Rob L

Taking Stewart's point further Graham, I'd raise an accessibility flag - enriching with great rollover etc. features must not damage the touch device UX, but equally they must not exclude information from visitors who can't use a pointing device. I will never forget the truly humbling experience of watching a guy with cerebral palsy fighting through an e-com site using only a special keyboard.

almost 3 years ago

Mark Selwyn

Mark Selwyn, eCommerce and Multi-Channel Retail Consultant

The Landsend "alternate colours" mouseover......a nice feature totally ruined by Photoshopping the alternate colours into most of the images. http://www.landsend.co.uk/Women%27s_Milano_Knit_Blazer/pp/P_23229.html

almost 3 years ago

Syed Shehzad

Syed Shehzad, SEO Consultant at Receptional Ltd

end of the day it is all about website usability, making the experience as best as possible. and mouse-hover does adds a bit of extra flavour to the user experience.
here is good example of mouse hover on
http://www.feather-skin.com/mens-leather-jackets/fashion-jacket.html
where you see the front of the jacekt image and with the mouse-hover it shows the back of the same jacket. which I think is a brilliant feature.

almost 3 years ago

Avatar-blank-50x50

Emma Benton

This webpage has a neat hover effect on the products:

http://sokult.com/2-chaussure-homme

- Products rotation
- Sizes availability with direct add to basket

almost 3 years ago

Avatar-blank-50x50

Depesh Mandalia, Head of Digital Marketing at Lost My Name

Personally I think mobile is the biggest consideration here - we've seen data across e-commerce sectors. Though US based, I've found these stats fairly consistent in the UK: http://www.getelastic.com/wp-content/uploads/how-mobile-is-changing-business-lg.jpg

Not wanting to turn this into a Mobile debate as it is a UX consideration but I do think there are 2 sides to this. Some may logically decide to not include mobile in their first iteration of a mouse over solution (80:20 rule) and then to implement a mobile version if the desktop experience proves successful. This is sound thinking however if desktop doesn't work, it doesn't prove that mobile wouldn't work.

Others may have just neglected Mobile because proportionally sales are lower than desktop. This is more dangerous if you've not modeled the sales funnel to include mobile AND desktop usage.

Others still may not think that the current desktop execution would actually work on mobile. Certainly not on devices smaller than a tablet.

I really like the thought process behind the Sears design: http://www.sears.com/clothing-men-s-jeans/b-1023646 which is a big step forward from other examples I've seen to speed up the browse process. There are some UX improvements to be made such as how the Quick View button appears on hover as well as load time but that would just be picky....

almost 3 years ago

Avatar-blank-50x50

Marcus Law, Marketing Manager at SLI Systems

Snow+Rock have a really slick Quick View feature on their search results page, check out:
http://search.snowandrock.com/search#w=jackets

This allows visitors to see more information about products - features, sizes, colours etc. without having to move through to the product page. And you can even add to cart from the Quick View which is a nice user experience.

They also have a hover over pop up or what they call a "stock checker". When a visitor hovers over "view sizes" the in stock and out of stock sizes are presented allowing people to quickly find out if their size is in stock. There's nothing worse than spending time selecting the product you want only to find out its out of stock when you add to cart!

almost 3 years ago

Comment
No-profile-pic
Save or Cancel
Daily_pulse_signup_wide

Enjoying this article?

Get more just like this, delivered to your inbox.

Keep up to date with the latest analysis, inspiration and learning from the Econsultancy blog with our free Daily Pulse newsletter. Each weekday, you ll receive a hand-picked digest of the latest and greatest articles, as well as snippets of new market data, best practice guides and trends research.