• E-commerce UX: What Information to Display in Product Listings (46% Get it Wrong)
  • The Nuggets translation Project
  • Translator: godofchina
  • Proofread by: JodDIY, Ruixi

“I want to have a way to compare, so I don’t have to click this, click return, click that, click return, dot dot…” One customer explained that he was looking for a bag for his laptop. “I can’t find any useful information here other than the price and product name.” Note that most Zappos packages have no or only vague valid size descriptions, like “large.”

The user chooses whether or not to buy the product based on the valid information about the product listed. So it’s no surprise that poor list item information is one of the most serious usability problems associated with product list navigation after we went through the extensive product list and filter usability study.

Through testing, we found that list items with too little information or too little relevance were problematic because users could not properly evaluate these items without basic information about them. This causes subjects to completely misunderstand the product in question and unnecessarily jump back and forth between the product page and the list page — they have to go back and continue, opening each product on the list page just to understand its basic properties and core features; This unpleasant practice often causes subjects to give up on visiting the site because the contradiction of simply locating the relevant products is too great. Obviously, showing the right amount and type of information on each list page is critical to improving the user’s product discovery experience.

Also, figuring out what type of information to display and how much to display on the product listings page is a big problem, as our product listings for the Top 50 e-commerce sites in the US show, 46 percent of these sites have too little or poorly selected content to display. (A small number of sites, on the other hand, display too much information on their list items!)

During testing, Gilt failed to show a key part of the listing information: the types of items available! This led to multiple test subjects refusing to buy an item because they thought it was only available in a color display, when in fact it was available in a variety of colors.

In addition to all the usual “generic” attributes, Crutchfield also has a serious problem with category-specific attributes — that is, unique information related to the product type. For example, the ‘X-Watts-RMS’ and ‘filter Pass’ attributes only relate to car amplifiers and are therefore only shown in these columns. At the same time, all the other kinds of products on the site show only vertical correlations.

Getting a good SNR in a list item is critical to improving the user’s ability to find the item they are looking for. It is clear that this will not be easy. It needs to be carefully refined to show the attributes of the product. In this article we present test findings from our product listings and screening learning about how to accurately evaluate the amount and type of information presented in the product listings.

(Note that the findings below also apply to category listings and search results.)

List item information: Balance operation

In any case, the information displayed in the product list is the basis for users to evaluate and judge the suitability of the product. So product lists should not be wasted. Each element in the list should be carefully crafted to show the user what works best for their selection. A successful product list design should meet the following two requirements:

  • Present users with enough product information to properly assess the suitability of the product (for their unique needs),
  • Let users treat the list of products as a whole (i.e., the options available to them) and compare products of interest to one another.

The former is that each product should display sufficient product information while the latter product should display sufficient number of products on the user’s screen. This creates a dilemma. If there is too much information on each product, the number of products on each page will decrease. However, too many products will make it relatively difficult for a single product to display enough information, leading to too many jumps back and forth.

It is clear from our large-scale eye-tracking studies that users are extremely inclined to focus on thumbnails when viewing visually oriented products. (Here we can see the heat map of 32 REI topics, clicks, total viewing time)

So product list design is not a “less is better” thing but a “right is good” thing. Figuring out which attributes should be displayed in list items and which should not is the right thing to do, but there are no hard rules. A good list item should help the user accurately assess which items in the list are relevant to the user and — just as important — which should be omitted by providing enough information. Listing information should help users better compare related products. It’s essentially a matter of practice: don’t maximize the essence of the message and the contrast of the product with a bloated list of products.

Now we have found that there are two sets of attributes that should be included in list items: generic attributes and class-specific attributes. All product common attributes across the site include price and product title (or type). Category specific attributes are unique to each product category and differ from product to product. We’ll cover each detail in the following examples.

General properties

There are some general attributes that should be displayed almost everywhere, whether in list items for products for sale or in site content. For example, the price of a product is an essential attribute, so it should be used in all circumstances (except in rare cases).

In addition to the obvious price attribute, the other main common attributes are: product title or type, thumbnail, user rank, and optional type. For search result lists, contextual Search snippets have fallen victim to this, too. The following articles summarize the most important aspects of common attributes.

