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
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.
Used for sorting the results by a certain logic. Sort should always have a preselected value as the default sorting method.
Used to narrow down the list. Common controls include switch, list picker, filter form cell and slider.
Used to bring selected filters back to default statuses.
Helps users understand how many filters have been applied.
Sort and filter anatomy
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.
Provides users the option to close the filter modal without saving any changes.
Saves user selections and closes the modal.
Icon filter button (left), text filter button (center), cancel and done (right)
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 Filter.
Drilldown into list picker through push to new page transition
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
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
Filter with single 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
Use Switches when the type of filter has two mutually exclusive states only—on 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)
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)
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)
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)
Slider in sort and filter pattern
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
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 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.