Product Listing UX: 3 Key Design Principles for Product Listing Information

Users select and reject products in the product listing pages based on the information available about each item. We’ve previously documented that 46% of e-commerce site have severe usability issues because they display too few product attributes in the product listings.

However, we’ve also found during our usability research that how the list item information is displayed can be almost as important as having it in the first place. More specifically, testing revealing that:

1. 64% of e-commerce sites impede users ability to compare the product in their list due to inconsistencies in the listed product attributes.
2. 50% of e-commerce sites make it needlessly difficult to scan and read the included product attributes, because it’s all just included as one long “product title”, cramming 2-5 lines full of technical specs.
3. 76% of sites neglect the principles of progressive disclosure, and always display the same amount of information for all product list items, instead of progressively showing extra information for items the user has shown an interest in.

These 3 were during testing individually observed to be the direct cause of site abandonments. Combined matters get even worse and can pose users with severe friction on as they try to figure out what products in the list to open and examine further, and which items they can safely disregard. In this article we’ll present 3 findings from our Product Lists & Filtering research on how to design and present the product list information for category listings.

Prerequisite: Including the Right Information in Product List Items

A prerequisite to optimizing how list item information is displayed is to even have the correct information available in the first place. We’ve presented our test findings on that here: E-Commerce UX: What Information to Display in Product Listings (46% Get it Wrong)

In summary, our research studies have shown that there are two general groups of attributes that should be included in all list items: Universal Attributes and Category-Specific Attributes.

1. Universal Attributes are essential to virtually all products throughout the site and include: Price (and Price Per Unit for multi-quantity units), Product thumbnails, Product title or type, Product variations (colors, sizes, materials, capacity), and User ratings.
2. Category-Specific Attributes are meanwhile unique to each product vertical and can therefore vary from category to category. For example, category-specific specs for toy products can be “Age Rating”, while for smartphones it might be specs like “Screen Size” and “Storage Capacity”, etc.

Including all applicable Universal Attributes and 1-3 Category-Specific Attributes listed for each product list item, was found to strike the best balance between providing the user with just enough information to accurately evaluate and compare the listed products, while at the same time avoiding information overload and intimidating product listings.

With the needed information defined, we’ll in the following present the 3 key aspects of how to design the list item information, which in particular will focus on the category-specific attributes:

1) Comparison… through Information Consistency

During testing the subjects would often skip products without certain attributes listed, or even worse believe the product didn’t have a particular feature because it wasn’t listed.

It’s therefore important to include product attributes consistently across list items presented in the same product list. When information is included or presented inconsistently across list items, users have a difficult time comparing them and may pass over numerous perfectly relevant products.

During testing, whenever a site included different product attributes across the list items in a product list, or presented those attributes inconsistently, the subjects would find it difficult to evaluate, compare, and select between those products.

For example, if an electronics site only included “Battery time” for some of the laptops in a product list, the subjects would naturally have a difficult time comparing those list items with the attribute listed against those without it. In this instance, the user has two options:

1. Open all those products where the attribute isn’t listed and try to find it on the product pages, or
2. Skip all products without the attribute (i.e., consider and compare only those items with the information listed).

The first leads to a significant amount of friction in the user’s product finding and evaluation process, and the second cause users to miss out on highly relevant products. Despite these issues we’ve found that 64% of e-commerce sites have highly inconsistent inclusion of product specs in multiple of their primary product categories. If relying on vendor data from multiple vendors creating consistency is in practice often attainable by post-processing vendor data to align it, before it’s used on the live site.

Another consistency aspect, besides listing all the same specs for all products in the list, is ensuring that those attributes are presented consistently. When the same product attribute is presented in different ways across list items, it becomes needlessly difficult for the user to scan the products across this attribute. Or even worse, it may become unclear to the user if the attribute is even comparable across the list items.

More specifically, it’s important that the product information adopt the same structure, labelling and unit of measure (to increase comparability), and that the specs are listed in a consistent sequence (to increase scannability).

2) Scannability… through Separate Entities

While simply making the title of each product a grab-bag of product name, type, brand, and other product specifications may be convenient for site owners when creating products, testing showed that it sure isn’t convenient for users who are forced to read these long unstructured strings of mixed text.

When all these product specifications are mixed together rather than presented as separate entities, users will have to read the entire title and mentally break it down into its various sub-components, and do this for each and every single list item if they want to properly determine its relevance.

In practice, the test subjects wouldn’t bother doing this and instead scanned only 5 to 10 products (missing out on numerous relevant products) or very briefly skimmed more products but without properly deconstructing their titles and consequently ending up rejecting and investigating products based on inaccurate assumptions (resulting in the user rejecting a great number of relevant products and wasting time on irrelevant ones).

It’s therefore important that list item information is displayed as separate entities so users can easily distinguish them at a glance, and more easily compare them across products, with the user’s eyes being able to move from one clearly defined product attribute to another.

Even list items with very few attributes can benefit from styling it as separate entities. If wanting to keep the attributes on the same line they can be separated by either whitespace or font tweaks.

Despite the significant improvements it provides in terms of scannability, we’ve found during our benchmarking that 50% of sites do not display their category-specific attributes as separate entities, but instead include it all in one long title of unformatted text.

3) Overview… through Progressive Disclosure

The list item is a balancing act: at one hand users need enough information to to be able to make an informed decision about which products to open and which to skip – but at the other hand users need to establish an overview of the products available to them. So while too little information can be highly problematic, so can too much. (Display too little information is the most common issue.)

During testing we’ve observed a simple technique to perform very well for mitigating this list item balancing dilemma: utilizing the mouse hover state to display additional information or images. During our usability study of 19 leading e-commerce sites, this extra layer of hover-enabled textual or visual information was observed to drastically reduce wasteful “pogo-sticking”, where the user heads back and forth between the product list and product pages only to discard irrelevant products.

Displaying additional list item information on mouse hover is observed to lead to less time spent on irrelevant products, and more time spent with relevant ones – resulting in an overall higher rate of success at the tested e-commerce sites adopting this design. Clearly this benefits both users and business. Yet, our usability benchmarks reveal that just 6% of e-commerce sites display additional textual information on hover, and only 18% show additional images on hover. In other words 76% of e-commerce sites don’t utilize this powerful hover state.

It is however vital that only secondary product attributes are relegated to a hover-state since users will not be able to compare these specs directly (and won’t be available on touch devices without additional implementation). This should therefore be considered a bonus layer of information provided to the user to help them better determine which of the product list items that initially sparked their interest they should pursue further. For more on this, see all our hover findings in Product Lists: Display Extra Information on Hover (76% Don’t).

Note that while ‘Quick Views’ may seem like a similar way to address the issue, we have consistently observed that Quick Views cause usability issues, and tends to be a symptom-treatment of inadequate list item information and design.

Making the Most of Product Listing Design by Optimizing Scannability & Information Density

In essence the findings can be summarized quite simply with two considerations for product list item UX design: First, e-commerce sites must ensure their product list items include all Essential Attributes (price, thumbnail, product title or type, variations, and user ratings) along with 1-3 Category-Specific Attributes. Second, with the right list item information in place, e-commerce sites must ensure that the design of this information allows for:

1. Comparison through Information Consistency – both in terms of what information is included and the sequence in which it is displayed.
2. Scannability through Separate Entities – avoid embedding specs in titles; instead style attributes as separate entities.
3. Overview through Progressive Disclosure – consider utilizing mouse hover to show additional (secondary) item information and possible a new thumbnail (e.g. different product angle).

This is of course easier said than done. At its most basic it requires well-structured product data (to #2 separate entities and #3 display progressively) and post-processing of supplier-provided product information (to ensure #1 data consistency). However, considering that these increase the user’s ability to compare, scan, and evaluate, all category listings throughout an e-commerce site – and more poignantly, that violating any of the three was observed to cause abandonments – it’s an effort easily worth the investment.