Search User Interface Design Patterns

A search interface is built from a handful of recurring components, each with its own design requirements. The search bar or box needs to be visible and appropriately sized, ideally with placeholder text that hints at what kind of query works. The search button needs to be clearly discoverable, not just an ambiguous icon. Autocomplete finishes a partial query as someone types; autosuggest is a related but distinct pattern, offering additional popular or relevant query suggestions rather than simply completing the exact words already entered. Scoped search lets someone restrict their query to a specific section or category rather than the whole space, and the ability to save a query lets someone return to a useful search without reconstructing it from scratch.

Autocomplete finishes your sentence. Autosuggest offers you a better one. Confusing the two in an interface, or building only one when the situation calls for both, quietly limits what the search experience can actually do.

Exercise

The scenario: A large online retailer's search interface has generated six specific user testing failures.

1. Testers report they often don't notice the search bar at all, since it's a thin, low-contrast field tucked into a corner of the header.
2. Testers type a full product name and get no completion suggestions at all, even though the exact product exists in the catalog.
3. Testers want to search only within a category they've already navigated to, but there's no way to restrict the search to that section.