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

Progress Indicator

Another opportunity for creating a reactive interface occurs when the application is busy with a lengthy process. Progress Indicators keep a conversation going with the user when the rest of the interface is currently unavailable. This is a common situation on travel sites, as well as many search-based applications.

In Chapter 12, we discussed the way Yahoo! Travel Farechase used transitions to improve perceived performance. Let's look at a similar example from another travel site, Microsoft's Farecast service. It provides a variety of Progress Indicators throughout the search process (Figure 14-11).

Farecast makes use of a number of different Progress Indicators to make the interface feel snappier and more reactive

Figure 14-11. Farecast makes use of a number of different Progress Indicators to make the interface feel snappier and more reactive

Considerations

There are some issues to consider when using Progress Indicators.

Perceived performance

There are actually nine Progress Indicators used by Farecast in this one flow:

  1. Search button label changes to "Searching...".

  2. Switch to search results page.

  3. "We're Searching..." animated progress bar.

  4. Daily Low Fare History chart animates from flat line to trend line.

  5. 7-Day Low Fare Prediction spinning wheel.

  6. 7-Day Low Fare Prediction spinning wheel changes to the "Tip: Wait" graphic.

  7. Progress bar collapses to single line, changes to read "Still searching...".

  8. First set of results trickle in.

  9. Progress bar disappears.

When I went through this process, ...

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