One customer ordered IKEA’s sofas by price (from lowest to highest) — unfortunately there were upholstery, cushions and slipcovers instead of cheap to expensive sofas. To add to the confusion, slipcovers are displayed on sofas, making it harder to tell if they are sold at a glance. The price of each product is obviously critical to the user, either to estimate the product itself or to compare it to other products. That’s why the price has to be permanently visible to the user. Our product listings and filtering benchmarks show that all sites do this.

Some common issues related to product pricing were found during testing. For example, there are cases where it’s not clear what’s included in the price (which usually happens when several products are displayed in product thumbnails, like product fit or bundle). It is wise to let customers know exactly what is included in the price. Also, showing “price per unit” helps customers understand value for money – 98 percent of sites don’t do this very well. (See our test results at Price Per Unit).

“I see something there, but there’s no picture, so I don’t want to click on it,” explains one customer (at Best Buy), looking at the third item on the list. It turned out to be exactly what she wanted, but with no thumbnails, she chose to skip the product like everyone else.

Product thumbnails proved to be the most important attribute, and subjects were willing to pay a lot of attention to product thumbnails. List items without thumbnails are often ignored, and most customers view these products as “incomplete.” Good thumbnails play a key role in how users search for and select products. Therefore, providing users with visual information about the product is crucial.

