The Filter pattern allows for the manipulation or selective presentation of data to make it more acceptable or favorable to the user. It also simplifies complex data by filtering out irrelevant results.
Appearance characteristics for this pattern.
- Placement: On screen filter (common), filter drawer (common), filter dialog, filter form.
- On screen filter is a set of filter options located above (or visibly near) a set of search results or objects.
- Filter drawer displays filters in an off-canvas drawer. Tapping a control or swiping reveals the filtering UI.
- Filter dialog is modal and requires the user to make a filtering choice or cancel the action to dismiss the dialog.
- Filter form are typically used with large data sets and offer more advanced filter options. This is an example from Apple iTunes.
- Layout: Grouped related items or single "on/off" choice.
Common behaviors for this pattern.
- Select and set: The user selects which filters to apply to a data set then explicitly taps a "Filter" or "Apply" option. This behavior is best suited to applications that have a number of filters that can be applied to a data set. Typically found in "desktop" UI.
- Select and filter: The user selects a filter and it's automatically applied to the data set. This behavior is better suited to mobile applications and in UI that has a limited number of filters to apply.
Usage guidelines for this pattern.
- Filter patterns should not be used for primary navigation within an app as it's meant to group and refine related results.