Product Lists: Display Extra Information on Hover (76% Don’t)

An extra layer of hover-enabled textual or visual information can drastically improve the user’s ability to scan and evaluate product lists.

Our recent usability tests and benchmarks reveal that 46% of top US e-commerce sites display too little product information in their product lists for users to accurately evaluate if a product page is worth exploring or not. 64% display information so inconsistently in the product list that it’s impossible to make even a basic comparison of the products. And 32% of the sites selling visually-driven products use a thumbnail size that is “inadequate” for most users.

A few sites actively mitigate these issues with a simple technique: utilizing the mouse hover state to display additional information or images – right within the list item, when the user moves their cursor over it. During our usability study of 19 leading e-commerce sites, this extra layer of hover-enabled textual or visual information was observed to drastically reduce wasteful “pogo-sticking”, where the user heads back and forth between the product list and product pages only to discard irrelevant products.

Displaying additional list item information on mouse hover therefore leads to less time spent on irrelevant products, and more time spent with relevant ones – resulting in an overall higher rate of success at the tested e-commerce sites adopting this design. Clearly this benefits both users and business. Yet, our usability benchmarks reveal that just 6% of e-commerce sites display additional textual information on hover, and only 18% show additional images on hover. In other words 76% of e-commerce sites don’t utilize this powerful hover state.

In this article we’ll therefore share e-commerce usability test observations from our Product List research on displaying additional list item information in hover. We’ll explore some of the many usability issues that additional hover information was observed to solve, outline the 5 types of hover state implementation that perform well during testing, and lastly discuss how this should be handled on mobile and tablet touch devices where there is no hover state.

Product List Design is a Balancing Act

From the usability test sessions it’s clear that the product list is essentially a balancing act: each list item should display sufficient information for the user to properly screen and compare the products to one another (to determine which items are of relevance to them). Yet, the list items shouldn’t display so much information that the product list as a whole gets cluttered and cause users to lose their overview of the options available.

Insufficient list item information increases the likelihood that users will overlook relevant products, while excessive information makes it difficult for users to get an overview and can make the page appear intimidating. It’s not a matter of “less is more” but rather “just enough is more.”

This is a screengrab of a test subject browsing Macy’s – she got frustrated because she couldn’t see the coats only (i.e. without models). The test subject felt the models distracted her from the clothes and made the items difficult for her properly inspect. As a consequence she ended up opening the product page of numerous items that she immediately discarded once she saw their “coat only” images.

In practice we observe both during usability testing and benchmarking that most sites opt for a “clean looking” list item design. The problem is that this very often leads to too little information being available in the product list. It’s a classic case of false simplicity as it actually makes it more difficult for the user to decide which products to explore.

During testing, too little visual or textual information in the product list was observed to lead the test subjects to extensive “pogo-sticking”. Pogo sticking is when a user jumps back and forth between the product list and the individual product pages to learn the very most basics about a product (product types, the key spec, or visual impression). In this tedious process the user often only stays at the product page for a few seconds before realizing the item is completely irrelevant to them.

In practice, this leads users to spending the majority of their time on completely irrelevant products, and often cause them to overlook relevant items – something we observe time and against during our research studies. Unsurprisingly, after 3-15+ minutes of looking for a needle in a haystack, fatigue sets in and many of the test subjects simply give up and abandon the site.

This product list at Rakuten bloats each list item with a high number of product details and repetitive product information, making it difficult for users to establish an overview.

Displaying too much information in the product list is a much less common problem but that too is an issue when it does occur. Excessive list item information can make the page seem overwhelming and make it difficult for users to get an overview of the options available to them because the product list becomes difficult to scan.

In short: Displaying too much textual or visual product information directly in the list items can clutter the product list – yet at the same time extra information can clearly also provide the user with helpful product insights that are essential to the product finding process. As mentioned in the beginning of this article, it’s a balancing act. Luckily, the mouse hover state can help us strike that balance gracefully.

Display Secondary Images and Info on Hover

During the usability test sessions, when sites displayed an alternate thumbnail or secondary product information on mouse hover, the subjects had a much easier time screening and identifying relevant items in the product list.

