Flag

We stand with Ukraine and our team members from Ukraine. Here are ways you can help

Get exclusive access to thought-provoking articles, bonus podcast content, and cutting-edge whitepapers. Become a member of the UX Magazine community today!

Home ›› Business Value and ROI ›› 6 Key Questions to Guide International UX Research ›› Designing Search: As-You-Type Suggestions

Designing Search: As-You-Type Suggestions

by Tony Russell-Rose
6 min read
Share this post on
Tweet
Share
Post
Share
Email
Print

Save

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.

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 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 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

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

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

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

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

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

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

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).

post authorTony Russell-Rose

Tony Russell-Rose

I am currently director of UXLabs, a UX research and design consultancy specialising in complex search and information access applications. Before founding UXLabs I 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. Prior to this I was technical lead at Reuters, specialising in advanced user interfaces for information access and search. And before Reuters I was R&D group manager at Canon Research Centre Europe, where I led a team developing next generation information access products and services. Earlier professional experience includes a Royal Academy of Engineering fellowship at HP Labs working on speech UIs for mobile devices, and a Short-term Research Fellowship at BT Labs working on intelligent agents for information retrieval.

My academic qualifications include a PhD in human-computer interaction, an MSc in cognitive psychology and a first degree in engineering, majoring in human factors. I also hold the position of Honorary Visiting Fellow at the Centre for Interactive Systems Research, City University, London.

I am currently vice-chair of the BCS Information Retrieval group and chair of the IEHF Human-Computer Interaction group.

Tweet
Share
Post
Share
Email
Print

Related Articles

Learn why healthcare blames human error instead of fixing broken design, and what needs to change.

Article by Paivi Salminen
Designing for Oops
  • The article explains why mistakes happen, not because we’re careless, but because most systems are built as if humans never mess up.
  • It demonstrates how slips (doing the wrong thing) and mistakes (thinking the wrong thing) require different solutions, including better design for slips and a deeper understanding of mistakes.
  • The piece outlines how aviation and factories prevent errors by removing blame, allowing workers to stop production when something’s off, and designing systems that make it difficult to do the wrong thing, and asks why healthcare hasn’t done the same.
Share:Designing for Oops
4 min read

Learn how usability, accessibility, and inclusivity connect under the idea of human-centered design.

Article by Paivi Salminen
Usability, Accessibility, and Inclusivity
  • The article shows that usability, accessibility, and inclusivity are different concepts that work together to create good design.
  • It explains that accessibility removes barriers for disabled users, while inclusivity designs for all types of human diversity.
  • The piece emphasizes that great design needs all three: usability makes things easy, accessibility makes them possible, and inclusivity makes them fair.
Share:Usability, Accessibility, and Inclusivity
3 min read

Join the UX Magazine community!

Stay informed with exclusive content on the intersection of UX, AI agents, and agentic automation—essential reading for future-focused professionals.

Hello!

You're officially a member of the UX Magazine Community.
We're excited to have you with us!

Thank you!

To begin viewing member content, please verify your email.

Get Paid to Test AI Products

Earn an average of $100 per test by reviewing AI-first product experiences and sharing your feedback.

    Tell us about you. Enroll in the course.

      This website uses cookies to ensure you get the best experience on our website. Check our privacy policy and