Flow navigation guides the user through a task that includes multiple steps. It’s designed to give the user a sense of place and progress within a particular flow, while breaking down the tasks into easily digestible sections.
- Linear flow navigation guides the user through tasks that require the completion of steps in a specific order.
- Non-linear flow navigation allows users to complete steps without adhering to a specific order.
When to Use
- Flow Navigation should be used to break down forms and edit views into manageable chunks.
- Don’t use Flow Navigation if the number of steps varies on the user!
Appearance & Behavior
Flow navigation always displays within the Stage. It is left-justified, with a max width of 960 pixels. It does not need to fill the full page width. Only use Flow navigation for tasks which have 3-5 steps. Do not use it for a 2-step process.
Linear Flow Navigation
- Steps are represented across the top of the page, with the current step highlighted in blue.
- Each step has a number, a label, and an indicator of completion if applicable. Center the label. Steps have three visual states: 1) Incomplete, 2) Complete, and 3) In-progress
- Steps that have not yet been completed should be disabled.
- Use succinct labels when naming the individual steps.
Non-linear Flow Navigation
- Steps listed across the top of the page are active links to navigate within the flow.
- Each step has an icon, and a name/description. Left align the text. Steps have three visual states: 1) Incomplete, 2) Complete, and 3) In-progress
While the flow is in-progress, the Sticky Footer’s primary call to action button should be labeled “Next” and the user should always have the option to go “Back.” When the various steps have completed, the primary call to action changes to “Save” or “Done”.