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.”
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.
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.
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).
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.
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.
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.
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.
5) Compatibility-Related Thumbnails
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.
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.
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:
- 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).
- 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.
- 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.
- 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.
- 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 667 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.