Experiment with what you display for product listings

When you’re viewing a list of products, think about what you might want to see yourself. What are you looking for when you’re browsing through the list? The amount of content you display per product and how that content is presented can help or hurt your chances of engagement, depending on what your audience is interested in viewing.

Images

Depending on the product, you’ll often want to prominently feature product images. Larger hero images help customers quickly scan the page for products they may be interested in.

• Test different images that highlight the product in different ways or angles
• Test different ways of presenting the product (e.g. product by itself vs. in use)
• Test larger images, both literally and perhaps zoom in on the product
• Test adding another image behind the existing product image that appears when the customer mouses over it.

Example: Dermalogica, 2nd image in rollover

Dermalogica utilizes rollovers to show an alternate image on their product listings. When the customer mouses over the base image, the secondary image is shown.

These added images often provide more context around the consistency of the product or the product in use, which can help the customer visualize how they might use the product.

Ratings

Customers often rely on social proof to determine if the product is worth obtaining. When a product is highly rated, it alleviates some of the buyer’s concerns. When presenting ratings, consider making them prominently visible.

Experiment with the following options to make them stand out:

• Size – Test larger font/shape sizes to avoid it getting lost against other elements.
• Color – Same color as your font vs. something with more contrast to make it pop.
• Type of rating – Stars vs. Numerical rating (e.g. 10/10).
• Shape – Instead of a star, try something unique to your site.
• Treatment – Consider testing drop shadows, outline color, background color, etc.
• Placement – Try different locations within the listing (e.g. above the image vs. below the price).

Badges

Adding context-sensitive badges to your product listings can help a buyer decide, at a glance, which products they might want to investigate further. For instance, a regular shopper of your website might want to know what’s new. A “New” badge on products in a category would allow such a buyer to quickly know what’s been added as they browse.

Some badges might include:

• New
• On sale
• Selling fast
• Eco friendly
• Best-sellers / popular
• Awards the product has earned
• Trusted third-party source featured this product

Example: e.l.f. Cosmetics

e.l.f. Cosmetics features badges overlaid on their product listings for a number of different callouts. In this example, they highlight “Best Sellers” and “New” products. Customers can glance at the product listings and instantly know what’s new and what’s currently trending.

Product details text

You don’t want to overwhelm the category page with text. Think about what’s important to display and what isn’t. You can always provide more information on the product details page.

Simplify the text – Consider reducing what info is shown and simplifying how you say it.

• Try shorter phrases and words with fewer characters
• Only list what you consider essential details (e.g. perhaps just the rating and price)
• If something applies to all items listed, move it to another location like a banner

Example: e.l.f. Cosmetics

Each entry indicates that if you spend:

• $15+ you get free shipping
• $25+ you get 2 free gifts

This repetitive info is wasting space that can be filled with other products. It should be moved to a banner or only added to the product details page.

Consider leveraging rollovers to display text

Rollovers can be a good way to simplify the page while still presenting context-sensitive info to customers. Customers would see several larger product images at first glance, but the added info appears when they mouse over an image.

Examples of content you might present in a rollover:

• Display the price
• Display the Add To Cart button
• Display a summarized product description
• Display additional contextual info

Example: Dermalogica (Mockup)

Dermalogica leverages rollovers to present alternate images to buyers.

In this mockup, you can see how the rollover could also be used to present product info and/or CTAs.

Leverage filters or subcategories

One option to consider is adding additional filters or subcategories for certain product attributes, rather than listing the attributes beneath the product.

Example: Stacy Adams

On their suits category page, they have a filter for suite size but they also list the size below the rating. They could just leverage the filter or break these out into subcategories.

‍