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, the lack of an overview of applied filters caused issues such as slowing down the process of tailoring the product list and in some cases causing disorientation.
In fact, 32% of sites in our benchmark of 60 top e-commerce sites don’t display an overview, a slight decrease from 40% in our 2015 benchmark.
This article discusses the 3 issues that occured during large-scale UX testing with not having “Applied Filters Overviews”, outlines 3 solutions for desktop and 2 for mobile, and discusses 2 implementation considerations.
Without an overview of applied filters, users are faced with 3 issues:
Without an applied filters overview, desktop users will need to look to the filtering sidebar to confirm which filter options have been applied.
If the chosen filter options are towards the top of the sidebar, users will have little trouble, unless an inline scrolling interface is used and some filter options are hidden. But if there are multiple filters selected and they are spread throughout a tall sidebar, users would have to scroll through a few viewports to get an overview of the choices they have made.
Furthermore, users don’t always consciously choose all filters that are currently applied. For example, if users clicked a promoted filter on a home furnishing site’s homepage for “Armchairs under $300”, 3 filters could be automatically applied to the product list they arrive on. (And applying filters, rather than sending users to a sub-subcategory, is the right approach.)
If those applied filters aren’t shown in an overview, users may misinterpret the range and type of products the site offers, as the filters that are narrowing the scope of the list aren’t immediately obvious.
On mobile, confirming which filters have been applied can be even more troublesome for users than on desktop because users have to open the filtering interface to do so. During testing, users opened the filtering interface to confirm their filter selections because they had no visual confirmation in the product list after applying filters.
If there is no overview of applied filters, removing filters that have already been applied becomes more difficult. Users on desktop will be faced with having to scroll through the sidebar to find and deselect filter options that they no longer need.
Mobile users will have to reopen the filtering interface to remove filter choices. And if they need to remove more than one filter, the process would be quite troublesome on sites where the filter interface is closed after one filter is deselected.
For example, if filter option choices are auto-applied, users would have to make 2 trips to the filter interface to remove 2 filters — as well as having to scroll through the filter interface to locate those options.
The end result of this is that users will find applying and deselecting filters more labor intensive, and thus many will be dissuaded from trying to get a perfectly fine-tuned product list.
In many ways, an overview of applied filters is just as important as a page title or breadcrumbs that inform users of where they are and what type of product list they are viewing — they provide a summary of their current scope and product list criteria.
Testing showed this kind of product list context to be essential as users who overlooked even a single applied filter were likely to misinterpret both the type and range of products the site carried.
Users often spend time exploring filtered product lists, scrolling up-and-down to assess products, and visiting product pages. After focusing on product features for awhile, they could easily forget what filters are active.
And without an overview of what filters are scoping the product list, they could form a mistaken impression of the extent of the product catalog.
For example, a product list with 5 filters applied might contain only a dozen products. If none were suitable, and users forgot which filters they had applied 3 minutes previously, they could mistakenly assume that the site didn’t have what they needed, while the removal of one filter could expand the selection to include a suitable product.
On desktop, such an issue would be most likely to occur when some of the applied filters are a few viewports down from the top of the page and thus more likely to be forgotten.
On mobile, the issue would be even more likely to occur because the applied filters would be hidden away in the filtering interface, making it easier for the context of the list to be forgotten.
(An issue observed in previous rounds of testing, whereby sites removed the filter option from its original position when it was chosen, was not observed in the latest test sessions. 97% of our benchmark sites leave the chosen filter option in its original position — as they should — indicating this is no longer an issue for the vast majority of sites.)
On desktop, there are 3 commonly observed ways to show an overview of applied filters. Although testing was inconclusive about which implementation was most effective, what matters is that the overview is easy to see and is not lost among other page elements.
The three design patterns are the following:
With the applied filters overview above the product list, there is typically plenty of horizontal space to devote to them. The applied filter option text can be relatively large, there’s space for a descriptive header to bring attention to the filters, and each filter can have large hit areas for easy deselection.
When more filters are added to the overview than will fit on one row, many sites simply add another row to accommodate them.
However, these extra rows can push the product list down the viewport — potentially obscuring part or all of the first row of products in the list. One way around this issue would be to truncate the second and subsequent rows, as shown in the H&M example below.
Placing applied filters above the filtering sidebar means that all filtering features are in the same area of the page. This location is prominent and most users will quickly find the applied filters if they need to review or remove them.
This placement has associated drawbacks, however. Since filtering sidebars are generally fixed width, when many filters are applied they are often stacked vertically. Depending on the width of the sidebar and the number of applied filters, stacking the filters could push the filtering interface downwards, so that fewer filter types and options are visible in the first viewport.
Horizontal filtering bars, often found on apparel sites, are an alternative to filtering sidebars on desktop and can be used successfully on sites that have only a few filter types.
Applied filters work well with horizontal filtering toolbars because all filtering features can be concentrated in one place above the product list, allowing users to apply and deselect filters in a single area of the page.
When more filters are applied than will fit in one row, some sites add more rows to accommodate the extra filters, thereby pushing the product list down (as with the “Above the product list” implementation). This would cause users to have to scroll down in order to assess the top row of items for suitability.
Although not all users will add enough filters to warrant a second row in the overview, one way to resolve this issue would be to truncate the second and subsequent rows. Users could click on the truncation indicator to reveal the hidden rows if they need to.
While most sites with horizontal filtering toolbars align applied filters horizontally, some sites vertically stack the applied filters.
With vertically stacked applied filters, each added filter would push down the product list, while with horizontally arranged filters this would happen less often as an extra 4–8 filters would need to be applied to add a row to the applied filters overview”.
On mobile, because of the size of the viewport, only a few applied filters will fit in a single line. If users choose more filters than will fit on one line, sites with applied filters overviews have the choice of displaying the filters either as a horizontally scrolling list or in vertically stacked rows.
Whichever is chosen — testing showed either can work well for users — getting the implementation details right is key to making sure that users see all filters without a negative impact on the user experience.
One approach to displaying multiple applied filters on mobile is to use a horizontal scrolling list.
While this design can work well — as it takes advantage of the natural aptitude mobile users have for horizontally scrolling content — care must be taken to ensure that users know that some applied filters can only be seen if the list is scrolled.
Truncation of the rightmost applied filter can work well, but only if users notice the truncation. For example, if only a small slice of the last visible filter is shown, then it is likely to be overlooked. But if half or more of the applied filter is shown, it will be clear that more are visible if users scroll to the right.
Another way to encourage users to scroll to see more applied filters is by fading the edge of the right-most filter (see the Macy’s example in the next section), an indication that more are available to the right.
A third way to signal to users that more filters can be seen in horizontally scrolling lists is to state the number of filters that have been applied in text just above the list.
For example, a text header “3 Applied Filters” would indicate clearly that the applied filters visible by default are not the only ones. This knowledge would in turn prompt users to scroll the horizontal list to see the full set of applied filters.
Yet we also observe users frequently skip over text, so this should only be used in conjunction with some of the other implementations described above.
Combining the three ways of indicating to users that there are more applied filters that can be revealed by scrolling — truncation (with at least 50% visible) and fading of the rightmost filter, and a heading that states the total number of applied filters — is the ideal way of presenting an applied filters overview on mobile.
Another approach to displaying applied filters on mobile is to simply spread the filters over as many rows as are needed to show them all. The advantage of this method is that users would be able to see all applied filters without having to scroll horizontally.
But there is a danger that the rows of filters, combined with other elements at the top of the product list, like the search bar, promoted filters, and the sorting and filtering buttons, could push the list items out of the viewport. Although not observed during testing, some users may feel disoriented when the first list item is out of the viewport, and having to scroll to see list items may be troublesome.
A variation of this design would be to show 1 or 2 rows of applied filters and truncate any further rows. Tapping a “See All Applied Filters” button would reveal the hidden rows.
Not all users need to see all of the applied filters, and vertical truncation of the list would avoid needless clutter at the top of the product list without obscuring the fact that there are more filters applied. This method would also lessen the amount by which the product list is pushed down the page.
One design implementation that didn’t perform well during testing was when sites only indicated the number of applied filters, without actually displaying those filters.
When sites just show the number of filters that have been applied but not the filter options selected, there’s no applied filters overview.
This means that, as discussed in the issues section above, users will have to open the filtering interface on mobile to confirm what filters are applied and to remove any that are no longer needed. In addition, users have no visual reminder of the context of the product list.
Some sites display the filter type in addition to the selected filter option in the overview; for example, “Color: Blue” or “Price: $100.00 to $200.00”. Including the filter type alongside the option increases the size of the applied filter in the overview, which can lead to either more space being taken up by the overview or more filters being hidden by default on mobile devices.
Sometimes, however, the filter option only makes sense with the added context of the filter type. For example, a filter option “90cm” could refer to either the width or the height of a product, while “Width: 90cm” in an “Applied Filter Overview” is unambiguous.
Other filter types won’t necessarily need to be stated in the applied filters overview — for example, color options like “Red” or material options like “Leather” are unlikely to need any further clarification.
Therefore, sites should consider whether or not to include the filter type with the filter option in an applied filters overview.
However, displaying filter types for some options and not for others would not only pose a technical challenge for the site, but also could make it harder for users to understand the structure of the overview. A mixture of differently structured applied filters, some with types and others without, would look inconsistent and could be hard to interpret.
Thus, sites have to decide whether adding filter types in “Applied Filter Overviews” would benefit the majority of users, taking into account the types of products offered.
Apparel sites, for example, with fewer filter types that are largely self-explanatory (e.g., “Color”, “Size”, “Fit”, and “Price”), might choose to omit filter types from “Applied Filter Overviews”.
On the other hand, Home & Hardware sites that offer products for which the filter type would be needed (e.g., “Width” and “Height” for appliances, or “Power Input” and “Power Output” for tools) might need to include the filter types.
As a rule of thumb, spec-heavy sites should include the filter type along with the filter option.
Visually driven sites can most likely only provide the applied filter option.
Sites that sell a mix of the two can choose to simply always show the filter type, or adjust what’s shown dynamically based on the product list being viewed, or the predominant types of products displayed (spec heavy or visually driven) in search results.
If the filter type is necessary for users to interpret the filter option correctly, consider placing it above the option rather than alongside it, so that the combination is as narrow as possible. Also, the filter type should appear secondary to the option by use of appropriate styling (as seen in the B&H example above).
Most users scanning the list of applied filters will be focused on the options, and should not be distracted by the filter types that are there only to remove doubt about the meaning of the filter option.
Without an overview of applied filters, users are faced with 3 issues:
On desktop, applied filters can be placed above the product list, above the filtering sidebar, or below a horizontal filtering toolbar.
On mobile, applied filters can be placed in a horizontally scrolling list above the product list, with clear truncation of nonvisible, applied filters. Alternatively, applied filters can be stacked in rows above the product list.
For both desktop and mobile, avoid simply displaying the number of applied filters, and consider showing the filter type in addition to the filter options.
With 68% of our desktop benchmark sites providing an overview of applied filters, many users will come to rely on seeing these overviews and benefitting from them. To avoid being at a competitive disadvantage, sites should therefore always display applied filters in an overview.
This article presents the research findings from just 1 of the 850+ 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.
Join 22,000+ readers and get Baymard’s research articles by RSS feed or
Topics include user experience, web design, and e-commerce
Articles are always delivered ad-free and in their full length
1-click unsubscribe at any time
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.
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.
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.
This is the sort of article I really enjoy seeing here – useful, informative, not-too-intimidating-to-beginners. Good work!
Really informative, great article. Also some good comments
Interesting article – but IMO the issue of filter location (re-location) is secondary to the annoying practice of auto-sort each time a new filter is applied.
More often than not, a user has 2, 3 or more criteria in mind already – or maybe wants to see if his ideal item exists by applying all 8 (or whatever) filters in one go.
Instead, the (potential) Purchaser is frustrated by a sort and refresh each and every time – and then again when he wants yo change a filter, he has to unselect one first …
How time-consuming and annoying is that ??
It can’t be impossible to supply a “SORT/APPLY” button. A few sites do already.
© 2021 Baymard Institute US: +1 (415) 315-9567 EU: +45 3696 9567 email@example.com