Inline Suggestions

Published
by
Janne Lammi
on December 11, 2007
in Design-Pattern
. Tags: , , , , , .

Also known as: Autocompletion, Auto-complete, Continous Filter, Entry Suggestions, Live Search

What

Help the users to give an answer by suggesting valid answers from which to pick from.

Example image

openjet.co.uk - Autocompletion

Openjet.co.uk uses Inline Suggestions to help travelers to find an airport. As the user types, he is provided with a list of airports that match what the user has typed. The first suggestion is the closest match and is highlighted. It can be accepted by hitting “Enter” or “Tab” key.

Use when

  • There is a limited set of answers that are valid, but the whole set is too large to be displayed in a drop-down menu or a list box.
  • It is possible to guess user’s answer.
  • The possible answers are long and/or hard to remember or type (like airport codes and URLs).
  • The answers can be typed in different ways (San Francisco International Airport or SFO)
  • Accuracy of answer is important.

Why

  • Helps the user to provide the right answer quicker and without typographical errors. He needs to remember only part of the answer.
  • Additional information in the list of valid answers can help users to give the correct answer (like the airport code and city in the example above).

How it works

  • As the user types, show a list of valid answers below the text box that match what he has typed.
  • Always highlight the closest match and show it as first in the list.
  • Allow the user to pick the answer he wants using the keyboard (up&down arrows for moving between items and enter or tab button for selecting the answer) or mouse.
  • Don’t irritate the user - Give him an option not to use inline suggestions.
    • Allow the user to close the list by hitting Esc-key.

History

This pattern is inspired by Auto Complete pattern in Yahoo! Design Pattern Library. The first version (1.0) was created on 10.01.2008 by Janne Lammi.

Pattern Gallery

Show Your Pattern Examples Here!

Add your examples to this pattern by adding them to flickr.com group UIPatternFactory.com and tagging with this tag:


photos in UIPatternFactory.com tagged with inline-suggestionsMore photos in Flickr group "UIPatternFactory.com" tagged with inline-suggestions

This website uses IntenseDebate comments, but they are not currently loaded because either your browser doesn't support JavaScript, or they didn't load fast enough.

0 Responses to “Inline Suggestions”

Feed for this Entry Trackback Address
  1. No Comments

Leave a Reply