Step-by-step accordion
Status tags
In-use
Implementation
Snapcraft
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)
Principles
Actionable
Buttons below the table should become active when a valid item is selected
Flexible
Buttons can vary their verb according to the item selected
Discoverable
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
Recommendations
Continuation buttons in each step should be worded in a way that’s clear that they need to click to continue through the process:
Continue
Choose X
Select Y
Button on the last step should be clear that it’s completing the action set out at the top of the accordion.
Deploy charm
…
[Save and deploy charm]
</last step>
Display step number in icons on the left
Background colour added to the step you are on
Original pattern
Original pattern with more emphasis
Using numbers
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
Known issues
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