As a product designer focused on designing search, I've always wanted there to be a definitive resource documenting common patterns and best practices across multiple search engines. In this post, I'll attempt exactly that for autocomplete.

Autocomplete or Search Autocomplete is a particularly invisible interface. Each of the largest search engines will take a slightly different approach in their approach to UI and recommendation.

This post will be a great place to start for designers who are looking to design autocomplete from scratch or improve an existing autocomplete & recommender system.

What is autocomplete?

Autocomplete is a common function of a search engine designed to predict what you might end up searching and saving users time. An autocomplete also enables several important functions in a search interface:

• Education: Recommending “successful” searches for documents which exist in the index, these suggestions won’t render zero hits.
• Idea Generation: Recommendations can sometimes extend or offer alternate concepts the customer may not have thought of.
• Traffic Generation: Suggestions could promote high value pages, or offer shortcuts to a filtered list of search results

---

Methodology

My approach to identifying patterns in autocomplete systems. You can view all of the raw data on Google Sheets

Key Questions

As a baseline for autocomplete we could consider the following attributes of an autocomplete:

1. How many autocomplete suggestions to show?
2. How many characters should be in a suggestion?
3. How many words should be in a suggestion?
4. What is the optimal height of a suggestion?

List of Search Engines

Within search there are several distinct types of search engines. For this analysis, I’ve picked 5 “Web” Search Engines and 4 "E-Commerce" search engines. For the purposes of this post I'll look at autocomplete for search queries and not things like companies or people.

• Web: Google, DuckDuckGo, Neeva, Bing, Yahoo
• E-Commerce: Amazon, Target, EBay, Etsy

Included Queries

For this analysis I chose 38 queries from Ahrefs top 100 Google Searches in the US. You can view those on Github. Manually I filtered queries out that were:

• Non-english queries
• Too specific / wouldn't work across Search Engines

Data Collection

In order to automate the collection of data, I’ve created an automated test script using Cypress which loads each search engine queries results and collects the data. You can see my repo here which shows how I collected the information shown below. This only includes sites at Web Sizes (1200x1000px) not mobile web. View repo on Github

Example showing cypress collecting results for google

---

Quantitative Results

1. How many autocomplete suggestions to show?

Across all search engines the average number of suggestions shown was 9.4 with a range of 5-12.

• Neeva showed the fewest number of suggestions with 5
• Amazon showed the most suggestions with an average of 11.5. Like many others in e-commerce they leverage “categories” in addition to queries themselves.
• Web showed 8.5 suggestions while E-commerce showed 10.8.

2. How many characters should be in a suggestion?

Broadly search suggestions across the board seem to be quite short, of course, this is dependent upon the queries entered which were fairly short. The average suggestion was 17 characters long.

• DuckDuckGo had the shortest suggestions 12.8 characters
• eBay had the longest suggestions with 20.7 characters. likely this is due to eBay also recommending categories inside of their recommendations.
• There wasn’t a huge difference between Web with 16.2 characters & E-Commerce with 18.2 characters.

3. How many words should be in a suggestion?

Again dependent upon the queries entered but for the short queries provided, we saw an average of 2.7 words per suggestion.

• DuckDuckGo had the fewest words hovering right at 2 words
• eBay had the most words hovering around 3.5
• Web Search Engines showed on average 2.5 words while E-commerce sites showed 3.0 words on average.

4. What is the optimal height of a suggestion?

The height of each suggestion is of course tied closely to the UI of each search engine the size of fonts and component library used. On Average suggestions shown were 34px high.

• DuckDuckGo had the tightest suggestions averaging 28px
• Target had the tallest at 48px
• E-Commerce sites showed suggestions at 37px tall and Web showed suggestions at 33px tall.

---

Observations / Other Trends

The data-driven approach could be somewhat limiting. I did want to note a few additional patterns which I noticed across autocomplete interfaces.

Display of Images/Entities

A common pattern you'll see in an autocomplete is a company logo or image of a person, place or thing.

• Yes: Yahoo, Google, Bing
• No: Target, DuckDuckGo, Neeva, Amazon, Esty

Deep Links to categories / pages

Another common autocomplete pattern is to recommend a query and a category. Or link to a specific page. Across Search Engines I observed this on:

• Yes: Yahoo, Neeva, Ebay, Amazon
• No: DuckDuckGo, Etsy, Bing, Target

---

Conclusion

• For each question shown above, there does seem to be some convergence or standard that could be learned when designing a search autocomplete
  • Show 5 to 12 suggestions
  • Keep suggestions short and succinct
  • Limit the height of suggestions between 28px and 48px
• This is just one approach to analyzing autocomplete, In the future I'd like to observe and measure:
  • Adjacent concepts / related queries
  • Natrual language queries

Stay tuned. I am interested in providing similar analysis for more search patterns, including Results, Filters, Facets and Knowledge graph modules. Any tips or suggestions on analysis, or related research would be really appreciated.