designmotionhq

interaction

Search Experience System

Search is a system. Five parts. Most apps skip them.

Key insights

  • Placeholder copy is your first onboarding. "Search" tells the user nothing; "Search by name, SKU, or brand" tells them everything they can look for.
  • An empty field isn't empty. Load recent searches the moment the user focuses the bar so a single tap refills it and friction drops to zero.
  • Rank autocomplete by clicks, not alphabet, and tag each suggestion with a category badge. Three sharp results beat ten noisy ones.
  • Make the whole flow keyboard-driven: arrow keys move through results, Enter selects, Escape closes.
  • Keep the focus ring visible at every step — invisible focus quietly breaks both keyboard navigation and accessibility.
  • Zero results should never be a dead end. Offer popular searches, category jumps, or alternate spellings so users recover at the exact moment they'd otherwise bounce.

Do / Don't

  • Do: Write descriptive placeholder text that hints at what's actually searchable
  • Do: Surface recent searches on focus so returning users refill the bar in one tap
  • Do: Turn zero-result screens into recovery paths with suggestions and category jumps
  • Don't: Ship a bare "Search" as your only placeholder
  • Don't: Sort autocomplete alphabetically instead of by popularity
  • Don't: Leave a "No matches" screen as a dead end

Get the next pattern first

New breakdowns land in your inbox before anywhere else.

One new pattern breakdown per week. No spam, unsubscribe anytime.

Related patterns