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.
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.
Do not use filter when the list of data just has one type of property.
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).
Here are some commonly used controls in sort and filter.
Choice Chip Form Cell – Single Selection
Choice chip form cell is recommended to use for single selection sort when applicable. This allows users to prioritize the list by one criterion. A default value should be selected for Sort.
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.
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.
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 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 allows users to view the results in the order they want.
Filter allows users to narrow down the results according to certain criteria.
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.
The filter dialog follows the standard full-screen dialog structure: discard action on the left, and confirmation action on the right.
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.
The “APPLY” button confirms the selections users have made and closes the dialog. The list will be refreshed with the new filter settings.
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.