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 ...
Chief Strategic Business Development Officer
It’s hard to imagine having to think about Black Friday less than 4 months out from the previous one ...
Chief Strategic Business Development Officer
What happens if an online shopper arrives on your ecommerce site and: Your navigation provides no obvious or helpful direction ...
Search and Discovery writer
In part 1 of this blog-post series, we looked at app interface design obstacles in the mobile search experience ...
Sr. SEO Web Digital Marketing Manager
In part 1 of this series on mobile UX design, we talked about how designing a successful search user experience ...
Sr. SEO Web Digital Marketing Manager
Welcome to our three-part series on creating winning search UX design for your mobile app! This post identifies developer ...
Sr. SEO Web Digital Marketing Manager
National No Code Day falls on March 11th in the United States to encourage more people to build things online ...
Consulting powerhouse McKinsey is bullish on AI. Their forecasting estimates that AI could add around 16 percent to global GDP ...
Chief Revenue Officer at Algolia
How do you sell a product when your customers can’t assess it in person: pick it up, feel what ...
Search and Discovery writer
It is clear that for online businesses and especially for Marketplaces, content discovery can be especially challenging due to the ...
Chief Product Officer
This 2-part feature dives into the transformational journey made by digital merchandising to drive positive ecommerce experiences. Part 1 ...
Director of Product Marketing, Ecommerce
A social media user is shown snapshots of people he may know based on face-recognition technology and asked if ...
Search and Discovery writer
How’s your company’s organizational knowledge holding up? In other words, if an employee were to leave, would they ...
Search and Discovery writer
Recommendations can make or break an online shopping experience. In a world full of endless choices and infinite scrolling, recommendations ...
Algolia sponsored the 2023 Ecommerce Site Search Trends report which was produced and written by Coleman Parkes Research. The report ...
Chief Strategic Business Development Officer
You think your search engine really is powered by AI? Well maybe it is… or maybe not. Here’s a ...
Chief Revenue Officer at Algolia
You looked at this scarf twice; need matching mittens? How about an expensive down vest? You watched this goofy flick ...
Sr. SEO Web Digital Marketing Manager
“I can’t find it.” Sadly, this conclusion is often still part of the modern enterprise search experience. But ...
Sr. SEO Web Digital Marketing Manager
Search can feel both simple and complicated at the same time. Searching on Google is simple, and the results are ...
Chief Product Officer
Mar 27th 2020 ux
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.
Allowing users to quickly refine results pages is important for both business KPIs and user satisfaction:
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.
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 –
- Get inspiration from how others are building their UX in Algolia Inspiration Library.
- Dig deep into filtering, faceting and sorting results in Algolia documentation.
- Learn about all the pre-built UI components from Algolia.
Here are five best practices you can implement to best serve your users and your business:
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:
https://www.algolia.com/doc/guides/solutions/gallery/recommended-filters/
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.
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.
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.
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:
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.
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.
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.
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 –
- Get inspiration from how others are building their UX in Algolia Inspiration Library.
- Dig deep into filtering, faceting and sorting results in Algolia documentation.
- Learn about all the pre-built UI components from Algolia.
Powered by Algolia Recommend