Skip to main content

Filters

The filter options must cover the most important aspects of whatever users will be filtering, based on relevance to users’ needs.

To design a filter that serves our users, we need to answer the following questions:

  • which characteristics are most influential to users in making their choice?

  • what words do users use to describe these characteristics?

  • do users understand our labels, or do they look like jargon to them?

  • which filter values are the most popular or most used?

    How to use Search filters​

  • make sure users can find the search filters:

    • on desktop, users tend to find and use them easily when they are placed to the top and top left area of the page
    • on mobile where usually they are behind a button or drawer Keep them at the top and don’t rely on just an icon. Remove any ambiguity by adding a label to the icon or removing the icon altogether and just have text

  • ensure the options are relevant to users. When it comes to filters, matching the user’s mental model of how they would choose something in the physical world, is important in helping them choose something on a website

  • clearly display the selections to users. Feedback is an important heuristic for the usability of a website. So, once users have found the filters, understood the options they have, and made their selections – it’s important to let them know their choices have been applied to the list of products

  • allow a combination of filters. A big part of filters’ effectiveness will come down to using a number of them at the same time, letting the filters interact to produce the best results

  • live filtering updates. Live update for filtering UIs is great because the user gets to immediately see the changed results they are getting

  • include a ‘Clear all’ interaction. Let the users clear all applied filters with one click to action

  • show the number of results. Another key element in communicating feedback is to display the number of results. This provides users with feedback as to how effective their input was to reduce the result list and save time

  • make Important filters easily found. Users often do not reach useful filters because they are hidden at the bottom of a long menu. Filters at the top of the menu are the most used ones

Don’ts​

Do not use live filtering updates

  • on mobile devices. Their screens are simply too small to pack the results, filters, and the live update feedback, without a visual overload

  • when handling a lot of data. For users doing a lot of research, having to wait for the results to update after each individual filter would be simply unbearable

In this case let the user batch their filters and click on an apply button before any actual updating takes place.