https://baymard.com/blog/secondary-hover-information?utm_medium=email&utm_campaign=Article Product Lists Display Extra Product Info and Images on Hover 70 of Sites Dont&utm_content=Article Product Lists Display Extra Product Info and Images on Hover 70 of Sites Dont+CID_b8dbb2cfbfaa65fe5aee5dbccff97c1e&utm_source=CampaignMonitor&utm_term=Product Lists Display Extra Product Info and Images on Hover 70 of Sites Dont

Тезисы

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:

• 42% of sites display too little product information in their product lists for users to accurately evaluate if a product page is worth exploring or not (a marginal improvement from 46% in 2015).
• 42% of sites display information so inconsistently in the product list that it’s impossible for users to make a basic comparison of the products (an improvement from 64% in 2015).
• 11% of sites use a thumbnail size that is “inadequate” for most users to perform a basic visual product evaluation in the product list (up from 32% in 2015).

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:

• The many usability issues that additional hover information is observed to solve,
• The 6 types of hover enabled list item info that performs well during testing,
• Discuss how this should be handled on mobile and touch devices where there is no hover state.

Product List Design is a Balancing Act

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