https://baymard.com/blog/horizontal-filtering-sorting-design

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

At e-commerce sites the filtering interface has historically consisted of a left-hand vertical sidebar. However, over the last couple of years a new filtering and sorting interface has become increasingly popular: a horizontal toolbar which combine both filters and the sort tool. In fact our Product Lists & Filtering benchmark reveal that of 50 top US e-commerce sites 24% have ditched the traditional filtering sidebar in favor of a combined horizontal filtering and sorting tool (similar to the one in the image above).

But how does this new horizontal toolbar interface actually perform with real users? During our large-scale study on e-commerce Product List & Filtering usability several of the tested sites had one of these horizontal toolbar.

In short: our usability study showed that a horizontal filtering and sorting toolbar is only appropriate for certain types of e-commerce sites – yet for those sites, it can significantly outperform the traditional left-hand filtering sidebar.

In this article we’ll explore the usability test findings on this relatively new horizontal Filtering & Sorting Toolbar user interface. We’ll outline which types of e-commerce sites should and shouldn’t consider it, how users responded to the new UI, along with 3 specific interface details which are crucial to get right in a horizontal design.

Test Observations: Why a Horizontal Filtering Design Can Perform Better

During the usability study the horizontal filtering and sorting toolbar design was found to lessen (although not eliminate) two severe issues frequently observed with the traditional sidebar filtering interface found on most e-commerce site:

1. Users overlook or ignore the filtering sidebar entirely (this is the most common scenario),
2. Users sometimes mistake the site’s sorting tool for the sites filtering tools, thinking they are the only ones available.

Both issues are severe as it prevents users from getting a well-defined product list which match their purchasing criteria – and instead leaves them navigating overly broad product lists. During testing, fatigue quickly set in when the test subjects browsed overly broad product lists, and they would then switch up their product finding strategy – including abandoning the site for a competitor.

These issues were not just observed during this e-commerce usability study on Product Lists & Filtering, but also for Homepage & Category navigation, On-Site Search, and in particular for our study on Mobile Commerce. The following is a short except of just 3 typical test observations of misinterpreting the sorting tool as the sites filtering options:

“I thought there might be an option to sort by manufacturer or something,” a subject said after being dissatisfied with the top products he’d looked through at Newegg. Here, he’s opening the “Sort by” drop-down, expecting a way to “sort” (by which he actually meant: filter) by manufacturer

Similarly, at Pixmania, a subject pondered, “I’m looking for a way to narrow this down to something more manageable. Are there some criteria I can use?” before concluding that the only filtering options he had were the 4 sorting options displayed right above the product list.

The sorting tool’s central position meant it would typically grab the test subjects’ attention, especially those who had engaged with the product list (which is placed at the center of the page too) and then scrolled back up to the top of the page, as seen here when testing Macy’s