13 Design Patterns for Autocomplete Suggestions
Source: https://baymard.com/blog/autocomplete-design Author: Edward Scott, Research Lead — Baymard Institute
Summary
Research-backed UX patterns for autocomplete, based on 200,000+ hours of user testing. Only 19% of e-commerce sites get all implementation details right.
Platform-Agnostic Patterns
- Keep the suggestion list manageable (avoid choice paralysis)
- Style category/scope suggestions differently from query suggestions
- Highlight the suggested query text
Desktop-Specific Patterns
- Avoid scrollbars in suggestion lists
- Reduce visual noise within autocomplete dropdown
- Highlight the active/hovered suggestion
- Design the autocomplete to have visual depth (clear separation from page)
Mobile-Specific Patterns
- Reduce visual competition from surrounding page elements
- Provide adequate spacing between suggestions (prevent mis-taps)
Key Findings
- Only 19% of sites get all implementation details right
- Missing keyboard navigation frustrates experienced users
- Lack of visual distinction between query and category suggestions causes users to miss helpful scope options
- Cramped mobile spacing causes accidental selections
Design Principle
Autocomplete should reduce effort AND guide users toward successful searches — not just complete the literal string they’re typing.