Traditional web search filters can make navigating a large website with lots of products or content to choose from complicated and cumbersome that can cause users to look elsewhere. But when used well, filters and facets can create a rewarding experience that helps users connect with a wide range of content.
Top leaders in e-commerce and media like Netflix and Amazon have understood the power of having a great search filter and navigation experience on their websites. They’ve ensured that their search filters make it easy and enjoyable to navigate their huge catalogs, so that their users are exposed to valuable new content and products that they offer. Due to this users have become accustomed to a fast, relevant and reliable search experience on every site that they visit.

Why is Filter UI and UX so important?

Great search UX that uses filters and facets is important because it keeps your users satisfied, improves your overall brand image and drives your website KPIs.

It is essential that you allow users to quickly refine and search through the results pages for both your business and for the end user.

For the business it results in increased conversion rates and average order value because it enables all users from active searchers to even passive users to be able to effectively refine their interests. Passive users are able to then effectively browse and find content and products they may have otherwise not known about. 

For the end users it creates a much better user experience. A good set of filters and facets helps users drill down to their need with ease and eliminates the need for numerous search queries just to find something specific that they are looking for. When they are able to find what they are looking for with ease, it improves brand loyalty and customer retention.

Here’s how you can solve for traditional search filter problems with these filter UI best practices;

1. Choose the right filters and facets

The right set of filters and facets will help users find products and content faster. When you have too many irrelevant options, it can confuse them. Thus it is essential to take time and carefully select the right categories and filter values. Ensure that;

• Your filters are relevant to your business segment and users after careful research and understanding of your users, the various use cases and the overall industry
• Choose filters that follow common design patterns, the selections should be of varying levels of granularity yet be intuitive and differentiable enough so that all different types of customers can understand them and know what to expect when it comes to selecting the options
• The filter values should be sorted by popularity and/or importance to increase the likelihood that customers find them useful
• Choose filters that vary in scope. While some facets will be applied across different categories, others will be more specific. 

2. Show the number of results

It is good practice to display the search result counts for each option when applied to the current search query when showing unselected search facts. These counts should also get dynamically updated every time a facet or a filter is applied. This can be better illustrated through an example. 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 count should update to show how many blue shoes there are for each size.

3. Allow filtering and sorting simultaneously 

While contextual search filters and facets are sufficient for the majority of active users to shortlist and find exactly what they’re looking for, passive or new users will most likely want to explore larger sets of content. For them to be able to do this, sorting is an important part of the process. This will help the users order content by the factors that matter most to them and improve their chance of finding the most relevant results. For example, a customer may want to find size 10 shoes but doesn’t yet know the colour 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

While you need to make it easy and intuitive for users to choose filters and facets, you need to make it equally easy for users to remove filters and facets from their search without having to refresh the page or starting the search process all over again. This is because users might accidentally select an incorrect value or find that they are no longer interested in the selection that they made. Thus for a seamless user experience, it is essential that you make it possible to improve the users chances to find relevant products and convert.

5. Optimise filters for both mobile and desktop use

Be sure to account for all users while building your filter interface. Ensure that your filter design works for both mobile and desktop users and takes all users into account no matter where they are. A mobile-first approach makes the most sense because it allows you to make the best use of limited screen space.

Conclusion

There are a number of considerations to take into account when considering filter and facet UI. But well designed filters will contribute significantly to providing the best possible exploration experience and thus are worth spending time and money on.