Sifting through tons of information often gets overwhelming for users and results in unpleasant user experience. UI filters help users navigate through content easily and make their search for information less cumbersome.
As consumers of digital content, we are familiar with filters. Filters are everywhere- from ecommerce platforms, websites of large corporations, travel booking solutions, web apps, to enterprise software like ERP and CRM- they make our online navigation easier.
Nielsen Norman Group calls filters sophisticated tools used to help users find information. According to their definition, “filters analyze a given set of content to exclude items that don’t meet certain criteria.” Filters are an excellent choice to refine results and guide users closer towards their goals.
A good filter design is beneficial both for businesses and end-users. For businesses, filters provide a way to increase the conversion rate. For end-users, great filters impart excellent user experience. So we see how crucial filters are for making a design more user-friendly. But, designing filters can be quite confusing. So, in this article, we will discuss some of the best practices for Filters UI design.
Table of Contents
- 1.Use Simple Language
- 2.Interactive vs Batch Filtering
- 3.Don’t Show Null Results
- 4.Display Applied Filters
- 5.Acknowledge the User Intent
- 6.Display the Right Filters
- 7.Avoid Small Scrollable Panes
- 8.Design Effective Sliders
- 9.Maintain Scroll Position for Interactive Filters
- 10.Support Multiple Inputs
- 11.The Right Filter Location
- 12.A Word on Mobile Filtering
Use Simple Language
You may be tempted to use jargon to specify certain filter categories. However, it does more harm than good. Not all your users need to be familiar with the jargon, so complicated words will just confuse them and prevent them from applying relevant filter selections. Make the copy simple, understandable, and general. Use real-world languages that users typically use rather than using jargon.
Interactive vs Batch Filtering
In the case of batch filtering results are updated only after all selections are made and the Apply button is clicked. In contrast, interactive filtering is when the interface responds to every input instantly. The choice of using interactive or batch filters depends on your solution, your users, and site speed.
If a website has poor speed performance, then batch filtering will be a better option. Interactive filtering is useful if site speed is excellent and users are willing to explore more.
Don’t Show Null Results
A disadvantage with using batch filtering is that users may choose a combination of filter options that will return null results. From a user perspective, receiving null results is very frustrating. It means all the effort they have put into choosing the selection criteria has not yielded any results. So to avoid returning null results, hide filter options that have zero results. That is, each time a user makes a selection, the options that result in no output should be removed dynamically.
Display Applied Filters
Showing applied filters at the top of the page is a good practice that helps to improve the user experience. It can be shown directly above the search results. Also, ensure that along with displaying every applied filter, the user has an option to remove any filter from the list easily. This means that if users want to remove any selection, they can do it easily and don’t have to spend a lot of time searching for the option in the filter list.
Acknowledge the User Intent
When users use filters, they have a specific intent in mind. There are certain attributes that they are trying to communicate to the interface through filters. To achieve this, they use the available filter elements. Now, whatever the user intent might be, the best UI design will ensure that filters shorten the path users need to take from default no filter state to final applied filters state.
Further, the results that are displayed should also meet the user intent- that is, the results must be relevant and contextual. This can vary from one product to another according to the result type and varieties. For example, users won’t mind exploring 100-150 options for an apparel but may find it frustrating to filter through 15 – 20 options for a category like pens.
So ideally, the filter design should let users get enough relevant results in a short time that satisfies their intent.
Display the Right Filters
How to display filters is a crucial point of consideration in filter design – should all the options be shown at once or only truncated filters, should you display only filter headers or not- the questions are plenty. It heavily depends on the type of your solution and the goal of filtering. The best solution is to gather data by conducting user research on which filters are used the most and display them with top priority.
Users must be able to access these filters in one click and the less important filters should be hidden from immediate view. However, you need to ensure that they are accessible to the users if needed within one or two extra clicks.
Avoid Small Scrollable Panes
A common frustration users experience while filtering is the lengthy filter sections tucked in a tiny scrollable pane. These sections, having lots of options, require the users to vertically scroll to browse through them. The users need to be extra focused to use such filters, and especially if on mobile devices. Accidental touches may activate some filter resulting in irrelevant results being displayed.
By providing users about 5-6 options at a time with an expand button to show more options would be a better alternative. These options can be placed in a large scrollable pane; however, they shouldn’t be activated by scrolling. Also, highlighting popular options at the top or providing a search autocomplete within the filter also helps to enhance the user experience.
Design Effective Sliders
Sliders are useful as they help users explore more options when a large range of values is involved. But an aspect that is often overlooked in slider designs is the different speeds of interaction. When a user has some specific range in mind and tries to set it using sliders, it often calls for the user to be incredibly precise, creating a frustrating experience for them. This happens because the slider is not designed to support such precise interactions.
When designing sliders in filters, keep in mind these different interactions:
- For exploring many options quickly, a track and thumb slider is enough
- Provide +/- steppers when precise explorations may be needed for users
- Give text input for min/max values as a fallback for sliders when users want to set exact values.
Maintain Scroll Position for Interactive Filters
In most filter designs, when a single input is registered, the page refreshes, taking the user to the top of the filter sidebar. So, a user who wants to select multiple filter options will have to navigate again from top to bottom many times. A solution to this can be having a sticky bar on top showing the applied filters.
Support Multiple Inputs
Every time a user makes a selection, if the UI freezes, it will slow down the user. And especially in today’s scenario where adding multiple filters is quite common. One problem here is not knowing when the user has finished adding their inputs. However, that is no justification for leaving the users with an unresponsive interface. An obvious solution to this is to let the user inform when they are done with their filter selections. But, how? By using a prominent “See Results” button on the bottom letting the user know they have to click on that to see the result of all selected filters
It is also possible to execute interaction with filters and display up-to-date results through the asynchronous display. Here, the parts of UI can be split and rendered separately so that matching results are updated asynchronously while the filter remains accessible to users and maintains its present state. However, this is not applicable for mobile filtering.
The Right Filter Location
Most of the filters that we see, particularly of online stores, utilize the sidebar on the left side for filters. Sidebars are a great option when there are a lot of filter options available. However, recently horizontal filter bars are gaining more popularity. Studies show that users find them more convenient and efficient.
An advantage of horizontal filter bars is that they help to maintain user attention in one place. As for sidebars, they create a visual separation, so the user cannot focus on filters and results simultaneously. However, horizontal filter bars have the restriction that they may not be suitable where there are several filter options to be offered. They are also less scalable and create layout shifts for different pages. The best approach would be to use a combination of both horizontal filter bars and vertical sidebars so that the best of both can be achieved.
A Word on Mobile Filtering
Although many of the concepts discussed above can be applied to mobile filtering, several more aspects have to be taken into consideration when it comes to mobile filters. Factors like reduced real estate, filter overlay design, etc. are challenges unique to mobile devices. Since it is a vast topic- the scope of which is beyond this article’s reach- we shall discuss it broadly in another article.
At Aufait UX, we have implemented different types of filters for a variety of our projects. We are an expert UI design agency that can help you meet your any design goals. Want to know more about our services? Contact us now!