When usability testing 19 sites and benchmarking 50 major e-commerce sites on Product Lists & Filtering usability we found that 84% of the sites had a mediocre or poor filtering experience – the most common culprits being a lack of key filtering options, poor filtering designs, and filtering logic that doesn’t align with users’ expectations.
Analyzing the 1,750 manually reviewed filtering UX parameters in our product lists benchmark, we find that:
Luckily there are a few sites that stand out from this generally sad state of affairs and provide their users with an overall great filtering experience. One of those sites is Macy’s. Macy’s ranks #4 when measured on “Filtering” performance in our Product List & Filtering benchmark of 50 major US e-commerce sites.
It’s clear that Macy’s great filtering experience performance is mainly due to significantly better filter availability and logic – 350% and 650% over the performance average score of the remaining 49 top US e-commerce sites.
In this article we’ll therefore explore Macy’s filtering experience performance to see what we can learn from one of these rare sites that actually provide their users a good filtering experience. (Also, Macy’s overall filtering design is rather conventional and thus representative of most e-commerce platforms, making the case study relevant to e-commerce sites at large.)
We’ll cover 7 concrete filtering implementation aspects at Macy’s which during our usability testing were identified to be the high-performing designs. This include best practice examples of the available filter types, the filtering interface, applied filter state, promotion of popular filters, the user’s back button expectations, and more.
Most of the time, users are interested in filtering a product list across category-specific attributes, and not just a few generic site-wide attributes such as brand, price, user ratings, etc. For a category like ‘Coats’ that might mean the ability to filter by ‘Material’, while for ‘TVs’ it could be the ‘Refresh Rate’, and for ‘Bowls’ one could easily imagine filtering by ‘Volume’ capacity.
These would all be examples of what we call “category-specific filters” – they are filter types that are specific to those particular categories. For instance, it wouldn’t make sense to have the ‘Refresh Rate’ filter from ‘TVs’ appear when in the ‘Bowls’ category because it is a product attribute specific to TVs and therefore isn’t relevant to kitchenware. Sadly, a staggering 42% of major e-commerce sites lack category-specific filtering types for several of their core product verticals. With filtering options this basic missing on so many sites it’s easy to understand why 84% of sites still have far to go when it comes to their overall filtering experience.
Generally, we’ve found during usability testing that any product specification that is important enough to be shown in a product list item should also be available as a filter. Not only because the information types in the list item are (or at least should be) the product attributes the user cares the most about, but also because testing revealed that the mere display of certain product attributes increased the subjects’ desire to filter by those attributes.
By virtue of highlighting the product attribute to the user, you remind them that the spec is important (or in the case of users new to the domain, teach them that it is), and the very display of the spec therefore encourages users to filter by it. For instance, if a collection of bed sheets has ‘Thread Count’ displayed in each list item, users will be more likely to want to filter that product list by ‘Thread Count’.
Looking at Macy’s, we can see how they offer both category-specific filtering and allow their users to filter by the attributes displayed in the list item. Notice how the list items display sheet type, fabric and thread count – and how Macy’s also offer category-specific filters for all of these product attributes.
Tip: To read more on our test findings on category-specific filters see our article posted at Smashing Magazine (see section 2: “42% Lack Category-Specific Filter Types”).
Often the product list of a given category or a set of search results will have an handful of filters which are highly beneficial for the majority of users to consider applying, as it will vastly increase the relevancy of the items in an otherwise very generic product list. For example, if a user navigates to a “Digital Cameras” category, “Camera Type” would be a highly important filter type, since the user’s needs will vary greatly depending on whether they are looking for a “Point & Shoot”, “DSLR”, or “Mirrorless” camera.
Only displaying these as traditional filters in a filtering sidebar increases the risk of users overlooking the options or not understanding the importance of making the selection. During our e-commerce usability tests, we typically observe that users perceive categories as something the site suggests they select whereas the filtering sidebar options are seen by most users as purely optional choices. It’s therefore a good idea to promote particularly important filters (or filter combinations) on top of the product list to encourage their selection.
During testing a very clear pattern emerged on how a limited set of highly important filters can be given extra exposure: by highlighting them above the product list. We once again find an example of this at Macy’s, where a select number of coat style filters are promoted in the Coats category (note: they are filters despite Macy’s calling them “featured categories”).
The test subjects often interpreted this type of promoted filters as the site encouraging them to select one – and consequently sites with such promoted filters saw much higher filter utilization rates than sites that didn’t promote them. Despite this being a very effective nudging technique, only 16% of e-commerce sites currently have “promoted filters”.
A word of caution though: the vast increase in attention and utilization that promoted filters receive means that they should be used sparingly. It is only when the vast majority of users will benefit greatly from applying one of the promoted filters that they should be there. Otherwise, users are simply lured into overly narrow product lists – which is a very severe product browsing issue that we often observe leading to site abandonments. It’s therefore an absolute ‘no go’ to promote only moderately important filters.
When implementing promoted filters there are 4 details that it’s particularly important to be mindful of:
Note: A few sites will be able to use a horizontal filtering toolbar – as described in Filtering UI: A Horizontal Toolbar Can Outperform the Traditional Sidebar – which eliminates the need for promoted filters.
When it comes to filtering logic the filtering values should, in general, not be mutually exclusive within the same filter type.
During testing, filtering values wrongly implemented as being mutually exclusive caused site abandonments as the test subjects couldn’t establish an overview of the products that matched their unique set of product requirements. When filtering values within the same filter type are (wrongly) implemented as mutually exclusive it forces users to go through a needlessly demanding filtering flow:
And that is when the user wants to apply just two filtering values – imagine how complicated this gets when they are interested in more than two filtering values of the same type! Now, before thinking that such poor filter implementations never occur, our benchmark revealed that one third (!) of the 50 top grossing US e-commerce sites have such implementations – wrongly implementing most or all of their filtering values as mutually exclusive. Unsurprisingly, this severely obstruct their users’ filtering (and thus product finding) abilities.
Now, compare the prior described process, to one where multiple values within the same filter type can be applied (as seen in above Macy’s example):
During the test sessions 45% of the test subjects combined multiple values within the same filtering type (on the sites where it was possible). Some of these subjects even got a little creative and used this feature as a way to filter out unwanted product variations by applying all other / opposite filtering values. For example, if a subject didn’t want light-colored towels, they would weed out these products by applying all of the other color options.
Thematic browsing patterns are quite common in physical retail, where any sales assistant will be able to help store visitors with common requests such as “a casual shirt”, “spring jacket”, “high-end pocket camera”, “value-for-money LED TV”, etc. Yet despite such thematic attributes often being both common and central aspects of the user’s purchasing decision, our benchmark reveal that 20% of the top e-commerce sites lack thematic filters (although support for it has increased by 18% since our study on E-Commerce Search).
While TVs, cameras, jackets, and shirts can all be easily located on most e-commerce sites, only seeing products that match a certain “theme” will be next to impossible for users if the site doesn’t offer thematic filters.
Without thematic filtering options, it is often unreasonably time consuming for users to see only the products of interest to them. During testing, a lack of thematic filters often led to site abandonments because the subjects prematurely concluded that the store either didn’t carry the type of products they wanted (e.g., spring jackets), or, more often, that it would be nearly impossible for them to find the few relevant items that might be hidden somewhere in those vast product lists.
Macy’s offer us a classic example of thematic filters in the apparel industry: occasion. By having ‘Dress Occasion’ filters it is easy for users to see dresses suitable for as diverse occasions as a “Night Out” and “Wear to Work”. During the test sessions, thematic filters saw very high utilization rates (above 50%) by the subjects – that is, on the sites that offered them.
Because thematic filters tend to be very context-dependent in nature they will typically have to be tailored uniquely to a site’s product catalog. However, some common examples of thematic types are style (casual, romantic, modern, etc.), season (spring, holiday, etc.), usage conditions (outdoors, underwater, etc.), and purchase selection parameter (cheapest, value for money, high end, etc).
When users apply filters and browse the product list it is essential that they can easily find all of the applied filters and that they are reminded of them – otherwise the user may end up severely misinterpreting the site and its product catalog. Our usability testing showed that for an “applied filter design” to be user-friendly it has to meet a handful of requirements:
The test sites that both displayed the applied filters in their original position in the filtering sidebar, and displayed a summary of all applied filters at the top of the product list, had a vastly lower rate of user errors and misinterpretations than the sites that displayed applied filter in only one of these positions.
During testing of Macy’s, the different test subjects relied on either the left sidebar filters or the top summary position of the applied filters. This was the case both when inferring what filters were currently applied and when the subjects were looking for a way to deselect filters. Once again underscoring the importance of displaying applied filters in both positions.
While seemingly simple, 42% of e-commerce sites only display applied filter in one of these positions – despite the rather severe usability issues that can arise as a consequence. You can find the whole set of test findings in our recent article on How to Design ‘Applied Filters’.
When a list of filtering values get much longer than 10 values all our e-commerce usability studies have shown that issue will arise if:
Luckily, testing also revealed a design pattern that did work well: truncation of the filters. However, truncation only outperformed the two other design patterns when a number of truncation design guidelines were met.
Macy’s truncation implementation is decent. When looking at the 6 truncation design guidelines they get the following right:
To perfect their truncation design Macy’s could consider either rewriting the ‘Show All Brands’ link to include the total number of brands available or visually fade the last visible filter value – two details which during test proved to increase emphasis on the list of filters only being partially displayed. Also the proximity could be tweaked (e.g. by adding slightly more white space below the truncation link) to make it abundantly clear that the ‘All Brands’ option belong to the list of filters above it and isn’t a standalone option or related to the items below.
During our usability studies we time and again see test subjects relying extensively on the browser back-button. This of course isn’t a problem in itself. However, we frequently observe confusion, disappointment, anger and even abandonments, when a site’s technical implementation break with the user’s expectations of how the back button should function.
Generally users expect the back button to take them back to what they perceive to be their previous page. And this is where the typical misalignment occurs: when users click a button or a link, wait for content to load, and then see an overall set of new content, they expect it to be a new view that they can click “back” to - regardless of whether it is technically the same page or not.
As applying filters generally include a click, content loading, and a new set of visual content, it should come as no surprise that users consistently during testing perceived this as a new page. And as a consequence the subjects naturally tried to click “back” to previous filter states. Unfortunately, one third of the leading e-commerce sites break this expectation.
It’s worth noting that even on the test sites that updated the product list live using AJAX (and not a full page reload), the subjects still generally perceived each iteration of their filtering process as a new view.
To align the back-button behavior with user expectations during filtering, Macy’s invoke a URL rewrite for each filter applied. Something 66% top e-commerce sites do. This is typically done using the HTML5 History API, which enable sites to invoke a URL change without a page reload, making it possible to add each filter and sorting change as a separate entity in the user’s browser history without invoking needless page reloads.
For more on our test findings on how and when users’ expect browser back-buttons to work, see our article on 4 Design Patterns That Violate Back-Button Expectations.
The user’s filtering experience is a central part of the product browsing experience. When done well, filters can empower users to narrow down a product catalog of thousands to just a handful of products that match their unique purchasing preferences.
Yet despite filters’ obvious importance to the user’s product finding abilities, it’s only 16% of the leading e-commerce sites that deliver a great overall filtering experience. Macy’s is one of those few sites, with particularly good filter availability and filtering logic. While the list is long, some of the points that makes Macy’s filtering experience stand apart are:
Although Macy’s filtering experience is good, there’s of course still room for improvement. For example there’s a noticeable lack of compatibility filters for the compatibility-dependent products they sell. For instance, phone cases don’t offer filters for phone model or device size, making it virtually impossible to see only the cases relevant to the user’s specific phone. There’s also a lack of a “New Arrivals” filter, which during testing proved immensely popular and powerful in combination with other filters – in particular on seasonal sites like apparel and home decoration.
If looking for inspiration on filtering availability, logic, and interfaces, the other benchmarked sites that also have a great overall filtering user experience are:
Sears, L.L.Bean, Wayfair, Nordstrom, and Amazon.
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
It would be so great to have the ability to have Exclude filter options as wel! So for example Gentleman, Jackets, Size, Colour, BUT NOT Leather.
Is there any (largish) website that has that?
Great article! Very good to have so many good examples and to substantiate it with survey outcomes.
Thank you for this very well written, helpful article. Good to know what makes for good filtering experiences.
Must read! Clear, to-the-point and great examples which can be applied immediately. Thanks for gaining these insights and sharing those.
Hello, very nice article that focus on an important point. I m looking for company that can develop for me as Macy look like website, with such filtering capabilities. As anyone has some recommendation? Thks
Very detailed as always. Although I was searching how filter values shall be sorted as a benchmark and did not found a hint. Any research have been done on that?
Yes we have quite some research findings on this.
If you have Premium access see these guidelines as they all related directly to the sequence of how filtering values are best displayed to users:
© 2021 Baymard Institute US: +1 (415) 315-9567 EU: +45 3696 9567 firstname.lastname@example.org