Navigating a large website with lots of products or content to choose from can go two different ways: if it’s simple, thanks to filters and facets, it’s a rewarding experience that helps the user connect with a wide range of content. If it’s complicated, cumbersome, or confusing, it’s a painful experience that causes users to look elsewhere. 

Leaders in e-commerce and media, like Amazon and Netflix, realize the power of a great search and navigation experience on their websites. They’ve invested heavily in making their huge catalogs easy (and even enjoyable) to navigate, exposing users to valuable new products and content along the way. Users now expect a fast, relevant, reliable search experience on every site they visit. 

Creating a great search UX that incorporates filters and facets helps keep your users satisfied, improve your overall brand image, and drive your website KPIs. 

 

Why does filter UI and UX matter?

Allowing users to quickly refine results pages is important for both business KPIs and user satisfaction:

For the businesses

Having a responsive filtering interface enables all users—whether active searchers or passive browsers—to quickly and effectively refine their interests. It also allows more passive users to effectively browse and find content and products that they may have not otherwise known about. This leads to increased conversion rates and average order value.

For the end users

A good set of filters and facets also ensures an improved user experience. By helping users drill down to their needs with ease, it eliminates the need for numerous searches queries just to find something specific. This improves brand loyalty and customer retention.

Related Links –

1. Get inspiration from how others are building their UX in Algolia Inspiration Library.  
2. Dig deep into filtering, faceting and sorting results in Algolia documentation.
3. Learn about all the pre-built UI components from Algolia.

5 filter UI best practices 

Here are five best practices you can implement to best serve your users and your business:

1. Choose the right filters and facets

A comprehensive set of filters and facets will help users find products and content faster. Too many irrelevant options, however, can confuse them. You should take time to carefully select the categories and values. Your should make your filters:

•  Relevant to your business segment and users. Selecting the right filters and facets requires an understanding of and research into your users, the use cases, and the overall industry. 
• Follow common design patterns. The selections should be of varying levels of granularity yet should be intuitive and differentiable so that all different types of customers can understand them and know what to expect when they select the options. 
• Organized for your users. Filter values should be sorted by popularity and/or importance to increase the likelihood that customers find them useful.
• Vary in scope. While some facets will be applied across different categories, others will be more specific. For instance, on an e-commerce store, all products will have a price, but clothes will not have an author, nor will books have a wattage.

  
https://www.algolia.com/doc/guides/solutions/gallery/recommended-filters/

2. Show the number of results

When showing unselected search facets, you should display the search result counts for each option if they were to be applied to the current search query. Further, these counts should dynamically update every time a facet or filter is applied. For instance, if a user searches for “shoes” and there are facets for “size” and “color,” then each size and color value should show how many shoes there are with those specific conditions. If, then, a user selects blue shoes, the size counts should update to show how many blue shoes there are for each size.

By updating the counts every time the search is updated, you effectively hint to the user which is the shortest search path. If, for example, a customer is looking for blue shoes in a size 10 and the system has one hundred of shoes in a size 10 and only ten blue shoes, then she can often find the product that she’s looking for by clicking the latter facet first and then simply scrolling to the product. By allowing your users to get to products faster and with fewer steps, they’re much more likely to remain on the page and ultimately convert.

 

3. Allow filtering and sorting simultaneously

Filters and facets may be sufficient for the majority of active users to drill down to find exactly what they’re looking for. However, more passive or new users will likely want to explore larger sets of content. Sorting is an important part of this process so that users can order content by the factors that matter most to them and improve the chance they find relevant results.

For example, a customer may want to find size 10 shoes but doesn’t yet know the color or brand she’s looking for. If it turns out she’s more interested in affordable shoes, she’ll likely sort the products by ascending price, so that cheaper shoes appear first. If she then finds that she wants to adjust the filters or facets based on the results, she should be able to further refine the search and maintain the same ordering so that she can continue her exploration process.

 

4. Remove filters easily

Drilling down with filters and facets should be an easy and intuitive process. The trade-off of this, however, is that users may accidentally select an incorrect value, or they may simply find that they no longer are interested in the selection they made. Therefore, it’s imperative that users can remove filters and facets from their search without having to refresh the page and/or start over their search process. Once again, we want to make the user experience as seamless and fast as possible to improve the chance they find relevant products and convert.

 

5. Optimize filters for both mobile and desktop use

When building a filter interface, you should make sure to take all of your users into account, no matter where they are. A mobile-first approach often makes the most sense, as it allows you to make the best use of limited screen space. To do so, you should first consider the psychology and browsing behavior of mobile users. For instance, mobile users often look to the top-right of the screen to find navigation tools such as filters, search buttons, and menus. Placing these items where users expect them will make your site easy to use. 

Here are additional factors to consider to ensure your filter design matches the use case and device:

List-browsing mode and filter-edit-mode

To handle complex filtering tools on mobile devices, you should also consider having two view modes: list-browsing mode, which lets users browse and explore, and filter-edit mode, a separate view that includes all of the filters and facets. This separation of view modes prevents the interface from getting too crammed with content so that even smaller mobile devices can easily display all the content.

Partial vs. full screen on the filters 

Depending on how complex your filtering tools are, you may consider leaving some context above the search results so that users can quickly check the filters if they don’t immediately find what they’re looking for. Whether or not you do so largely depends on whether you expect users to know their exact search parameters. For instance, travel applications like Airbnb use full-screen filter modes since people are typically searching for specific locations and dates, while e-commerce sites like Amazon use partial screen modes so that users can explore different categories more easily.

Horizontal filter bars vs. left hand filters

Depending on the number and complexity of your filters, you may choose to use a horizontal filter bar on the top of the page or a vertical panel on the left side of the page. Either of these types of filter interfaces can be expandable, particularly for mobile devices.

Horizontal filter bars allow the user to easily see what they’ve selected. However, this often requires hiding options when the user has selected multiple filters or facets. This can make the user experience a bit more cumbersome for workflows that require exploration.

 

Vertical filter bars can fit more content, particularly on larger devices such as desktops. This can be useful for searches that include more experimentation over multiple different filter and facet values. As smaller devices typically have limited horizontal space, however, this can make the mobile interface a bit more crowded.

More advanced implementations may choose to dynamically change between horizontal and vertical filter tools depending on the size of the screen and device. A common way to do this is to have a vertical filter tool for desktop and large tablets and then a horizontal filter bar for other devices with smaller screens. Regardless of which process you choose, it’s important that the tools are easy to use on all devices and screens.

 

Use well-designed filters to improve the user experience 

While the end result of a well-built filter and facet UI seems simple from the end-user perspective, there are a number of considerations to make and there’s no one-size-fits-all approach to building it. 
You need a search as a service provider that makes it easy to test, configure, and monitor the filter and facet interface so users get the best possible exploration experience. Read our e-book to see how filtering is an integral part of building a great mobile search experience

Related Links –

1. Get inspiration from how others are building their UX in Algolia Inspiration Library.  
2. Dig deep into filtering, faceting and sorting results in Algolia documentation.
3. Learn about all the pre-built UI components from Algolia.