Notice how IKEA reveals additional information and images for the hovered list item, allowing them to provide the user additional product insights without cluttering the entire product list (i.e. all the un-hovered items on the page are very simple with just a thumbnail, price, and product name / type.

The big benefit of revealing additional information on mouse hover, is that it allows you to keep the default un-hovered state of the list items fairly simple. The default product list can thus be designed for optimal scannability (which helps users “screen” the list), while the hovered item can be optimized for product insights (which helps users inspect and identify relevant items that appear relevant to them during the “screening”).

This provides us with the best of both worlds: the user is presented with a more manageable and less intimidating product list up front. Yet, because additional information is available on hover, the user also avoids having to bounce back and forth between the product list and numerous product pages just to figure out which products are relevant to them.

But what information and images should we show in the default view, and what should we show on hover?

Note: While “Quick View” features might appear to be an equally good solution to these issues, our usability test sessions show that they are highly problematic, as previously examined.

5 Types of Information to Show on Hover

1) Visually-Driven Industries

When testing e-commerce sites in visually-driven industries such as apparel and home decor, one of the best-performing combinations for showing additional content on hover, was displaying both a thumbnail of the product in a “use context” as well as a “cut out” version, showing the product on a blank background. This combination helped the test subjects easily imagine how the product might look in a real-world scenario (the “use context” version) while also allowing them to inspect the product isolated from any clutter (the “cut-out” image).

“This is good. Sometimes it can be really difficult to see how it looks on with a jacket”, a subject explained at H&M, where jackets are shown in cut-out images by default, but then on hover are displayed using a contextual image with a model showing a complete outfit.

Cut-out images are good for comparing one product to another, while contextual images can “sell” the products on their aesthetics, mood and associated lifestyle. Having both in the list item design, as seen here on Crate & Barrel, performed particularly well during testing of sites selling visually-driven products.

The test data didn’t show any conclusive evidence to suggest which one of these two image types should be displayed be default and which should be relegated to the hover state – both variations proved to perform well depending on the context. We did find consistency to be key. So make sure that all list items display either “cut out” images or “use context” images by default and then switch to the opposite when however – never mix the two, as the lack of consistency caused great frustration for the test subjects.

2) Textual Product Information

Besides showing additional images in the list item (i.e. making extra visual information available on hover), showing additional textual product information on hover increased product list performance as well. In particular spec-driven products will often have long lists of key features and specs, which can be candidates for displaying as secondary hover information. The possibility of having a relatively “clean” default state is much more achievable when secondary product specifications can be relegated to a hover state.

Notice in this mock-up of Rakuten, how showing additional product information on hover can achieve a better balance between establishing an overview of the list as a whole versus doing an initial evaluation of the most interesting products.

When testing IKEA.com their hover list item design performed very well with the subjects, utilizing both a combination of showing additional specs such as product measures, and showing additional product variation thumbnails.

Displaying secondary textual product information is a great way to strike the balance between simple and clean product lists while still giving users the option to perform an initial screening before decided to visiting the product page or not, as the default un-hovered list item can be kept simple and clean with the hover-state offering up additional information about key product attributes.

3) Product Variations

If multiple variations of a product exist, such as a different colors, materials, patterns, sizes or styles, it is highly advisable to indicate this to the user at the un-hovered default list item, so that they are aware that different variations can be found at the product page. (Typically this is best be done by providing information scent like “6 sizes available”, or for colors by displaying colored dots or swatches.) However, the hover state can be utilized to elaborate upon which types of variations the user will be able to find.

In the default non-hovered state at Nike, users are told that multiple product variations exists, but once an item is hovered, an image gallery appears with thumbnails of these additional variations – making it much more likely that users will visit the product page even if they aren’t keen on the variation shown by default.

For visual variations, the indication of product variations can be expanded to show thumbnails of the other variations. This gives the user a much better idea of what the other variations look like. This can be critical for variations with major aesthetic differences where it may make the difference between the user discarding the product as irrelevant or worthy of further exploration.

For non-aesthetic / textual variations, the summary could be expanded to show the actual variation values. So for a pair of pants a summary like “6 fits available” could be expanded into “Available in Slim Fit, High Waist, Low Waist, Skinny Fit, Regular Fit, and Loose Fit”.

4) Repetitive List Item Elements

Some product list features are ideal candidates for being served as secondary hover information. This includes repetitive buttons such as “Add to cart” and “Compare” – after all, users can’t click two buttons at the time. Displaying these types of features on hover therefore helps reduce the visual clutter in the product list without limiting list item functionality.

