Overview
Within our mobile apps, we have multiple user flows that contain complex and dense content. To streamline the review and actioning of content, we provide different options for filtering: search, dropdown and chips.
Search Input
In instances when there is a large amount of content, searching allows users to input specific text into the search field to narrow the content. Whereas dropdown and chips to select redefined filter options, the search option provides flexibility in reviewing content.
When used, the search field filters down the content of the page to that inputted by the user. In that respect, searching is comprised into two section, the search field itself and content contained in the page.
Anatomy
- Search field (Further information on the search field here).
- Impacted content that is filtered and shown by what’s inputted into the search field.
Dropdown Selection
When a given user flow requires users to select one category or subcategory to filter the given data, then it’s recommended to use the dropdown as the filtering method.
Anatomy
- Location of the dropdown element (More information on this component here).
- The dropdown menu is system specific (in this case iOS).
- The filtered elements are shown within the page.
Chip/Tag Selection
The chip selection allow for multi filter selection. Using the chip component, all of the filter options are presented to the user with enabled filters being shown through the active state.
Anatomy
- To provide guidance/labelling to filtering actions, a title highlighting filter actions should be provided.
- The central element of the chip selection pattern is the chip component. This has two key variants: default and active which highlight the state to the use.
- Clear all ghost button is a bulk reset action.
