Intro

Filtering and sorting are two ways of refining the results from a long list of objects. These two features help users navigate through a big amount of data and find the specific data they want to focus on easier.

Typically, a full-screen dialog (for mobile) or modal dialog (for tablet) is used to display all filter controls. Sorting and filtering are integrated when both features are available. Users can reset all to go back to the complete list of results in default order.

Usage

Do’s

Use filter when there is a long list of data with several properties and users usually want to see part of the list by narrowing down the properties.

Don’ts

Do not use filter when the list of data just has one type of property.

Structure

On mobile, a full-screen dialog is used to display filter and sort.

On tablet, a modal dialog is used instead of full-screen dialog.

The filter dialog is made up of reusable and modular sections. Each section consists of different types of controls / form cells.

A. App Bar

App bar contains a page title and actions related to the page. In a filter dialog, the page title is usually “Filter” or “Sort and Filter”. The “close” icon on the left closes the dialog without applying changes, and the “APPLY” button on the right applies the changes and closes the dialog.

B. Sort Section (if applicable)

When a sort feature is available, it appears as the first section in the dialog. Sort section is used for sorting the results by a certain logic. The default sorting method is preselected.

C. Filter Section

Filter sections provides controls for users to set up filtering criteria. Types of controls include chips, selection controls, slider, etc.

D. Footer Section

Footer area contains “RESET ALL” button. “RESET ALL” will clear up any changes on the filter and return the filter or sort by to its default status.

E. Feedback Section

Feedback section shows users the number of filters that have been applied to the results (sort by does not show the number).

Control Types

Here are some commonly used controls in sort and filter.

Sort

Choice Chip Form Cell – Single Selection

Sort is a single selection function that organizes lists by certain values. This control allows the user to further refine search results into a manageable list. Choice chip form cell is recommended to use for sort when applicable.

There should be a default value selected for Sort.

Select

Chip Form Cell – Single or Multiple Selection

Use chip form cell when users need to make selections from no more than 8 pre-defined values. Use choice chip form cell for single selection. Use filter chip form cell for multiple selection. If the number of values is more than 8, or the text of the value is too long to display within chips, use a list picker form cell instead.

List Picker Form Cell – Single or Multiple Selection

A list picker form cell is used when the values are long text or the number of values is more than 8 under one filter category. It is also used when the number of values is dynamic or unpredictable. With a list picker form cell, the user is able to search and select the data entry.

The selection on a list can be either single selection (use radio buttons) or multiple selection (use checkboxes).

If a list is multi selection, the selections can be grouped in a “Selected” grouping to enable users to deselect without having to scroll down a large list.

Switch Form Cell

Use a switch form cell when the property has only two mutually exclusive states—on and off.

Data Range

Slider Form Cell

A slider form cell enables the user to set the maximum value within a specified numerical range.

Time Picker Form Cell

A time picker form cell is used to select time based data.

A date picker is used to set a specific date or time. A time duration picker is used to set a duration.

Reset

The “RESET ALL” button is nested in a persistent footer that is located at the bottom of the dialog. The Reset All button clears the applied filters and returns Sort to its default value.

Filter Feedback

Filter Feedback helps user understand the results of Filter. Due to the complexity of dataset or the number of values, it is recommended to give users feedback.

Use a counter next to the Filter control icon to indicate the number of filters that have been applied. If no filter is applied, hide the counter. Applying Sort does not count towards the number of filters.

Behavior & Interaction

Sort

Sort allows users to view the results in the order they want.

Filter

Filter allows users to narrow down the results according to certain criteria.

Trigger

Filter dialog is usually triggered by tapping on the filter icon on App bar. Based on the priority of actions, if there is no space in the app bar, filter could be placed in the “more” menu on mobile. On tablet, it should become visible on app bar.

Actions

The filter dialog follows the standard full-screen dialog structure: discard action on the left, and confirmation action on the right.

“Close” Icon

The “close” icon closes the dialog without having to commit. When nothing has been entered by the user, the dialog will be closed directly. If there is unsaved input, a confirmation dialog will show up asking users to confirm their action.

“APPLY” Button

The “APPLY” button confirms the selections users have made and closes the dialog. The list will be refreshed with the new filter settings.

Navigation

The navigation within the filter modal is normally to drill down into a value list.

The title of the new screen should be consistent with the Label in the filter cell. Replace “close” icon with “back” icon to navigate back. The drill down page has no “APPLY” button, as all changes here are auto-saved. If the search function is available, show the “search” icon in the app bar.