Gilt only display the repetitive “Add to Cart” feature on hover. Permanently showing such repetitive elements can significantly clutter an interface and remove focus from the actual product information. For example, notice how much larger thumbnails there’s room for when the “Add to Cart” element only has to appear on hover.

An argument could be made that hiding these features lowers discoverability. However, this has yet to occur as an issue during our usability tests, and indeed it seems logical that users will very quickly notice these features as they appear on any list item that is however which tends to happen organically as the user opens and navigates the product list.

A bit surprisingly, we observed that displaying an additional thumbnail in certain spec-driven industries can also improve product list navigation by providingcompatibility-related thumbnails on hover. For instance, during testing the subjects were observed to explore sleeping bags based on “how warm they looked” and browse laptop adapters based on which one looked like it would fit their laptop.

A good example is camera bags, which can beneficially display both a closed outside view of the bag (to showcase the product aesthetics), along with another “compartment” view where the bag is open with a camera placed inside it (i.e. the compatibility-related thumbnail, showcasing the “fit” of the product). This can provide users with an idea of how the product will perform in its intended use.

In particular for technical products where compatibility aspects typically require extensive domain knowledge, users often rely on close up images of the comparability aspects. Apple recognize this behavior and therefore have a secondary compatibility-related thumbnail for many of their accessories, as seen here where a close-ups are displayed for the various plugs and connections of various adapters.

At eBags a subject searched for “laptop bag”. However, it was not immediately obvious to him why these bags were deemed relevant. Only as he opened their product pages could he see the laptop compartments, forcing him into extensive pogo-sticking. These images would have been ideal candidates for an additional “hover thumbnail”. (Indeed, after our testing completed, eBags has adopted the approach of displaying a secondary compatibility-related thumbnail on hover.)

Even strict compatibility relationships can also benefit from an additional visual layer as users will often try to determine compatibility based on product visuals. Especially close-up images of plugs, ports and connections can help users in doubt of what the correct technical name is for their needed connections. Additional thumbnails can provide these users with visual reassurance of compatibility. Systematically including and tagging compatibility thumbnails can be a part of a larger compatibility database structure.

Don’t Go Too Far

While these hover effects proved to help out users greatly, and the product lists without such features (currently 76% of sites) generally caused a lot more needless back and forth, it can be taken too far.

While it might be tempting, especially in visually-driven industries, to push almost all text into the hover state, the usability tests showed that this can cause severe usability issues. When basic product information is relegated to a hover state, it makes it very difficult for users to quickly glance over the product list and gauge the relevance of each product.

Ann Taylor has taken things to the extreme by hiding all textual product information (including price!) in the default state, only revealing this information on hover.

When vital product attributes are permanently displayed in the product list, the user can simply glance over the list and make basic comparisons. Whereas if, say, ‘Price’ is relegated to the hover state as secondary production information, the user will have to move their mouse over each and every product in the list to learn something as basic as its price, memorizing the position of all the items that of just the slightest interest.

How About Touch Devices? (Smartphones, Tablets, etc.)

On touch devices there is no hover state. So how do we deal with this in our smartphone and tablet designs?

The test data in our large-scale studies on Mobile E-Commerce and Product List usability suggest that secondary data simply shouldn’t be shown in the mobile product lists. It actually feeds back into the “don’t go too far” principle: that is, make absolutely sure you only relegate secondary information to the hover state.

Any basic product information must be permanently visible in the list item or the hover-effect ends up doing more harm than good. The extra hover information should thus be seen as “bonus” content that can help provide the user with even more information about the product but it shouldn’t be essential to their browsing and basic interpretation of it.

Now, returning to mobile site designs, trying to display this “bonus content” leads to one of two issues:

  • Included in Default View – If the secondary information is included in the default view in mobile product lists, it often ruins the last shred of already thinly stretched overview the user may have on mobile devices when browsing a product list. Including “nice to have” content simply make the list items grow much too large, meaning very few of them will fit in the user’s viewport, which in turn results in a loss of overview. In practice, we observe that navigation issues arise when a list item takes up 50% or more of the viewport height.
  • Revealed on Tap – An alternative that also performs poorly is having the first “tap” on the list item invoke the “hover design”. This breaks the user’s expectation of how a product list works – the user expects to be taken to the product page. It’s basically a variation of a “quick view” feature and therefore tends to run into the exact same issues of adding a significant amount of conceptual complexity to the product list hierarchy and list item hit areas, which we found to be very difficult for users to understand even in a desktop environment.

