Culture Amp
Menu

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.

Also known as:
Progress barProgress trackerProgress indicator

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

UI Kit

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.

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.

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’. You may use a longer version of the same terminology in the linked page title. For example, the step label may be “Import” in a workflow footer while the page’s title may be “Import employee data” in the workflow header.

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: