Site Search Suggestions

Search suggestions (sometimes also called autocomplete or autosuggest) used to be an optional, nice-to-have feature for site search. Search suggestions are recommended queries that appear in a dropdown as users type in a search box. These recommendations appear beneath the search box and change as users type each letter of their query. In recent years, search suggestions have become an expected sign of a well-designed search feature. This change in expectations is likely a result of users’ frequent exposure to query suggestions on Google, which always sets the (unrealistic) standard of what a “good” search feature should be. Interestingly, even though users expect this feature and sometimes comment on it when it isn’t available on a site, they don’t always actually use it. In our recent study on ecommerce websites, suggested queries were selected by users in only 23% of the instances where they were offered. There were 31 suggestions selected out of 136 instances where suggestions were offered.

However, even when users didn’t actually choose from the list of query suggestions, the feature still had the potential to provide some benefits as a reference. Users could read the suggestions to see what’s available on the site, how to spell difficult terms, and what other users search for. In some cases, particularly when the query phrase is short, it is easier for users to just finish typing out the query themselves, rather than to reacquire their mouse or tap the screen. For site search, search suggestions have the further benefit of informing users of the range of products or options offered by the site. Conversely, if something isn’t shown as a search suggestion after entering the first few characters of a product name, some users may conclude that the site doesn’t offer that product and abandon the site without even executing the search. If you’re planning to implement or improve your site’s search suggestions, follow these tips to make them as helpful as possible.

Make sure every suggested query actually has good, relevant results. One participant in a usability test was shopping for a new suitcase on JC Penney’s website. He typed “luggage” into the search box and saw the phrase “luggage sets clearance” in the suggested queries. He selected the query and was taken to a results page that had no luggage sets at all — just two travel items for pets. “That’s very weird,” he said. “The search was suggested to me, so I would think that clicking luggage sets clearance would take me to luggage on sale. Suggested terms that return zero results, or irrelevant results, are worse than unhelpful — they sidetrack users and are downright irritating. Within a suggested search dropdown, each suggestion has two parts: the characters already typed by the user, and the characters suggested by the system to complete the query. It’s important to use different visual styles to show which characters fall into each category.

You can use bolding, italics, color, or indenting to communicate the differences between these parts. Visual differentiation helps users understand why the suggestions are shown and scan the available options. The type of suggestions your site offers should help you determine how to style the suggestions. If your suggested search feature only appends characters to the end of the user’s text to finish the query, then you should highlight the suggested characters. If, instead, your suggested search feature will suggest popular queries that contain the user’s text anywhere in the query, it’s best to highlight the user’s query. For example, one user typed his query, “basketball hoop,” on the website for Dick’s Sporting Goods. As he typed each letter, suggested search terms appeared in a dropdown. Dick’s Sporting Goods uses the first type of suggestions — it only appends characters to the user’s text, in an effort to complete that query. The characters that matched what this particular user had already typed were shown in bold (“basketball h”) while the characters suggested to complete the query had a normal font weight.