Key Takeaways
- Horizontal filtering toolbars don’t work satisfactorily for all product types
- Their inherent shortcomings can cause users managing product lists to struggle
- Horizontal filtering toolbars can be troublesome if there are more than 6–8 filter types
Key Stat
- 24% of sites use horizontal filtering toolbars
Video Summary
Horizontal filtering toolbars, which appear above product lists and search results instead of in the sidebar, are used less often by sites than sidebar filtering.
Yet our ecommerce ux benchmark shows they are used consistently on 24% of sites year over year since 2020, warranting a closer look at their pros and cons.
While horizontal filtering toolbars were observed to work satisfactorily for some product types during Baymard’s large-scale testing, their inherent shortcomings caused some participants to struggle when there were many filter types to consider.
This article will discuss the latest Baymard research findings on 2 drawbacks of horizontal filtering toolbars compared to sidebar filtering interfaces:
- How it’s more difficult to get an overview of filter options
- Why they’re unsuitable for more than 6–8 filter types
1) How It’s More Difficult to Get an Overview of Filter Options
Without being able to scan for “Color” filter options at IKEA, users who don’t see sofas in a preferred color won’t immediately know if they’ll find suitable ones for their space.
The first issue with horizontal filtering toolbars is that the filter options within each filter type are not visible by default.
This means that users find it more difficult to get an overview of the scope of the catalog.
For example, users on apparel sites who land on the product list page won’t get immediate feedback on all color variations for an item or how many product matches there are for each filter option.
On the other hand, with sidebar filtering, options can be shown for each type along with the number of matches for each.
With horizontal filtering toolbars, users have to click on the filter type to reveal more information about the current scope — adding an unnecessary extra step to their product finding.
2) Why They’re Unsuitable for More than 6–8 Filter Types
”They don’t seem to have as many…sorry, you have to take an extra step to do your filters. Which is kind of annoying.” When all the filter types aren’t included in the single horizontal toolbar row such as here at Staples, desktop users must click to see more filter types. However, some participants overlooked these “All Filters” buttons completely or only noticed them after initially interacting with the visible filters. (Note also the horizontal space available, where additional filter types could fit.)
Another issue with horizontal toolbars can occur if there are too many filters to display.
If there are a large number of filters, sites either have to add more rows to the toolbar or display the “hidden” filters when users click an “All Filters” or “See More Filters” button.
During testing, these buttons were overlooked by some participants.
If some filter types are overlooked, users could struggle to tailor product lists to a suitable number of items — making product finding more troublesome than it needs to be.
Generally, therefore, horizontal filtering toolbars can only work with a limited number of filter types.
For example, many apparel sites provide no more than 8 or so filters, and horizontal toolbars accommodate them comfortably.
Be Cautious if Considering Using Horizontal Filtering Toolbars
Without a filtering sidebar or category links at the side of the Marks & Spencer product list, the full page width can be devoted to list items. This enables thumbnails to be slightly larger, allowing users to get added visual information.
At reserved, the placement of the horizontal filtering toolbar above the product list can encourage users to apply filters immediately upon arriving on the page. When users don’t have to search for suitable filter types, product finding can be faster.
Filters are immediately noticeable at Williams Sonoma due to their placement above the search results, and the full width of the page is used to accommodate large thumbnails.
The 2 major drawbacks cited above argue against using horizontal filtering toolbars for most sites.
Thus, it’s important to be cautious if considering implementing horizontal filtering toolbars.
Horizontal filtering interfaces can work well when products only need a small number of filter types.
And in such cases, a horizontal filtering interface, by eliminating the need for a sidebar, frees up horizontal space for larger list item thumbnails or an additional column of items.
On the other hand, sidebar filtering interfaces are a proven and familiar implementation that generally performs satisfactorily for most users.
Therefore the pros and cons to horizontal filtering toolbars must be taken into account when considering how to implement filtering.
On that final note, keep in mind that there’s a lot to get right when it comes to sidebar filtering implementation too — for example, when it comes to the size filter, visual filtering, and grouping and labeling of filters, to name a few (If you have access through your Baymard account, see all 28 of our guidelines on filtering in the Product Lists and Filtering theme).
This article presents the research findings from just a few of the 650+ UX guidelines in Baymard – get full access to learn how to create a “State of the Art” ecommerce user experience.
If you want to know how your desktop site, mobile site, or app performs and compares, then learn more about getting Baymard to conduct a UX Audit of your site or app.
