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

Usage

Use the step-flow pattern:

  • To help users complete a complicated task or a series of tasks or decisions that affect other choices they’ll need to make later. Connecting a bank account and other setup flows are good examples.
  • To help users fill out a long form by breaking it down into several small sections. Good examples are creating a new employee and signing up for payments.

Appearance & behavior

There are two types of step flows:

  • Basic flow is a simple linear task flow. Use this flow only when there are two or more steps. The connect bank flow is a typical example.
  • Complex flow includes everything in the basic flow, and can also include an in-product discovery landing page and/or a progress indicator. If you use a progress indicator, it should have no less than three steps and no more than five. (You can add more than 5 steps, but let’s chat before you do.) The complex flow works for linear or non-linear flows or a flow where users need to jump between steps frequently, as in the payment signup flow.

Flow component

A step flow appears in a trowser, but with no sticky footer. At a minimum, the step flow includes a sticky header, two or more steps, and an end-of-flow confirmation.

Sticky header

A flow always has a sticky header that displays the flow title and an X icon that the user can select 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.

Step container

  • A step container is the area hosting the step title, subtitle (optional), and other step content (such as form fields, selections, and so forth).
  • Center align the step container within the modal, with a fixed percentage of width (60% of the modal width), and a minimum width of 678 pixels. When you really need to include relatively wide step content, you can make the step container width 80% of the modal’s. All step containers in the same flow should share the same width.
  • Content in 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. Consider using progressive disclosure to keep the content brief.

Step content

Four types of content can appear in the step container. Choose the one(s) that works best for the task the user needs to complete.

  • Simple form allows the user to input data. For more detailed specifications, see the forms pattern.
  • Selection asks the user to choose among the available options. It’s recommended to present options as tiles. (Tile-like selection is design work in progress. Reach out to the design systems team if you plan to use this).
  • Read-only/Inline-edit lets users check and revise information we already have. Show the data as read-only by default, and present an Edit icon to allow for editing. In editing mode, hide the navigation button(s) to help users focus on entering their information.
  • Table: You can include a small table as step content. For more detailed specifications, see the tables pattern.

Navigation buttons

The navigation buttons appear by default and are docked below the step container.

  • The Previous button navigates the user to the previous step. You can hide this button in the first step or any step with non-accessible previous steps.
  • The Next button saves and validates the data the user entered and directs her to the next step.
  • The Save button appears in the last step to save the content and guide the user to the confirmation page.

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.

In-product discovery landing pages

You can choose to include an IPD landing page as the first page for the flow to display benefits, pricing, and other 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.

Different states for a step

Example of a progress indicator

End-of-flow confirmation

All flows should have an end-of-flow confirmation page after the last step. The confirmation page includes the following:

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

Mobile

Animation

Desktop

Mobile

Content guidelines for step flows

Brief, precise content is key to a step flow. Copy should be straightforward and guide users quickly and smoothly through all the steps.

  • Step title: Keep this copy brief and guide the user to act. Example: Connect to your bank
  • Step subtitle (optional): This optional copy can offer additional guidance and encouragement. Example: Track your sales and profits with ease when you connect your bank account.
  • Progress indicator labels: Write a brief label for each step. A good label can be an edited version of the step title. Example: Connect
  • Step container: Even though the container will get bigger to accommodate additional content, keep the copy brief. If the container displays a longer form, work with a designer to use progressive disclosure so that the form does not become too long. Or consider breaking a long step into two smaller ones.
  • Confirmation: At the end of the flow, users see a confirmation. Write an optimistic title that lets users know they’re done. A subtitle can summarize the steps and move users along to what’s next. In many cases, we’ll guide users to start getting the results of the flow they just completed.
    Example:
    You made the connection
    You connected QuickBooks Online to your bank and can now start getting more insight into how your business is doing.
  • Recommended voice and tone attributes: Straightforward, encouraging, experienced
Launch Preview
x
px wide

Don't

Don’t use step flow with a sticky footer

  • Was this Helpful?
  •