Wizard Progress Bar

Interaction Specs

Interaction Specs: 
Wizard Progress Bar
1. User begins first task.

The Progress Indicator highlights progress as the first step.

Wizard Progress Bar - Step 2
2. Progress to task '2'.

The Progress Indicator Wizard shows the second step. User continues to second task or may return to the previous task.

After completing the required tasks, user clicks 'Continue' button to go to next step, or clicks the 'Back' button to go back to the previous step.

Wizard Progress Bar - Step 3
3. Progress to task '3'.

The Progress Indicator shows the third step.

User continues to third task or may return to the previous task.

The Process Indicator shows 3rd step as the user is on the final step before completing the process.

Wizard Progress Bar - Complete
4. Task completed message.

Success message displays as task is completed.

The Process Indicator Wizard shows completion of the overall task.

User reads success completion message.

An alternative Call-to-Action may be included on the completion page.

Visual Specs

Visual Specs: 
Wizard Progress Bar - Visual Specs

Pattern Summary

Pattern Summary (Unity): 

Why Use this Pattern

The Progress Wizard Bar or Progress Indicator can set expectations for process length; provide a preview of the overall process, and inform users about how far they’ve progressed in the flow.

What is the Solution

Show a progress indicator (or progress bar/progress meter) to display a sequence of steps, highlight the current step and optionally the degree or percentage of completion of the flow. The progress indicator should begin as soon as the user starts a process.

The final step in the progress bar should reflect the last screen where the action is required (e.g., Complete Registration, Submit Order).

  • Break down steps for users in a meaningful way. There doesn’t need to be a 1:1 step-to-screen correlation as long as it is clear the steps refer to actions rather than individual screens. For example: 'Sign in' may involve a sign in page and registration.
  • Use short names for steps and use parallel construction. Action-oriented verbs are good, but use only if each step can be easily described this way.
  • Ensure the progress bar is accurate and reliable in all use cases. No user should skip steps or encounter steps that are not reflected in the progress bar. Be sure to include sign in, if applicable. Create different progress bars for different use cases. Ensure the visual design of the progress bar cannot be mistaken for clickable navigation.

When to Use This Pattern

  • In a wizard or other predefined multi-step process that the user may only ever have to complete once or on rare occasions.
  • When you want to show the user that an action is taking place in real time.
  • When you want to ensure that your user completes a few more tasks than just the basics.

Do Not Use This Pattern

  • When the goal is dependent on a series of sequential tasks.
  • To have users complete critical goals; use for goals that would be nice to have completed.
  • When there are routine tasks for which step-by-step. handholding will eventually wear out its welcome for the user.
  • When the task will take less than 10 seconds. For those tasks, use the cursor hourglass icon instead.

GUI Kit

GUI Kit contains all Unity Light theme patterns in vector format

Adobe Illustrator Download 2.1 MB
Vector PDF Download 2.7 MB

Updated November 2015