Updated: September 28, 2017

Filter

Intro

Filter is for users to narrow down the 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 the results are integrated within the Filter modal.

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; use a grouped table view instead.

Structure

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.

Filter structure
Filter structure

 

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.

Types

Sort

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.

Sort through a button
Sort through a button

Advanced 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.

Advanced Sort
Advanced Sort

Group

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.

Group through a button
Group through a button

Select

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.

Single selection through a button
Single selection through a button

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.

Multi selection through a button
Multi selection through a button

Switch

Use Switches when the type of filter has only two mutually exclusive stateson 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).

Selection through a switch
Selection through a switch

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.

Single selection through a list
Single selection through a list

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.

Multi selection through a list
Multi selection through a list

Data Range

Picker

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.

Currently not available in SDK.
Currently not available in SDK.

Slider

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

Currently not available in SDK.
Currently not available in SDK.

Reset

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.

Reset
Reset

Filter Feedback

Filter Counter

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.

Interactive Buttons

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

Behavior & Interaction

Actions

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.

Text button and icon button
Text button and icon button

 

The filter Nav bar should have “Cancel” and “Done” controls as well as the “Reset all” button at the end of the list.

Cancel

The Cancel button gives users the option to close the filters modal without having to commit.

Done

The Done button confirms the selections that the user has made and closes the modal.

Cancel and done
Cancel and done

 

Navigation

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”.

Navigation
Navigation

Compact & Regular

Compact Width

Filter in compact width appears as a full screen modal.

Compact view
Compact view

Regular Width

Filter in regular width appears as a popover.

Popover (Regular view)
Popover (Regular view)

When in split view, the filter should appear as current content view style, which is at the same size as its parent view. (See more in Modals.)

Contextual modal (Regular view)
Contextual modal (Regular view)

Guidelines

Wisely choose the types of filter controls for your data. Go through all the possible combinations to see if the filters logically conflict with each other. If that happens, think about what is more important to users and cut off the conflicting part to solve the problem.

Guildlines
Guildlines