When designing a commercial product with an extensive catalog, it is beneficial to add filters to the search functionality to deliver an improved user experience. Effective filters help users winnow down their options and hasten the decision-making process by tuning search results to their taste. It also saves your users precious time.
On average, 30 percent of online shoppers use search filters and are twice more likely to convert than those who do not.
However, search filters can be implemented incorrectly, often hurting the user experience and increasing the bounce rate — 12 percent of users will bounce to a competitor’s site after an unsatisfactory search. So what should we avoid when building search filters in our products? And what principles can we apply to deliver a better UX?
In this post, we’ll examine various examples of poorly implemented search filters and highlight some tips you can use to produce a satisfying filtering experience. Let’s begin!
As mentioned earlier, a search filter is one of the first components a user looks for when they land on your ecommerce product. It is, therefore, necessary to position this element strategically, ensuring your user has no friction trying to reach it.
You will find various positioning methods across the web with the most common approach being a vertical layout on either side of the screen.
In the design above, however, this clothing company makes a mistake by concealing the filter panel behind a fairly unnoticeable Filters button. Enforcing the user to make an extra click to view the panel is unnecessary — especially when there is enough real estate to display it in desktop view. The panel also visually cuts off some results when expanded.
A better approach to this would be to keep the panel visible at all times, and reserve the button for a mobile view:
Another example of a satisfactory filter layout is this sticky, horizontal filter panel that stays in view as a user navigates the product listing:
In general, the position of a filter system helps the user complete their tasks faster.
Making all applied filters visible to the user will help them better understand how these filters affect their search results. This feedback mechanism will go a long way in ensuring your users aren’t frustrated when they don’t find what they want since they can easily tweak the filter parameters.
It is also necessary to make it easy for the user to remove the applied filters. This allows them to easily modify their search experience when they are not getting the results they want, or if they want to see more (or fewer) results.
Here’s an example of this in action:
Overall, the goal of making applied filters visible and easy to remove is to give the user more control and flexibility in their search or browsing experience and to make it easier for them to find what they are looking for.
Providing clear and descriptive labels for your product’s filtering system can help users find what they are looking for more easily. When labels are not clear or descriptive enough, users may have difficulty understanding what the filter does or what content will be included when they apply it.
Take the design below for instance:
The filter option Other is ambiguous, and a user would not know what results to expect from applying it. I encourage you to use descriptive labels because it can improve the user experience and make it more likely that they will use the filtering system effectively.
An organized catalog with each item tagged correctly in a tagging system will provide a pleasant filtering experience to end users. If an item is appropriately tagged to its correct category, a filter can easily make its computations based on these tags and return relevant results to the user.
Ecommerce and media giants that keep their catalogs organized are already benefitting from this practice, allowing them to retain their user’s attention.
Take Netflix for example. It’s widely known that finding a program to watch on the streaming service can be an arduous task. As a solution, Netflix provides a collection of unique codes that a viewer can use to filter programs by categories like Sci-Fi, Anime, Classics, Horror, etc.
In general, having organized tags will be helpful for both your filter system and users.
While filters give a user significant control over the organization of their search results, adding a sorting tool in the mix will greatly enhance the search experience. Sorting helps arrange data into meaningful order so that your users can analyze it more effectively.
Sorting can make it easier for a user to find the information they are looking for by organizing the data in a way that resonates with them. For example, suppose a user is on a budget and is searching for an affordable item on a website. In that case, they may be able to find it more quickly if they have the option to sort the search results by price rather than the items being presented in random order.
Some popular sorting parameters in online stores include New arrivals; Popularity; Price: Low to High; and so on.
Storing a user’s filter configurations for future reuse is a huge bonus for any product’s user experience. In doing so, the user can easily pick up where they left off or build on top of previous filter parameters to create a new query. This can lead to better user satisfaction and increased usage of your filter system.
This technique can be beneficial if the filters are complex or if the users want to apply the same filters to multiple sets of data.
Feedback is a vital component of any successful design used to engage, explain, and improve user satisfaction. There are a few ways that filtering systems can provide good feedback to end users:
Overall, good feedback from a filtering system should help the user understand how the filters affect their results and give them the tools they need to find what they are looking for.
Many techniques can be applied to search filters to make them more usable and pleasant for your user. Paying attention to this part of your UX design will greatly enhance your site’s performance, and increase chances of conversion. You can always count on users to keep returning to your product when your filter system helps them complete their tasks effectively.
Header image source: IconScout
LogRocket lets you replay users' product experiences to visualize struggle, see issues affecting adoption, and combine qualitative and quantitative data so you can create amazing digital experiences.
See how design choices, interactions, and issues affect your users — get a demo of LogRocket today.
This library of UX writing examples showcases how well-crafted writing can contribute to an intriguing and user friendly interface.
Drag and drop requires intentional design for each of its states. Otherwise, users will feel confused and frustrated.
Icons can play a critical role in communicating with your users. These best practices and principles will help you design effective icons.