Skip to content
UX Atlas
Plate TPL·005 · TemplateGrid G3 · Rev. 2026-09-14

User Flow

Every path through a task, including the error paths and the states most flows forget.

TemplateCraft conventionFoundational

Definition

A user flow enumerates the steps, decisions and states in a task. Its main value is that writing it down surfaces the branches nobody had decided.

Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.

On this plate
  1. 1Definition
  2. 2The states most flows leave out
  3. 3Flows that answer questions instead of raising them
  4. 4Local chart
  5. 5Continue from here

Fill it in

Loading your draft…

Saved in this browser only. Nothing is sent anywhere.

Definition

What the user is trying to achieve, in their words.

Every way a user can arrive at this flow, including deep links and emails.

What must be true before the flow can start. Each one is a potential failure path.

Paths

Numbered steps, one action per step.

Every fork, with both sides. Ambiguity here becomes a developer's guess later.

Invalid input, permission denied, network failure, expired links, duplicates, limits.

States and exits

Empty, loading, partial, error, success, permission denied, offline.

Where the user can leave, and what happens to their partial work.

Decisions that need a product answer before this can be built.

The states most flows leave out

Writing the flow is mostly an exercise in finding these. Each one is a screen somebody has to design and an implementation somebody has to estimate.

  • First use, with nothing there yet, which is a different screen from the populated one.
  • Loading, and the slow variant of loading where the reader needs to be told what is happening.
  • Failure at each step, separated into what the reader can fix and what they cannot.
  • Interruption and resume: the session that ends mid-task, on a different device.
  • Permission denied, and the version where permission can be requested rather than only refused.
  • Expired: the link, the token, the basket, the offer.
  • Concurrency: someone else changed the thing while this person was working on it.
  • The exit paths, including cancel, back, and closing the tab, which is the most common ending of all.

Flows that answer questions instead of raising them

Do

  • Write the decision points as questions with every answer enumerated, including the unexpected ones.
  • Mark which steps are system decisions and which are the reader's.
  • Note where a step leaves your product, such as an email confirmation or a payment provider.
  • Keep one flow per goal, and link between them rather than merging.

Do not

  • Do not draw only the happy path and call the flow finished. The branches are the deliverable.
  • Do not put screen designs in the flow. It becomes a design review and the structural questions go unanswered.
  • Do not leave a branch ending in nothing. Every path terminates somewhere, including the ones you would rather it did not.
  • Do not skip the flow for a small feature and then discover the branches during implementation.

Local chart

TPL·005 · Region VIII · Grid G3

This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.

PRD to User FlowAI·002 · OFTEN USED WITHEmpty StatesPAT·010 · OFTEN USED WITHMulti-Step FlowsPAT·016 · OFTEN USED WITHProduct SpecificationTPL·011 · OFTEN USED WITHExcalidrawTOOL·009 · OFTEN USED WITHVisual StatesFND·053 · OFTEN USED WITHUser FlowsFLOW·009 · OFTEN USED WITHHappy PathTERM·119 · SHORT DEFINITIONUser FlowTERM·118 · SHORT DEFINITION

Continue from here

Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.

Applies when you are designing

A CheckoutA FormA Mobile AppA Search ExperienceAn Onboarding FlowAuthenticationNavigation

Often used with

These usually appear in the same screen or the same decision.

Short definition

The one-paragraph version, for when that is all you need.