Best practices when designing filters for SAAS products
Most SAAS products let their users search, organise and utilise large amount of complex data. From data analytics to customer service, to repository of user data and operations management, the interfaces displaying this complex dataset have to be efficient at helping its user to organise and interpret the information accurately.
Filters are a common ways to sort through and consume these complex dataset.
Recently we decided to improve how we display and use filters on our transport management platform. In preparation for this work, I went and analysed the best practices around this glamorous topic of designing filters for SAAS products (irony intended!).
In this article I’m sharing some of the best practices I learned on the way.
Positioning of the filters
One striking difference between filters in SAAS products and e-commerce websites is the positioning of the filters. While most e-commerce websites implement left-hand filter column on large screen, most SAAS products have their filters displayed horizontally, sitting above the data itself.
I wondered why that might be and a few reasons came to mind:
1. It depends on the user flow
A lot of SAAS product have very complex dataset that WILL require some filtering in order to deliver useful information to its user; the flow is usually 1. Assign Filter 2. Use the results fetched by the filters combination. By opposition, E-commerce may prefer to let the user browse first, to get a feel for what’s available in the catalog. If the user cannot find a relevant result, or if they’re overwhelmed, they can then use the filters readily available on the left.
2. It depends on the filters complexity
E-commerce sites usually have limited & straightforward groups of filters to pick from, and it is more acceptable to all be displayed upfront. On the contrary, SAAS products may have complex filters that shouldn’t all be presented upfront at the risk of overwhelming the user.
3. It depends on the space available
A SAAS product might try to use as much horizontal screen space as possible to display complex sets of data. E-commerce websites may not have this issue and may have more layout options available.
Accessing the filters
A big decision has to be made around the visual prominence and access to filters.
Some tools like Jira, have decided to display all available filters upfront, whilst others like Mixpanel or Intercom are choosing to hide their filters.
If a tool offers highly complex filters (e.g selecting complex queries such as “User ID” + “contains” + “John”), it doesn’t make sense to show all the options upfront. Better to let a user search for the filter they want to activate.
By contrast, if a tool has very straightforward and limited filters options, and if a user is highly likely to interact with at least 1 filter, then it might a better decision to show them all upfront.
Number of filters on display
If interacting with filters is not a key part of the experience, or some filters are more important than others, you can decide to hide the least used filter options and keep the interface as clear as possible.
Useful shortcut
A great way to improve the usability of a set of filters is to help users clear their selection faster: Consider using a button to clear/reset each individual filter, as well as a button the clear/reset the entire filter selection
Visual feedback: which filter is on or off?
It’s important to provide a visual reminder to the user of which filters are currently activated. It’s so easy to forget what’s been selected after a few minutes.
- Display exactly which filters have been selected, without having to open a dropdown. Mixpanel summarises the filter selection on 1 line.
- If multiple inactive filters are presented to a user, you need to visually differentiate the filters that have been activated from the ones that haven’t. This is what JIRA does with a high contrast colour coding. AirBnb displays the selected filters in bold alongside with a number of options.
Fetching the data: instantaneously or with a manual confirmation?
Do you update the results as soon as a filter selection gets confirmed or do you need to press a button to confirm? Progress in performance means that most well known SAAS products can refresh the results as soon as a filter gets selected.
Loading the results shouldn’t block the user from selecting other filters, just in case the query was going to take a few seconds to fetch the results.
Give a heads up that results will be available
It’s important to give users the re-assurance that their filter selection will not lead them to an empty page of results. Many services try to provide a preview of the number of results as quickly as possible, even as they select the filters.
I hope you found these considerations useful to improving the way you design filters for your own SAAS product!
❤️ Follow me to be notified of future publications! I post regularly about Product design tips, Design Ops, Design management and User research. Thanks!
