Last Update: Oct 7, 2022

Platform: Web, iOS, Android

Designer: March, Gregory

Intro

The Search, Filter, and Results design is a template for an Advanced Search - a full-page dedicated search experience including keyword search, filters, and results.

The search bar itself allows users to search by typing keywords and receive suggestions for searches.

The filter side panel is populated with the features of the results of a search and allows users to further limit results.

The results readout shows basic information about results that is customizable based on the records being searched.

Usage

A search is being designed that returns results that are complicated enough to require a full-page readout.
A search is being designed that returns results that must be filtered to be used effectively.
A search will return results directly within the bar itself or within a dialog. (Note that these are also valid patterns, but not relevant to this documentation.)

Structure and Components

The search experience is made from 3 major components:

The search bar, placed near the top of the page. The search bar can also appear out of this context on another module page, and have search suggestions lead to the full search experience as a destination.
The filter side panel, on the left side of the page for web when relevant and not hidden.
The results readout, placed on the right side of the page on web, or at full span when filters are hidden on web and at all times on iOS and Android. Only appears when results are returned from the search at hand.

Accessed via Filter button on iOS and Android

Behavior & Interaction

The search input opens to show history and suggestions. At this time, the only suggestions available are via category. Changing your search keyword(s) fully resets and refreshes the search below.

Screen Shot 2022-10-03 at 3.25.59 PM.png

Screen Shot 2022-10-03 at 3.32.21 PM.png

Filter options are determined based on the search results themselves. Once results are loaded, filter options associated with the results for each category are shown in order first by how many results are associated with that option, and then by alphabetical order. Categories are always in fixed order at this time. Clicking the chevron to the left of a category title collapses it and reverses the chevron.

When a filter option is selected, the filter panel refreshes with the new relevant options and counts associated with the new results set. Selected options are moved to the top of the filter list, such that the order is now first sorted by wether or not an option is selected, then by count, then alphabetically.

If there are more than 5 options in a category, the first 5 are presented and then a "Show More" button is shown below. Clicking "Show More" reveals 5 additional options. If there are more than 10 options, the "Show More" button remains below and can be used to add 5 more options in this way until all options have been shown. At this point a "Show Less" button replaces it. Clicking on Show Less, or collapsing and reopening a category at any time, returns the list of options down to 5.

In most cases, due to the way filters are populated, there is no case where a filter with 0 options will be presented. However, if an option is selected and then another filter causes the count for that option to drop to zero, it should remain in the filter bar and have its count listed as 0.

The filter bar as a whole can be hidden or shown on web with the "Hide Filters"/"Show Filters" button to the upper right of the results.

Results are static, and presented in the order of greatest relevance. Clicking on a result leads to a relevant details page, and clicking an action icon completes that action in context.