A stepped progression, sometimes referred to as a multi-step form or wizard, is an interface built to support a series of steps a user must complete in a process.
Stepped progression is best employed for long and unfamiliar tasks that the user needs to complete once or rarely. Typically in each step a user is asked to input data and is provided feedback on their progression for the overall task.
Stepped progression breaks down longer forms and tasks into smaller, more manageable steps. Progress indicators are used to encourage the user to continue to the next step of the process and complete the overall task.
A process can be broken into steps when:
Stepped progression designs can be placed into many types of containers with the three most common being —full page, side panel or in a modal.
Progress is tracked in a stepped progression and displayed to the user visually and can be shown horizontally or vertically. The overall goal of the progress indicator is to show the user how far along in the process they are and how much more they have to go.
Typically when using Progress for a stepped process, the step label describing content on the page is often shown as a page title between the indicator and the content.
Horizontal steppers are one of the most commonly used indicators of progress. They are sometimes numbered to show the user the number of steps required and use a combination of color and iconography to indicate to the user the three core states of each step — incomplete, active and completed.
Vertical steppers are often used for timelines or for processes that may span several hours or days. The vertical orientation is typically changed to horizontal on mobile devices or moved into a closeable drawer.
Typically labels are shown beneath the step indicator, but can also be shown inline when vertical space needs to be optimized.
Be sure to consider all breakpoints for all screen sizes when designing a stepped progression. A few best practices include:
As screen size is decreased, the steps can be decreased in size and only the active label should be displayed and formatted similar to the examples shown below. Alternately, if the page title is repeating the step label, then the step label can be hidden.
Consistent placement of buttons and progress trackers and other UI components helps to reinforce user expectation and avoids interuptions in the flow.
DON'T: Change progress indicator placement between pages/steps
DO: Keep progress indicator placement consistent between different pages/steps
DON'T: Change button placement between pages/steps.
DO: Keep button placement consistent between different pages/steps.
DO: Place action buttons directly after and below the last item the user will interact with in the content area. This is because readers use the F-Pattern to read content on the web.
DON’T: Use top aligned buttons with long form content because the user will end on a different part of the screen and need to jump back up to see and click on the action buttons.
There are three types of steps that can make up a stepped progression — traversable, non-traversable and summary steps.
In a traversable step a user may go back and forth and skip ahead to other steps in the process. This type of process often uses "Next" and "Previous" button labels to indicate to the user that they can traverse the steps.
Non-traversable steps are those that are mandatory and cannot be skipped or returned to. This type of process often uses direct call to action button copy (i.e. Create Account) to let the user know what action will take place upon submission. Using direct call to actions can help to notify those using a screen reader that they are about to complete a step and move onto the next one.
Summary steps are typically the last step in the process that allow the user to double check the information that they have submitted and inform the user of any necessary inputs or steps that have not yet been completed. When providing a summary prior to submission, there should be a way to navigate back to any relevant information they need to edit.
A multi-step process can often be broken out in several different ways. Consider the user needs and what logical groupings may help guide them through the process. Always keep labels short and concise.
Below are two examples using the exact same input requirements to build out two different stepped progressions, one with three steps and one with five. The process for arranging the groups is as follows:
You may choose to break up the groups into more manageable sections within the high level group and then only show these to the user as they progress through the steps.
Errors should be displayed to the user when there are required fields that must be completed before the user can move on another step in the process. Please refer to the Errors and validation section of the Forms Pattern for guidelines on displaying error messages to the user.
DO: Make use of supportive text and iconography to display status.
DON’T: Use only colour to communicate status. This red circle without an icon or label is not enough to communicate a warning or error state.
Mobile devices often have less space for ancillary information. Stepped progressions should maintain labeling of the active step if other labels need to be hidden.
DO: Display the active step label of page title instead of all steps labels.
DO: Use the Progress component with a corresponding page title label.