The Filter 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. Optionally, feedback is present once the filters have been applied. The Filter concept accommodates a variety of use cases with modules.
A. Nav Bar
Nav 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 Sections
Sort Section is used for sorting the results by a certain logic. Sort Section has a preselected value which is the default sorting method.
C. Filter Sections
Filter Section asks users to use controls to set up filters for the results. Types of controls include switch, select and set data range. By setting the filters, only results which qualify the filter value will be displayed.
D. Reset Sections
Reset Section is for clearing up any changes on the filter and bringing the filter back to its default status.
E. Feedback Sections
Feedback Section is to help users understand that a number of filters have been applied to the results.
Button / Single Selection
Sort is a single selection function that organizes lists by key values. This control allows the user to further refine search results into a manageable list.
There should be a default value selected for Sort.
For a complex data set, use an Advanced Sort by listing all the attributes in the data set. Users can select which attributes to sort by and arrange the sort order accordingly.
Button / Single Selection
Group allows the user to group search results within a list. Sort and group cannot be the same value. For example, if Availability is selected in Sort by, the same value in Group by should be disabled.
* Use Group only when it’s needed. Group can cause some conflict with the filters. If such a conflict occurs, the filters settings should outweigh the grouping settings.
Button / Single Selection
Buttons are used to filter one or more values under a data category. Buttons can be used for either single selection or multiple selection filtering.
When the text of value is too long to display within the button, use a drill down value list (e.g., Project name).
Buttons are used when the number of values is less than 8 or 10; otherwise use a drill down value list.
Button / Multiple Selection
Multiple selection is best used when the user needs to select multiple values within a filter.
The user simply taps on the button that highlights it to indicate it as a selection. If the user needs to select another value, the user can simply tap on an additional button. To deselect a selected value, user taps again on the selection.
Use Switches when the type of filter has only two mutually exclusive states—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).
List / Single Selection
A list is used when the number of values is more than 8 under one filter category. The typical use case is when the data entry. With a drill down list, the user is able to search and select the data entry.
The selection on a list can be either single selection or multiple selection.
Use a value list when the number of values is dynamic or unpredictable.
List / 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 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.
A picker can be used to make multiple selections of data sets (such as date and time) or to select a range (such as price range).
When inputing data sets such as setting the price range, “Min” value automatically affects the starting value of the “Max” picker.
A slider is best used when the minimum value is established and the maximum value needs to be adjusted.
The Reset All button allows the user to bring all filter settings to a default state. It comes at the end of the filter modal. The Reset All button will clear the filters and set 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.
There are two ways of providing Filter Feedback:
Use a counter next to the Filter control icon to indicate that there are filters that have been applied. The counter only appears when any of the filters is applied to the list. For sorting or grouping change, it won’t affect the filter counter.
The other way to provide filter feedback is to use a bar which contains interactive buttons under the Nav Bar and above the content area. The interactive buttons can be the most frequently used filters, the applied filters, and any sorting or grouping change.
See more in Filter Feedback
Filter modal is usually triggered by tapping on the filter control button on Nav bar. As a secondary option, Filter control can be placed on the Toolbar if there is no space in the Nav bar. The filter control button can be either an icon or text.
The filter Nav bar should have “Cancel” and “Done” controls as well as the “Reset all” button at the end of the list.
The Cancel button gives users the option to close the filters modal without having to commit.
The Done button confirms the selections that the user has made and closes the modal.
The navigation within the Filter modal is normally to drill down into a value list. The animation 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 filter cell. The back navigation should be “< Filter”.
Filter in compact width appears as a full screen modal.