Recent usability tests and benchmarks conducted by the Baymard Institute, an organization which regularly conducts large scale research studies on ecommerce usability, reveal that 46% of top U.S. ecommerce sites display too little product information in their product lists for users to accurately evaluate if a product page is worth exploring or not. Further, 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 the usability study of 19 leading ecommerce 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 ecommerce sites adopting this design. Clearly this benefits both users and business. Yet, our usability benchmarks reveal that just 6% of ecommerce sites display additional textual information on hover, and only 18% show additional images on hover. In other words 76% of ecommerce sites don’t utilize this powerful hover state.
In this article, we’ll therefore share ecommerce usability test observations from our 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 five 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 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.”
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.
The Baymard Institute team observed 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, often causing them to overlook relevant items. Unsurprisingly, after 3 to 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.
Product List Design Conclusion
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 already mentioned, this is 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.
Below, we’ll go over what information and images you should show in the default view versus on hover.
5 Types of Information to Show on Hover
1) Visually-Driven Industries
When testing ecommerce 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 as 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 for hover. 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. This style still gives users the option to perform an initial screening before deciding to visit the product page, 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 displays 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 is 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.
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 providing compatibility-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 recognizes this behavior and therefore has a secondary compatibility-related thumbnail for many of their accessories, as seen here where 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.
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 Ecommerce 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. It shouldn’t be essential to their browsing and basic interpretation of the product.
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 makes 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 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.
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. Our benchmark reveals that only 6% of ecommerce 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. Visual variations are especially 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 to the hover state, i.e. “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.
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 (i.e. touch screens). Treat the hover stage as “bonus information,” a progressive enhancement for devices where it can be suitably implemented.
Digital & Social Articles on Business 2 Community(130)
