The Current State of E-Commerce Product List UX Performance (15 Best Practices)

As Baymard’s large-scale testing has revealed, 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.

Yet most e-commerce sites have only a “mediocre” performance when it comes to the product list.

As a result, many users will struggle to use the list effectively to find suitable products.

Our latest 2023 Product Lists and Filtering e-commerce UX benchmark, adds to our previous Product Lists & Filtering benchmarks, and now contains the following:

• 11,000+ Product Lists and Filtering UX elements that have been manually reviewed and scored by Baymard’s team of UX researchers
• 7,000 best practice (and worst practice) examples from 100+ top-grossing e-commerce sites in the US and Europe (performance verified)

In this article, we’ll show you a portion of our large-scale Baymard Premium research UX dataset to provide you with an overview of the current landscape of Product Lists and Filtering e-commerce UX, as well as outline 15 best practices applicable to most e-commerce sites.

The Current State of E-Commerce Product List and Filtering UX

Product lists are key to users’ ability to find suitable products, as they help users explore and narrow down what can be a list of 1000s of products.

Without a high-performing product list, users will skip over products that may have suited them.

As a result, some will — as we’ve observed many participants do during our large-scale testing — abandon the site, thinking they won’t find a good product match on the site for their needs.

Despite the importance of the product list, our 2023 e-commerce UX benchmark reveals that most sites have only a mediocre performance.

For this analysis, we’ve summarized the 6,000+ UX performance scores for 2023 across the topics in this theme, and plotted the benchmarked sites’ Product List and Filtering user experience across these topics in the scatterplot above.

Each dot, therefore, represents the summarized UX score of one site across the guidelines within that respective topic of the Product List and Filtering user experience.

Despite the importance of Product List and Filtering for users’ ultimate ability to find a suitable product, our 2023 UX benchmark shows that 57% of sites have a “mediocre” or worse performance.

This figure paints a relatively negative picture of the theme performance as a whole, especially considering that the theme performance has only marginally improved since the previous benchmark in 2021.

Below we’ll discuss in more detail the results from our research by sharing 15 Product List and Filtering pitfalls.

For each best practice we’ll provide examples of sites that get it wrong, as well as best practice examples from our large-scale testing and benchmarking, across 5 of our Product List and Filtering topics, beginning with Product List Loading.

For inspiration, Crutchfield and Sephora feature the best overall Product List & Filtering performance. While not notably “perfect” or “state of the art”, their “good” performances indicates that there is much to take inspiration from.

3 Product List Loading Best Practices

When it comes to loading new items in a product list, there are 2 key challenges:

1. Optimizing load performance
2. Encouraging deep vs. broad product scanning

The first challenge is about making products load in as fast as possible (or at least make them appear to do so) without unnecessarily taxing the user’s device and internet connection, not to mention the site’s servers.

The second challenge requires a judgment of whether deep or broad scanning of the product list is more desirable; in other words, should the user be encouraged to do a more superficial scanning of a large number of products or a more in-depth inspection of fewer products?

Performances are quite polarized for “Loading Products”: sites in the benchmark either performed “poorly” or worse or “good” or better.

Below are 3 best practices when it comes to “Loading Products”.

For “Product List Loading” inspiration, see Crate & Barrel, Crutchfield, Ellos, and Ann Taylor, all 4 of which have “perfect” implementations.

1) Return Users to the Same Place in the Product List When Returning from the Product Page (17% Don’t)

“It keeps coming back up to the very start. I would prefer if it went back to where I last left it.”

When users are evaluating products, they often move back and forth between the product list, where they can see a few key elements of product information, and multiple product details pages, where they explore a product in more depth.

Yet this back and forth process is unnecessarily difficult, time-consuming, and frustrating when users are returned to the top of the product list each time.

Indeed, users are quite likely to lose patience if they have to look at many separate products and keep getting placed back at the top of the product list — with the effect being even worse on mobile, due to the reduced viewport.

Therefore, it’s key to return users to where they were in the product list when they navigate back from the product page.

While only 17% of sites don’t return users to the same place in the product list, it’s a high severity issue — users are thoroughly discouraged from exploring products if they have to rescroll product lists, and many will decide to abandon the site rather than spend the extra time navigating the product list.

2) Consider Using “Load More” as the Loading Schema (74% Don’t)

“Load More’’ is 1 of 3 types of loading schema for product lists and search results.

The other 2 — “Endless Scrolling” and “Pagination” — were during large-scale testing less successful at providing users with the best product list experience, with “Endless Scrolling” generally being unhelpful to most users, while “Pagination” performed decently, but only if implemented carefully.

