Skip to content
UX Atlas
PatternCraft conventionIntermediate

Search

The escape hatch from navigation, and often the primary path for users who know what they want.

Definition

Search lets users express intent directly rather than traversing a structure. A complete search experience covers the input, suggestions, results, refinement, empty results and the zero-state before any query.

Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.

On this page
  1. Definition
  2. The parts teams forget
  3. In practice
  4. Continue from here

The parts teams forget

  • Zero state: what appears before typing. Recent searches, popular queries and categories all beat an empty box.
  • Suggestions: fast, keyboard navigable, and distinguishing query completions from direct results.
  • Query persistence: the query stays visible and editable in the results view.
  • Result context: why this result matched, usually with the matching text highlighted.
  • Refinement: filters and sorting that do not lose the query.
  • No results: acknowledge the query, suggest corrections, offer a way forward. Never just say nothing found.
  • Synonyms and misspellings: a search that only matches exact strings will fail most real queries.

Do

  • Search across titles, descriptions, tags, aliases and body content.
  • Support fuzzy matching so near-misses and typos still return results.
  • Show result type and category so people can judge relevance at a glance.
  • Announce result counts to assistive technology when results update in place.

Do not

  • Clear the query on the results page.
  • Require exact matches.
  • Show a bare 'no results' with no next step.
  • Hide search behind an icon on a content-heavy site.

In practice

Zero-state suggestions

Site search

Showing recent and popular queries when the field is focused turns an empty box into a starting point, and it teaches the vocabulary the search understands.

Continue from here

Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.

Applies when you are designing

A Search ExperienceAn Ecommerce ExperienceNavigationSettings

Principles behind this

The reasoning this solution is an application of.

Depends on

Get these right first, or this one will not hold.

Often used with

These usually appear in the same screen or the same decision.

Practical example

A worked decision where this was the deciding factor.

Short definition

The one-paragraph version, for when that is all you need.

Related concept

Connected closely enough to change how you apply this.