User flow
A diagram that shows the steps, screens and decisions a person goes through to complete a specific task in a digital product.
What it’s for
It helps you see at a glance how many steps a task takes, where decisions happen and what happens when something goes wrong.
Key elements
One task, one flow
Each diagram follows a specific goal, such as paying or recovering a password.
Detours too
Include errors, cancellations and going back, not just the happy path.
Shapes people understand
Screens, actions and decisions are drawn with distinct shapes, always the same.
How it’s done
Choose the task and where the person starts.
Draw the steps with every screen, action and decision.
Look for bottlenecks and unnecessary steps, and simplify.
Applications in design
When to use it
When a task has several steps or decisions and you need to agree on how it’s done before designing the screens.
Avoid
Drawing only the path where everything goes right.
Don’t fall for it
The flow is a hypothesis; check it with people in a usability test.
Connections
Authors and works
- 2000
Jesse James Garrett
In his outline of the elements of user experience, he included developing application flows as part of interaction design.
Sources
Original sources
- Garrett, J. J. (2000). The elements of user experience [diagrama]. jjg.net.
Last reviewed: