PATTERNS

LAYOUTS

Stepped Progression

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 Intro

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.

  1. Progression tracker (Steps or Progress component)
  2. Content (Form, video, quiz, etc.)
  3. Action buttons
Stepped Progression

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: 

  • The user is completing an unfamilar or infrequent task.
  • There is a logical or necessary order to complete the tasks.
  • The process may take several days or weeks and the user's progress needs to be saved and returned to. 
  • The process can be logically grouped into 3 to 10 steps or tasks.

References

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.

  • Full Page
    Use when the data input method (such as a form) is complex or lengthy.
  • Side Panel
    Use when the user might be required to reference information on the page. It might aslo be used when there are too many steps in a horizontal progress indicator.
  • Modals
    Use for critical and infrequent requests and small forms with only around 5 fields. They might also be used to supplement data entry into full page forms. Modals should not be stacked on top of one another.
Stepped Progression Containers

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.

Progress Bar

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.

Progress Bar

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.

Horizontal Stepper

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.

Vertical Stepper

Typically labels are shown beneath the step indicator, but can also be shown inline when vertical space needs to be optimized.

Horizontal Steps Labels
Steps Labels

Be sure to consider all breakpoints for all screen sizes when designing a stepped progression. A few best practices include:

  • Always show the active, completed and incompleted steps visually with a progression tracker.
  • On smaller screens, like mobile, keep the active label displayed. Future and past step labels can be hidden if needed for space.
  • On large screens, particularly ultra-wide desktops, it is recommended to keep the the content contained in a maximum width (typically 1280px) for better legibility. For more information be sure to follow the Layout guidelines.
Responsive Container Guidelines

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.

Responsive Horizontal
Responsive Horizontal

Consistent placement of buttons and progress trackers and other UI components helps to reinforce user expectation and avoids interuptions in the flow.

Step Placement Dont

DON'T: Change progress indicator placement between pages/steps

Step Placement Do

DO: Keep progress indicator placement consistent between different pages/steps

Button Placement Dont

DON'T: Change button placement between pages/steps.

Button Placement Do

DO: Keep button placement consistent between different pages/steps.

Reading Do

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.

Reading Dont

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.

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

Non-traversable Steps

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.

Summary Steps

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:

  1. Outline the inputs needed based on the information needed
  2. Create logical groupings of the information
  3. Build out steps with simple labels that describe the grouping
5 step process
3 step process

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.

Progressive Disclosure

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.

Errors
  • Avoid disabling buttons when possible as they do not provide feedback to the user why they cannot continue and are not readable by screen readers. See the Forms pattern for more information.
  • Have concise labels and text next to steps/data that can be read out by screen readers.
    Make sure that all pages have titles that describe the topic or purpose.
Accessibility Do

DO: Make use of supportive text and iconography to display status.

Accessibility Dont

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. 

Mobile Steps

DO: Display the active step label of page title instead of all steps labels.

Mobile Progress

DO: Use the Progress component with a corresponding page title label.