There are 3 main benefits to “Load More” that make it easy for users to add products to product lists:

1. Users can compare all items on one page
2. Access to the footer is easy
3. There’s a natural stopping point to encourage users to consider next steps

Neither “Endless Scrolling” nor “Pagination” can match “Load More” when it comes to the 3 benefits above.

Moreover, “Load More” performs best for mobile users, as there’s just one button to control the loading of more products — providing a much larger hit area than pagination links — but also a considerably simpler interface than with pagination links.

Despite the benefits, 74% of sites don’t use “Load More”, providing their users with a suboptimal product list loading experience.

3) Load the Optimal Number of Products in the Product List (72% Don’t)

During our large-scale usability testing, we’ve found that when too many products are loaded into the default product list, some users will feel overwhelmed by the number of items to consider.

On the other hand, when too few products are loaded, some users will instead often fail to grasp the full range of products available.

During testing, this even lead some users to abandon sites with relevant products because participants gave up when faced with the number of products they had to consider (if too many products were loaded), or underestimated the site’s product selection (if too few were).

The optimal range of products to load depends on the type of product — whether it’s spec driven or visually driven — as well as whether it’s a mobile or desktop device:

• For spec-driven products on desktop sites, our testing indicates that a range of 50–100 items is optimal
• For visually driven products on desktop sites, our testing indicates that a range of 100–150 items is optimal
• On mobile sites, for both types of products, 15–30 products was identified as the optimal range

Providing users with the right amount of products to consider in the product list will help balance the tension between providing too many products versus providing too few.

7 Product List Info Best Practices

The purpose of product list items is to allow users to easily and accurately determine which products to investigate further — essentially whether a list item’s product page is worth opening or if it should be skipped.

While that may seem like a fairly basic objective, it is by no means easy to achieve — testing reveals that it requires careful implementation of the list item information (among other details) to ensure the product list items are meeting users’ needs.

In the end, similar to many other Product List UX considerations, when it comes to list item info it’s a balancing act: ensuring users have enough info to decide whether they should visit the product page, while at the same time retaining scannability and allowing users to get an overview of the overall list.

Performances in the “List Items: Product Info” topic are “poor”, with 85% of sites having a “mediocre” performance or worse and 22% of sites being below “poor.”

In contrast to the previous benchmark performance in 2021, “Product Info” has seen a noticeable decline in performance scores, particularly in essential and highly impactful areas.

While making improvements in these areas can be time-consuming and costly, most sites stand to gain tremendously by addressing their inadequacies in this department.

Below are 7 list item info best practices.

For inspiration, see Crutchfield, Wayfair, and Amazon, all 3 of which have “perfect” product list info implementations.

4) Always Provide Comparison Features for Spec-Driven Products (61% Don’t)

Enabling users to compare products easily and efficiently is one of the primary purposes of product lists.

Users can of course compare product features by scanning list item information, but spec-driven product types often have differentiating specs that are too numerous to fit in list items.

Furthermore, the process of going back and forth between the product list and product page can be challenging for users (see the first best practice above) — especially if considering spec-driven product types, as it forces users to memorize a variety of different specifications.

Therefore, sites with many spec-driven product types should provide comparison features to provide users with an optimized interface for comparing products.

Note, however, that our large-scale testing found that comparison features were not helpful to mobile users (due to the smaller interface).

5) Optimize Comparison Features for Scannability (78% Don’t)

Simply providing a comparison feature isn’t enough — the feature has to be optimized for scannability to be truly useful to users considering spec-driven products.

In particular, our large-scale testing revealed 4 key design details for comparison features that are important to implement in order to enhance scannability:

1. Remove identical attributes
2. Group attributes by category
3. Persist column headings during scrolling
4. Use horizontal styling to define rows

A high-performing comparison feature is one that’s more likely to be used by users — who are consequently more likely to find a suitable product.

6) Combine Variations of Products into One List Item (42% Don’t)

Certain products have variations that users need to be aware of when browsing product lists.

Examples of variations include colors of clothing and consumer electronics items, and exterior finishes of home appliances like refrigerators.

There are two ways to display these product variations in product lists:

1. Variations are combined into a single list item, with the variations often indicated using swatches below the thumbnails
2. Variations are displayed separately, with each variation — for example, shirts in different colors — having its own list item

During multiple rounds of testing, it became clear that there are two major usability issues associated with product variations displayed as separate list items:

