Switch to WilmingtonSearch, Filter and Sort
Search, filter and sort are three methods of finding information by refining data or changing its organization.
Search
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.
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
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
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 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.