Updated: May 23, 2019

Sort & Filter

Intro

The filter pattern allows users to narrow down results from a long list by setting some criteria. Users are able to reset the filter to go back to the complete list of results.

Sorting and grouping are also integrated as part of the filter pattern.

Structure

The 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

The navigation bar contains “Filter” as the screen title, “Done” on the right to apply filter selection and “Cancel” on the left to opt out of the filter modal.

B. Sort

Sort is used for sorting the results by a certain logic. Sort should always have a preselected value which is the default sorting method.

C. Filter

Commonly used controls include switch, list picker, filter form cell and slider. 

D. Reset

Reset Section is used to bring the filter back to its default status.

E. Feedback

Feedback helps users to understand that a number of filters have been applied.

Types

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.

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.

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.

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.

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.

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.

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 multi selection, the selections can be grouped in a “Selected” group to enable users to deselect without having to scroll through a large list.

Learn more in List Picker.

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.

Slider

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

Learn more in Slider.

Reset

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

Filter Feedback

Filter Count

Providing feedback helps the user understand the results of a filter applied. There are two ways of providing feedback:

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 Feedback Bar

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

See more in Filter Feedback Bar.

Behavior & 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

The cancel button provides users the option to close the filters modal without saving any changes.

Done

The done button saves the selections that the user has made and closes the modal.

Cancel and done
Cancel and done


Navigation

Navigation within the filter modal is normally only happens when drill down into a list picker. The  transition of the navigation should be a push to the next screen. 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 “Filter”.

Regular

Filter in regular width appears as a popover.

Popover (regular width)
Popover (regular width)