Step-by-step accordion

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

  1. Step 1 is opened by default when user lands on the page

  2. User completes a step, clicks on button, gets the green tick and is moved to next step

  3. Error reporting state
    The user will not be able to progress to the next step if they haven’t successfully completed an existing step

  4. 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

56

Original pattern with more emphasis

30

Using numbers

Numbers-ticks-plain

Emphasising the section you are in

Numbers-ticks

Pattern in situ - Option 1

Page-structure-change-numbers-selected

Pattern in situ - Option 2 - Highlighted

Page-structure-change

This pattern in use - real product examples

  1. Snapcraft.io

  2. 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

Wishlist