a8ce  Progress bar » The Design of Sites
h13

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.

Background

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.

Close

PROBLEM

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

buy the book to find out more

SOLUTION

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.

Close

 

Pattern Resources

PATTERN COMMENTS

POST A COMMENT and/or EXAMPLE WEB SITE

Sign in Form

(required)

(required, but not displayed)

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

0