Updated: June 6, 2022

Sort & Filter

Intro

The sort and filter pattern allows users to narrow down results from a long list by setting criteria. Users are able to reset filters and go back to the initial list.

Grouping is also integrated as part of the sort and filter pattern.

Sort and filter pattern
Sort and filter pattern

Anatomy

The sort and filter pattern is made up of reusable and modular sections. These sections include sort, group, filter, and reset. The types of filters are grouped by types of controls.

A. Navigation Bar

Contains Filter as the screen title, Done on the right to apply filter selection and Cancel on the left to exit the filter modal.

B. Sort

Used for sorting the results by a certain logic. Sort should always have a preselected value as the default sorting method.

C. Filter

Used to narrow down the list. Common controls include switch, list picker, filter form cell and slider. 

D. Reset

Used to bring selected filters back to default statuses.

E. Feedback

Helps users understand how many filters have been applied.

Sort and filter anatomy
Sort and filter anatomy

Behavior and Interaction

Actions

The filter modal is usually triggered by tapping on the filter button on navigation bar. As a secondary option, the filter button can be placed on the toolbar if there is no available space in the nav bar. The filter button can take the form of either an icon or text.

The navigation bar of the filter modal should have a cancel button and a done button.

Cancel Button

Provides users the option to close the filter modal without saving any changes.

Done Button

Saves user selections and closes the modal.

Icon filter button (left), text filter button (center), cancel and done (right)
Icon filter button (left), text filter button (center), cancel and done (right)


Navigation

Navigation within the filter modal typically only occurs when drilling down into a list picker through a push-to-new-screen transition. The title of the new screen should be consistent with the label in the list picker cell. The title of the back navigation should be Filters.

Drilldown into list picker through push to new page transition
Drilldown into list picker through push to new page transition

Adaptive Design

Sort and filter pattern in regular width may appear as a popover.

Popover in regular width
Popover in regular width

Variations

Sort

Single Selection

Sort is a single selection function that organizes lists by key values. Use filter form cells to allow the user to further refine search results into a manageable list.

There should always be a default value selected for this function.

Sort with single selection
Sort with single selection

Group

Single Selection

By using filter form cells, users are able to group search results within a list. The values in sort and group should not be the same. For example, if Availability is selected in sort, the same value in group should be disabled.

Use this function only when it’s necessary as it may cause conflict with the filters. If such a conflict occurs, the filters settings should overwrite the group settings.

Group with single selection
Group with single selection

Filter

Single Selection

Filter form cells are used again to filter one or more values under a data category. 

When the text of value is too long to display within the cell, or when there are more than eight values to select from, use a list picker instead.

Filter with single selection
Filter with single selection

Multiple Selection

To select multiple values, the user simply taps on the cell and the cell will be highlighted. If the user needs to select another value, the user can tap on an additional cell. To deselect a selected value, the user taps again on the selection.

Filter with multiple selection
Filter with multiple selection

Switch

Use Switches when the type of filter has two mutually exclusive states onlyon and off.

In some use cases, when a switch is set to “on,” the user is then able to enter additional data (e.g., by using a date and time picker).

Read more about Switches.

Switch off (left) and switch on (right)
Switch off (left) and switch on (right)

List Picker – Single Selection

A list picker is used when there are more than eight values to select from in a filter category. Use a value list when the number of values is dynamic or unpredictable.

User taps list picker form cell (left), makes single selection (center), returns to filter page (right)
User taps list picker form cell (left), makes single selection (center), returns to filter page (right)

List Picker – Multiple Selection

In some use cases, a list with a search bar is used to search through a large collection of values.

If a list picker allows multiple selection, the selections may be grouped in a Selected group to enable users to deselect without having to scroll through a large list.

Learn more in list picker form cell.

User taps list picker form cell (left), makes multiple selections (center), returns to filter page (right)
User taps list picker form cell (left), makes multiple selections (center), returns to filter page (right)

Data Range

Picker

A picker can be used to select date and time, or to select a duration of time.

When inputing data sets such as setting the price range, “Min” value automatically affects the starting value of the “Max” picker.

Learn more in pickers.

Default picker (left) and active picker (right)
Default picker (left) and active picker (right)

Slider

A slider is best used when the minimum value is established and the maximum value needs to be adjusted.

Learn more in slider.

Slider in sort and filter pattern
Slider in sort and filter pattern

Reset

The reset button allows the user to return all filter settings to a default state. It usually appears at the bottom of the filter modal.

Reset button in sort and filter pattern
Reset button in sort and filter pattern

Filter Feedback

Filter Count

Providing feedback helps the user understand the results of a filter applied. There are two ways of providing feedback: in the navigation bar or in the toolbar.

Use a number count next to the filter button to indicate the numbers of filters that have been applied. Sort and group do not affect the number count.

Filter count in nav bar (left) and toolbar (right)
Filter count in nav bar (left) and toolbar (right)

Filter Feedback Bar

Another way to provide feedback is to use an interactive bar that contains filter buttons between the navigation bar and content area. It may display most frequently used filters, filters that have been applied, and any sorting or grouping options.

See more in filter feedback bar.

Filter feedback bar with 3 filters selected (left) and 1 selected (right)
Filter feedback bar with 3 filters selected (left) and 1 selected (right)

Resources