What is a step flow?
A step flow is a series of pages designed to walk the user through a defined workflow with a specific end.
When to use
Use step flows to focus the user on a single task and reduce the cognitive load of complex tasks in a single, related workflow.
Alternate considerations
- Use expanders to break long blocks of content into separate sections with independent workflows.
- Use tabs to break content into distinct workflows that can be completed independently, or to offer alternative views of the same information.
Pattern basics
Launching a step flow
Step flows may appear in a number of different places in our products, and may be launched from a number of different components (e.g., buttons, links, etc.).
Full-page overlay
To focus user attention, we recommend a full-page overlay that animates in and covers the entire screen, including the top bar and side navigation. For different size considerations, see dialogs.
Navigation
Basic navigation controls include "next" and "back" buttons in the lower right corner of the dialog, as well as an "exit" action in the upper right corner of the dialog.
Number of steps
While there's no fixed number, try to limit step flows to between 3 and 10 steps. Fewer than 3 can probably be combined onto a single screen, and more than 10 might better be served by breaking up the workflow differently (e.g., using tabs, multiple step flows, etc.).
Context
Intro screen
- When possible and not redundant, it's a good idea to include an intro page.
- The intro should reiterate the basic scope and purpose of the step flow.
- If completing a step flow will become impossible based upon the user's answer to certain questions, it's a best practice to include those questions on this intro page. That way, the user doesn't enter a flow that's impossible to finish.
Completion screen
- In order to signal the end of the step flow, include a completion screen, which validates that the action has been completed.
- The completion screen can be dismissed by a single action button, and should indicate where the user will land upon clicking it.
Exiting and returning
- Ideally, a user would complete a step flow in a single, uninterrupted session. However, sometimes, the user may want or need to leave before completing the step flow.
- Designers and developers should decide whether or not the progress of an incomplete flow will be saved if exiting before complete.
- When the user clicks the exit button, a dialog will pop up to alert the user of the consequences of leaving (saving or not saving data) and asking for confirmation of the action.
- A deep link into a step flow should take the user to the intro screen or, if there is no intro, the first step of the flow.
- The action on the completion screen always saves the user's work.
- If returning to a saved step flow to edit or review information, you may want to include a text link that allows the user to skip straight to the end, or to the step flow's review page. This link would appear after reaching the end and returning to a previous step or exiting and returning.
Step flow with a progress indicator
- Only use a progress indicator if you know exactly how many steps are in the process.
- Both horizontal and vertical progress indicators are available.
See step flow with a horizontal progress indicator specs
Step flow without a progress indicator
- Don't use a step progress indicator if a step flow allows for a user to pursue multiple paths, or if the user may be able to skip certain later steps based upon their work in earlier steps.
- If it's a longer step flow and the indicator would look too cluttered, omit the step flow indicator.
Mobile considerations
- The progress indicator becomes slimmer and eliminates labels to save screen space; only a horizontal version of this step progress indicator is recommended.
- The exit action moves to the lower left corner of the screen.
- A sticky footer containing all navigation actions may be employed for easier, quick navigation.
