Search, sort & filter

Help users to find and organize relevant information within a data set.

Usage

When to use

Use the search, sort and filter pattern in the following cases:

  • When your users should have the possibility to narrow down a list by filtering.
  • When your users should have the possibility to modify the sorting order of elements or hide columns from a list or table view.

Search field

Depending on the individual use case we provide three different search field variants:

Small search field

Use a small search field if only a single search term is possible.

search-field-small

Small search field
Medium search field

Use a medium search field if a maximum of three different search terms are intended.

search-field-medium

Medium search field
Extended search field

Use an extended search field if multiple search terms are intended.

search-field-extended

Extended search field

Sorting

Sort button

There is no determination about when to prefer the simple icon sort button or the one with text.

example-of-sort-in-list-with-simple-sort-button

Example of sort in list with a simple sort button

example-of-sort-in-list-with-advanced-sort-button

Example of sort in list with a advanced sort button

example-of-sort-in-card-list-with-advanced-sort-button

Example of card list with a advanced sort button

Sort icons

Use sort icons in the following cases:

  • In the table header
  • In sort popover menus
  • As an extra option in table header

A sort popover gives the additional possibility to show and hide columns or cards by checkboxes for specific activities. By using the drag and drop symbols, the hierarchy for each column or card can be changed, too. The sort symbols on the right side defines an ascending, descending or default sorting. If there is already an existing header, the functionality is the same. The info badge shows how many items are affected by the selected sortings.

sort-popover

Usage of sort items in the popover menu

Sort direction in a card list

In objects that are presented in several rows and columns such as cards, a descending sorting takes place in a z-shaped manner.

sort-direction-card-list

Sort direction in card lists

Combined search, sort and filter

explanation-hybrid-components

1. Search field, 2. Sorting item (shown), 3. Sorting item (hidden), 3. Filter item (default), 5. Filter badge

Deleting-filtersetting-in-hybrid-version

Deleting a filter setting

Style

This chapter shows several search field styles in the User Experience Toolkit.

Overview

Search & sort

Search field states and types

Search-field-states-types

Search field states and types: 1. Default, 2. Disabled, 3. Hover, 4. Focus 5. Filled state

Example-of-search-results

Example of search results: 1. Small, 2. Medium, 3. Extended
Result badge

The Result badge represents the name of the search item and number of found items.

Result-Badge

Result badge

Delete options can be taken by clicking on the clear all symbol in each result badge. The search result symbol shows the found items based on the content.

Result-Badge-Interaction

Result badge interaction
Sort popover

The counter in the sort button refers only to the already activated sort icons (show and hide excluded).

sort_popover

Popover menu with sort options

sort-items

Sort item: 1. Default, 2. Ascending, 3. Descending

Sort icons

Sort-icons

1. Default, 2. Ascending/First click, 3. Descending/Second click, 4. Drag/Drop

Sort buttons

The sort button can be represented in two different versions - the function is the same. The only difference is in the additional text description and (downpointing) arrow. Both variations lead to a popover.

Sort-buttons

1. Default, 2. Disabled, 3. Hover/Active, 4. Enter state, 5. Width Text: Default, 6. Disabled, 7. Hover/Active, 8. Enter state

Sort in lists & tables with a header

Sort-in-simple-table

Sort option in a simple table with a header

Sort-in-simple-table

1. Sorted column (descending), 2. Unsorted column (default)

Sort-in-table-with-header

Sort option in a table with a header

Sort in card lists & tables without a header

Sort-in-card-list-without-header

Sort option in a card list without a header

Combined search, sort and filter dropdown

This chapter shows the search- sort- and filter hybrid version in the User Experience Toolkit.

Filter header

The filter header indicates if a filter has already been assigned or not. By clicking on the delete symbol inside the filter badge the specific setting can be discarded.

Filter-header

Filter header: 1. No setting, 2. With filter by condition setting

The hybrid version contains options for detail filtering and filter by conditions. By the detail filtering options you can sort and show & hide columns.

Hybrid-version-detail-filtering

Detail filtering example of the hybrid version

Hybrid-version-detail-filtering-and-filter-by-condition

Detail filtering & filter by condition example of the hybrid version

Hybrid-version-standard-component

Representation of the standard component of the hybrid version: Time, Date, Cost, Address

Typography

Search field

StateFont-familyFont-sizeLine-heightText alignment
allSiemens Sans Roman14px16xleft

Sizing and spacing

Search field

search-field-small

Dimensions of the small search field

search-field-medium

Dimensions of the medium search field

search-field-extended

Dimensions of the extended search field

Sort popover

hybrid-popover-dimension

Sort popover dimensions

sort-items-dimensions

Sort items dimensions
Except where otherwise noted, content on this site is licensed under the Development License Agreement.
Back to top