Back to components

Progress Tracker

The progress tracker is meant to show the user where the user is in a process that requires multiple steps

  1. Step titleHelpful text
  2. Step titleHelpful text
  3. Step titleHelpful text
  4. A longer step titleHelpful text
  5. Step titleHelpful text

Table of Contents

Edit this section, Opens in new window

Overview

The progress tracker is meant to show the user where the user is in a process that requires multiple steps. Not to be confused with "Progress Indicator" or "Progress bar”.

Edit this section, Opens in new window

Variations

TypePurpose
Indeterminate progress trackerThis version of the progress tracker is for user flows that have no definite steps, or might have changing length of flow. Here we try to inform the user with the horizontal bar that they are making progress, even though we cannot show exactly what step they are in the flow.
Determinate progress trackerThis version of the progress tracker is for user flows with definitive steps. In this variation there is also support helpful text under each step.
Small progress trackerThis version of the progress tracker is for user flows with definitive steps. This particular variation is meant to be used when space is scarce or in mobile.
  1. Step titleHelpful text
  2. Step titleHelpful text
  3. A longer step titleHelpful text
Edit this section, Opens in new window

Usage

Principles

Steps

Do not use the determinate progress tracker if there are more than 5 main steps. Steps needs to be easily scanned to get an overview of the steps. It is better to bundle steps into main steps if there are more than 5 steps.

E.g. Main step 3 contains 2 smaller steps with information that is asked to the customer.

All progress trackers can be used on all background colors (BE 1 to BE 5).

Labels

Use labels that clearly indicate the purpose of the step. When writing, keep options to a single line of text, be short and concise (1-2 words). If there are less than three steps, consider using a button labelled "Next"

  1. Your details
  2. A summary for your purchase
  3. Payment details

Do not use too long step titles

  1. Your details
  2. Summary
  3. Payment details

Use short and concise step titles

Content

When labeling each step, identify the general theme of each step so that if details in the process change, the label still makes sense to the user.

For example, you have a check-out process where, depending on whether the purchase is of a digital item or a physical item, users may or may not need to enter their shipping details, but must always enter payment details. Calling this step "Your details” allows it to either be connected to the payment and shipping details screen, or just the payment screen.

Edit this section, Opens in new window

Indeterminate

Helpful textStep titleCurrent step title
Helpful textStep titleCurrent step title
Mobile indeterminate progress tracker

Anatomy

Helpful textStep titleCurrent step title
Indeterminate progress tracker
  1. Helpful text related to the current step (optional)
  2. Title for the current step
  3. Progress tracker with estimated step progression

Specs

Helpful textStep titleCurrent step title
Style
  1. The description text color is LB 1, LIGHT BROWN
  2. The title text color is BR 1, BROWN
  3. The completed progress color is BL 1, BLUE
  4. The incomplete progress color is BE 1, DARK BEIGE
Edit this section, Opens in new window

Determinate

  1. Step titleHelpful text
  2. Step titleHelpful text
  3. Step titleHelpful text
  4. A longer step titleHelpful text
  5. Step titleHelpful text
  1. Step titleHelpful text
  2. Step titleHelpful text
  3. Step titleHelpful text
  4. A longer step titleHelpful text
  5. Step titleHelpful text
Mobile determinate progress tracker

Usage

Use a progress tracker to guide users through steps or actions across multiple screens, in order to complete a task. A determinate progress tracker tasks must have three or more steps. The tracker shows users where they are in the process, and can be used to navigate through the process by selecting steps.

  • Use a progress tracker to guide users through steps or actions across multiple screens, in order to complete a task.
  • A determinate progress tracker tasks must have three or more steps.
  • The tracker shows users where they are in the process, and can be used to navigate through the process by selecting steps.

Modifiers

Vertical

A determinate progress tracker can be vertical:

  1. Step titleHelpful text
  2. Step titleHelpful text
  3. Step titleHelpful text
  4. A longer step titleHelpful text
  5. Step titleHelpful text

Anatomy

  1. Step titleHelpful text
  2. Step titleHelpful text
  3. Step titleHelpful text
  4. A longer step titleHelpful text
  5. Step titleHelpful text
Determinate progress tracker
  1. Title for the default step
  2. Helpful text related to the default step (optional)
  3. Title for the current step
  4. Helpful text related to the current step (optional)
Style

The completed and current progress color is BL 1, BLUE. The default progress color is LB 1, LIGHT BROWN 30%

  1. The default title text color is LB 1, LIGHT BROWN
  2. The default description text color is LB 1, LIGHT BROWN
  3. The current title text color is BR 1, BROWN
  4. The current description text color is BR 1, BROWN

Specs

  1. Step titleHelpful text
  2. Step titleHelpful text
  3. Step titleHelpful text
  4. A longer step titleHelpful text
  5. Step titleHelpful text
  1. Step titleHelpful text
  2. Step titleHelpful text
  3. Step titleHelpful text
  4. A longer step titleHelpful text
  5. Step titleHelpful text
Edit this section, Opens in new window

Small

  1. Step titleHelpful text
  2. Step titleHelpful text
  3. Step titleHelpful text
  4. A longer step titleHelpful text
  5. Step titleHelpful text
  1. Step titleHelpful text
  2. Step titleHelpful text
  3. Step titleHelpful text
  4. A longer step titleHelpful text
  5. Step titleHelpful text
Mobile small progress tracker

Usage

This version of the progress tracker is for user flows with definitive steps. This particular variation is meant to be used when space is scarce or in mobile.

Anatomy

  1. Step titleHelpful text
  2. Step titleHelpful text
  3. Step titleHelpful text
  4. A longer step titleHelpful text
  5. Step titleHelpful text
Small progress tracker

We use the same color principles here as the determinate progress tracker.

Specs

  1. Step titleHelpful text
  2. Step titleHelpful text
  3. Step titleHelpful text
  4. A longer step titleHelpful text
  5. Step titleHelpful text
Edit this section, Opens in new window
Contact us, Opens in new window