component

Progress indicator

The progress indicator provides the user with context for where they are within a process.

Design Complete

This progress indicator is currently in use only within the application guide process. However, it could be reused in other contexts.

Progress indicator v1

Usability

When to use
  • Use a progress indicator when you need the user to complete several steps in a process.
When to consider something else
  • Do not use this progress indicator for a process with less than 3 steps.
Progress indicator v1 in context of the Application guide

Usability

When to use
  • Use this variation in the application guide process in conjunction with the JOA summary component.
Progress indicator alt v1

This progress bar will be used in the new user on-boarding experience.

Step 1

[Page title]

     
Step 2

[Page title]

     
Step 3

[Page title]

     

Usability

When to use
  • Use this progress indicator when the number of steps is small (less than 3 ideally) and there is not a need for the user to go back.
When to consider something else
  • Do not use this progress indicator for a process with more than 3 steps.
Steps v1
  1. 1
  2. 2
  3. 3

Usability

When to use
  • Use the step indicators when you want to highlight steps but don't need a full progress indicator in the current context. For example, these step indicators are used in new user onboarding when showing an initial summary of the steps the user will go through on subsequent pages.
When to consider something else
  • Do not use step indicators for other numbering contexts. An ordered list will suffice in most instances.
  • Do not use step indicators instead of one of the progress indicators above.

Implementation

  • The steps utilize an ordered list to stick to semantic UI standards.