Progress bar at a glance

Site Genre: Pattern Group h

magnify imageFigure H13.1 On its Web site, American Airlines shows the steps that customers need to take to plan a flight and purchase a ticket, setting expectations up front and showing progress along the way.


PPROCESS FUNNELS (H1) are used by many other patterns, including PERSONAL E-COMMERCE (A1), WEB APPS THAT WORK (A10), and QUICK-FLOW CHECKOUT (F1), to lead visitors through a set sequence of tasks, such as the purchase of a product. Process funnels often need to show customers their progress through the task sequence to help reassure them of where they are in the process.



Web site visitors become frustrated when a process takes longer than they expect.

buy the book to find out more


magnify image Figure H13.6 Progress bars set customers’ expectations as to where they are in a process and how many more steps are left.

Outline the major steps in a process and visually indicate which steps have been completed, what the current step is, and what steps are yet to come. Label your progress bar steps with a summary of what will be expected, if space allows. You might also indicate what will be coming in the next step. When building a progress bar that can skip from any step to any other step, make the steps appear clickable./a>

Other Patterns to Consider

Use HIGH-VISIBILITY ACTION BUTTONS (K5) that let your customers move forward and back. When information that completes some steps in a PPROCESS FUNNEL (H1) is supplied automatically, such as by the use of SIGN IN/ NEW ACCOUNT (H2) rather than a GUEST ACCOUNT (H3), treat the steps as completed and leave them in the progress bar. Use OBVIOUS LINKS (K10) or a TAB ROW (K3) to make it clear when elements of a progress bar are clickable.



Pattern Resources



Sign in Form


(required, but not displayed)

Have a idea for a new pattern group? Join our disscussion on new pattern ideas.