Progress Bars
Last updated: September 11, 2015 at 20:55 pm

A bar on the top of a page in the middle of a multi-step process, showing where the user is in that process.


Visual example of the element:


What problem does this element or pattern solve?
A progress bar sets expectations for the activities and length of a multi-screen process, and allows users to see precisely where they are within that process. Ideally, it will also be clickable so users can navigate to any step.
It applies to these platforms:

Desktop Web, Tablet Web, Smartphone Web

An example of this element or pattern in production:


Detailed specifications

Specifications To Consider

• Clearly define when a progress bar will be used. Ideal applications include complex forms such as registrations, or training wizards which present step-by-step instructions to complete a task.

• How will steps be broken down? While it is ideal to have one bar for each screen, a 1:1 relationship is not necessary so long as the steps are clear.

• Will users be permitted to move forward or backwards at will?

• Define the visual styling and behaviors. Will the bar be a fixed size or dependent upon the number of steps? Will it include instructional labels (“billing information”, “shipping information”, “confirmation”) or numbers only? Include information on colors, fonts and shapes for all states.

• If the user must complete a step before being permitted to advance to the next, how will disabled steps be displayed?



Location of assets to build this element or pattern
Location of UX or visual design assets
Location of development code repository


Additional details
Information on research, user testing, or usability reports:

Not Applicable (Remember: no field should be blank!)

This element or pattern may also be known as:
form progress indicator, process marker, multi-step links, progress meter
Related elements within this Style Framework:

Not Applicable (Remember: no field should be blank!)



Owners and governance
UX or design 0wner
John Designowner
Email: design.owner@yourcompany.com
Business or marketing owner
Mary Businessowner
Email: business.owner@yourcompany.com
Development owner
Mike Devowner
Email: development.owner@yourcompany.com


Other information
Please include any other relevant information about this element or pattern:
Not Applicable (Remember: no field should be blank!)


Comments & Questions

Leave a Reply