Switch to M&T
Overview

Search, Filter and Sort

Search, filter and sort are three methods of finding information by refining data or changing its organization.

Search allows users to find information by means of keyword entry and match. It can be used to narrow down visible data or as a method of discovery that bypasses navigation.

While search allows users to find relevant information quickly, it is not a substitute for intuitive navigation.

Assets for search

Because the search action relies on keyword entry, all search components are text inputs.


Types of search

Currency defines two scopes of search, global and contextual.

A global search, such as a site search will match a keyword against an entire product. Global search is usually placed at the top right of a page in the header to indicate that it is not related to a specific page's content.

A contextual search will match a keyword against a smaller set of data points. The context of the search must be made evident to the user both by the input's placement in a layout and accompanying text. For example, if a user wants to search within their transaction history, place the search bar near the list of transactions and set the placeholder text or CTA to "Search transactions".


Behaviors

Search inputs can exhibit any of the following behaviors to aid the user in finding information and to best fit the needs of an experience.

Search Triggers

Confirmation Search - This basic functionality requires the user to submit their keyword before their query is matched to any results. The confirmation CTA must be obvious to the user and to screen readers.

Instant Search - This search shortcut immediately begins displaying results in real-time in the same layout as the search input. While an instant search may help a user find information faster, it should always be reinforced by the ability to perform a confirmation search. This ensures that a user will always be able to find all relevant information matching their keyword while maintaining the accessibility and usability of the Instant Search behavior.

Suggestions

Predictive Inputs - Confirmation searches can make use of predictive input behavior (also called typeahead) to make suggestions based on the characters a user is typing. Upon selection, the suggestion will populate the searchbox and the user will submit the search.

Recent Searches - On focus in a search input, an overlay can appear that displays recently entered keywords.


Displaying Results

Based on the behavior built into the search input, search results can be displayed one of three ways:

Results Page

This is the default display method for a confirmation search. After submission, the user is shown a new page that displays all keyword matches. This may not always require navigation but will minimally require page reload.

Overlay

This is a display method for an instant search wherein keyword matches will display in an elevated container beneath the search box. Users can make selections from within the container. An instant search overlay should only display 7 - 9 search results at a time. Users should always have the option to confirm the search and view more results on a dedicated search page.

On-screen Data Refinement

This is a display method for an instant search wherein information already present on the screen is eliminated as a user enters their keyword so that only matches remain. This display method is commonly seen in data tables.

Search Best Practices

  • Tell the user when there are no search results
  • Avoid dead ends. When possible, offer the user a go-forward action even when there are no results
  • Use a wait animation to let users know the system is working as intended, especially when searching large data sets and results may take a moment
  • Truncate search results instead of line wrapping
  • Enumerate results and categorize them when possible, e.g. "19 results for user input"
  • Highlight keyword matches in search results

Filter

Filtering allows users to narrow down results from available data by toggling on and off predefined attributes. Unlike search, filters cannot be used for navigation.

Assets for Filtering

Filters are boolean attributes that, when selected, represent a property a user wants matched. Dependin gon the complexity of the data set and rigor of the filter, any of the following assets can be used.

For single selection:

When a user can only choose one option out of a list of available attributes, use any input that has the same behavior.

For multiple selections:

When a user can choose multiple options out of a list of available attributes, use any input that has the same behavior. Multiple attributes are combined using a logical "OR" operator.

For selecting numerical ranges:

When a user can choose between a range of numbers, use two number inputs. For date ranges, you may also use a calendar picker where layouts allow.


Triggers

Filters can exhibit any of the following behaviors to aid the user in finding information and to best fit the needs of an experience.

Confirmation Filter - A user must submit their selected attributes and submit. In instances where a user submission is necessary, a CTA should be obvious, e.g. an "Apply Filters" button.

Instant Filter - Filters take effect in real-time as a user manipulates the inputs. Changing information in the layout will alert the user to a successful filtering action.


Displaying Results

Filtering never changes the organization or layout of information so results are always displayed in the same method as the larger data set. For example, filtering a data table may change the records a user sees, but will never change the columns or rows in the table.


Filtering Best Practices

  • No filters should be applied by default when first displaying information
  • At smaller breakpoints, filters may be hidden to maximize screen real estate. The filter icon is an effective indication that filtering options are available.
  • If filters can be hidden, you must include an on-screen indication of what filters have been applied to a data set. You should also include an option to clear the filters without re-opening the container. Chips are a good asset to display this information.

Sort

Sort manipulates the organization of repeating information such as lists, card collections or records in a data table. It does not change how much information is displayed.

Assets for Sorting

The display of sort functionality should depend on the complexity of the information and the rigor of the sort.

Sorting by a single attribute:

When there is only one attribute to sort by, use a secondary or small button, an icon link, or a text link that specifies what attribute the user is sorting by.

Choosing from a list of attributes:

When a user can choose from a list of attributes to sort by, use a select that lists the various available attributes.

Sorting data tables:

Include sort functionality on each column in data tables to allow for toggling descending/ascending sort.


Triggers

Sort is always instantly triggered when an attribute is selected.


Sort Best Practices

  • The default sort order should be obvious to the user
  • Always let the user know what attribute data is being sorted by