The Ecommerce Guide to Product List Design

Category (and search) list pages are the at-a-glance showcase of your products. The product attributes, value propositions and sales information you choose to display in product lists can help or hinder customer experience, and ultimately conversion rates.

What are top online retailers doing right (and wrong), and how do you determine the best way to design your product listings?

Hero Headers

Though hero header graphics push product results further down the page, if done well (and validated through A/B testing) they’re an opportunity to provide contextual guided selling.

For example, Target’s jogging stroller category features “how to choose a stroller” content. It’s the right content, presented at the right time to the right visitor.

target-how-to-choose-stroller

Similarly, REI’s helmet guide offers helpful product knowledge about the difference between Mountain, Road and Casual helmets.

rei-helmet-guide

Unfortunately, REI’s header isn’t interactive. You can’t click a helmet style to filter results (and customers will try). The labels also don’t perfectly match the facet menu labels. Casual = Recreational, but labels should be consistent. (And it’s not clear what the Cycling facet, containing only 15 results, means).

rei-helmet-facets

Promotional offers can also be effective in category page headers. There’s no better place to feature them than on their most relevant category pages.

sephora-nail-feature

Highlighting value propositions of featured products is another potentially effective use of header space. Some multi-brand retailers may explore using category headers as a “digital endcap,” with brands paying a premium for placement.

Sephora-fragrance-feature

What about superfluous static header graphics that don’t educate, promote, guide or click through to any product or offer? If they serve no other purpose than to pretty up your page, understand they come at a cost to both page load speed (important to conversion and a factor in search engine optimization) and usability (visually detracting from sort and filter tools and product results). Your A/B tests may well prove you’re better off without them.

Grid vs List View

The choice between grid and list view depends on what’s the best way to merchandise your products. Think about what better helps the customer choose what to click, product photos or information? Grid view is preferred for categories where product images are more important (like apparel), and list view when customers benefit from comparing specs at a glance (like electronics), and when there is little differentiation between product thumbnails.

For example, Target’s TV grid doesn’t expose as much useful information as Best Buy’s list view. Target customers can’t even see the full product name in grid view!

target-grid-view

When customers can digest much more at a glance, they’ll feel more confident in their click decisions and “pogo-stick” (click back and forth between products and category results) less. When they’re more likely to find the right product, they’re more likely to buy.

best-buy-list-view

Many sites allow customers to toggle between grid and list view. This is only useful if list view indeed shows more product context than grid view.

bn-grid

Barnes and Noble’s grid and list views expose identical product information (save for sale price savings, which should also be visible in grid view). This makes toggle a useless feature, wasting space in list view and forcing the visitor to scroll more.

bn-list-view

In list view, Wine.com includes a one-liner that describes the wine, something that doesn’t work well in grid view.

winecom-list-results

David’s Tea understands what influences a tea purchase – you don’t buy tea, you buy a tasting experience, influenced by sight, smell and taste. Both pictures and descriptions matter to this category.

davids-tea-specs

Rather than clutter the grid with brand name (no need to), star rating, pricing or in-stock availability, David’s manages to achieve the context of list view in grid format.

Contrast this with Macy’s merchandising, where brand, color, price, promotions and star ratings drive demand. Descriptive content is less important.

4-column-3-column

Notice Macy’s supports control over grid view, switching from four-column to three enlarges images for those that want a closer look. Toggling to list view would not make sense for a category like handbags, but may make sense for mattresses, electronics or other visually similar but functionally differentiated products.

Product Thumbnails

For visually-driven products, thumbnail size matters, and the trend is towards extra-large images – especially in apparel. Grid column toggle tools to control image size is a useful feature, is support for viewing multiple images from the category with hover / rollover effects.

Rollovers also provide the opportunity to show the image “in context,” whether on a model or otherwise “in use.”

stussy-rollover

barneys-product-in-context

Product Information

As with the David’s Tea example, the product information you include in your grid or list view should be selected based on what influences the purchase decision. Do your customers buy form or function? Is brand important? Do your customers use your website to research in-store purchases (stock availability)? Is your customer price sensitive ($ and % off)? Does social proof matter (star ratings, top sellers, award winners)?

Persuasive discounting

Calling out sale items with red strike-prices makes sense, but for higher-ticket, luxury items, consider showing a percentage discount rather than dollar discount, giving customers a better idea of value without having to do mental math.

jomashop-percent-off

Star ratings

When products have zero ratings, they don’t look good next to those with colorful stars. BassProShops wisely omits star icons for products with no reviews, and differentiates them with “Be the first to write a review.”

be-first

Showing the number of reviews in brackets is also helpful. Customers who tend to research methodically are looking to evaluate products that have been reviewed more often (this also suggests which products are sold more frequently).

Badges

Northern Tool promotes its top listings as #1, #2 and #3 seller, social proof and reinforces that the default sort is most popular.

top-seller-category-list

Other badge ideas include top sellers, award winners, just added, et cetera.

Stock availability

It’s a good idea to keep out-of-stock items (that you will replenish) in your customer-facing product catalog. Removing them breaks wish-list bookmarks, cart contents and can affect search engine optimization (the product may be de-indexed when you re-add it and can take some time to return).

