This pattern is not yet in the Enterprise Code Library. You can track its progress by referring to JIRA ECS-44. Please email the Patterns Team for details and more information.

Progress Indicators

A progress indicator guides a user through a number of steps in order to complete a specified process.

Also known as: progress bar, progress tracker, task bar, process bar

Design Specs

Desktop/Tablet/Mobile

  1. Labels: Completed and Future step labels are Open Sans Semibold, 13px. For previous steps the label color is #005ccc. For the current step the label color is #001733 in Open Sans Bold, 15px. For future steps the label color is #666666.
  2. All icons are available in the SHC Icon Font. The current step circle is a checkmark at #005ccc at 15px. The current step circle is an 20px tall eclipse with a 3px stroke in #005ccc. The future step circle is an 13px tall eclipse with a 2px stroke in #aaaaaa.
  3. The height of the progress bar is 3px tall with a variable length. The portion of the progress bar that is located between the completed steps and the current step is #005ccc. The portion of the progress bar that is located between the current step and future steps is #aaaaa. There is no defined length of progress bar sections.
  4. Padding: There is 20px of padding in between labels. There is 14px of padding between indicator and labels. There is 20px of padding above the indicators and 20px below the labels.
  5. When progress indicator expands beyond the viewport, a fade is used. The fade is a gradient overlay in #ffffff with is 102px wide. The overflow arrows are part of the font icon and are 17px in #666666 with 10px of padding on each side of the arrow

Production Examples

  • Sears
  • Kmart

Desktop/Tablet/Mobile

An example of a progress indicator on white.

An example of a progress indicator on gray.

Desktop/Tablet/Mobile

An example of a progress indicator on white.

An example of a progress indicator on gray.

When Do I Use This?

Progress indicators are used to help a member understand how long a process is, where they are in that process, and how far they have to go to complete the task.
Use when someone must progress through multiple steps to complete a task or process. Examples often involve data entry such as checkout, sign up forms, or a multi-step modal. If the number of steps extends beyond the view port, the overflow solution should be implemented.
Do not use for a single-step task.
Do not use for loading indicators

Usage Guidelines

1. Use progress indicator when members are completing a multi-step process

Multiple indicators allow a user to understand where they are in the process.

A single indicator can lead a user to believe that there is more than one step.

2. Overflow Arrows

A right arrow and overflow line should always be present when the progress indicator steps expand beyond the current viewport. A left arrow only becomes present when the right arrow is clicked.

Two arrows should not be present by default. A left arrow only becomes present after the right arrow is clicked and there is a step that can no longer be seen in the view port on the left side. Overflow lines should be visible whenever a arrow is present.

3. Text Colors

The use of correct text colors helps clarify where a user is in a multi-step task and the available interactions.

Using link blue for all of the text could signal to a user that they can navigate freely through the multi-step task.

Don't use disabled gray text for previous step labels. This mistakenly signals to a user that they are not able to navigate back to previous steps.

4. Include clear, short, visible labels that accurately indicate the step the member is on

This label copy clearly indicates what step a user is on.

Labels should be kept brief. Using three words or less is best practice.

The label is too vague for the user to understand what step they are on.

ADA Compliance

Since progress indicators are a visual element, to comply with ADA requirements the colors and typography must pass color contrast compliant guidelines. In addition, alt text must be used to signal to a user what step they are on in the multi-task. (Example: Step 1 of 3)

If the progress indicator is within a modal, the modal must meet ADA requirements outlined on the modal detail page.

Rationale

Progress indicators provide a psychological benefit to users completing a multi-step process. : i.e. "how long is this process?" "what is my progress?"

SHC design rationale:

  • The solution was heavily researched, including an SHC audit, a review of best practices and working sessions with internal stakeholders, and optimizations based on usability testing
  • This solution works on both mobile and desktop
  • Our solution indicates left to right motion to the user:
  • The color of the "string", and size and styling of the dots in each state is in support of that goal: An empty dot communicates an incomplete step, a filled dot with checkmark communicates a completed step. The checkmark icon is an effective visual cue and positive indicator that a step has been completed. This icon can be found in the SHC Icon Font Library. The current step dot was an attempt to communicate partial progress.
  • Interactivity - the user can click a previous completed step in the progress indicator to "go back" or "edit". Label colors used are in support of that goal and follow the standard used in the Tabs pattern: The previous step label is link blue because a user is able to click it and return to a previous step. Disabled gray styling for the future step label reinforces that a user is unable to click that label to move forward in a multi-step task.
  • Overflow scenarios: When a progress indicator expands beyond the current viewport, two visual cues are shown – an arrow and a fade. A right arrow and fade over the far right text are shown by default in an overflow situation. A left arrow becomes present only when the right arrow has been clicked. On click of the right arrow or left arrow, the displayed portions of the progress indicator is effected only.
  • Due to the variable label length, we measure the distance between indicators by adding 30px of padding in-between labels. As a result, there is not a set measurement between the indicators.

Research

Express Checkout Desktop and Mobile, July 2016

This study revealed some comprehension issues around "What steps are coming and what page they are currently on". "Express Checkout feels jumpy when navigating between shipping, payment, and review pages." In this flow, the primary concern for the indicator is the "Review" page.
Observations re: styling and comprehension:
1) It is possible in the express flow that "Review" step in the indicator looks like I have a step to go still, rather than my current location. 2) "Mobile: Consider adding the progress bar to all pages in Checkout or removing it entirely." 3) "Consider reorganizing the fields on the {Review} page to match the progress bar " 4) Desktop: in standard checkout flow, on PAYMENT page, the next step in the indicator is "review", but "place order" is primary CTA (out of sync). In express flow, "place order" is only CTA.
See p14-18, 30.

view full study

Progress Indicator PatternOptimization

Follow up test to Express Checkout to learn if design changes address the comprehension problem.
Finding: User Comprehension is low that "you skipped these steps". Few respondents marked the progress indicator. Users simply reacted to the UI elements and content on the page.

Mini-POP (Product Options Popup), Pg 14

The first UXR test that included the standard shown on this page. It was not targeted particularly by the researcher. This test found that some users used the progress indicator to go back a step in the process.

view full study

Baymard Mobile Ecommerce Guidelines

Guideline: "Show a continually updated progress status for flows and processes". Sears mobile violated. - (login required - credentials here)

view article

Baymard Sears.com Usability Audit

Checkout - Issue: users expect the back button to take them back to what they perceived to be their previous page.
"...displaying the checkout process steps in the header (advisable)...most customer will expect the steps to also function as navigational links between the checkout steps. However, while it’s possible to go backwards in the checkout using the process steps, it should also be an option to move forwards. {ed: user can only move forward using the primary button}
In addition...it’s not possible to use the browser back button to return to the cart step from the shipping address step." see p99

view full study

Checkout Redesign - Delivery & Billing Pages September 2014

"Breadcrumbs click-ability - Rank: LOW / +" : (referring to previous progress indicator). See page 18

view full study

Protection Agreement Modal, June 2014

Users did not notice or interact with tabbed progress. see page 11. This contradicts positive comprehension in checkout study, but validates the low visibility (slightly different styling)

view full study

Post a New Comment

Your feedback will help us improve this page. If you have a comment about the content of this page, use the form below, and the Patterns Team will get back to you within a business day.

For general questions or assistance, email the Patterns Team directly.