Page Types Overview

Search Autocomplete

30 design examples manually annotated by Baymard researchers

What’s this? Here you’ll find 30 annotated “Search Autocomplete” design examples from Baymard’s UX benchmark of 60 major e-commerce sites. (Note: this is less than 1% of the full research catalog.)

In usability testing we observe that the search autocomplete guides users on what to search for. This makes the autocomplete logic critical as it actively will alter what users end up searching for. In practice we observe several autocompletes that end up doing more harm than good, as they mislead users into performing futile searches. The mobile autocomplete is particular difficult to get right as the user interface suffers from an already small screen on mobile, combined with the user’s touch keyboard being shown at the same time (taking almost 50% of the screen).

More ‘Search Autocomplete’ Insights

  • Besides these mobile search Autocomplete examples we’ve also benchmarked the desktop versions; see the 41 desktop autocomplete examples.
  • Our research team is currently conducting a new large-scale mobile usability study that focuses on the mobile homepage, navigation, search, product lists, and product pages. Note that we do observe the current mobile guidelines and underlying user behavior still applies, despite some of the screenshots looking dated. The new mobile study findings are already partially released in Baymard Premium and are expected to be fully released Q2 2019.

Learn More: Besides exploring the 30 mobile “Autocomplete” design examples below, you may also want to read our related articles “Allow Mobile Users to ‘Search Within’ Their Current Category - 94% Don’t” and “8 Design Patterns for Autocomplete Suggestions”.

Get Full Access: To see all of Baymard’s 224 mobile research findings you’ll need Baymard Premium access. (Premium also provides you full access to 49,000+ hours of UX research findings, 700+ e-commerce UX guidelines, and 57,000+ UX performance scores.)