1. Product lists can become cluttered with variations of products, overwhelming users and making it harder for them to get an overview of the product range
2. If the variations are spread throughout the product list, many users will struggle to find a particular variation of a product

Therefore, it’s important to combine product variations into a single list item.

7) Display “Price Per Unit” For Multiquantity Items (85% Don’t)

When users compare the different products available to them, price is obviously a major factor.

Yet sometimes highly similar products are sold in different quantities and these products actually have two price points that are important to the user: the total product price and the unit price.

If sites only display the total price, users aren’t provided with the information they need to make a purchase decision.

Therefore, it’s key to, if offering similar products of different quantities, display both the total price and the unit price — yet a shockingly high 85% of sites fail to do so.

8) Always Provide These 5 Essential Pieces of List Item Info (36% Don’t)

Many users select and reject products based upon the information available about those items in the product list.

Yet during testing, we observed that participants were unable to adequately assess the listed products when they lacked essential information about those items.

Too-little crucial list item info forces users to go to the product page, then back to the product list, then back to a different product page — a back-and-forth that users quickly lose patience for.

Therefore, it’s key that critical list item info is always included in the product list.

In particular, we identified 5 pieces of information that most product list items should always have:

1. Price
2. Product title or type
3. Thumbnail
4. Ratings
5. Product variations

Yet 36% of sites fail to include 1 or more of these — leaving users without access to necessary product information.

9) Provide Category-Specific Info for List Items (15% Don’t)

Many product verticals will have one or a few attributes that are so important to the products in that category that they should be included directly in the list item overview.

Essentially, these attributes operate the same way as the 5 essential attributes above: they help users to make an informed decision about which products to open and which to skip.

These attributes will naturally vary greatly from category to category and must be chosen uniquely for each vertical.

While the specific attributes to include will vary, some category-specific attributes to consider include compatibility information (e.g., “Works with your Honda Fit”) , physical dimensions (e.g., length/width/height, capacity), appropriateness for audience or occasion (e.g., “Popular for Valentine’s Day” ), essential technical details (e.g., “IPX” for water resistance), and so on.

In the end, the key is to identify the key category-specific attributes for a given product type and ensure they’re included in the product list.

10) Include and Present Product Attributes Consistently Across List Items (82% Don’t)

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

For example, if an electronics site only includes “Battery time” for some of the laptops in a product list, users would have a difficult time comparing those list items with the attribute listed against those without it.

Therefore, in addition to providing the right information, it’s important to provide information consistently across list items.

Doing so will help the product list function more effectively as a way to compare products against one another.

5 Product List Filter Best Practices

Filtering is about empowering the user to take a large generic product list and narrow it down to a manageable selection of products that is uniquely tailored to their needs and interests.

In some ways, it’s the e-commerce equivalent of walking into a physical store and asking the salesperson for a “brown mens leather jacket in size medium.”

Filtering is a large topic, and our filtering guidelines are placed in 3 separate subtopics: “Available Filters”, “Scope and Logic”, and “Interface and Layout”.

• For “Filtering: Available Filters”, our benchmark reveals that there is a high degree of polarization in performance scores, with 43% of sites performing “good” or better and 41% having a “mediocre” or worse performance
• For “Filtering: Scope and Logic”, our benchmark reveals that sites in general perform better, with 59% of sites performing “decent” or better, and 12% of sites have a “state of the art” performance in this area
• For “Filtering: Interface and Layout”, our benchmark reveals that the average performance is “decent,” with 72% of sites performing “decently” or better

Below we’ll discuss 5 filtering implementations that many sites get wrong.

For inspiration, you can see Sears for “Filtering: Available Filters” and “Filtering: Interface and Layout”, and La Redoute for “Filtering: Scope and Logic” and “Filtering: Interface and Layout”, among other sites (as many do quite well in one filtering subarea or another).

11) Provide These 5 Essential Filter Types (47% Don’t)

It’s crucial for product finding that users can filter e-commerce product lists according to their purchasing preferences.

If users are unable to adequately filter product lists, their ability to tailor product lists to contain only items of interest is severely restricted, and they may be unable to find what they need.

Large-scale testing revealed 5 filter types in particular that should always be provided if applicable, as they are commonly used and critical to many users’ ability to find suitable products:

• Price
• User ratings average
• Color
• Size
• Brand

Providing these 5 essential filters will allow the vast majority of users to filter product lists to contain mainly items of interest.

12) Provide Category-Specific Filters for All Key Product Specs (39% Don’t)

During testing, as participants realized important filtering types were missing, it led to an excessive amount of time being spent trying to find the filter type, which “must be there somewhere”.

