Design VocabularyDesign vocabulary · Edition 01

VOCABULARY / ENTRY

Search and Filter

search-and-filter

Add to comparison +
Interaction patternsScope: Flowsearch-and-filter · v0.1.0

Search lets people narrow a set with a query they type; filtering lets them exclude items that do not match predefined attributes. Both must show the criteria currently in effect.

Illustration · Editorial artwork, no interactive specimen yet
A fictional FIELDNOTES list page: a search field at the top, a row of filter chips with one active, a placeholder result-count line, and a narrowed list of two or three result cards.
A fictional FIELDNOTES list page: a search field at the top, a row of filter chips with one active, a placeholder result-count line, and a narrowed list of two or three result cards.

Recognizing it

  • The result set narrows as a query is typed or a facet is selected
  • Criteria in effect and the result count stay visible
  • Criteria can be removed one by one or cleared all at once

Concept boundary

Search takes free input from the person; filtering selects from predefined facets. They are often used side by side, but neither is master-detail: master-detail links a list to its detail, while search and filter decide how the set gets narrowed. If criteria are invisible, cannot be cleared, or there is no way back from zero results, it is not a complete search-and-filter pattern.

When to consider it

  • The set is too large to browse item by item and the goal can be expressed as words or attributes
  • Content has several distinguishable attribute dimensions and people need to narrow it from different angles
  • People arrive both with specific goals (search) and with a need to explore (filter)

When to be cautious

  • The set is small and browsing is faster than building criteria
  • Content has no stable, recognizable attributes, so facets cannot be maintained
  • People do not know the domain vocabulary, and a search box alone would leave them stranded

Tradeoff

People reach targets faster, but a facet structure is costly to build and maintain, and more options add comprehension load.

Conditional rules · Editorial advice

When Any search term or filter criterion is in effectMustList every active criterion above the results and show the current result count; do not show only the number of criteria.
When A combination of criteria yields zero resultsMustOffer a clear "clear all", keep what the person entered, and provide a path to recover, such as relaxing one criterion or suggesting alternatives.
When A person opens a result and comes back, or reloads or shares the pageRecommendedKeep the entered search term and selected facets; do not reset to the default state.

Related entries

Master–Detail ↗Works with · Narrowing the selectable items in the list pane of a master-detail layout

Search and filter decide what is in the list; master-detail decides how the selected item's detail is shown.

Recognition Rather Than Recall ↗Explains · Designing filter facets instead of offering only a search box

Predefined facets let people recognize available attributes instead of recalling and spelling out a query.

Progressive Disclosure ↗Works with · There are many facets and only some are used often

Keeping common facets visible and expanding the rest on demand keeps the filter area manageable.

Sources and what they support

NN/g · Filters vs. Facets: Definitions ↗

Filters exclude items that fail a criterion; faceted navigation offers one filter per aspect of the content and helps people understand the content space, at a higher cost to build and maintain and with added interaction cost.

Retrieved: 2026-09-15
NN/g · Search Is Not Enough: Synergy Between Navigation and Search ↗

Search alone is not enough: people unfamiliar with a domain struggle to form queries, navigation replaces recall with recognition, and facets turn search into navigation, so the two should complement each other.

Retrieved: 2026-09-15
Baymard Institute · Always Display an Applied Filters Overview ↗

An overview of applied filters should appear above the list so people can confirm, remove criteria, and understand the scope of results; showing only the number of applied filters is not enough.

Retrieved: 2026-09-15
Baymard Institute · No Results Page Design ↗

A no-results page should offer recovery paths such as related categories, alternative search suggestions, and popular content; search tips alone do not help people recover.

Retrieved: 2026-09-15

Definitions reference these sources. Digital specimens, selection advice, relationships, and recipes are editorial work and have not been validated through user research.

Type extensions and implementation notes

This entry has no operable specimen yet; the illustration is an editorial sketch. Before applying it to a product, verify the visibility of active criteria, the recovery path from zero results, whether criteria survive navigation, and how filters and result counts reach assistive technology.

{
  "states": [
    "idle",
    "querying",
    "narrowed",
    "empty",
    "cleared"
  ],
  "a11y": [
    "The search box has an accessible name, and facets can be selected with a keyboard and expose their selected state",
    "Changes to the result count are announced to assistive technology through a live region",
    "If autocomplete is offered, follow the WAI-ARIA combobox pattern"
  ],
  "motion": "Result updates do not depend on animation; the replaced list should be readable immediately"
}

Open the Agent JSON file for this entryThis file repeats every field of this entry verbatim and adds its sources, archive status, and editorial scope.