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.
When to Use
- 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)
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.
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.
- 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.
- 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.
- 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
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.
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.
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
- 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.