Secondary hover information should be treated as a “progressive enhancement” of the list item design. On capable devices (environments with mouse hover) users are served an interface which also include secondary information. On devices where the context doesn’t allow for it (no hover and small screen) we remove the additional layer of information – i.e. on touch devices tapping the list item once will take the user to the product page. (This is similar in principle to what we examined in our article on Responsive Upscaling, where users on large desktop monitors are served an enhanced interface.)

Note: Force Touch and similar new technologies are interesting as they may resolve the lack of hover, and can potentially be used to reveal the same secondary product information – although it may take years before we see such technologies fully saturate for the majority of the user base.

Summary: Display Secondary Information on Hover

Having an extra layer of hover-enabled textual or visual information can drastically improve the user’s ability to scan and evaluate list items.

During usability testing extra hover information helped the subjects spend less time pogo-sticking which in turn became more time spent on relevant product pages, which consequently lead to a higher rate of product finding success. Alas, our benchmark reveals that only 6% of e-commerce sites display extra textual information on hover, and only 18% show additional images on hover.

Secondary hover information can be particularly helpful for:

  1. Visually-driven products – Consider showing both a “cut out” thumbnail and a “use context” image as this allow users both the direct visual comparison and the aesthetically richer experience. (Caution: be consistent in which image type is displayed by default).
  2. Spec-driven products – Additional textual product information can be displayed to provide further details about the hovered item. This will typically be product specs not already in the default display, such as product features, materials, and dimensions, whereas basic information such as brand, product type, and price, should typically already be in default list item view.
  3. Product variations – If an item exists in multiple variations, consider showing one or more of the other product variations. Especially visual variations are important as users may otherwise ignore items when only a single default image is available for inspection.
  4. Repetitive list item features – Consider moving static list item features which are repeated for every single product in the list to the hover state, like “Add to Cart”, “Save to Wishlist”, “Compare” etc. This can significantly improve the signal-to-noise ratio in the product list.
  5. Compatibility-related thumbnails – For compatibility-dependent items, consider having an additional close-up thumbnail highlight the various compatibility-related aspects of the product.

And again: remember only to relegate secondary information to the hover state – going too far will cause more harm than good, and the information also won’t be available on devices without a hover state (touch screens). Treat it as “bonus information”, a progressive enhancement for devices where it can be suitably implemented.

This article presents the research findings from just 1 of the 93 UX guidelines in our Product Lists & Filtering study — get full access to learn more about the 92 other findings required to create a “State of the Art” user experience for product lists, filtering and sorting.

Post a comment or Share:

User experience research, delivered twice a month

Join 17,000+ readers and get Baymard’s research articles by RSS feed or e-mail:

Due to spam, you need JavaScript to do that.

(1-click unsubscribe at any time)

Related articles

More ‘Product Lists & Filtering’ Research

Free Research Content:

Products & Services:

All Research Topics

Stomme poes October 27, 2015 Reply to this comment

As a desktop keyboard user, if hover can show me more info then often I want this to appear on :focus as well. Using the same styles as hover and making it obvious I’m only an Enter-key away from going to the full product page.

However when it comes to excessive hover-available information (see the product-variants-hover on fonq.be), making each of those focusable adds too many tabs to get anywhere. No more than 1 tab per product, let the variants and other extras become available on the full product page.

Jamie, Baymard Institute October 27, 2015 Reply to this comment

Excellent point, Stomme poes, the secondary hover information should definitely be displayed in the :focus state as well. The “1-tab-per-product” suggestion seems very sensible too.

Ivo Bosma October 27, 2015 Reply to this comment

Very well written article, with some usefull insights. Thank you for sharing!

Jamie, Baymard Institute October 27, 2015 Reply to this comment

Thank you for the kind words, Ivo Bosma.

Greg Randall October 28, 2015 Reply to this comment

Hi,

This is a great article covering a topic I deal with almost weekly with my large retail clients. I 100% agree with your comments RE quick view and understand the dangers of pogo sticking.

Where we will agree to disagree is the value brought on by the use of the hover states. I challenge its value for the following reasons:

