The primary purpose of the Product List is for users to easily and accurately determine which products to investigate further. When information is lacking, inconsistent, or inadequate, then the users will experience a plethora of usability issues, which can ultimately lead to site abandonment.
While there have been some improvements since we first started benchmarking Product Listing implementations at 60 top-grossing US and European e-commerce sites back in 2015, the issues are still apparent.
Our most recent usability tests and benchmark reveal that:
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. Our usability testing consistently shows that this extra layer of hover-enabled textual or visual information is observed to drastically reduce users’ wasteful “pogo-sticking”, where the user heads back and forth between the product list and product pages only to discard irrelevant products.
We consistently observe that displaying additional list item information on mouse hover 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.
Yet, our benchmark reveals that just 3% of e-commerce sites display additional textual information on hover, and only 28% show additional images on hover (up from 18% in 2015). In other words, around 70% of e-commerce sites don’t utilize this powerful hover state at all.
In this article, we’ll present our large-scale e-commerce usability test findings on displaying additional list item information and thumbnails on hover, in particular:
From our 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 causes 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.”
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 users to extensive “pogo-sticking” — when a user jumps back and forth between the product list and the individual product pages to learn the very 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 users simply give up and abandon the site.
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.
During the usability test sessions, when sites displayed an alternate thumbnail or secondary product information on mouse hover, the users had a much easier time screening and identifying relevant items in the product list.
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 upfront. 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?
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 users 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).
The test data didn’t show any conclusive evidence to suggest which one of these two image types should be displayed by 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 users.
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.
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 deciding to visit 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.
If multiple variations of a product exist, such as 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 done by providing information scent like “6 sizes available”, or for colors by displaying colored dots or swatches (see our article on How to Implement Interactive Swatches on Mobile Product Listing Pages). However, the hover state can be utilized to elaborate upon which types of variations the user will be able to find.
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”.
Some product list features are ideal candidates for being served as secondary hover information. This includes repetitive buttons such as “Add to cart”, “Wishlist”, and “Compare” — after all, users can’t click two buttons at the time. Nonessential list item info generally includes site policies (e.g., “Available Online”) or product deals (e.g., “On Sale” ) and is added to inform users or entice them to make a purchase. Additional examples include “New Arrival”, “Free Shipping”, “Home Delivery Available”, “Click and Collect Available”, ”Pickup Free”, “90 minute delivery” “Buy Online”, “Ship to Store”, etc.
Displaying these types of features on hover therefore helps reduce the visual clutter in the product list without limiting list item functionality.
On desktop sites, there’s generally no need to permanently display nonessential interactive elements like “Add to Cart” buttons, “Save” features, or “Compare” checkboxes. Instead these can all be shown when users hover the individual list item.
In addition to reducing the clutter in the product list and making it easier to scan, saving nonessential elements for hover on desktop also has the advantage of drawing users’ attention to the nonessential elements at the exact moment when they might actually be useful — when a user is indicating their interest by hovering a list item, and thus may want to select it to compare, add it to the cart, or save it to a wishlist.
A bit surprisingly, we observed that displaying an additional thumbnail in certain spec-driven industries can also improve product list navigation by providing compatibility-related thumbnails on hover. For instance, during testing the users 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.
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 as well as ensuring that your site supports compatibility search.
Do note that while certain compatibility products need to be displayed together with their “dependency” product to make sense (for example, a camera lens will often be attached on a camera or a cushion sleeve fit onto a cushion, etc.), this may confuse users as it can become unclear what is actually being sold — is it a camera bundle with a bag and camera, or is it just the camera bag with a sample camera, or vice versa? This can be an otherwise tricky dilemma to resolve, but well-chosen secondary thumbnails proved effective at it during testing.
Another practical use of a secondary hover thumbnail is for highlighting a key product feature in addition to the regular “cutout” image. For instance, when purchasing a sleeper sofa, users will obviously not only be interested in “how it looks as a sofa” but also how the sofa works as a sleeping space (i.e., when it is unfolded) – the ideal job for a secondary hover thumbnail.
When considering vital features, it is important to note that certain products’ vital features might be self-evident. For example, the vital feature of a laptop sleeve is that it can fit and protect a laptop — this doesn’t necessarily need to be shown if other aspects of the product might be more relevant to highlight.
A product’s “vital” feature may therefore change depending on the user’s context. For instance, a user searching for “sleeper sofa” is likely to consider the “sleeping” aspect the vital feature. However, another user searching for “living room sofa” might actually be more interested in seeing the sofa in a usage context, as they are interested in other aspects of the product. Of course, this not only applies to search but can also be adapted based on the current categories as well as any applied filters — anything that may hint at a user’s interest or preference.
While these hover effects proved to help out users greatly, and the product lists without such features (currently 70% 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.
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 have just the slightest interest.
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 this 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 to 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:
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 includes 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.)
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 users 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. However, our benchmark reveals that only 3% of e-commerce sites display extra textual information on hover, and 28% show additional images on hover.
Secondary hover information can be particularly helpful for:
And again: remember only to relegate secondary information to the hover state — going too far will cause more harm than good, as the information won’t be available on touch devices without a hover state. 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 850+ UX guidelines in Baymard Premium – get full access to learn how to create a “State of the Art” user experience for product lists, filtering and sorting.
Join 22,000+ readers and get Baymard’s research articles by RSS feed or
Topics include user experience, web design, and e-commerce
Articles are always delivered ad-free and in their full length
1-click unsubscribe at any time
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.
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.
Very well written article, with some usefull insights. Thank you for sharing!
Thank you for the kind words, Ivo Bosma.
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.
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
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.
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.
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!
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).
The mouseover state can give an even more compelling UX if a site has 360 spins. They can be shown on hover as animated GIFs, giving a deeper insight into a products features e.g. an animation such as this:
Sirv can generate such GIFs automatically, customisable in the URL. File size concerns are reduced by serving animations in WebP format when possible (the animation above is only 219KB as WebP).
© 2021 Baymard Institute US: +1 (415) 315-9567 EU: +45 3696 9567 email@example.com