Since the topic of our last post was, "Getting the Product Listing Detail Right
," it seemed fitting to continue the discussion with best practices for displaying additional product information on mouse hover.
The main goal of the product listing detail page is to make it easy for a visitor to determine whether or not a product is relevant to them without having to bounce back and forth between product listing pages and product detail pages. We all know what a balancing act it can be to display just enough of the right information to educate the consumer without overwhelming or giving up too much real estate.
Today's consumer wants accurate information quickly and without having to dig too far into a website. Displaying an alternate thumbnail image and/or additional product information on the mouse hover is a great way to achieve the right balance on the product listing page.
What to Show on Hover
What should you display on the mouse over hover? It's going to depend largely on your industry and knowledge about what's important to the consumer's purchase decisions. Following are four types of information you can consider showing on hover:
- Visually-driven industries — Apparel and home decor businesses are perfect candidates for displaying an alternate thumbnail image on hover. A great use for alternate images for an apparel site is to display the piece of clothing from a different angle, or perhaps with accessories like a jacket, to give shoppers additional ideas. In both the home decor and fashion industry, retailers are seeing a lot of success when they use a combination of a cut-out image on a blank background and a second image that displays the item "in context."
- Textual product detail — If you sell products that have a long list of specifications, the hover state is a great way to make the important details available to shoppers without cluttering up the product listing page.
- Product variations — It's important to provide users a visual clue on the product listing page so they know that a product comes in multiple sizes, colors, or styles. This can be done by using color swatches on the product listing and/or by displaying hints, such as available in multiple sizes. The hover over can then be used to elaborate on what types of variations the shopper will find by displaying the thumbnail in a different color or by describing the fits that are available.
- Repetitive list items — The mouse-over hover can be a great place to display buttons like Add to Cart or Add to Wish List instead of repeating them throughout the product listing page.
It might be tempting to display all of the product detail information when the customer hovers over a product, but remember that information in a hover won't be available on devices with a touch screen. Treat it as additional information that is a bonus for shoppers using a desktop and be sure to give your mobile shoppers the essential information on the product detail listing page.