Filters

Purpose

Users need filter a collection of items or search results to find items of interest.

Description

Filters provide a set of controls to reduce items in a collection based on attributes the user is interested in (e.g., filtering items by creation date).

Filters can provide the following functionality:

• A list of interesting attributes common to items in a collection, and possible values to filter by
• An indication of the currently applied filters
• A way to clear the currently applied filters
• Predefined filters

Common filter types

• Single-select and categorical refinement (links)
• Multi-select (checkboxes)
• Date range
• Sliders
• Single-select dropdowns

Vertical filters

Filters can be stacked vertically on the left side if:

• Filtering is a primary interaction, where users are very likely to use filtering in each session
• You have many filters
• You have enough horizontal screen real estate

Filters can optionally be:

• Collapsible (some or all filters can be collapsed or expanded by default)
• Grouped under subheadings
• Clearable (or resettable if default filters are applicable)

Collapsed filters

Filters can be collapsed to a single dropdown if:

• Screen real estate is limited due to constrained or dense layouts
• Filtering is not a primary interaction, where collapsing and tucking away the filtering functionality is acceptable

With side navigation

For many or complex filters, you may want to organize them with a menu along the side.

Flat

For simple filters, they can be presented as a standard form.

Horizontal filters

Filters can be listed horizontally if:

• You have less than 5 filters
• You have plenty of horizontal space above your collection

When showing the currently applied filters, consider collapsing values to preserve space. E.g., instead of listing 4 different colors, collapse it into ‘4 colors’.

If you allow multi-selection in filters, the currently applied filters can be listed below each dropdown:

If you allow single-selection for each filter, the currently applied filter can replace the label for the dropdown:

Predefined filters

Predefined filters are presented as pill tabs. Predefined filters are either provided by the system or are defined by the user.