What makes up filtering?
Filtering allows data to be narrowed down around a set of specified parameters. When users may not have a specific record in mind but are seeking to group data around a certain set of attributes, filtering should be used to allow the user to narrow the data and take action on relevant records.
If a user will likely be looking for a specific record as opposed to groups of data, consider implementing search.
Filter controls should live above the data content and facilitate a user's ability to locate and take actions against records of interest.
The way filters are displayed is dependent on the use case, number of filters, and data types of the content. These general guidelines are a starting point for how to present filtering in your application, but it's important to consider each recommendation in the context of your application's use cases.
If the number of records displayed per page is limited, pagination should be placed underneath the results.
When to use
Filters in a center Layer
When applying many filters at once, it is helpful to present them in a consolidated Layer. In this example, the Layer is positioned at the center of the screen.
Filtering with selectable results
The summary displayed beneath the search input should always reflect the user's actions. When filtering is combined with selection, the summary text should adjust for the following scenarios:
- No filters, no selections — The summary should read "X items", where X is the total number of items.
- Filters applied, no selections — The summary should read "X results of Y items".
- Selections made — The summary should read "X of Y items selected", where Y is the total number of results that meet the filter criteria or the total number of items if no filtering has been applied.
Filtering should help users quickly narrow down data sets by selecting certain parameters to define the relevant data bounds. Different types of inputs may better suited for filtering depending on the type of data.
Use your best judgement around which input type is appropriate for the data you are filtering. However, here are a few things to consider:
- Is data presented as Cards or List? When there is ample screen space, display the filters to the left of the data as a persistent column. Once space becomes limited, use a single filter button that opens a Layer containing the filters.
- Is there more than one filter? Use a single button with filter icon that opens a Layer containing the filters.
- Is the user going to be selecting multiple options? Filter with CheckBoxGroup.
- Is the user aiming to filter based on a range? Filter with RangeSelector.
- Does your filter have a large number of options (>10)? Filter with CheckBoxGroup in a side-anchored Layer. Present a prioritized subset of the options to the user first and provide an accompanying "Show more" anchor that will reveal the rest of the options when clicked. When utilizing the "Show more", your filters should be displayed in a side-anchored modal since it provides an intuitive vertical scrolling behavior.
- Does your filter have a massive number of options (>100)? First consider if you are able to break this filter into more manageable groupings. However, if you are unable to break up the filter options into smaller groups, consider using a scrollable CheckBoxGroup. This approach should be used as a last resort since research demonstrates that this pattern is not ideal for user experience.
More examples of filtering
Filtering with RangeSelector
- Asup-array01-lvs (default)San Jose, CAAvailability: 90.2%
- Des-K8-Sym-R5-3 (default)San Jose, CAAvailability: 70.3%
- Dev36-erray01 ( default)Houston, TXAvailability: 95.8%
- asup-array1 (default)Fort Collins, COAvailability: 85.1%
- asup-array21 (default)New York, NYAvailability: 53.4%
- Dpe-R3-19 (default)Houston, TXAvailability: 77.3%
- Asup-array10-lvs (default)Fort Collins, COAvailability: 30.4%
Filtering with Select
Filtering with Select should be used when the goal of the user will likely be to filter data around one specific criteria. If the user will be selecting multiple criteria, consider using CheckBoxGroup.
Something missing or looking for more information? Get in touch to help make the HPE Design System better.