Avoid pogo-sticking

In Baymard’s user testing (source), showing too little information in the list made test subjects do extensive “pogo-sticking” (jumping back & forth between the list and product pages).

Showing too much information leads to overwhelm.

 

Options on desktop

If your niche is visually-driven (apparel, home decor,…), combine a ‘cut-out’ image by default, and an ‘in-context’ image on mouse hover. Or vice-versa, just be consistent across your store.

If your products are spec-driven, show more features and specs on mouse hover.

If your product contains multiple variants, show them on mouse hover. You can show both color swatches (variants), as well as the sizes available for the selected variant. When you hover the mouse on one of the swatches, the list of sizes shows what’s available for that variant. Like I mentioned in best practice #161 about interactive color swatches, I recommend requiring users to click on the variant and not update on mouse hover.

Another option is show Add to Cart and/or Compare buttons on mouse hover

B&H has alternate images on mouse hover but it isn’t consistent – sometimes showing a different angle, and sometimes the same angle but a different image.

 

Macy’s has a unique approach, by showing an automatically rotating image carousel on mouse hover.

 

What about on mobile?

Baymard recommends to simply not include any secondary data in the product list. Take the user to the product page when they tap on the product.

Examples