E-Commerce Filter UX: Allow Users to Combine Multiple Filtering Values of the Same Type — an ‘OR’ logic (32% of Sites Don’t)

Despite the ubiquity of filters in e-commerce — all of the top-50 US e-commerce sites allow users to filter product lists — our benchmarking reveals that the underlying filtering logic found at 32% of e-commerce sites downright misaligns with users’ expectations of how filters work, and how users even look for and evaluate products online.

In fact, our large-scale Product Lists & Filtering usability testing consistently shows that filters are often 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.

Furthermore, our usability test sessions revealed that this is a common user behavior, with 45% of users trying to apply multiple filter values of the same filter type at some point during testing. Yet our benchmark data reveal that 32% of sites fail to allow users to combine multiple filter values for at least some of the available filter types.

In this article, we’ll discuss the test findings from our Product Lists & Filtering usability study related to how users select filters and the required filtering logic, including:

• How not allowing users to combine filter values makes it almost impossible to use filters to narrow product lists
• How allowing users to combine filter values enables them to adapt the product list to their specific needs
• How ‘AND’ and ‘OR’ logic should be applied to filter types and values

The Issues with Applying Multiple Filter Values When Filter Values Are Mutually Exclusive

To understand how negative an impact mutually exclusive filter values can have on the end user, it’s worth considering the process a user must go through when trying to use a filtering implementation that doesn’t allow filter values to be combined.

On sites where the filtering values (within a filter type) are implemented as mutually exclusive, a user who is interested in, for example, “Blue” and “Black” jeans must perform the following steps to get a set of suitable products:

1. Apply the first filter value (“Blue”)
2. Look through the products in the filtered list
3. Memorize the interesting products for “Jeans: Blue”
4. Deselect “Blue” as a filter and wait for the page to reload to see the prior product list without any filters
5. Apply the second filtering value (“Black”) at the now unfiltered product list
6. Look through the products in this new filtered list
7. Memorize the interesting products for “Jeans: Black”
8. Finally, the user must now — from memory, or across browser tabs — compare all the memorized options

All of this just to see the results across two filtering values that have wrongly been implemented as mutually exclusive. And of course the process becomes even more arduous if the user is interested in 3 or more filtering values, or in multiple sets of values within different filtering types (at which point the combinations make it practically impossible).

In fact, the process gets both increasingly tedious as more filters are needed and also becomes increasingly impractical because the user has to memorize more and more products across product lists — up to the point where they can’t realistically remember all of the options anymore. At some point the user is effectively prevented from seeing all relevant products matching their needs within the filter type.

The end result observed in our testing of wrongly implementing filter values as mutually exclusive is that users are far less likely to use filters, or to use them effectively, and therefore less likely to find a suitable product to purchase.

The Process of Applying Multiple Filter Values When the Values Aren’t Mutually Exclusive

Now, compare the process required when filter values are mutually exclusive to the process when the values in the filter group aren’t mutually exclusive:

1. At the unfiltered product list, the user applies the desired combination of filtering values upfront
2. The user can now look through the products in the complete filtered list

And that’s regardless of how many filtering values the user is interested in.

When filtering values are not mutually exclusive, users can easily combine multiple filtering values to create a more suitably filtered product list — such as applying “Blue,” “Black,” and “Red” for a “Jackets” category, or applying three different brands for a shoe category, etc.

Allowing multiple filtering values also enables users to remove irrelevant product variations by applying all other filters. If a user, for example, knows that black and white jackets are of no interest, they are able to leave these values out by applying the remaining colors, and get a list of products only in the colors they’re interested in.

‘AND’ and ‘OR’ Logic for Filters

It is furthermore worth noting additional user expectations in regards to the underlying logic of filter types versus filtering values.

When values from multiple filter types (or filter “groups”) are applied, we consistently in testing observe that users expect the resulting products to match selected values from all those types. For example, if a user is in an “Espresso Machine” category, and the user applies the filters “Finish: Stainless steel” and “Brand: DeLonghi”, they would expect the results to be in a stainless steel finish and of the DeLonghi brand.

Meanwhile, when multiple filtering values are selected within the same filter type, users expect the resulting products to match any one of those values. For instance, if the user in that “Espresso Machine” category had also chosen ”Brand: Keurig”, they would expect to see stainless steel espresso machines from either DeLonghi or Keurig.

The logic is therefore that filter types should follow an “AND” logic when multiple types are selected, whereas the selected filtering values within any of those types should follow an “OR” logic. Our previous “Espresso Machine” example could thus be written in an equation-like format:

(Finish: 'Stainless Steel') AND (Brand: 'DeLonghi' OR 'Keurig')

Which is akin to how it would be implemented in a database query.

This “AND”-logic for filtering types and “OR”-logic for filtering values is also a strong web convention within e-commerce, which our benchmark reveals is the logic used by 98% of the 50 top US e-commerce sites (among those that allow multiple values to be selected within the same filter type).

Finally, to communicate to users the logic that filter values are inclusive, style filter values as checkboxes, which visually indicates that multiple values can be selected.

Help Users Get Highly Refined Product Lists by Implementing the Right E-Commerce Filter UX

Users rely on filters in product lists and in search results to narrow down what can often be massive, overwhelming product lists. Using mutually exclusive filter values makes filters practically unusable, and more likely that users will abandon to try a competitor’s site. Therefore, to help users get highly refined product lists,

1. Allow users to combine multiple values of the same filter type
2. Use an “AND” logic for filter types and an “OR” logic for filter values
3. Style filter values as checkboxes

Yet 32% of sites don’t allow users to combine filter values.

This article presents the research findings from just 1 of the 580+ UX guidelines in Baymard Premium – get full access to learn how to create a “State of the Art” user experience for product lists, filtering and sorting.