Chapter 13. Lookup Patterns

A good portion of application interfaces is involved in looking up information. Whether an application is performing direct searches, filtering search results, or aiding in input, there are a lot of opportunities to provide lookup assistance.

Since lookup is really a shot in the dark for the user, any real-time feedback will be valued as users work to complete their tasks. There are four lookup patterns we will apply the principle of React Immediately to:

  • Auto Complete

  • Live Suggest

  • Live Search

  • Refining Search

Auto Complete

Auto Complete is a powerful pattern that benefits from a reactive interface. As the user types input into a field, a drop-down menu of matching values is displayed. When done right, the choice that best matches will be auto-selected. The user can stop typing and accept the choice that has been matched or choose a different value from the list. The selected value is then entered into the field. Yahoo! Mail uses Auto Complete for email addresses (Figure 13-1).

image with no caption
image with no caption
Yahoo! Mail automatically completes email addresses
Figure 13-1. Yahoo! Mail automatically completes email addresses

The Yahoo! Mail Auto Complete has a singular purpose: help users find an email address from their contact list. However, the user ...

Get Designing Web Interfaces now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.