Designing Search: As-You-Type Suggestions

Effective search should subtly guide users in creating and reformulating queries. Use as-you-type suggestions (auto-complete, auto-suggest, and instant results) to help users save time, iterate on their searches, and get the results they want.

Article No :828 | May 16, 2012 | by Tony Russell-Rose

Have you ever tried the “I’m Feeling Lucky” button on Google? It’s meant to take you directly to the result you want, rather than return a list of results. It’s a simple idea, and when it works it seems like magic.

But most of the time we are not so lucky. We submit a query and review the results, only to find they’re not quite what we were looking for. Occasionally, we review a further page or two of results, but in most cases it’s quicker just to enter a new query and try again. In fact, this pattern of behaviour is so common that techniques have been developed specifically to help us along this part of our information journey. In particular, three versions of as-you-type suggestions— auto-complete, auto-suggest, and instant results—subtly guide us in creating and reformulating queries.

1. Auto-Complete

One of the key principles in human–computer interaction is recognition over recall: the notion that people are better at recognizing things they have previously experienced than they are at recalling them from memory. This explains why most of us can find our way around graphical operating systems such as Windows and OS/X, but when faced with a naked command line, we’re at a loss for words.

Auto-complete transforms a recall problem into one of recognition. As you type into the search box, it tries to predict your query based on the characters you have entered. Like a human interpreter mediating between two people speaking different languages, auto-complete facilitates the dialogue between the user and the search application. The UK’s National Rail website, for example, recalls the railway stations that match a handful of characters. The user needs only recognize the one he wants:

Auto-complete at the UK National Rail Enquiries website

Auto-complete does its best to remain unobtrusive, so users can still enter a query in full if they choose. But selecting the completions saves time and keystrokes. In addition, they help users avoid spelling mistakes; if, for example, I can’t recall the exact spelling of “Aberystwyth,” no problem—I just need to know it when I see it. This type of interaction is invaluable in mobile contexts, when accurate typing on small, handheld keyboards is more difficult. On smartphones and tablets, auto-complete is applied to all manner of applications, from text messaging to email.

Auto-complete is used for SMS and email on the iPhone

Auto-complete makes the most sense when the choices are based on a controlled vocabulary, i.e., a finite list of items such as a directory of names, locations, organizations, and so on. But what of situations where the choices are potentially unbounded, or where the user isn’t exactly sure what he’s looking for? In exploratory search and other complex information-seeking tasks there may be no such thing a single “right answer.” In this context, a different approach is needed.

2. Auto-Suggest

There’s a thin line between auto-complete and auto-suggest; both offer varying degrees of support for query creation and reformulation, and the terms are used somewhat interchangeably by many people. But if we were to draw a precise distinction, it could be this:

The purpose of auto-complete is to resolve a partial query, i.e., to search within a controlled vocabulary for items matching a given character string.

The purpose of auto-suggest is to search a virtually unbounded list for related keywords and phrases, which may or may not match the precise query string.

While auto-complete helps people get an idea out of their heads and into the search box, auto-suggest actually throws new ideas into the mix. In this respect, auto-suggest operates at a more conceptual level, offering choices where the relationship to the query may go beyond simple string-matching. Both techniques save keystrokes and help us avoid spelling mistakes, but auto-suggest can also help users construct a more useful query than they might otherwise have thought of on their own. Ebay, for example, provides a variety of different suggestions related to the query “guitar”:

Auto-suggest at eBay

Moreover, the same product categories that we saw earlier being used to provide scoped search can also be used to drive product suggestions. Home Depot, for example, provides a particularly extensive auto-suggest function consisting of product categories, buying guides, project guides and more. Not only do these suggestions facilitate known-item search, they also support exploratory search behavior, encouraging the user to discover new product ideas and specialist content. While the Home Depot example demonstrates what’s possible with auto-suggest, it’s worth noting that moving from a single to multiple lists of suggestions demands greater mental effort from users.

Auto-suggest supports known-item and exploratory search at Home Depot

One unique asset that the major web search engines have at their disposal is access to vast quantities of user data, which they can mine to maximize the value of query suggestions. Google, for example, derives its suggestions both from the user’s individual search history and from the collective behaviour of many users. Yahoo! takes a slightly different approach, leveraging its extensive network of web properties and resources to provide an auto-suggest function that features a secondary panel containing answers and rich content:

Auto-suggest offers answers and rich content at Yahoo

A further technique to optimize the value of query suggestions is to display them in the context of recent searches. One approach, which Safari utilizes, is to simply present two adjacent groups: one for query suggestions and another for the browser's search history.

Query suggestions are presented alongside recent searches in Safari

3. Instant Results

Auto-complete and auto-suggest are both valuable techniques to help users conceive and articulate more effective queries. They differ in approach, but share the principle that as-you-type suggestions provide a shortcut from query to search results. But in some cases it is possible to go even further than this, to make auto-suggest offer actual results instead of just query reformulations. For example, if I type the characters “ip” into the search box at Apple.com, six items appear. However, if I select one of these, it bypasses the search results page entirely and takes me directly to a product-specific landing page. Rather than suggesting alternative queries, the search box provides instant results in the form of a set of matching “best bets” for products and resources:

Instant results at Apple.com

A similar principle is in action in the search function of popular desktop operating systems. In Windows 7, for example, a keyword search invokes a panel of recommended results, grouped into popular categories. One can either select a result directly to open it, or choose the “See more results” option to open a regular search results page:

Instant results in Windows 7 desktop search

In desktop search and site search, the instant results experience can exploit the metadata of a managed collection to optimize the relevance of categories and results. In web search, by contrast, it is somewhat harder to pre-emptively match queries with results in this way. Nonetheless, Google provides its own type of instant results, which complement the auto-suggest function to provide a highly responsive search experience. Instead of presenting a static page of results after each query, Google Instant updates the search results in real time as each character is entered. If the user doesn’t see the results he wants, he can just keep typing and watch the results update.

Instant results when searching via Google

As with auto-complete and auto-suggest, instant results can save us time and help avoid spelling mistakes. But more importantly, by providing immediate feedback on our query, instant results can facilitate a more interactive dialogue between user and search application. Of course, it may not be the complete solution for expert users wishing to explore and understand highly complex information spaces, but for known-item search and other information retrieval tasks, it provides a clear benefit.

Summary

Although most of us are familiar with Google’s iconic “I’m Feeling Lucky” button, few of us use it; we know that search problems of any complexity require an iterative approach, comprising the creation and reformulation of queries. As-you-type suggestions have become invaluable in this experience. Auto-complete is better suited for known-item search and simple information retrieval tasks. Auto-suggest works well for exploratory search and complex information seeking tasks. And instant results provide a direct channel from queries to answers.

Use auto-complete to:

Facilitate accurate and efficient data entry

Select from a finite list of names or symbols

Use auto-suggest to:

Facilitate novel query reformulations

Select from an open-ended list of terms or phrases

Encourage exploratory search (with a degree of complexity and mental effort that is appropriate to the task). Where appropriate, complement search suggestions with recent searches

Use instant results to:

Promote specific items or products

For further guidance on detailed interaction design for auto-complete and auto-suggest, see the Endeca UI Design Pattern Library (note that while this resource provides valuable guidance, it conflates the different use cases described above).

About the Author(s)

Tony Russell-Rose is currently director of UXLabs, a UX research and design consultancy specialising in complex search and information access applications. Before founding UXLabs he was Manager of User Experience at Endeca and editor of the Endeca UI Design Pattern Library, an online resource dedicated to best practice in the design of search and discovery experiences.

Comments

Victor

July 10, 2015

Very helpful explanation of article especially the instant search result is exactly what i am looking for...I have been researching how to get code being use by the geopostcodes site http://www.geopostcodes.com/ but i couldn't find where it is. If you would be kind to show me where to find similar coding that work the same as geopostcode i would appreciate it very much.