As users apply filters on an e-commerce site, there are two predominant design patterns for how to display the applied filter values:
- Keep applied filtering values in their original position, next to the unapplied filtering values of the same type.
- Display all applied filter values in a single combined list, typically placed either above the product list or at the top of the filtering sidebar.
Yet during our usability study on and benchmark of Product Lists & Filtering it became evident that if a site only utilize one of these patterns, users had a subpar filtering experience when compared to those sites that utilized both design patterns in combination. Sadly, our benchmark of 50 major e-commerce sites revealed that 42% currently have an underperforming “applied filter” design.
In this article we’ll present the usability test findings for ‘Applied Filter’ designs, exploring why a combination performs better, and provide best practice examples from leading e-commerce sites.
1st Test Observation: Applied Filters Should be Kept in Their Original Position
The most frequently observed issue during usability testing were filtering values changing placement when the user applied them – either to another position in the list of filtering values (typically the top) or to an “Applied filters” summary overview. During testing, the subjects were often confounded as they noticed that the filtering value they just clicked was suddenly “no longer there.”
It was clear during testing that when users want to deselect an applied filter, one of the first places they look is the location where they applied the filter in the first place. From a simple flow perspective, it should be evident that it is simply poor usability to train users that filters are applied by choosing them in a list (typically in the left-hand sidebar), but then not allow them to deselect those very same filters in the place they were applied.
Furthermore, it’s easy to see how users can be mislead by, for example, a filter label saying ‘Hard drive capacity’ which then doesn’t inform the user that a ‘500GB’ option is currently selected within that list (because it’s been moved to a separate ‘Applied filters’ summary elsewhere on the page).
Applied filtering values should therefore be kept in their respective filtering list alongside the other (unselected) filtering values of the same type. This supports the basic user behavior of being able to turn off a given feature in the same place it was turned on.
However, that is not to say that they can’t also be shown in an ‘Applied filters’ summary. In fact, showing filters in a summary is a very good idea – as we’ll see in the very next section – so long as they also remain available in their original position too.
2nd Test Observation: Applied Filters Should be Displayed in a Combined Overview List
While the applied filtering values should be kept in their original position, this alone will not suffice. During testing, displaying all the applied filtering values in a combined “overview” list proved immensely helpful at:
- Confirmation – Letting the user know the filters they’ve selected have indeed been applied.
- Context – Showing which parameters the current product list is filtered by.
- Interaction – Offering a quick way to disable multiple filters in a row.
A combined overview of all applied filters is a great way for the user to see “all criteria” the currently displayed product list is filtered by. Something which can be difficult if the applied filters are only displayed in their original position – as the applied values will then be scattered throughout the left-hand filtering sidebar, and in many instances be completely out of view when the user is looking at the top of the filtered product list.
In many ways, an overview of all applied filters is just as important as a page title or breadcrumbs that inform the user of where they are and what type of product list they are viewing – providing a summary of their current scope and product list criteria. Testing showed this kind of product list context to be essential as subjects that overlooked even a single applied filter were likely to misinterpret both the type and range of products the site carried.
Furthermore, an “Applied filters” overview makes it easy for the user to deselect previously applied filters. If there are 3+ applied filtering values the summary may even offer the user a way to conveniently “Remove all filters”.
A Combination Works Best
Upon deeper analysis of the usability sessions pertaining to “applied filter state”, it became clear that in order for a design to be user-friendly it has to meet a handful of requirements:
- Make sure the user can easily find any currently applied filters.
- Make it clear exactly which criteria the currently displayed product list is filtered by.
- Allow the user to easily deselect applied filters.
- Provide the user with additional context when selecting new filtering values.
- Help the user infer how much of a filter type’s “range” is currently selected.
When combined, the two design approaches – showing applied filters in their original position and displaying them in a summary – address all of the above requirements, and consequently it’s recommended to implement a combination of both designs.
The test sites that both displayed the applied filters in their original position in the filtering sidebar, and displayed a summary of all applied filter at the top of the product list, had a vastly lower rate of user errors and hiccups than the sites that utilized only one of the design patterns. It’s therefore easy to recommend this design approach.
That said, the test sessions also revealed two alternate designs that also met all the design requirements to filters: 1) filter breadcrumbs and, 2) horizontal filtering toolbars.
One of the alternate designs combine the pattern of keeping the applied values in their original position, but then also adds the applied filtering values as part of the page breadcrumb, rather than as an “Applied Filters” summary. This has the added benefit of clearly indicating that the shown product list has a unique “scope” and that there’s a filtering history and hierarchy. However, it comes at the cost of making deselection of filters less direct because the filter can be deselected only in its original position.
Indeed, a few test subjects struggled with deselecting applied filters at Amazon as they tried clicking the breadcrumbs (instead of deselecting the filters in the sidebar). It’s therefore important to pay great attention to detail if pursuing a similar design to ensure alignment between site behavior and user expectations.
Another design pattern observed to meet the design requirements for applied filters was those sites that didn’t have the traditional filtering sidebar at all but instead relied on a horizontal filtering toolbar. A horizontal filtering design by its very nature displays an overview of the applied filtering values while still keeping them in their original position. The design therefore naturally meets the design requirements for applied filters.
It’s important to note however that horizontal filtering toolbars are only appropriate to some site types (as discussed in our article on the topic) and it’s therefore not an alternative available to all sites.
Conclusion: Display Applied Filters Both in Their Original Position and in an Overview
In short designing ‘applied filters’ can be boiled down to solving the predicament of users on one hand getting confused if applied filtering values change position yet at the same time often needing a complete overview of all the applied values.
During testing only showing the applied filters in either their original position, or only in an ‘applied filters’ overview proved inadequate, leading to issues with either deselecting filters, overlooking applied filters, or not fully understanding the criteria the product list was filtered by.
Luckily, as we’ve explored in this article, our usability testing also showed that the two design patterns simply need to be combined to meet the design requirements for ‘applied filters’. And indeed, the sites that utilized a combination of both patterns outperformed those that only relied on one.
Currently, 58% of the 50 largest e-commerce sites display applied filters both in their original position and in an overview, or meet the ‘applied filters’ design requirements by using a horizontal filtering toolbar. This can therefore hardly be considered a novel concept or something that will help you leap beyond the competition. Rather, if you aren’t getting your ‘applied filters’ design right, it is an area where you’ll likely be falling behind your rivals and making it needlessly difficult for your users to find and control their applied filters.
This article presents the research findings from just 1 of the 710+ 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.