In practice this means providing thumbnails for all list items and making sure the thumbnail size reflects the visual information users want from the product. (Product Lists report owners: Refer to rules #25, #28, #29, #34 and #39). It would be wise to provide secondary hover images (providing more visual information about the product) and also consider “use context” and “cut out” thumbnails (allowing a more comprehensive view of the product).

IKEA provides a product title (series) and type; a single product name is less valuable to the user. Titles like “Soderhamn” and “Poang” simply provide a unique identification of the product line to the user. It’s great to see relevant information displayed when the mouse is moved over it, even better if the default prompt lists relevant information.

The title or type of product also proves to be more important in cases where the customer is browsing the product list (especially the search results) and the product type is difficult to recognize at a glance from the product thumbnail. A product name can be as descriptive as a product title, and some industry product types are easier for users to understand than the title — especially if the title is unclear. In these cases, the product type is presented in place of the title or in combination with the product title.

In cases where there is a large or heterogeneous product catalog, it may be too resource consuming to manually determine the descriptive title of each product, in which case both are recommended. There is also a more advanced way is to dynamically browse each product title to determine whether to contain product type keywords, based on this, for the scanned title does not contain product type keywords of goods, show the product type information. For r a well-organized product catalog (for a manufacturing e-commerce company like IKEA), you can use the entire catalog (based on company-wide product naming rules) to determine how descriptive the product title should be.

In the absence of any indication of the size of these POTS, the user must browse each product page to get this information. While users can infer additional parameters from existing price ranges, searching for hundreds of results becomes unwieldy. More importantly, the price range for a plate doesn’t tell the user what the parameters are — are the plates differentiated by color, size, or material?

For comparison, let’s take a look at how American Eagle Outfitters allows users to determine multiple parameters (color patterns, etc.) of a shirt at a glance, which are only shown in a particular style in the thumbnail of a list item.

Product parameters like different colors, sizes, materials, appearance, etc., are attributes that need to be displayed directly in list items. Without these things, customers often pass what they actually want, simply because they can’t see the parameters and can only determine if it’s what they want by showing the default properties, rather than checking the product details page to confirm the product-related properties.

Not all products will be on display, however. For example, the availability of a table can be determined by the table’s multiple size parameters displayed in the list item, whereas shoes can be inferred from the natural properties of the shoes.

Here was a test subject – not quite sure what the different product specifications meant – who decided to rank which camera to buy. User rankings are often used as a guide by people who are hesitant or don’t know much about the product.

User rankings are often included in list items as a common attribute for most industries and websites. Tests have found that users with limited knowledge of the product in a feature domain rely on user rankings whenever they search for relevant results – and view highly ranked items as “safe choices” that have been reviewed by other users.

Some users use ratings as a proxy for “good quality/good value” when they can’t judge for themselves. Therefore, if the user is relying on data that is not an expert on what is being sold, the ratings should be included directly in the product list. When we put user ratings into the product list, note that we should actually include average user ratings and average number of ratings. When we look back, It is found that the user is aware that average Ratings are useless without Averages (see Users’ Perception of Product Ratings and Don’t Base ‘Customer Ratings’ Sorting on Averages Only).

Specific attribute

If a few features of a product are particularly important to that product, they should be included in an overview of product list items, making it easier for users to make “information-rich decisions” about which products to open and which to skip

These attributes vary widely between categories and must be uniquely optional for each category. Here are a few examples where different specific attributes are used as inspiration when deciding whether to select a product, product attributes can become very important for a given category (here quality is treated as an attribute of a category).

Only some power adapters in Newegg contain adaptation information. For some customers, they would rather buy a cheap power adapter than a $116 adapter with adapter information that would bother them endlessly.

The relevance of a product in a particular kind of high-tech product is almost entirely determined by how well the product fits with other products. Therefore, “fit information” should be placed in the list items, so that users can determine whether or not a product is relevant to them without opening each item in the list. Further, if the user’s cart has a fit related product, the product list item should intelligently indicate whether the product fits with the product in the cart. (See 6 Use Cases for Compatibility Databases on e-Commerce Sites and Highlight Items Already in the User’s Cart).

Because the size of the camera case is not included in the list item, the subjects had to open each Tesco product page and search the product page description to determine whether the camera case was suitable for their camera. A “usage scenario” diagram is also useful for determining the size (such as showing a case that contains part of the camera), but obviously not as accurate as showing the actual size in a list item.

Another form of adaptation information is size. For example, any kind of bag needs to hold, carry, and store another kind of product, so we need to list its internal dimensions so that users can determine if it fits with their belongings. That said, it’s less rigid than high-tech adaptations, so users might buy a “container” to get enough space to hold what they want.

One subject relied on thumbnails and recommended age ranges to find products suitable for her niece. Entertainers understand that most of their users are not end users, so they wisely add a recommended age range to their toys to help them choose products for their age group.

Attribute suitability, scenario, or audience for recommended age groups is important in industries where the customer is not the end user. In effect, these properties act as a comprehensive user manual, guiding users to products that are appropriate for the end audience or scenario, like the type of flowers to buy for Mother’s Day.

Go Outdoors doesn’t have a comfort temperature ranking in all of their sleeping bags; Very few have comfort temperature values printed on product thumbnails. Subjects were frustrated to find that they had to open the rest of the product to determine whether it was suitable for use in cold weather.

Another typical example of a specific class attribute is any product that has a specific use case, including safety gear, outdoor equipment, underwater equipment, and any type of product that must be maintained in a specific environment.

Examples of specific attributes are numerous, and the above article has shown only a few instances where there are one or two product features that are uniquely related to specific attributes of the product category. The list of products is endless. You might also mention camera resolution, car mileage and power, food production methods and so on.

Specific attributes are important general attributes that are not shared across product types – “age of applicability” is highly related to toys but not cameras, “megapixel resolution” is related to cameras but not toys! So it takes some effort to identify specific attributes. Browse through each product category to see if there are 1-3 attributes that are uniquely related to the product category and are decisive for the user to determine the relevance of the product, and then dynamically place them in the list items.

Displays product list items

Through all the common product attribute (price, thumbnails, product title or properties, related parameters and user ratings) and all specific attributes in the product list item, users have sufficient conditions to evaluate products each item in the list item and decided to choose which items are one step closer to understanding (open the product page).

Common attributes have to be there because that’s the basic information for all products, and without that information the user can’t accurately assess the relevance of the product. Specific attributes are a smarter way to provide 1-3 additional attributes that are uniquely related to the product category, providing specific helpful information to users to determine if the product is relevant to them.

With all the common attributes and 1-3 unique attributes of the list items, enough information is provided to allow users to accurately evaluate and compare the products in the list. There is neither too little information (most common) nor too much list item information (less common but equivalent to a design problem). Simply put: the ideal balance is achieved, providing enough information for each product without information redundancy.

Getting an ideal balance in the list item information leads to a high SIGNal-to-noise ratio in the product list, which is critical to the user’s ability to find products. A good signal-to-noise ratio makes it easy for users to know which products to buy and which to skip. Don’t be fooled by dismissing any of this advice – 46% of e-commerce sites fail at one or two of these, forcing users to do unnecessary backtracking – constantly jumping back and forth – often making it difficult for users to find products and ending up with users abandoning the site.