Step Flow

A flow simplifies a long or complicated task by breaking it down into easily digestible steps, so that users can finish faster with less errors.

Web

When to Use

Use the step-flow pattern:
  • to help users successfully complete a complicated task or a series of tasks or decisions affecting downstream choices (e.g. connect bank account, guide first time users in setting up QuickBooks)
  • to help the user fill out a long form by breaking it down into several digestible sections (e.g. create a new employee, sign up payment)

Appearance & Behavior

There are two types of flows:

  • Basic flow is a simple linear task flow. Only use if there are two steps or more. (e.g. DTX connect bank flow.)
  • Complex flow includes everything in the basic flow, and can also include an IPD landing page and/or a progress indicator. If you use a progress indicator, it must have no less than 3 steps and no more than 5 steps. It works for linear or non-linear flows or a flow where users need to jump between steps frequently. (e.g. Payment signup flow)
Navigation for Basic flow and Complex flow

Navigation for Basic flow and Complex flow

Flow components

A flow resides in a full-page modal. At a minimum, it includes a sticky header, 2 or more steps, and ends with an end-of-flow confirmation.

flow_dia_callout

Callout for different elements in a step page

Sticky header

A flow always has a sticky header displaying the flow title and an X icon to exit the flow. The sticky header has the same appearance and behavior as the Trowser’s. If exiting the flow would discard whatever the user has entered, use a critical alert for confirmation.

flow_dia_sticky-header

Step container

  • A step container is the area hosting the step title, subtitle (optional), and other step content (e.g. form fields, selections, and etc.)
  • It is center-aligned within the modal, with a fixed percentage of width (60% of the modal width), and a min-width of 678px. When it’s unavoidable to include relatively wide step content, you can make the step container width 80% of the modal’s. All step containers within the same flow should share the same width.
  • Content within the step container is left-justified. The step container grows vertically to accommodate more content. Keep in mind that the container may extend below the fold, so try to keep content concise and progressively disclose them on demand.

Step content

Usually, there are four types of content in the step container. Choose the one(s) that works best for your case.
  • Simple form allows the user input data. Please see Forms pattern for detail specs
  • Selection asks the user to choose among the available options. It’s recommended to present options as tiles (Tile-like selection is work-in-progress. Reach out to us if you are planing on using this).
  • Read-only/Inline-edit is used when we have the data already and just need users’ verification. Present the data as read only by default and use an Edit icon to allow for editing. In editing mode, hide the navigation button(s) to help users focus on data entering.
  • Table: when necessary, you can include a small table as step content. See Tables pattern for more detail.
Example of different types of content within the step container

Example of different types of content within the step container

Navigation buttons

  • The navigation buttons are shown by default and docked below the step container
    • The Previous button navigates the user to the previous step. Can be hidden in the first step or any step with non-accessible previous steps
    • The Next button saves and validates the data input by the user in the current step and navigation him/her to the next one
    • The Save button is used in the last step to save the content and navigates the user to the confirmation page
Combinations of navigation buttons in different situations

Combinations of navigation buttons in different situations

 

When the content’s editing mode is active, the navigation buttons are hidden to help the user focus on finishing the current task before moving forward.

Example of the navigation buttons hidden when the inline-edit state is active in the content container

IPD Landing page

You can choose to include an IPD landing page as the first page for the flow to display benefits, pricing and other marketing content that will help users make a choice about a specific offering.

Progress indicator

The progress indicator is top-aligned with the step container and anchored to its left, with steps presented vertically.

  • Each step has its step number inside a circle (or a checkmark if the step is completed), and a step label
  • Each completed step is a clickable link. Clicking on it navigates the user to the corresponding step
  • Steps that have not yet been completed should be disabled
  • Use succinct labels when naming the individual steps
  • Don’t use the progress indicator for a flow where the number of steps varies on the user
flow_dia_progress-indicator

Example of a progress indicator / different states of a step

End-of-flow confirmation

All flows should have an end-of-flow confirmation page after the last step, including:
  • a confirmation badge
  • the title and subtitle as confirmation messages
  • optional content such as summarization or next steps of the flow
  • a button to exit the flow

All content is center-aligned and shouldn’t exceed 80% of the modal width.

 

  • Created by
  • Last modified April 27, 2016 by Haidan
© Intuit 2016 | Terms of use