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.

Goal Setup

Membership Trade(s)

HVAC and Plumbing

Widget Event

January

Gear Event

March

Widget Membership

Yes

Widget Frequency

Quarterly

Widget Revenue

Text that helps explain this particular step in the flow. This will help them complete the flow with the information they need.

$
$
$
$
$
$
Annual Total

$200.00

Annual Total

$250.00

3

Widget Costs