Autocomplete Design pattern

Problem summary

The user needs to enter information into a text box which is prone to be mis-typed, hard to remember, or ambiguous.

Example

www.travelstart.co.za

Usage

  • Use to help ambiguity-issues, when an item can be entered in multiple ways
  • Use when the type of information entered can readily be matched with a specific piece of information in the system.
  • Use when autocomplete suggestions can be pulled from a set of data that is manageable in size.
  • Use when input speed is an important goal
  • Use when input accuracy is an important goal
  • Use when the number of items would be too large or inconvenient to display in a standard drop down box.
  • Do not use if you want to provide the user an overview of all options available.

Solution

Present items that match what the user is entering into a text field. Start presenting matching items even though the user is not entirely done typing in his or her search query. As the user types in more text into the text field, matching items are narrowed down as the query gets more specific.

Make it possible to select one of the presented items by mouse-click or keyboard arrow navigation as the user types text into the text field. This allows for faster selection of the match the user was searching for as he or she does not have to type in the full query.

Find a maximum number of matching items to display when the matching data set is in the hundreds, thousands, or millions. A standard limit seems to be to present a maximum 10 matching items.

Order matching items by relevance with the most relevant or likely match at the top of the list. This will allow the user to quickly select his or her match.

Some autocomplete implementations group matching items into categories. On apple.com for instance, matches are grouped into products, xx, xx.

Implementation details

The autocomplete pattern is used in combination with a standard input text box that is labeled to match the user’s expection of what field will be searched against1.

As the user types in data, a list of suggested items that match the inputted data is displayed. As more text is inputted, the displayed list is updated to matching the updated query – narrowing down matching items.

The list of suggested items is most often displayed directly beneath the input text box and has a width that matches the width of the text box.

It may be appropriate to highlight what part of a suggested item that matches what has been inputted.

Allow the user to cancel the suggested items list by pressing the ESC key. Pressing the ESC key causes the suggested items list to close, however typing in more characters after pressing the ESC key will restart the autocompletion behaviour.

Rationale

Autocompletion and search suggestions save the user keystrokes by matching a user’s query with potential matches that are displayed as the query is being typed.

It reduces the number of keystrokes and thus allows for faster data input. Tiresome, long, and complicated queries such as email addresses or airport names, can be found and selected with only a few keystrokes.

Additional formatting of a search suggestion can help remove ambiguity. If I am searching for an airport in London, extra formatting can tell me whether I am selecting Heathrow or Standsted airports.

Autocompletion provides a feedback loop that continually lets the user narrow in on the correct choice.

The cognitive burden of remembering an exact text-phrase is made easier, as the user can use the autocomplete pattern to only type in details that he or she remembers. If a user is searching for an email that he can only remember the domain name of, he or she can simply enter the domain name where-after all emails with that domain name is presented for selection.

The autocomplete pattern relies on the principle of recognition over recall. Instead of having to recall a full and exact text query, the user can start typing in parts of the query he or she recalls, and in turn rely on recognition to select the best match.

Discussion

When matching on large sets of data, it is critical for the matches presented to be close to what the user is looking for.

Google solves this problem by ranking matches by the amount of times each query has been searched for. Apple solves the problem in Spotlight (a desktop application for searching items on the computer) by ranking matching items by the amount of times an item has been selected when that exact query was entered.

Sources

1 Autocomplete design pattern at Yahoo Design Pattern Library.

2 Autocomplete design pattern by Martijn van Welie.

More example images of the 'Autocomplete' pattern

  • last.fm

  • da.momondo.com

    The autocomplete pattern is used to suggest locations at the travel aggregator momondo.com

  • www.apple.com

    The autocomplete pattern used at apple.com

  • finance.yahoo.com

    The autocomplete pattern is used at finance.yahoo.com to ease the burden of finding the correct stock you want to find out more about.

4 Comments

Post a comment

Required. Real name or initials only.
Required. Will not be published.
Vote down Vote up
Out of 105 votes, 90.48% like this one.

Example images

  • last.fm
  • da.momondo.com
  • www.apple.com
  • finance.yahoo.com
  • finance.yahoo.com
  • www.google.com
  • www.playlistnow.fm
  • linkedin.com
  • spotify
  • marcofolio
  • deezer
  • imdb