How to Design ‘Applied Filters’ (42% Get It Wrong)

This is the 7th in a series of 9 articles based on research findings from our e-commerce product list usability study.

As users apply filters on an e-commerce site, there are two predominant design patterns for how to display the applied filter values:

  1. Keep applied filtering values in their original position, next to the unapplied filtering values of the same type.
  2. 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.”

“I go down here to look for it [the just-applied filter, ed.] because now I know where it is.. And then it annoys me.. Arhh, it’s up here. It changed position,” a subject said after applying a filtering value, looking to apply another value from the same filter type.

“But where did they all go? All those options in the side, out here where I could pick what I wanted to see. I didn’t expect them to disappear,” a subject explained. The subject never noticed that she could see and deselect the applied filtering values above the product list, and she therefore ended up on a long detour just to get back to the original product list.

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).

After spending a while looking around for a digital camera at Tesco, this subject began looking through the list of camera brands. However, as he looked through the list of filters he failed to recall that he had already applied an ‘Olympus’ brand filter and wasn’t reminded of this since it no longer appeared as a filtering value in the ‘Brand’ filter (it had been moved to a ‘Selected filters’ summary at the top of the filtering sidebar).

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:

  1. Confirmation – Letting the user know the filters they’ve selected have indeed been applied.
  2. Context – Showing which parameters the current product list is filtered by.
  3. Interaction – Offering a quick way to disable multiple filters in a row.

While a unified overview of applied filters proved inadequate on its own (as most users expect a consistent position for on/off toggle behavior), these summary overviews did help some subjects. For example at the Entertainer the applied filter summary helped this subject quickly establish an overview and reminded him about which parameters the displayed product list was filtered by.

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.

During testing of Macy’s, the subjects relied on both positions of the applied filter values. Notice how the applied values are displayed (and can be deselected) both in their original position and in the combined overview of the applied filters above the product list.

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.

Rather than having a summary of applied filters, Amazon integrates them into the page breadcrumb.

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.

Nordstrom has a horizontal filtering toolbar which eliminates the need for duplicating applied filters to a summary as displaying them in their original position automatically creates an overview too.

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 predictament 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.

Like the majority of the 50 benchmarked e-commerce sites, NewEgg wisely uses a combination of both keeping applied filtering values in their original position while also showing them in a summary.

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 93 UX guidelines in our Product Lists & Filtering study — get full access to learn more about the 92 other findings required to create a “State of the Art” user experience for product lists, filtering and sorting.

Post a comment or Share:

User experience research, delivered twice a month

Join 16,000+ readers and get Baymard’s research articles by RSS feed or e-mail:

Due to spam, you need JavaScript to do that.

(1-click unsubscribe at any time)

Article Series

  1. Most E-Commerce Sites Need ‘Price Per Unit’
  2. Users’ Perception of Product Ratings
  3. Category-Specific Sorting: A New Way to Sort Products
  4. External Article: The Current State of E-Commerce Filtering
  5. Filtering UI: A Horizontal Toolbar Can Outperform the Traditional Sidebar
  6. Contextual List Item Information – A New E-Commerce Personalization Technique
  7. How to Design ‘Applied Filters’ (42% Get It Wrong)
  8. Don’t Base ‘Customer Ratings’ Sorting on Averages Only
  9. 7 Filtering Implementations That Make Macy’s Best-in-Class”

Related articles

More ‘Product Lists & Filtering’ Research

Free Research Content:

Products & Services:

All Research Topics

Kevin Adams June 10, 2015 Reply to this comment

Good article… also the behavior of removing (un-applying, if that is a word) filters should be examined. Removing a filter should not cause the entire page to refresh, or have the filter controls redraw/reload. This is really annoying when trying to quickly remove several filters. For example, Newegg is terrible at this. They also reload the screen whenever a new filter is selected. (I’m using Chrome 43)

I don’t have a problem with reloading the results portion of the page as each filter is applied/removed. But reloading the entire page, or the filter controls, is obnoxious and tedious because it forces the user to stop what they are doing.

Jamie, Baymard Institute June 14, 2015 Reply to this comment

Hi Kevin,

Absolutely, the interface for removing filters is important, and – as referenced in this article – closely related to how applied filters are displayed, since the user must be able to disable the filters in the same place they enabled them. In addition to this, any filter summaries should allow disabling as well.

For the interaction aspect, our research showed that dynamically updating the product list worked the best, as this allowed the user to continue interacting with the rest of the page (notably the filters – the test subjects would often click additional filters before the products had finished loading, and found it frustrating when they were prevented from doing this due to page reloads / filter load inactivation). The one exception to this is mobile where a filter widget in which the user selects all their desired filters and then “Apply” them (typically invoking a page reload) worked well. In large part because users will typically not be able to see filters and product list side-by-side on a small smartphone screen anyways, and the generally limited page context making the platform more apt for wizard-type interfaces.

David Mannheim June 22, 2015 Reply to this comment

Great understanding here. I’d be interested to see how this recommended technique and understand a) applies to mobile and b) differs on a mobile device (Even general devices with lesser resolution)

You mentioned that “The one exception to this is mobile where a filter widget in which the user selects all their desired filters and then “Apply” them (typically invoking a page reload) worked well.” but how this is displayed on a device with inherently less real estate space than a larger resolution would be of note.

Neil June 10, 2016 Reply to this comment

This is the sort of article I really enjoy seeing here – useful, informative, not-too-intimidating-to-beginners. Good work!

Gareth Graham November 16, 2016 Reply to this comment

Really informative, great article. Also some good comments

Post a comment!

Close overlay