This is a work in progress. When you use it, check with the design systems team for updates.
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 into several small sections. Good examples are creating a new employee and signing up for payments.
Appearance and behavior
There are two types of step flows:
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 show a progress indicator, try to limit the flow to no more than 5 steps. In some special cases, you might want to add more steps, but let’s chat before you do. Another pattern might work better.
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.
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 to let the user know.
Flow title is an optional element.
It’s important to always have the QuickBooks logo as it gives users a trusted brand awareness. In some cases, users may come to step flow from a third party site or from the setup flow.
For a step flow that happens in the product, the logo can be optional.
When scaled to mobile size, the logo can be optional.
The progress indicator is top-aligned with the step container and anchored to its top, with steps presented horizontally.
- Each step has a label.
- Use succinct labels when naming the individual steps.
- Don’t use the progress indicator for a flow where the number of steps varies.
For a basic flow, the progress indicator is optional.
- A step container is an area hosting the step title, subtitle (optional), and other step content, such as form fields, selections, and so forth.
- Content in the step container is left-aligned. The step container grows vertically to accommodate 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.
- Center align the step container within the modal, with a fixed width of 984 pixels, 820 pixels, or 652 pixels for desktop. All step containers in the same flow should share the same width.
- The container’s height is flexible, depending on the length of the content within. However, the minimum height of the container is 400 pixels.
The navigation buttons appear by default below the step container and are left aligned.
- 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 them to the next step.
- The Save button appears in the last step to save the content and guide the user to the confirmation page.
For the basic step flow, depending on the context, there can be only one primary button.
In some edge cases where there is an iframe experience embedded within the step container that has its own buttons, the buttons outside of the step container will disappear.
Avoid using disabled buttons. To confirm an action or communicate an error, use page messages.
The page message appears above the step title and within the container box.
It’s a celebratory moment. 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 a summary or next steps
- A button to exit the flow
All content is contained in an invisible box that should follow the mentioned container’s sizes.
By using fixed widths for the container on desktop, we make sure that the experience is consistent on popular screen sizes of 1024 pixels and larger.
Refer to this motion library.
Entrance: “use qbal-grow-enter”
Next step: “qbal-tabContent-enter” include “qbaf-slideLeft-enter” animation-delay:$duration-3
Back step: “qbal-tabContent-exit” include “qbaf-slideRight-enter” animation-delay:$duration-3
Progress bar: 0.4s $ease-slow
If you’re using a flow title, make sure it is your <h1>.
If you’re not using a flow title, the current step title should be your <h1>.
Context and reading order
Be sure to include hidden text that announces the current step.
Don’t forget to define the reading order for your content.
Content guidelines for step flows
Brief, precise content is key to a step flow. Remember: Users are doing something a little bit complex. Guide them with clarity.
- 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.
- 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 doesn’t become too long. Or consider breaking one 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.
You made the connection
You connected QuickBooks Online to your bank and can now start getting more insight into how your business is doing.