Intro

Filter feedback bar is a horizontal scroll area containing interactive chips that provides users quick access to filter controls. The bar appears below the app bar, and above the list of objects. The interactive chips in the filter feedback bar indicate which filters have been applied, and what filters are available. Users can modify the filters directly by tapping on the chips.

Usage

Do’s

  • Use filter feedback bar to provide direct access to frequently used filters.
  • Use filter feedback bar when filter options are relatively simple and straightforward.
  • Use filter feedback bar when users want to modify applied filters often.

Don’ts

  • Don’t use filter feedback bar when users usually apply a large number of filters, or the filter options are difficult to represent by chips. For example, when filter options have very complex names and structures.

Structure

The filter feedback bar sits between the app bar and content area. The chips in the filter feedback bar are grouped into two types:

A. Active Filters

Active filters indicate the sort (if it is a non-default sort) and filters currently applied to the list. They are represented by chips in selected state. The active filters are always on the left side of inactive filters, with sort (if applicable) at the very left.

B. Inactive Filters (for Fast Filters)

Inactive filters are available filter options that are not currently applied to the list. Only fast filters will be shown as inactive filters. They are represented by chips in non-selected state.

Types

Fast filters

Fast filters are pre-defined filter options that remain visible in the filter feedback bar even when they are not applied. With fast filters, users can apply filters to the list directly in the page instead of opening the filter dialog. The fast filter options are defined by the app team. To make fast filters most effective, we recommend to only include the most frequently used filters as fast filters.

Filter feedback bar with fast filters  

With fast filters, the filter feedback bar is visible by default with all fast filters as inactive filters. Users can apply fast filters directly or through the filter dialog. All applied filters will be shown in the filter feedback bar as active filters.

Filter feedback bar without fast filters

When no fast filters are defined, the filter feedback bar is hidden by default. The default sort does not show up in the filter feedback bar. After the user has applied a filter or changed the sort option through the filter dialog, the filter feedback bar will appear to show the active filters.

Behavior & Interactions

Horizontal Scroll

All filter options in filter feedback bar are displayed in one row. Users can scroll horizontally to view all filters.

Applying fast filters

Users can apply a fast filter simply by tapping the chip. This will change the chip to the selected state and become an active filter. The active filter will move to the left of any inactive filters. Each time a fast filter is applied, the list below will be refreshed to show the filtered result.

Removing fast filters

Users can remove a fast filter simply by tapping the chip. This will change the chip to non-selected state and back to an inactive filter. The inactive filter will move back to its original position as the fast filter. Users can only remove one fast filter at a time, and the list below will be refreshed to show the updated result.

Applying filters from filter dialog

In the filter dialog, users can apply multiple filters at a time. All applied filters will be displayed in the feedback bar as active filters. If fast filters are defined from the options in the dialog, they can be applied through the dialog as well.

In general, the active filters take the selected filter’s name or value directly. If the value or name is not clear enough, we recommend using both the label and value in the active filter. For example, a location value could represent arrival or departure, adding “Arr:” or “To:” and “Dep:” or “From:” to the location value would help user identify what the location stands for. By default, we recommend adding “Sort By:” to the sort value in the filter feedback bar for clear communication.

Removing filters applied from filter dialog

Users can remove a filter applied from filter dialog directly by tapping the chip in the filter feedback bar. If that option is not defined as fast filter, it will disappear from the filter feedback bar. The user can also remove a filter by deselecting it in filter dialog as the standard behavior of filter dialog.

Expand and collapse

To maximize screen space for users to scan through the list content, the filter feedback bar will collapse as users scroll down the page. It will expand and stay on top of the list content when users start to scroll back up to provide easy access.

Specs

Mobile

Tablet

Please refer to Chips for detailed specs and colors of chips.