Filters enable users to customise the display of data by limiting their results based on the users selected criteria, only showing results that are relevant for the user.
Use cases
Use when
The Filter pattern is used to sort through large amounts of data and with this pattern a user can scale data in the interface to meet the complexity of their task. Filters help with cognitive load, making the task easier to complete.
Don’t use when
The user is browsing or searching for an item, rather than surfacing an item. Consider using search or expanders instead, as these patterns are more accustomed to return fuzzy results and dealing with vertical space but still allowing users to browse. These patterns can be used alongside filters to supercharge the browsing experience by allowing users to search multiple characteristics rather than one. However, keep in mind that filters are exact match sensitive and users might need to know the result they’re looking for to use them effectively.
Anatomy
Filters are customisable and can be presented in a number of variations to suit the complexity of the data.
|
# |
Name |
Is Required? |
Description |
|---|---|---|---|
|
1 |
Quick Filters |
Yes |
Allows a user to filter by a main attribute of the result (e.g. title). |
|
2 |
Advanced Filter Toggle |
No |
Toggle used for Advanced Filters to access better filter controls. |
|
3 |
Filter Summary |
Yes |
Informs a user of the selected filters on the current page. |
|
4 |
Filtered Result |
Yes |
Displays the items that are returned by the filter. They can be displayed in a list but can take other forms depending on the kind of information to display. |
|
5 |
Advanced Filter Panel |
No |
Allows finer control of the filtered result through other queries. |
|
6 |
Loading Bar |
Yes |
Indicates the filter is loading for the user. |
Variations
Quick Filter
Use the quick filter when results only have one or two shared characteristics (e.g. title, environment). Limit quick filters to two per page as vertical space is limited.
- Date quick filters include a default value (e.g. Last 30 Days)
Advanced Filter
Advanced filters allow multiple queries for a single dataset, returning more refined results. These filters are always able to be toggled via a side panel.
A single query (e.g. request to the backend) can consist of multiple filters. Using a MultiSelect, the user can select multiple items of the same type as part of a filter. This will return a result that matches either case 1 OR case 2, allowing for wider search.
Add multiple filters to return a case that matches at least one of the items in Input 1 AND one of the items in Input 2.
Only show filters that will be applied to the dataset.
Usage
Use filters in Drop-downs
Providing a filter in a dropdown allows the list to be searched, auto-completed and gives the user more control.
Use placeholders
To provide additional context around the data being searched.
Reset button
Within the Advanced filter panel users are able to add many filters at a time. Users would find a task repetitive if they had to clear all the filters one at a time. Use a reset button to enable bulk reset of the filter items.
Show the number of results
On large pages, consider showing the number of results. Doing so enables the user to see how far away their objective is. It’s best to show the number of matches displayed out of the total. On smaller elements (e.g. dropdown lists etc.) avoid cluttering the UI with results or the Filtered Summary.
When no results are returned
Return an empty state.
