Using Search Suggestions is a familiar pattern that has been around for years, and after reviewing thousands of implementations, we want to share with you some best practices. Here’s what you need to know.

Autocomplete or autosuggest? Several names, same pattern

Whether you are calling it an autocomplete or an autosuggest, a pattern used to display queries suggestions or search predictions, it is likely that you’re speaking about the same kind of a search experience. This pattern has been around for years and you are probably using it every day on websites such as Google or Amazon:

The concept is pretty straightforward: the search engine suggests several predictions in order to autocomplete your query as you type. Search suggestions are particularly powerful on mobile devices and for e-commerce marketplaces. Instant search experiences that display actual results instead of completing the user queries are a good example of the right pattern in other use cases.

An effort-saving pattern on mobile

There are a couple of constraints on mobile that you need to design for: limited screen real estate, and the “fat finger” effect (touch interfaces are even more prone to users’ mistakes!).

These constraints dictate a few reasons search suggestions are a better option than directly displaying search results on mobile. Using autocomplete will minimize the number of characters one has to type, thus reducing potential for typos (even though your search technology should handle them anyway). It is also easier to fit 3-5 suggestions on a screen, especially since you can expect the keyboard to be opened. Displaying results tends to require more space (pictures + 2-3 attributes on average).

Suggestions are also helpful for extending queries. For example, you probably wouldn’t have typed “iphone car mount magnetic” on your own, but having it suggested might help the user find the exact words to describe what they’re after, thus making it more precise and leading to more relevant results. It also guides your users and sets their expectations: if a suggestion exists, it means there are actual results behind it (otherwise, why would it even be suggested?).

For all these reasons, suggestions might help your users find the right content faster. However, a prerequisite is getting the implementation right.

Implementation—doing it well

Speed: as-you-type experience

Displaying suggestions should be blazing fast. Several studies already demonstrated that there’s a 100ms threshold between an experience that a user feels in control of and an experience that makes them feel like they are waiting for a machine to answer.

Suggestions should start with the first character. It’s not that the user will expect perfect suggestions with just one letter, but they will see right away that an autocomplete is there to help. Waiting for a few characters to kick in might (unpleasantly) surprise them, and they might ignore them entirely.

Highlighting the differences

Highlighting is crucial in search, because it helps the user understand why the results match their request, and allows them to quickly decide which result to choose first. Without highlighting, the chances of the user choosing a bad result are higher, which can lead to a disappointing experience with your product.

A common practice is to highlight the part that matches the user’s input; however when offering search suggestions, the inverse is true: it is important to highlight the part that is being suggested. This approach visually aids the user in distinguishing between suggestions as it highlights the differences.

Tap-ahead pattern

Have you ever noticed this icon next to suggestions?

Take a good look at the apps you have installed on your phone, and you will start seeing it everywhere.

Did you know this was not only an icon, but is used for a specific action? If not, don’t worry—our own studies showed that 80% of people on our panels had no idea this existed—but those who did use it profusely.

 

When taping on the icon, the suggestion will replace the initial query in the search box and the user can continue typing. This is a great way to reduce the amount of typing while having very precise queries. In this example, I only typed “i”, and found exactly what I needed in four taps.

A good implementation requires:

1. Use of the arrow icon that points to the search box

2. On tap, filling the search box with the suggestion

3. Staying on the same view while instantly updating the other suggestions according to the new query

Pretty simple, yet even Amazon struggles to keep consistency between its platforms (here, failing with point 3):

 

If you would like to learn more about the tap-ahead pattern, the earliest mention I could find is in a 2011 Smashing Magazine article.

Building relevant suggestions

Suggestions are only helpful if they’re relevant. We already mentioned how each suggestion should lead to actual results. Most of these suggestions are being built by analyzing what your users are searching for on your app (popular or trending queries).

However, be aware: never blindly trust user-generated content. Castorama, a French home improvement tools and supplies retailer, learned this the hard way in 2016. Some of their online visitors realized that typing the same query multiple times in a row would be enough for it to start appearing in the autocomplete for everyone. It only took a few minutes for the website to be flooded with inappropriate suggestions that I won’t share in this article. Castorama had to shut down their website for weeks and missed many sales opportunities.

Going beyond suggestions

Search suggestions is only one interesting pattern in the world of search. There’s a lot more you can do to create a great search experience.

Combining suggestions and instant search is something worth experimenting with, and not just on mobile.

At Algolia, we like to push the limits of search from technology and UX perspectives. Lately, we’ve been exploring the pattern below, which shows results and suggestions at the same time.

 

We have yet to prove or disprove it, but we’re working on it. Feel free to try the demo yourself, and please send us feedback in the comments below or via Twitter