Mobile. Consumers are in different information gathering/buying mode on smartphones and will find pressing a thumbnail twice to view a product detail page cumbersome and frustrating. This increase in physical effort will draw more frustration than pogo sticking. You raise this as a concern, but in my experience this “double clicking” is more problematic than the potential risks of pogo sticking.

Filters (for all devices). Retailers are improving their filtering, and consumers are becoming more used to applying filters to whittle down their product selection. When consumers have buying intent and can reduce the products to select from, pogo sticking is no longer an issue because consumers are faced with a relevant selection of products. Under this scenario retailers want product detail page views.

Site Search. The same comments for filters can be said for site search. Its use continues to be dominant and the use of long tail terms is also growing (thanks to Google). If the site search is doing its job (another debate) the results should be reduced to a manageable/relevant selection meaning the consumer should be viewing product detail content from the site search results page.

Product detail pages are the selling pages. With over 30 page elements all tasked with merchandising and closing consumers, this is where all the “selling magic” happens. Having too much info at hover may deter product detail page views. It is very difficult to merchandise products at the product list level. Showing product variations or different product views in a thumbnail suppresses the opportunity to properly merchandise products especially when case studies have proven correlations of product image size and conversion rates on product detail pages.

What information to put on hover. Though your article does a great job of guiding retailers on the type of content to display on hover, most retailers get this wrong. They are unsure of what content is required to entice consumers into the product detail page, and thus do more harm than good with hover functionality.

Page load speed. However functionality threatens page load speeds for these pages, in particular smartphone screens. The potential delays in page load and the delay in displaying hover content risks a consumer’s experience.

My advice to retailers when we get into this discussion is to understand their customers and the content they need to see at all stages of their journey. This understanding dictates the display of content at varying stages and will define the content to be displayed at product list view making sure it is enough for consumers to make the right decision to click through to product detail pages.

I hope people who read my comments feel I am not having a go at the article. That is not my intention. It is these topics and these conversations which help retailers lift their “digital game”. Keep up the great work guys. Really enjoy the insights you bring.

Greg

Christian, Baymard Institute October 28, 2015 Reply to this comment

Hi Greg, thank you for commenting.

Tapping twice on mobile: Yes we completely agree here, the article states that this doesn’t work and should be disabled entirely for all touch devices. I.e. a single tap opens the product page. Sorry if this is was not completely clear, I’ve revised the article slightly now).

Search + filtering: better search and filters improve the relevance of the products displayed, but all products will not be equally relevant, so users will still need to do a basic evaluation and comparison when deciding which items they should open for full/further exploration.

Furthermore, what we’ve observed when testing sites with the described hover states is that the time spent on the product page goes up (not down), as the only the relevant product pages are explored.

(Note that we’ve previously documented that in particular the search and filtering experience doesn’t perform as good as one should think – in fact search is down right poor and often misalign with user behavior even when only looking at very large retailers, see: http://baymard.com/blog/external-article-state-of-ecommerce-search and http://baymard.com/blog/external-article-state-of-ecommerce-filters

Bruno Girard October 28, 2015 Reply to this comment

Hello,
your article is interesting when making proposals. I really appreciate your research as a UX designer. On a accessibility expert point of you, I would say that compliance to WCAG 2.0. is seriously harmed. Maybe you should get in touch with a Web accessibility expert in your country or even online.

Especially, if a content is available on hover only then you cannot comply to criteria 2.1.1. where “All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user’s movement and not just the endpoints.” For the images, we by combining together the text alternative of both states of an image, we can pretty much comply to criteria 1.1.1 for non-text content. But if you toggle information of a container on hover, this is really really bad. The idea of using thumbnails well implemented is much better ;). Be careful also not to created change of context when the focus is given to an element.

Good luck,
Bruno

Luiz Centenaro October 29, 2015 Reply to this comment

Thanks for this research Christian. Definitely something I’ll start testing on eCommerce sites. Thanks for brining up the point about mobile, though it would be very interesting to run some mobile specific experiments on category pages.

Fred November 3, 2015 Reply to this comment

What a great, in-depth article, Christian. Great work! From what I can tell, it seems that adding a “more info on hover” feature to literally any e-commerce site would be in their best interest. I’m struggling to envision a site where it would be a detriment!

Steven Wakabayashi May 20, 2016 Reply to this comment

Amazing article! Great addition to the previous article on quick views.

I’d be curious to compare these hover states to page expansion functionality (as seem on Google Image search previews).

Post a comment!

Close overlay