When or why to use this pattern
If you have 3 or more sequential steps to display on the page
Why to use this pattern
Guide the user through a complex or long list of tasks. Breaks complex task down into manageable chunks.
When the user finishes a step -> It takes users to the next step
When the user finishes the last step -> It takes users to the next page, satisfying the last step.
When not to use this pattern
When you have only 2 steps you should not use an accordion
When one of the steps are optional, you should consider using another pattern
Variations of pattern available
|Version||When and how to use||Example in product|
|Steps within a progress||Make it very clear when steps begin/end||Snapcraft|
How it works
Steps or sequence of actions numbered
Step 1 is opened by default when user lands on the page
User completes a step, clicks on button, gets the green tick and is moved to next step
Error reporting state
The user will not be able to progress to the next step if they haven’t successfully completed an existing step
User completes all the steps
By default, the user is moved to the next page (variations of this might be needed)
Buttons below the table should become active when a valid item is selected
Buttons can vary their verb according to the item selected
Buttons should be visible without scrolling, if your items-list is long consider placing the buttons at the top, rather than the default bottom placement.
Key Components in vanilla this pattern uses
- Similar to accordions, but this would be a new pattern
Continuation buttons in each step should be worded in a way that’s clear that they need to click to continue through the process:
Button on the last step should be clear that it’s completing the action set out at the top of the accordion.
[Save and deploy charm]
Display step number in icons on the left
Background colour added to the step you are on
Original pattern with more emphasis
Emphasising the section you are in
Pattern in situ - Option 1
Pattern in situ - Option 2 - Highlighted
This pattern in use - real product examples
Juju GUI deployment flow mockup
When being used as a subform, you have to be very careful that it’s clear what form you’re completing.
Not clear when it starts and ends, especially when last step is opened