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
The Design System Blueprint
An 11-page visual guide to consistent, scalable UI: colors, typography, spacing, components, motion.
