O'Reilly logo

Designing Web Interfaces by Theresa Neil, Bill Scott

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Live Suggest

A very close cousin to Auto Complete is the Live Suggest pattern (also known as winnowing). While Auto Complete provides suggested real-time values for an input field, Live Suggest provides real-time search term suggestions for creating a search. The context switch from input field to search box and from input value to term suggestion puts a different twist on the interaction.

Google Suggest was one of the first examples of Live Suggest on the Web. As the user types in the Google Suggest search box, the top search terms that match the user's input are shown in a drop-down. Figure 13-4 shows two versions of Google Suggest with different approaches to matching and choosing.

Two versions of Google Suggest take different approaches for selecting a matched item

Figure 13-4. Two versions of Google Suggest take different approaches for selecting a matched item

Considerations

Just as in Auto Complete, Live Suggest has three interesting moments to focus on: typing, matching, and selection. Let's look at how both versions of Google Suggest handle these.

Typing

The two versions handle reactions to user input the same way. As the user types, suggestions are presented in real time with no noticeable delay. If the user pastes a phrase into the search box, it will just display results for phrase and not attempt to display results for individual characters.

Matching

The most powerful aspect of Google Suggest is its ability to narrow in on good search terms based on partial input. ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required