Users need to be able to quickly find what they need or reach their intended destination. Search can make these tasks easier by clearly showing relevant results.
Global search is typically accessible from every page of an experience. Users can utilize it perform broad searches which span across a product. In many cases, global search serves as a navigational starting point for a user, providing them options in terms of where to go and what to do. When it serves as the primary starting point for a user, it should be the most discoverable element on a page.
When it is available within the context of other user flows, research suggests that users typically expect to see a global search field within the header.
Contextual search is specific to a task and is often embedded within particular features and tools. The scope of contextual search is more narrow than that of the global search. Users should only see results relevant to the task they are trying to accomplish. It can be used to help a user with a variety of tasks, like filtering objects in a list or finding objects so they can be added to a set.
When search is used to filter a set of results in order to find an object, the results should update in real-time as a user types.
If updating filter results in real time is not possible, the Search Field must be accompanied by a Button to execute the query. This button should be disabled by default and become active once a user types into the search field.
When adding multiple filters, display each as a Dismissible Tag below the search field. This enables a user to see their current filters and remove them as needed.
When the main use case is to add a single object, search results should close upon selection of the object.
When using contextual search to add multiple objects, checkboxes should be used to provide users with that functionality. Users must manually dismiss these searches by clicking outside of the panel or on an action button, e.g., a “Done” or “Cancel” button.
If the main purpose of the page is to search for an object, put the search field into focus by default to make searching easier for the user.
Use consistent language in search field placeholder text to reduce cognitive friction and help users quickly identify what types of content they can search for.
Depending on context, search results may appear inline or layered on top of other page content. When deciding between the two, think about the importance of the search to the page:
Search results should be displayed using the Search Results components unless there is a more appropriate component already existing within a composition, e.g., when a user is using search to filter items displayed in a data table.
Use when the search results are the main focus of the user, e.g.:
Use when searching is one action among many that a user can perform on the page. This allows search results to appear and disappear as needed, without unpredictably moving content on the rest of the page.
Enterwhile in the search field or presses a related button intended to execute the search.