Site Search Bar: Design, Placement, and UX Best Practices
A site-search bar succeeds when people can find it, understand its scope, operate it by keyboard or touch, and recover from an imperfect query. Visual prominence matters, but the component is a small interaction system: label, input, submit action, optional suggestions, results state, and measurement must agree.
Make the basic form complete before adding suggestions
Use a real form with a labelled <input type="search"> and submit button. A placeholder is an
example, not a label. Keep the field in a conventional header position on content-heavy sites and avoid hiding
the only search entry behind an unlabeled icon. The WHATWG
search-input
specification defines the native control semantics.
On mobile, provide a touch target that does not collide with navigation controls and preserve the typed query when users return from a result. Use a shareable query URL when privacy and product requirements permit it.
Treat autocomplete as a separate product
Suggestions should help with known entities, popular tasks, spelling, or query completion; they should not replace submission of arbitrary text. Implement keyboard focus, arrow navigation, escape, selection, and announcements according to the WAI-ARIA combobox pattern. If that contract is not complete, ship the plain form.
Debounce requests, cancel obsolete work, and return a bounded list. Do not send every keystroke to a third party without a privacy review. Suggestions derived from logs need filtering so personal data, offensive queries, or one user's private terms cannot be exposed to another.
Design results and recovery together
Show the normalized query, result count when trustworthy, descriptive titles, snippets, and active filters. Preserve exact identifier matches. If spelling correction or semantic broadening changes the query, state what happened and provide a path back to the original. An empty state should suggest a specific recovery—remove a filter, try a synonym, browse a category, or contact support—rather than blaming the user.
Facets need meaningful counts and selected state. Avoid presenting dozens of empty or mutually exclusive filters. Baymard's search UX research can seed design hypotheses, but usability testing on the site's own tasks should decide placement and behavior.
Measure the complete interaction
Capture focus-to-submit abandonment, submitted queries, suggestion acceptance, zero results, reformulation, filter use, selected rank, result latency, and task completion. Segment keyboard, touch, and assistive technology failures in testing. The critical failure modes are a decorative icon with no label, focus trapped in suggestions, stale requests overwriting current results, private queries entering analytics, and a mobile overlay that cannot be dismissed.
Published · Updated