Filter systems and UX
In today’s world, filter systems are a mandatory feature in any respectable content interface.
Let’s imagine a hypothetical situation in real life to understand its importance. Imagine you enter a department store to buy a shirt. But this space is not organized, classified, nor are there signs indicating the product section you are in. An apparently easy task would be torture, having to wander indefinitely searching for the item you need.
Now, imagine you are in another large store, where its products are organized and have signs, but due to its large size, you easily get lost. The workers whom you can ask about the whereabouts of a section would be our filters, that little push to the user that helps us quickly find what we want.
Digital filter systems seem to be expressly used for e-commerce interfaces, but we must be aware that these tools are used in most interfaces involving an extended content base, being highly effective in data tools or dashboards.
For filters to work correctly, the information to consider must be correctly classified, named, and placed in its respective section, but as user experience designers, we must have special considerations when creating or implementing a proper filter system in our interfaces.
Positioning
Our filter system must be placed considering the context in which it is located; let’s think that the user expects that, in a section where a space with information is being displayed, whether it’s a table, product cards, or information graphs, it should be accompanied by a visible filter system placed before the content. Analyzing the classic space of web pages, we have 3 options:
- Global filter. When there is a side card or side menu as a navigation resource, placing filters there allows for greater scalability in space, nesting of values, and the content to be filtered. However, if this option is used, we must ensure that the system affects content that spans the entire page, otherwise, we can confuse users.
- Specific filters. Specific or inline filters coexist in the interface with the data spaces: for example, within a metrics panel, each with different data variables — they cannot all be filtered globally. Incorporating this option allows for the customization of filtering for a specific block, with a dropdown of options for this data. However, a drawback to consider is that it is limited by the space of each of the data.
- Filter bar. Perhaps the most popular and balanced option in terms of context and scalability, since it allows for global or single variable filtering, and is endowed with good visibility. Its only drawback is that by not following the user’s scroll, it may be limited in scalability.
Action
In filter systems, we must also consider the aspect of triggering the filtering, highlighting different options:
- Automatic filtering. Once a variable is selected, the filter system automatically activates, displaying the matching results. While this implies fewer actions taken by the user, it is limited in situations where more specific filters are needed.
- Manual filtering. This requires the user to enter the desired filters, one by one. This system is ideal if complex filtering of several variables is required, as the user can scroll through the content and choose without the distractions of automatic and continuous updates, before heading to the actionable that executes the filtering, whether it’s a button or an icon. The two aspects of this system depend on its complexity: manual filtering that allows the selection of only one filter at a time, or group filtering, which involves different variables, and has a more concise and effective search; the latter is perfect for large databases.
Results
When communicating results to the user, we must consider 3 vital issues about the information from the applied filter system:
- Keep those active filters visible in their original context.
- Always indicate which filters have a nested selection inside.
- If possible, always indicate the group of filters that are applied as a group.
Another key element when communicating feedback is to show the number of results. Knowing the exact number of compatible values provides users feedback on the effectiveness of their inputs to narrow down the result list and save time, shaping and improving global search terms (something that, in terms of feedback, is valuable).
Now, imagine there are no matches with the selected filters. Ideally, it’s not recommended to indicate that no results were found; this can encourage the user to “give up” on their search. The right design decision is to signal during the filtering process an estimate of the matching results before displaying them on the screen, and in case of no findings, block the filtering flow; this will motivate the user to change the filtering factors until they find the desired results.
To conclude, we offer some recommendations on the use and types of filters that can optimize the user experience:
The use of dropdowns in filters reduces the visual load on your page; consider that filters are meant to organize and improve data visibility, so a neat and clean design through the use of dropdowns with limited display promotes consistency with their purpose.
Maintain a defined, reduced, and concise number of filters. An endless series of filters is not necessary, as it indicates that the information is not properly categorized and classified.
It’s advisable to add a visual reinforcement to alert the user which filter is active and which is not to avoid confusion. Moreover, the ability to quickly clear the filters that have been used greatly improves the usability of our functionality.
Concluding, filter systems, besides being a technical feature of interfaces, are also an essential facilitator for improving user experiences. By optimizing these systems, we make information more accessible, and empower users to make informed decisions quickly.
This is a translation of the following article from our corporate website:
