- Active filter should always be visible
- User should easily close the active filters
- Filter type should always reflect the data type
- User should always see the most common filters first
- If there are many filters, meaningful collapsion
- Layout and space between the filters
- Mockups
The filtering functionality on a list view is a frequently but not trivial process. Many websites from different categories requires this functionality in order to narrow down the results. Unfortunately, this commonly used pattern is used incorrectly from many applications. This misuseability effects dramatically the user experience. As a result, the user cannot find what he is looking for. We will emphasis on some useful patterns regarding the filtering process. We will define some rules (guides) that are essential for a proper filtering experience.
- Active filters should always be visible.
- User should easily close the active filters.
- Filter type should always reflect the data type.
- User should always see the most common filters first.
- If there are many filters, meaningful collapsion.
- Layout and space between the filters.
Active filter should always be visible
A clear way to show all the active filters is by using tags on a separate section. Those tags considered of a colon separated key – value pair. The key will be the name of the filter and the value will by the value of the filter.
User should easily close the active filters
Each active filter tag should contain a small closing icon that will close the active filter.
Filter type should always reflect the data type
Bellow we plot the most common data types with the corresponding filtering UI.
| Data Type | UI |
|---|---|
| Number | input[type=”number”], If minimum and maximum values are provided, we can use a range picker. If the minimum value is quite smaller than the maximum value, we can use heuristics like logarithmic scaling or stepping |
| Range Number | Range picker |
| String | input[type=”number”] |
| Enumeration (single selection) | Dropdown with autocomplete field |
| Enumeration (multi selection) | Dropdown with autocomplete field, the selected values could shown as comma separated string |
| Date range | If the date range is usually less than 3 months, one calendar with ranges in the dates is fine. 2 date input fields in other case |
User should always see the most common filters first
In a common application, we can search a record with many different criteria. Although, in many cases we search the specific record by providing 2-3 filters. We should run some tests with users that are going to use the application, and identify the most used filters. Those filters should always be on top of our filtering structure.
If there are many filters, meaningful collapsion
Considering a filtering view of 14 different filters. This is a nightmare for a user that will only use the basic filters. We could hide the non-frequently filters, providing the intuition that if you want to apply a more advanced search, you can expand the entire filter view.
Layout and space between the filters
This is a difficult section. We can endlessly discuss about the gaps, the layout and the structure. I don’t thing that there is a clear guide regarding this issue. My proposal, considering the user’s reaction on different combinations, is to be as minimalistic as possible.
Layout
The horizontal structure is more readable than the vertical structure. The vertical structure, in contrary with the horizontal, forces the user to scroll down in order to see all the applicable filters.
Labels
We observed that the labels on the filters increases the filter view space by 40%. This is weird, considering that the user must search on a bigger segment in order to find the appropriate filter. Our cases shown that the placeholder can play the role of the label. If we remove the labels and wisely use the placeholders, we can release a lot of useful space.
Mockups
Filters Blank Collapsed
Flters Blank
Flters Applied Collapsed
Filters Applied
