By the end of this lesson you can
- Explain the difference between task flows, user flows and wireflows.
- Draw a flow that includes decisions, errors and alternative paths.
- Use flows to find unnecessary steps before designing screens.
The idea
A flow shows the steps someone takes to complete a goal. Drawing flows before screens helps you design the journey, not just individual pages.
Types of flow
- Task flow: a single, linear path for one task, such as "reset password". No branches; good for seeing the minimum steps.
- User flow: includes decisions and different paths depending on the user or situation, such as "already has an account?" or "payment failed".
- Wireflow: a flow drawn with rough screen sketches instead of boxes, useful for mobile apps where layout and flow are closely linked.
Notation
Keep notation simple and consistent: rectangles for screens or steps, diamonds for decisions, arrows for movement, and a clear start and end. Label arrows with the action that causes them ("taps Continue").
Don't forget the unhappy paths
The "happy path" is when everything goes right. Real users also make errors, lose connection, change their minds and return later. Good flows include these paths, because that is where most usability problems live.
Why it matters in real projects
Flows reveal complexity early. It is far cheaper to remove a step from a diagram than from a finished product. They help developers understand logic and edge cases, help product managers see scope, and help you spot where users might get stuck or drop off.
A realistic example
A train ticket app's designer maps the flow for buying a ticket. The happy path has nine steps. The user flow reveals branches: railcard or not, return or single, seat reservation, and what happens if payment fails.
The diagram shows that people who apply a railcard are sent back to the start of the journey selection, adding three unnecessary steps. It also shows there is no path for a failed payment except starting again. The team fixes both in the flow before any screens are designed.
Step by step
Define the goal and entry points
Where does the user start, and what does success look like?
Draw the happy path
List the minimum steps as a task flow.
Add decisions
Add diamonds wherever the path depends on a condition or choice.
Add unhappy paths
Include errors, cancellations, timeouts and returning later.
Count and challenge steps
Question every step: can it be removed, merged or automated?
Review with developers
Check logic and edge cases with the people who will build it.
Common mistakes
Mistake Only drawing the happy path.
Instead Add errors, alternatives and recovery routes.
Mistake Inconsistent shapes and unlabelled arrows.
Instead Use a simple legend and label each arrow with an action.
Mistake Starting with screens instead of flows.
Instead Draw the flow first to understand the journey.
Check your understanding
Choose an answer, then check it. There is an explanation either way.
Practice exercise
Exercise · about 45 min
Flow with unhappy paths
Draw a user flow for booking a haircut online.
Steps
- Draw the happy path as a task flow.
- Add at least three decisions.
- Add at least three unhappy paths, such as no slots available.
- Remove or merge at least one step and explain why.
Deliverable
A user flow diagram with a legend and a note on changes.
Self-assessment
Tick each item when it is true of your exercise. Be honest; this is for you.
4 items
Summary
- Task flows show one path; user flows include decisions; wireflows add screens.
- Use simple, consistent notation.
- Design unhappy paths, not just happy ones.
- Flows make complexity visible before it is built.
Further reading
Third-party sources, chosen for reliability. They open in a new tab.
- User journeys vs. user flows (opens in a new tab)Nielsen Norman Group
- Wireflows: a UX deliverable for workflows and apps (opens in a new tab)Nielsen Norman Group
Your notes
Marking complete updates your course and roadmap progress.