Search Patterns - Autocomplete
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
My approach to identifying patterns in autocomplete systems. You can view all of the raw data on Google Sheets
As a baseline for autocomplete we could consider the following attributes of an autocomplete:
- How many autocomplete suggestions to show?
- How many characters should be in a suggestion?
- How many words should be in a suggestion?
- 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
- Non-english queries
- Too specific / wouldn't work across Search Engines
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
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
- 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.5suggestions while E-commerce showed
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
- eBay had the longest suggestions with
20.7characters. likely this is due to eBay also recommending categories inside of their recommendations.
- There wasn’t a huge difference between Web with
16.2characters & E-Commerce with
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
- eBay had the most words hovering around
- Web Search Engines showed on average
2.5words while E-commerce sites showed
3.0words 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
- DuckDuckGo had the tightest suggestions averaging
- Target had the tallest at
- E-Commerce sites showed suggestions at
37pxtall and Web showed suggestions at
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
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.