5 UX Best Practices For Powerful Retail Filters

Users are bombarded with companies and their adverts screaming for their attention. Choosing which brands to part their money with, takes time. The slower it takes a user to find what they’re looking for, the faster they realise your site is not for them.

Here I have hand-picked the themes of issues websites have put my users through. Along with best practices of how to design filters for your eCommerce website and how you can empower your users through filtering.

1. Allow selection of multiple categories at once

A significant issue we’ve seen in research is the inability to select multiple filters of the same kind. So, only being able to select one colour or one pattern at a time. Having to search through numerous filters one at a time is tedious. Soon browsing and shopping becomes a chore, when it’s supposed to be fun and enticing! Users also don’t expect to drill down into such few options at once.

I saw one of my users quickly become frustrated with filters immediately removing all other options. Instead they were forced to filter by outdoor shoes and boots separately, which took a lot longer!

“So, I’ve clicked on outdoor shoes and immediately I’m taken back that it’s not allowed me to click on boots as well. It’s completely gone to the outdoor shoes” — User quote

Allowing multiple filters at the same time, means that users fill the page with everything they want. The more items displayed, the more your website is offering. Your website look relevant to you user more than before, not lacking and worthy of their time.

John Lewis allows multiple filters to be selected at the same from the same category

Here is how John Lewis allows their users to select multiple filters from multiple types. Each selected filter, is then moved to the top of their Filter type list, as well as the ‘Your filters’ section.

2. Show number of items in each filter

When displaying filters, inform users about how any products each filter contains. The number of items should be clearly displayed next to each filter and update each time a filter is applied or removed. The number should be clearly marked, so the number looks related to the filter.

MissGuided provides number of items under each filter, which updates when a new filter is applied

Remove empty filters

It’s tempting to still show filters which don’t return any items. Reasons why filters are empty, like stock, may change from time to time, meaning filters may not always be empty. Displaying the empty filter could mean that users know that the filter exists and may become available in the future.

But displaying unavailable items is teasing users with what they can’t have, at the time of them wanting to shop. The information is redundant. This can lead to a frustrating experience, especially if your user is repeatedly faced with empty filters. Displaying a limited number or no items at all can also damage expectations. A consistently small number of items being displayed, can make the website look lacking, boring, and given too much whitespace even clinical.

By removing empty filters this means that everything on the page is available and more enticing to users, to continue browsing and make a purchase.

3. Easily remove applied filters

For every category or filter a user applies, they need to be able to remove it. Users need to be able to differentiate between filters which have and have not been applied.

Ensuring users know that by selecting the filters, they are actually removing items from the list is crucial. So whether a filter has been added by accident, or users are broadening their search criteria, it must be easy to remove any filter applied.

While being able to remove applied filters one by one, it’s also good to allow all filters to be removed at once. This will help users who haven’t quite found what they’re looking for, or have changed their mind and want to look for something completely different.

It can be difficult to remember which filters have been applied. Having to go through each filter, and find all applied filters is time consuming. The more mental energy your website demands, the quicker your users are going to become tired or bored.

Provide a ‘clear all filters’ option, so users don’t have to worry seek out the filters they have applied. This allows users to start a new search, speeding up the time it takes to find the all important item that they need.

House of Fraser includes a Clear All button near the Selected filters section

4. Differentiate between filters and categories

Categories are a great way of providing a breakdown of your website into broad sections. For clothes websites, their categories may include sections like coats and shoes. Categories removes the assumption that users are experienced with your website and know what to search for. an search for exactly what they want.

Filters may be pre-defined like categories, but filters are more personal. They allow users to dive in categories and cut out aspects about the relevant items. Aspects like colour, price and size.

Since filters and categories behave differently, they need to be designed differently. Categories should be the online metaphor for walking to an aisle inside a store.

Ikea differentiate their categories by using images and prominently labelling them categories

Ikea does a great job at making categories more prominent, with applicable filters underneath. Whereas Debenhams treat categories the same as filters. This means users have to start their search all over again and select a category when clearing all filters.

The Debenhams website applies categories like filters

5. Provide contextual filtering

Filters should reflect the context of the selected category. So when a user is looking at shirts, they should be able to filter by sleeve length, or shirt fit. Update filters each time a user selects a category and the context changes. Generic filters make not always make sense. You would never filter shirts by capacity, nor backpacks by sleeve length!

Hugo Boss has a contextual filter for the fit of the shirt, complete with an icon demonstrating each type of shirt fit

6. Test your filters with users

Testing information architecture is usually associated with menus and navigations. But it’s clear from users that filters don’t always make sense.

A participant struggled with the filter ranges on the Very website, on which I ran a short demo. When it came to budget they expected price filters to allow them to set a maximum amount and not a minimum amount.

“The only thing that I don’t like, is if I go back it says here that £30–40 there’s only 8 headphones. But then here I know it says up to £20 and to £30. But I would have thought they would have put everything which I up to £40 in a section, so I can view it all” — User quote

“You’d expect it to be from the smallest amount to the set amount that you have. So, for example my budget is 40, so I expect them to show everything from that starting point all the way up to 40. So, it would like include the £20 ones and the £20 to £30 ones” — User quote

Additionally, the headphones category included both earphone and headphone products. The site then offered separate filters to view only earphones or only headphones. This was unexpected to the user and clearly shows a lack of testing where the information architecture is concerned.

“Maybe it’s just my misunderstanding but I always thought headphones were the ones that go over your ears, and I always used to think that these were earphones” — User quote
“Sometimes when you go on different websites, they have them put under different names. But here they’ve just all been put together. But I wouldn’t think that these are headphones” — User quote
Very.com including headphones and earphones in the headphones category

Filters have a logic to them, just like a navigation menu. So, why not test your product categories and filters?

Key takeaways

Offering product specific filters keeps things as simple as possible. So, it makes sense to ensure your filters make sense and are as user friendly as possible.

  • Allow users to select more than one filter at once, even of the same types.
  • Set expectations of filters by displaying how many products under each filter.
  • Remove empty filters to reduce the feeling that the website is low on inventory.
  • Ensure users can see a summary of the filters they have applied and allow them to clear them all at once to start again.
  • Clearly differentiate between categories and filters.
  • Offer filters relevant to the viewed category and update accordingly.
  • Test your filters just as you would with your menu

Originally published at echesters.co.uk on September 13, 2017.