pureformulas-in-stock

If products sell out and are restocked frequently on your site, consider identifying in-stock items with green text, and out-of-stock in red.

Multi-channel retailers that offer in-store inventory lookup or in-store pickup can support this tool directly from the category page, like Best Buy.

best-buy-check-ship

bestbuy-ship-avail

best-buy-lookup

Some multi-channel retailers allow category results to be filtered by zip code or closest store.

home-depot-choose-store

Home Depot uses geolocation to predict the nearest store, which can be overridden by the customer. Category and search results are then personalized to show which products are available with which options (ship to home, in-store only, ship to store).

home-depot-cat-results

Color options

Products with more than one color available should expose these options in category lists, and support thumbnail image changes upon interaction with color options. (If the customer has filtered the category by color, ideally the chosen color’s will become the primary thumbnail image).

landsend-rollover

Many sites choose to expose additional colors upon hover interaction, but hiding this information and requiring customers to hover product-by-product is a sub-optimal experience.

For products with so many color options they can’t all be displayed in grid or list view, a “more colors” indicator will suffice.

more-colors

Frye found a way to combine both, with the most popular colors previewable through the thumbnail, and a + indicator for more colors.

frye-colors

Promotions and other value props

Don’t be afraid to get creative with promotional call-outs, they don’t need to be consistent across products or categories.

ulta-promos

If products are exclusive to your business or exclusive to your online channel, show it off.

exclusive

Modcloth annotates its listings with Coming Soon and Our Favorite to add more context to each listing.

modcloth-heart

In Burton’s 13 Things merchandising feature, hover effects tell a story, exposing the best and quirkiest aspects of product descriptions.

stink-proof-burton

Ulta leverages hover effects to expose the latest or most helpful customer review.

ulta-testimonial-hover

While this is creative, it may not be helpful to customers. It may even be downright confusing (and as designed, prompt more clicks on Quick View than the full product detail page where testimonials live). Innovative hover features should be A/B tested to validate their effectiveness.

Add to Cart

For no-brainer products that customers typically add to cart without needing to read descriptions (think grocery, industrial and replacement parts, consumer packaged goods and other consumables), add to cart buttons are useful on category pages.

Dylan’s Candy Bar creatively supports both add-to-cart functionality and quantity configuration upon rollover of an item.

dylans-candy-rollover

Should you use Quick View tools?

Nearly 50% of top online retailers use Quick View tools, but they remain controversial among usability experts.

Quick View cons

User testing research by Baymard Institute suggests Quick View tools are more problematic than useful. Test subjects frequently activate Quick View unwittingly, especially when Quick View buttons are overlaid the center of thumbnail images. Buttons that appear upon hover are also misleading, many mistaking them for links to full product detail pages.

abercrombie-rollover-thumbnail

Baymard’s research also found online shoppers frequently mistake Quick View modal windows for full product pages. This is more of a problem for products with long and detailed product information, and less of a problem for sites like J Crew, which manages to fit nearly all product information save fit information and customer reviews in its modals.

jcrew-quick-view

However, for those that would benefit from (and convert better with) this additional information should fully understand there’s more behind the jump. Moving the “View full details” link to the bottom right of the modal window would make it more noticeable. Even better, anchor links to fit information and reviews could be shown within the window, taking visitors directly to selected information on the product detail page.

Adding Quick View also means adding extra code, which can impact page load speed (and thus, user experience, conversion rate and SEO).

Quick View pros

If implemented with SEO-friendly JavaScript, Quick View modals can boost keywords on your category pages and increase your search traffic. Traian Neacsu, author of Ecommerce SEO recommends loading static product description content in source code for the search engine to see, and dynamic product information like pricing and stock availability through AJAX.

To stay un-spammy and well within search quality guidelines, Neacsu advises to keep copy between 50 and 150 words, with a maximum of five links. You should also present a tighter set of results per page by default (e.g. show 20 instead of 60 products) if you use Quick View windows.

Retailers that abide by MAP pricing can also benefit from modal windows, which MAP policies typically don’t apply to.

Testing Quick View

You may not need Quick View if you can leverage the right tactics featured in this chapter. Think about the information that’s most helpful from your product pages and find ways to clearly and cleanly present them directly in the category list. Do customers want to see larger images? Consider hover-zoom effects. Is it the add to cart button? There’s a hover for that too.

If you already use Quick View, test it against this “new” version that incorporates the item attributes that best guide and persuade your customers. (Your strategy may be different category by category, depending on how customers buy each product type).

Be sure to set up event tracking on modal window links to measure engagement, add-to-cart and purchase, or you won’t be able to track results!

If you prefer to skip the testing, simply make your Quick View link less likely to cause problems.

lava-lamps-plus

LampsPlus’ Quick Look buttons are clear of the product image and product title links, making it tough to accidentally launch.

If you take this approach, you may still choose to A/B test with and without to gauge the impact of page load speed on conversion rates.

Click to compare

Think I forgot product comparison tools? It gets its own chapter, coming up next…

Need help with your ecommerce commerce design or testing strategy? Drop me a line.

Ecommerce Illustrated is a project of Edgacent, an ecommerce advisory group.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *