Research Topic

Product Lists UX

How do users scan, filter and browse your search results and category pages?

Without the right tools, finding just the right product can be an almost impossible task for the user. E-commerce product lists and their filtering and sorting tools determine how easy or difficult it is for the user to browse the site’s product catalog.

This is why we at the Baymard Institute have conducted an extensive large-scale usability study of how users scan, evaluate, filter and sort products within a product listing page.

A group of users age 21-56 were recruited to test 19 leading e-commerce sites across 8 different verticals. Despite testing multi-million dollar sites, more than 700 usability issues related to product lists, filtering and sorting, arose during testing. All these issues have been analyzed and distilled into 101 concise guidelines on product list usability.

From this research study we’ve uncovered exactly what users expect as they interact with product lists on e-commerce sites, what typically goes wrong in the process, why it goes wrong, and what changes e-commerce sites can make to avoid these issues. In short: how to design a high-performing product list experience for your users.

After all, if users can’t easily browse your product lists, they can’t easily find what they are looking for – and if they can’t find it, they can’t buy it.

This page provides you an overview of our research specific to Product Listings & Product Filtering UX. All of this research is available as part of Baymard Premium.


The Current Product Listings & Product Filtering UX Performance

The product list effectively dictates product presentation and provides the pathway from category pages and search results to the all-important product page.

During Baymard’s Product Listings & Filtering study, sites with mediocre product list usability saw abandonment rates of 67-90%, whereas sites with just a slightly optimized toolset saw only 17-33% abandonments for users trying to find the exact same types of product. This translates into as much as a 4-fold increase in leads.

 

From testing it’s clear that a unity of product list design, filtering and sorting is required – the chain is no stronger than its weakest link:

  1. With the right filters and a clear filtering interface users are able to narrow down a product list with thousands of generic products to only a few items relevant to their unique needs and interests.
  2. Solid sorting features enable users to order products by the attributes they care about – something that can dramatically speed up the user’s product exploration and selection process.
  3. A balanced product list design provides users with a better overview of the products available and help them make a more informed evaluation of which items to engage with (and which they can safely skip).

At Baymard we’ve subsequently benchmarked the 244 top grossing US and European e-commerce sites across our 90 most important (weighted) Product Listing guidelines; adding to our existing e-commerce benchmark leading to a massive database of 11,000+ UX performance scores and 7,000+ best- and worst- practice examples of Product List UX.

Analyzing this dataset we’ve found the average site to perform mediocre at best, and 36% of sites to have such severe design and feature flaws that it was downright harmful to their users’ ability to find and select products. Product list usability is generally characterized by being both overlooked and poorly understood. On average each site will need to make 35 design changes to achieve optimal product list usability, revealing widespread mediocrity. There’s a clear lack of knowledge about and attention paid to the design and features of product lists. Perhaps most critically, many sites have adopted a fundamentally flawed “one size fits all” approach which greatly impedes the user’s product finding ability.

This is a sub-set of the full benchmark which includes 244 e-commerce sites.
View our full UX benchmark


1,900+ Categorized E-Commerce Product Listing UX Examples

FREE RESEARCH CONTENT

Explore design patterns across 1,900+ page examples of Product Listing, Filtering and Sorting designs and features, all annotated and organized into 4 different page types. This is a great way to get inspiration for your own Product List & Filtering design, and to get a feel for emerging trends in e-commerce.


40 Articles on Product Listings & Product Filtering UX

FREE RESEARCH CONTENT

We’ve released a small subset of the Premium research finding on Product Listings & Filtering UX for free in these 40 articles:


10 Research Reports on Product Listings & Filtering UX

PAID RESEARCH CONTENT

All 97 Product Listings & Filtering research findings are available as part of Baymard Premium, and are divided into the following 10 reports:

Product Lists & Filtering Topics

List Layout

Product Lists & Filtering Topics

List Layout

7 guidelines, 45 pages

How to create a list layout that bolsters product browsing experiences, with guidelines on the design and features of the overall product list layout, including grid and list layouts.

Product Lists & Filtering Topics

Loading Products

Product Lists & Filtering Topics

Loading Products

6 guidelines, 43 pages

How to load items in a product list, including guidelines on how new items should be loaded, how many items should be displayed by default, how to approach novel navigation methods, and more.

Product Lists & Filtering Topics

List Items: Product Info & Thumbnails

Product Lists & Filtering Topics

List Items: Product Info & Thumbnails

16 guidelines, 113 pages

Information to include in List Items, formatting and displaying information, displaying product variations as one or multiple List Items, what product thumbnails to display, and more.

Product Lists & Filtering Topics

List Items: Interface & Hit Areas

Product Lists & Filtering Topics

List Items: Interface & Hit Areas

10 guidelines, 69 pages

Presenting and arranging information in List Items, including showcasing product features, List Item hover effects, and more.

Product Lists & Filtering Topics

List Items: Personalization

Product Lists & Filtering Topics

List Items: Personalization

5 guidelines, 23 pages

How sites can personalize List Items to suit each unique user by inferring user interests through filtering and sorting observations, context-aware product thumbnails, and contextual compatibility notices.

Product Lists & Filtering Topics

Filtering: Available Filters

Product Lists & Filtering Topics

Filtering: Available Filters

12 guidelines, 69 pages

Which filtering types users need to narrow down product lists, incl. thematic filters, considerations for accessory products, user-defined ranges for all numeric filtering values, and more.

Product Lists & Filtering Topics

Filtering: Scope & Logic

Product Lists & Filtering Topics

Filtering: Scope & Logic

14 guidelines, 74 pages

Common pitfalls and optimizations such as avoiding filter attributes as category scopes, explaining industry-specific filters, and allowing users to combine multiple filter values of the same filter type.

Product Lists & Filtering Topics

Filtering: Interface & Layout

Product Lists & Filtering Topics

Filtering: Interface & Layout

11 guidelines, 72 pages

Layout and interface styling and the discoverability of filters, incl. how to visually nest sidebar categories, when to truncate filters, and considering a horizontal unified sorting and filtering tool.

Product Lists & Filtering Topics

Sorting

Product Lists & Filtering Topics

Sorting

11 guidelines, 56 pages

How to provide innovative and forward-thinking product selection with guidelines on the default sort type, avoiding most alphabetical sorting, sorting interface and scope, as well as the sort types needed.

Product Lists & Filtering Topics

Comparison Tool

Product Lists & Filtering Topics

Comparison Tool

5 guidelines, 27 pages

When a comparison tool is appropriate and how both its selection process and comparison page should be designed, when to have a comparison feature, and how to design the compare link and comparison view.


Subscribe to Baymard Premium to access all of our Product Lists & Filtering UX research

Get full access to all our Product Lists & Filtering UX research reports, benchmarks, and page designs previewed here, along with our complete 650+ guidelines for Homepage & Category Navigation, Search, Product Details Page, Checkout, Accounts & Self-Service, and Mobile E-Commerce. Utilize our 130,000 hours of UX research to improve your Product Lists & Filtering user experience and to document your UX decisions.

Learn more about Baymard Premium


Test Methodology

This research on Product Listings & Filtering UX is part of Baymard Institute’s full 130,000 hours of large scale research catalog, which is based on:

  • Usability Testing: 25 rounds of qualitative usability testing with 4,400+ test subject/site sessions following the "Think Aloud" protocol (in-person 1:1 moderated lab usability testing).
  • Manual benchmarking: 54 rounds of benchmarking the world’s 244 top-grossing e-commerce sites across all 650+ UX guidelines (150,000+ implementation examples and 225,000+ UX performance scores).
  • In-lab eye-tracking testing.
  • Quantitative studies: 11 studies with a total of 18,397 participants.

Baymard’s research methodology is described in detail here.


UX Audit Service

GET YOUR PRODUCT LIST EXPERIENCE REVIEWED

What are the 15 most important changes you can make to your e-commerce filtering and sorting implementation?

We will put together a detailed 40-page report of the 15 most important usability improvements you can make to your e-commerce product list design.

Get your product finding experience audited