Users simply can’t understand why, if a product attribute is “called out” by being displayed as part of the product listing item info, there wouldn’t be a way to filter to see only those products that contain that attribute (or, conversely, only those products that don’t contain that attribute).

Thus, users will often scan the filtering interface — multiple times if there are a lot of filters — for the filter they’re interested in.

This leads to wasted effort and frustrated users if in the end the filter is simply unavailable.

Almost all sites, therefore, should provide category-specific filters — in particular, for all displayed list item info.

A potential exception would be sites with a narrow set of products — if all products share the same attributes or specs, a single exhaustive set of sitewide filters might suffice.

13) Always Explain Industry-Specific Filters (57% Don’t)

As described above, filters are key for many users’ ability to narrow down the product list to a suitable selection of products.

Indeed, filters can often be the deciding factor as to whether a user is able to find a desirable product or not.

However, if users don’t fully understand the filter types and values, it can be as damaging as not having these filters in the first place.

Ideally, then, filters that are based on industry jargon are avoided entirely.

Yet sometimes industry jargon can’t be avoided, or is critical to understanding for “users in the know”.

In that case, such filters should be explained so that users who are unfamiliar with the terminology can gain an understanding of what product attributes the filter represents.

14) Display Applied Filters in an Overview (22% Don’t)

When users apply filters to product lists, almost all sites confirm the choices where the filter was originally chosen — for example, by adding a tick mark to a filter option checkbox on a desktop site.

However, during both desktop and mobile large-scale UX testing, many sites failed to provide an overview of applied filters.

This caused issues such as slowing down the process of tailoring the product list and in some cases causing disorientation.

Therefore, filters that have been selected should be displayed in an overview.

Depending on the platform — desktop or mobile — there are several different solutions that have been verified during testing:

• On desktop, filters can be displayed in an overview above the product list, above the filtering sidebar, or below a horizontal filtering toolbar.
• On mobile, filters can be displayed in a horizontally scrolling or stacked list at the top of the product list.

15) Always Allow Users to Combine Multiple Filter Options of the Same Filter Type (an “Or” Logic) (7% Don’t)

Finally, though most sites get this right, there are a few sites that fail to use an “or” logic for filtering.

In effect, filters at a few sites are wrongly implemented as mutually exclusive — meaning users can only select one filter value (e.g., “Blue”) at a time of a given filter type (e.g., “Color”).

This is observed to make it very difficult for users to narrow down product lists and “focus the list” on products they’re actually interested in purchasing.

Therefore, users should be allowed to combine multiple filter options of the same filter type — use an “AND” logic for filter types and an “OR” logic for filter values.

Improving E-Commerce Product List and Filtering UX

This high-level analysis of the current state of Product Lists and Filtering UX focuses on only 5 of the 8 Product Lists and Filtering topics included in our e-commerce UX benchmark analysis.

The 3 other topics should be reviewed as well to gain a comprehensive understanding of the current state of Product Lists and Filtering UX, and to identify additional site-specific issues not covered here.

As our benchmark has revealed, it’s clear that there’s much room for improvement in Product List and Filtering UX, as 57% of sites have “mediocre” or worse Product List and Filtering performance.

In particular, the 15 best practices described in this article should be adhered to:

1. Return users to the same place in the product list when returning from the product page (17% don’t)
2. Consider using “Load More” as the loading schema (74% don’t)
3. Load the optimal number of products in the product list (72% don’t)
4. Always provide comparison features for spec-driven products (61% don’t)
5. Optimize comparison features for scannability (78% don’t)
6. Combine variations of products into one list item (42% don’t)
7. Display “price per unit” for multiquantity items (85% don’t)
8. Always provide these 5 essential pieces of list item info (36% don’t)
9. Provide category-specific info for list items (15% don’t)
10. Include and present product attributes consistently across list items (82% don’t)
11. Provide these 5 essential filter types (47% don’t)
12. Provide category-specific filters for all key product specs (39% don’t)
13. Always explain industry-specific filters (57% don’t)
14. Display applied filters in an overview (22% don’t)
15. Always allow users to combine multiple filter options of the same filter type (an “or” logic) (7% don’t)

AAdhering to the 15 best practices is the first step toward improving users’ Product List and Filtering experience.

This article presents the research findings from just a few of the 650+ UX guidelines in Baymard Premium – get full access to learn how to create a “State of the Art” e-commerce user experience.

If you want to know how your website performs and compares, then learn more about getting Baymard to conduct a UX Audit of your site.