Culture Amp
Menu
Also known as:
Progress barProgress trackerProgress indicator

Progress Stepper

Progress steppers show discrete progress through a process, such as numbers 1–4. They show how much progress is complete and how much remains, divided into equal steps.

AnchorNeed to know

  • Progress steppers may be vertical or horizontal.
  • Progress steppers may be gated or ungated.
  • A step may show validation feedback.
  • Aim for 3–4 steps.

Visuals

Coming soon.

Options

  • Gated or ungated:
    • Gated: In a gated progress stepper, later steps depend on completion of earlier steps. The user must navigate through them in order, typically through adjacent buttons in a workflow.
    • Ungated: In an ungated progress stepper, steps can be completed in any order. The user can navigate to any step directly by the step's link.
  • Orientation: Horizontal or Vertical
  • Linked or unlinked:
    • Steps may be linked and receive keyboard focus or unlinked and not receive focus.
  • Validation feedback:
    • A step may indicate an error in a negative mood or a warning in a cautionary mood.

Copy guidelines

Use step labels to clearly describe the purpose of the step. Set expectations about what's available in that step.

Keep step labels concise

Use only 1 word where possible.

Do:
  • Do
    Settings
  • Do
    Questions
  • Do
    Employees
Don't:
  • Don't
    Configure your settings
  • Don't
    Ask questions
  • Don't
    Add employees

Consistently use nouns or verbs through all steps

Avoid mixing nouns and verbs in step labels.

Do:
  • Do
    Settings
  • Do
    Questions
  • Do
    Employees
Don't:
  • Don't
    Configure
  • Don't
    Questions
  • Don't
    Add

Step labels use the same terminology as the page they link to

For example, don’t use ‘Export’ in the page title of a Workflow and have a step label of ‘Download’.

To keep in mind

Give people feedback about progress through a process and keep them on track. Use progress steppers to break a larger goal into manageable steps.

  • Anatomy:
    • Progress track: This line links the steps together in a gated progress stepper.
    • Current step: This shows the step that the user is on.
    • Upcoming step: This shows a step beyond the user, closer to completion.
    • Completed step: This shows a step the user has already completed, closer to the beginning.
    • Disabled: A grayed-out label indicates a step that users can not revisit.
    • Step label: This describes the purpose of the step.
    • Step indicator: The circle or dot icon that indicates the step.
  • Responsive behavior:
    • On small screens, consider hiding step labels and showing only step indicators.
  • Use 2–6 steps:
    • Aim for 3–4 steps.
    • If a workflow needs more than 6 steps, consider how you might simplify it or break it up into multiple tasks.

When to use and when not to use

When to use
  • Use progress steppers to break a larger goal into manageable steps when it would otherwise be overwhelming.
  • Use progress steppers to show tasks completed.
When not to use
  • For continuous values, use a progress bar instead.
  • For an interactive element that lets people provide input increase numbers in equal steps, use a input stepper, such as a Text Field with number input and Buttons to increase and decrease values.

See also

External links

Here are some examples of other existing design systems: