PATTERNS
LAYOUTS
Filter and Sort
Filtering and sorting are methods that enable a user to organize data and refine their view of a dataset using interface controls. Filter and sort reduces the time spent on searching. Together they are a dynamic duo that help guide users towards relevant and meaningful data and content.
Sorting and filtering can be used together or independently and are very important when looking at complex datasets or search results.
- Filters set a hard boundary on the search results and exclude anything not falling within the categories selected, while sort sets a soft boundary and only changes the sequence of appearance.
- Sorting helps to organize data by particular attribute or parameter, such as alphabetically or by date. Sorting organizes the content according to a certain parameter while filtering removes it from view.
Filter and sort pattern generally comprise of some or all of the following elements:
- Filter Controls
- Sort Controls
- Applied Filters
- Filtered Data/Content
Filter and sort controls should be in close proximity to the data they are manipulating.
On wider screens, the filter and sort control area are typically positioned in one of two ways — horizontal or vertical. On smaller screens, the layout often needs to be simplified to expose only the most relevant controls. See responsive guidelines below.
Both layout orientations can have a collapsible control area. This allows for the user to have a larger viewing area for the data after they have completed filtering and sorting and set their parameters.
Visible control areas on smaller screens and mobile devices should focus on the most important elements. The examples below show both filter and sort controls are converted to icon-only buttons and the tags are reduced to a single tag displaying the number of filters applied. Full sort and filter functionalities are then accessed through the simpler visible controls.
Full functionality can be maintained by moving the full control set into an expandable overlay container that is hidden from the initial view.
Advanced filter controls can be presented in an overlay. Three core options are available within the design system — Bottom Sheet, Side Panel, or Modal.
Single selection controls are used when the user can only pick one attribute of a category.
Components that can be used:
DO: Consider using a Switch for binary true or false filter options.
DON’T: Use Dropdown when there are only two options to choose from, use a Button Select to create an on-screen sort instead.
Multiple selection controls are used when the user can pick more than one attribute of a category.
Components that can be used:
Text filtering is used on long lists of any type of data where the user types into an input that is styled similar to search and then filters down the data in the content below to show only words with the letters typed by the user.
Range filtering is typically used when the user needs to see a range of numerical values or a date range.
Components that can be used:
Queryfield filtering allows a user to create advanced filters by specifying criteria across multiple parameters within a single field. The field is usually placed somewhere closer to the basic search box on UI so that users can easily find and go towards it.
DO: Quick help should be provided to the users when they are writing the query.
This type of filtering shows the pathway of the filtered data and from where that data originates. This type of filter model is best for when there is an immediate need to see the cause and effect. All filters are present at once which can be useful for scenarios where filter categories have many levels.
Instant display applies filters immediately as soon as they are selected. Single selects like tabs or single buttons should ideally be implemented with results filtered instantly. Do not use instant selection on a multi-select filter control set if it causes any visible load issues or interferes with the user selecting additional items.
Batch display allows the user to select all filter parameters first and then press an action button, typically labeled “Apply” to batch process all filters.
DON’T: Don’t use an apply button on top of the filters, the user will read in Z pattern and not notice the apply when finished.
DON’T: Don’t use switch for multiple selections.
The user should be provided feedback regarding which filters are applied so they are aware they are looking at a partial and filtered data set. Applied filters are typically displayed with the Tag component.
DO: Indicate that filters have been applied by displaying either tags (A) or through Badge Overlays (B) when space is limited.
DO: Hide the space used for the applied filters when there are no applied filters to display.
Use common terminology and real world language when naming filters. Filters should be easy to recognize and quickly scan through.
DO: Group filters together that have the same characteristics.
DO: Display filters with high relevance first if the category has numerous filter options. Use collapse to create a link to expose the remaining filters when needed.
DO: Provide expandable control to the parent filter and combine the child filters underneath it at the same visual hierarchy.
DON’T: Label filters too specifically or use terms which can be understood by only a handful of users.
These are the material icons most commonly used to represent filtering in the Goldman Sachs Design System.
These are the material icons most commonly used to represent sorting in the Goldman Sachs Design System.
DO: Include a "Clear all" link or button to ensure that the applied filters can be easily removed at once.
DO: Make your labels concise & clear.
DON’T: Use long names for labeling as these can lead to confusion.
DON’T: Use hyperlinks within your options. This can lead to confusion of whether the link will apply the filter or bring the user to another page.
- Pencil & Paper, UX Pattern Analysis: Enterprise Filtering (2021)
- Nielsen Norman Group, Defining Helpful Filter Categories and Values for Better UX (2018)
- UX Planet, 9 Filtering Design Best Practices to Improve E-Commerce UX (2020)
- Redd Experience Design, UX Design Patterns #6: Search, Sort and Filter Sorted (2020)
Contents