Over a million developers have joined DZone.

Designing Search (part 2): As-you-type suggestions

DZone's Guide to

Designing Search (part 2): As-you-type suggestions

· Java Zone ·
Free Resource

Delivering modern software? Atomist automates your software delivery experience.

Have you ever tried the “I’m Feeling Lucky” button on Google? The idea is, of course, that Google will 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.

I'm Feeling Lucky on Google

But most of the time we are not so lucky. Instead, we submit a query and review the results; only to find that 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.

5.2.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 lost 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 user and search application. The UK’s National Rail website, for example, recalls the railway stations that match a handful of characters. We must simply recognize the one we want:

Auto-complete at the UK National Rail Enquiries website

Auto-complete does its best to remain unobtrusive: we can still enter the query in full if we choose. But in selecting these completions we save time and keystrokes. Moreover, they help us avoid spelling mistakes: if we can’t recall the exact spelling of “Aberystwyth”, no problem—we just need to know it when we 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 we see it applied to all manner of applications, from text messaging to email (see Figure X).

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, organisations, and so on. But what of situations where the choices are potentially unbounded? Or of situations where we’re not exactly sure what we’re looking for to start with? As we saw earlier, 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.

5.2.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. By contrast, 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 us get an idea out of our head 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 than simple string matching. Both techniques save keystrokes and help us avoid spelling mistakes, but auto-suggest can also help us construct a more useful query than we might otherwise have thought of on our 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 behaviour, 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 maximise 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 optimise the value of query suggestions is to display them in the context of recent searches. One approach, which Safari utilises, 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

5.2.3 Instant results

Auto-complete and auto-suggest are both valuable techniques to help us 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. In some instances, auto-suggest doesn’t offer query reformulations at all, but instead offers actual results to the user. For example, if we type the characters “ip” into the search box at Apple.com, six items appear. However, if we select one of these, it bypasses the search results page entirely and takes us 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

We can see a similar principle 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. We can either select one 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

Figure X: Instant results in Windows 7 desktop search

Of course, in desktop search and online retail the instant results experience can exploit the metadata of a managed collection to optimise the relevance of categories and results.  On the web, 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 their 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 we don’t see the results we want, we can just keep typing and watch the results update.

Instant results when searching via Google

In common 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.


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, punctuated by the creation and reformulation of queries.  And in this endeavour, as-you-type suggestions have become invaluable. 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)
  • 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)
  • Where appropriate, complement search suggestions with recent searches
  • Use instant results to promote specific items or products

Start automating your delivery right there on your own laptop, today! Get the open source Atomist Software Delivery Machine.


Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}