Guidelines 126-133
When it comes to providing information, the product page pulls the weight. Product lists also share much of this responsibility too, however.
People need to understand the differences between products in order to decide which is most suitable for themselves. Maybe they’re on a budget and need an inexpensive item. Perhaps they’re looking for a very particular shade of red. Regardless of the scenario, product lists provide the first bits of information about each item your site offers.
The product list, while preliminary, uses product information to direct potential customers to the most suitable product.
The question is, what makes for a good, informative product list? What makes users want to click on a product?
The following guidelines illustrate how to create a highly informative product list. They support product comparison tools, ease of use while browsing, and the provision of ample, essential information while avoiding cognitive overload.
8 guidelines for ecommerce product list & search results page, product information:
- Design product lists so users don’t have to pogo-stick.
- Top of product list should communicate variety of products available.
- Show only the most essential product attributes in product list.
- For combined categories (e.g. “sofas and loveseats”), display both product types at top of product list.
- For products in a package, show a price per unit in product list.
- Communicate all variations of a product on the product list (e.g. “available in 6 more colors).
- Show compatibility (e.g. camera case fits camera model X) in product list
- Offer a product comparison tool.
Guideline #126. Design product lists so users don’t have to pogo-stick.
“Pogo-sticking” is the act of clicking on a search result, clicking back to the search results page, clicking on a different search result, and so on. It occurs when users are dissatisfied with the search result they selected, so they return to the results page to browse something else.
This back and forth process also applies to product lists: Users click on a product from a product list, decide it’s not what they want, and click back to the product list to choose another product. This process can go on and on until the user becomes frustrated, ultimately abandoning their search journey.
How to fix the problem of pogo-sticking? To put it as simply as possible, analytics and research. Analyze and identify links with the highest rate of pogo-sticking, determine where people are commonly misled, re-organize your product list to match user intentions. Nielsen Norman Group details how to minimize pogo-sticking.
I’m unable to see bigger pictures in the search results, instead, I have to go back and forth between search results and product details screens
…one of the headphones I was looking at didn’t have [an] easy-to-read “specs” list I could only reply on a paragraph to decide whether I wanted to buy the item or not.
I would have liked some kind of an option to compare on different items against each other… without having to go back and forth between the results page and then details page for a specific item
Guideline #127. Top of product list should communicate variety of products available.
Imagine a user is browsing the Boating category on an outdoor website hoping to find paddle boats. They check out the boats on the product list and the 3 top rows, the entire space above the fold, show only canoes and kayaks. The user concludes that this site doesn’t sell paddle boats and leaves.
However, the site does sell paddle boats, but because they’re not as popular as canoes and kayaks, they aren’t displayed at the top of the product list.
Luckily, this costly mistake has an easy fix. Take a look at your product lists and ensure that the top few rows of products illustrate the breadth of your selection. If not, adjust your product list ranking/display.
Alternatively, try five-second testing your product list to determine whether a wide variety of products is being displayed from an objective standpoint. Participants will tell you what they think is for sale after a quick browse. Use these results to adjust the top of the product list.
Somewhat vague categories made it slightly more difficult to find earbuds than I would have thought.
Guideline #128. Show only the most essential product attributes in product list.
Attributes in a product list should give users the information they need to understand the differences between products.
Think about what users might consider when browsing a product list. While price is always a factor, most other attributes depend heavily on the product at hand.
While it might be tempting to share as much information as possible, don’t go overboard with specs and attributes. Too much information clutters a page, making it hard for users to locate the few pieces of information they care about.
If the nature of your product requires displaying many product attributes (e.g. electronics parts that match certain models, have specific dimensions, etc.), display them in a pop-up box that appears upon mousehover.
How to do it RIGHT
J.Crew
Includes a descriptive product name, price, and discount code
REI
Includes the bicycle brand, make and model, price, current discount, and any possible star ratings
BodyBuilding.com
Includes: product name, short product description, short sub-description, rating score (out of 10), number of reviews, number of servings, price, price per serving, and options to compare, select a flavor, or add to wishlist
Normally this number of attributes would be considered too many, but the products at hand vary widely and it’s likely that shoppers consider all of these attributes before clicking on a product
Guideline #129. For combined categories (e.g. “sofas and loveseats”), be sure to display both product types at top of product list.
This guideline again refers to the practice of prominently displaying the full breadth of products available at the top of the product list.
The top few rows of J.Crew’s Puffers & Vests category displays just that, puffers and vests:
How to do it RIGHT
All three of the products in the category title (headsets, speakers, and soundcards) are shown in the first two rows of this product list
Guideline #130. For products in a package, show a price per unit in product list.
This attribute is important for people who buy in bulk often and want to ensure that they’re getting the best deal.
BodyBuilding.com shows shoppers cost per protein bar:
Guideline #131. Communicate all variations of a product on the product list (e.g. “available in 6 more colors”).
Lacking this simple guideline could lose you lots of money. Online shoppers are accustomed to seeing all variations of a product on the product list and will abandon your site if they don’t immediately see the color or style they were hoping to find.
H&M uses circular indicators under the product picture:
West Elm takes a similar approach:
I would’ve preferred if a particular style was listed and then within the same tile for the search results there could be small swatches that show the color options for that style.
Guideline #132. Show compatibility (e.g. camera case fits camera model X) in product list.
Whether you include the compatible model(s) in the product name or include it as a separate attribute, clearly state which products are compatible.
TigerDirect Shows that all laptops up to 16 inches will fit in this case:
Newegg clarifies that this keyboard is compatible with the Microsoft Surface Pro 3:
Guideline #133. Offer a product comparison tool.
Product comparison tools should be displayed on the product list, as they best complement the search journey and browsing behaviors here.
Home Depot displays a “Compare” checkbox above each product:
When users select a product to compare, the Compare text changes to Compare Now for that product. The product comparison tool page loads when the Compare Now buttons is clicked.
I would like to see a side by side comparison of two items, if I want to compare them.
I would have liked some kind of an option to compare on different items against each other. Just something where I could say add a couple of items and then click compare and have all the items on one page and I can just go through the different angles and views of each item without having to go back and forth between the results page and then details page for a specific item.
How to do it RIGHT
REI
Includes a Compare button under each product. When an item is selected for comparison a small bar pops up from the bottom of the page.
