Guidelines
When to use
- Linear, multi-step flows: To help users track their progress and provide alternative navigation in long flows divided into steps.
-
For flows with three or more steps: The Progress Indicator does not bring value for flows with two steps but significantly increases the cognitive load. Therefore, for optimal user experience, it should be used for flows with more than 2 steps.
When not to use
- Non-linear processes: If a process doesn’t have a clear completion structure and can be completed in any order.
- Dynamic number of steps: If the number of steps changes depending on conditional logic.
- Nested structure of steps: If the flow consists of steps that are further divided into smaller sections.
- Flows that cannot be completed in one session: If any of the steps require processing and would result in the user leaving the flow and coming back at another time in the future.
- Graphical representation of a timeline: A Progress Indicator is a navigational control that should be used in forms or flows and not a static representation of a process timeline.
Do not use a Progress Indicator to show static data, such the status of a process or timeline.
When representing a sequence of events or providing a status update over time, use the Activity Log.
Step Variants
We offer 4 step variants, each representing a different stage of the process.
|
Item |
Variant |
Description |
|---|---|---|
|
1 |
Completed |
A step that the user has successfully completed. |
|
2 |
Current |
The step the user is actively engaged with, filling in inputs or performing actions |
|
3 |
Visited |
A previously accessed step that the user can navigate back to without restrictions. ⚠️ If the user moves backward and makes changes that impact the flow, this step may revert to a regular "Next" state, requiring re-entry of data. |
|
4 |
Next |
An upcoming step that is locked until the previous ones are fully completed. |
Orientation
Choose the Progress Indicator orientation based on its placement in the UI and available space.
- Horizontal: In this layout, all steps and their linear connection are visible at once. It is suitable for full-page forms and Large and Medium Floating Panels on desktop and tablet touchpoints.
- Vertical: A condensed layout that, in a default state, displays only the Current step, a step counter, and an expand button. When expanded, it reveals all the steps while pushing down the page’s content. It should be used on mobile touchpoints and narrow UI like Small Floating Panels.
Placement
The Progress Indicator can be placed on a full-page layout or in Floating Panels. It should always be positioned between the Page or Section title and the flow content.
The flow's content should be placed below the Progress Indicator.
Don't place the flow's content inside the expanded step view.
Behaviors
Mouse interactions
The Completed and Visited step variants are interactive, and the user can quickly navigate between them by clicking anywhere within the step container.
Keyboard interactions
|
Key |
Interactions |
|---|---|
|
Tab |
Sets focus on the first interactive step |
|
Tab x 2/3/… |
Sets focus on the next interactive step |
|
Space or Enter |
Selects the step in focus |
Content
Use nouns for most step labels
Labels should describe the content of the step, making them easier to scan and compare across multiple steps.
✅ Guest details, Dates, Payment method
🚫 Enter guest details, Select payment method
Use concise, descriptive labels
Each step label should clearly indicate the task or information required. Aim for 1–3 words.
✅ Guest details
✅ Payment method
🚫 Fill in your personal information
Maintain consistent phrasing
Use parallel structure across all step labels to aid readability.
✅ Personal info / Payment details / Confirmation
🚫 Enter your info / Payment details / Review and confirm
Don't number steps in labels
The progress indicator visually communicates the sequence; numbering in labels is redundant.
✅ Billing address
🚫 Step 2: Billing address
Use sentence case without punctuation
✅ Contact information
🚫 Contact Information.
Indicate optional steps clearly
If a step is not mandatory, denote this in the label.
✅ Additional notes (optional)
Ensure labels are responsive and translatable
Keep labels brief to accommodate various screen sizes, especially in horizontal layouts. And remember that most languages take more space than English.