Search UI design examples

What does search UI include?

Search UI is the set of screens and components that take a user from a query to a result. It has four parts: the search field, the suggestions shown while typing, the results page with its filters and sorting, and the empty state when nothing matches. Done well, each part can end the search early.

What makes a good search bar?

Make it look like a field: a visible box, a magnifier icon and placeholder text that says what can be searched. Make it wide enough for a typical query. Put it where people look, at the top of the screen, and on desktop keep it open instead of hiding it behind an icon.

What should happen while the user types?

Suggest. Show recent searches before the first keystroke, then matching queries and direct results as the user types, with the matched part of each suggestion set apart. Tolerate typos. When there are no results, say so, keep the query editable and offer a nearby alternative.

Where do these search examples come from?

Nearly all are search screens from shipped apps documented by Mobbin, on iOS, Android and the web. Muzli follows more than 200 design sources and lists up to 60 matching pieces on this page, favouring recent work.