patterns / null

Setup Flow

Overview

Setup flows, also known as creation or add flows, are an important part of user tasks. It includes the creation of a completely new resource or adding to an existing set. They have clearly defined goals, with varying degrees of contextual help and value proposition.

Use Cases

Use Case
Option(s)
Quick, single step setup
2+ steps, overview of information is important
2+ steps, flows have complex data interaction

Simple, Quick Setups

When setups require minimal guidance and steps, different layouts can be used, each with its own advantages.

Use a Modal layout when content is limited and context underneath a Modal is not needed.

Drawer

Use a Drawer layout when more space is needed relative to a Modal, and seeing the original context is helpful for setting up content.

Takeover

Use a Takeover with a single step when a full page of content is necessary, and the context from the previous page is not needed.

Multi-step Flows

Many flows require multiple steps with a variety of components used to complete the setup. Anvil supports two general approaches to multi-step flows: the Flow Card and Takeover + Progress Tracker arrangement.

One Page, Many Steps Flow

The Flow Card is a useful arrangement to have a multi-step flow on a single page.

Use cases for a Flow Card UI arrangement

  • When it’s important to visualize that steps build on top of each other.
  • When a persistent summary of the setup is valuable to the user.
  • When individual steps are using less complex UIs.

Multi Page Step Guidelines

  • The Flow Card has built-in capabilities for handling pre-setup and a summary view.
  • A post-setup Modal can be used in setups to give a clear end point in the flow.
Example of a pre-step state

Multi Page, Many Steps Flow

The Progress Tracker and Takeover arrangement are a useful layout for complex flows that need more space for information and layout.

Use cases for a Progress Tracker & Takeover UI arrangement:

  • When there are heavy UI treatments within individual steps that need space to be used.
  • When the context of previous steps is not critical for a user to refer back to.
  • When there are many sub-steps to be considered, this arrangement can also be paired with a Flow Card.
  • When the total number of steps is between 3 and 6.

Multi Page Step Guidelines

  • For pre-setup, an empty state can be used prior to a multi-page flow.
  • When the step count goes past 6, consider breaking up the flow into multi flows, or find ways to cut out content within the setup flow.
  • If information from other steps is necessary to complete a step, have that information readily available instead of having the user recall it.
  • A final, summary step is useful for users to look over to confirm the setup.

General Best Practices

  • Communicate the value of the setup. Users who don’t understand the purpose of setting up something are less likely to complete the flow.
  • As a flow gets more complex, more contextual help will be necessary to guide the user through the task.
  • Keep step count down when possible. Some potential ways to accomplish this:
    • Identify what is useful to users to setup now, and what could wait later on.
    • What setup content could be automated? Is there any information that can be pre-filled?