Search by Algolia
5 considerations for Black Friday 2023 readiness
e-commerce

5 considerations for Black Friday 2023 readiness

It’s hard to imagine having to think about Black Friday less than 4 months out from the previous one ...

Piyush Patel

Chief Strategic Business Development Officer

How to increase your sales and ROI with optimized ecommerce merchandising
e-commerce

How to increase your sales and ROI with optimized ecommerce merchandising

What happens if an online shopper arrives on your ecommerce site and: Your navigation provides no obvious or helpful direction ...

Catherine Dee

Search and Discovery writer

Mobile search UX best practices, part 3: Optimizing display of search results
ux

Mobile search UX best practices, part 3: Optimizing display of search results

In part 1 of this blog-post series, we looked at app interface design obstacles in the mobile search experience ...

Vincent Caruana

Sr. SEO Web Digital Marketing Manager

Mobile search UX best practices, part 2: Streamlining search functionality
ux

Mobile search UX best practices, part 2: Streamlining search functionality

In part 1 of this series on mobile UX design, we talked about how designing a successful search user experience ...

Vincent Caruana

Sr. SEO Web Digital Marketing Manager

Mobile search UX best practices, part 1: Understanding the challenges
ux

Mobile search UX best practices, part 1: Understanding the challenges

Welcome to our three-part series on creating winning search UX design for your mobile app! This post identifies developer ...

Vincent Caruana

Sr. SEO Web Digital Marketing Manager

Teaching English with Zapier and Algolia
engineering

Teaching English with Zapier and Algolia

National No Code Day falls on March 11th in the United States to encourage more people to build things online ...

Alita Leite da Silva

How AI search enables ecommerce companies to boost revenue and cut costs
ai

How AI search enables ecommerce companies to boost revenue and cut costs

Consulting powerhouse McKinsey is bullish on AI. Their forecasting estimates that AI could add around 16 percent to global GDP ...

Michelle Adams

Chief Revenue Officer at Algolia

What is digital product merchandising?
e-commerce

What is digital product merchandising?

How do you sell a product when your customers can’t assess it in person: pick it up, feel what ...

Catherine Dee

Search and Discovery writer

Scaling marketplace search with AI
ai

Scaling marketplace search with AI

It is clear that for online businesses and especially for Marketplaces, content discovery can be especially challenging due to the ...

Bharat Guruprakash

Chief Product Officer

The changing face of digital merchandising
e-commerce

The changing face of digital merchandising

This 2-part feature dives into the transformational journey made by digital merchandising to drive positive ecommerce experiences. Part 1 ...

Reshma Iyer

Director of Product Marketing, Ecommerce

What’s a convolutional neural network and how is it used for image recognition in search?
ai

What’s a convolutional neural network and how is it used for image recognition in search?

A social media user is shown snapshots of people he may know based on face-recognition technology and asked if ...

Catherine Dee

Search and Discovery writer

What’s organizational knowledge and how can you make it accessible to the right people?
product

What’s organizational knowledge and how can you make it accessible to the right people?

How’s your company’s organizational knowledge holding up? In other words, if an employee were to leave, would they ...

Catherine Dee

Search and Discovery writer

Adding trending recommendations to your existing e-commerce store
engineering

Adding trending recommendations to your existing e-commerce store

Recommendations can make or break an online shopping experience. In a world full of endless choices and infinite scrolling, recommendations ...

Ashley Huynh

Ecommerce trends for 2023: Personalization
e-commerce

Ecommerce trends for 2023: Personalization

Algolia sponsored the 2023 Ecommerce Site Search Trends report which was produced and written by Coleman Parkes Research. The report ...

Piyush Patel

Chief Strategic Business Development Officer

10 ways to know it’s fake AI search
ai

10 ways to know it’s fake AI search

You think your search engine really is powered by AI? Well maybe it is… or maybe not.  Here’s a ...

Michelle Adams

Chief Revenue Officer at Algolia

Cosine similarity: what is it and how does it enable effective (and profitable) recommendations?
ai

Cosine similarity: what is it and how does it enable effective (and profitable) recommendations?

You looked at this scarf twice; need matching mittens? How about an expensive down vest? You watched this goofy flick ...

Vincent Caruana

Sr. SEO Web Digital Marketing Manager

What is cognitive search, and what could it mean for your business?
ai

What is cognitive search, and what could it mean for your business?

“I can’t find it.”  Sadly, this conclusion is often still part of the modern enterprise search experience. But ...

Vincent Caruana

Sr. SEO Web Digital Marketing Manager

How neural hashing can unleash the full potential of AI retrieval
ai

How neural hashing can unleash the full potential of AI retrieval

Search can feel both simple and complicated at the same time. Searching on Google is simple, and the results are ...

Bharat Guruprakash

Chief Product Officer

Looking for something?

Search filters: 5 best practices for a great UX
facebookfacebooklinkedinlinkedintwittertwittermailmail

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.

number of results being shown after facet is selected

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.

filter that allows filtering and sorting

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.

list-browsing mode and filter-edit-modes

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.
About the authors
Louise Vollaire

Product Marketing Manager

linkedin
Alexandra Prokhorova

Product Designer

medium

Discover why Algolia is rated #1 in Enterprise Site Search on G2

Read the full report
Ebook
Ebook

Recommended Articles

Powered byAlgolia Algolia Recommend

Faceted Search: An Overview
ux

Jon Silvers

Director, Thought Leadership Marketing

How to create a great faceted search and navigation experience
ux

Louise Vollaire

Product Marketing Manager

Enhance your Shopify store experience with search filters and facets
ux

Vincent Caruana

Sr. SEO Web Digital Marketing Manager