User flow
Author: Anastasia Ratti | Last edit: May 01, 2024
What is a user flow?
A user flow (also called an “interaction” or “task flow” flow diagram) is the path taken by a prototypical user on a website or app to complete a task. It’s a step-by-step visual mapping process outlining all potential actions a user would take on a website or an app when moving from an entry point toward a successful outcome, such as purchasing a product.
User flows leverage the basic building blocks of flow charts to express the different phases of the user’s path across the app from a logical standpoint. For instance, for a given step the user might face a process, eg. “provide email and password”, or a decision, eg. “forgot password?”.
For more information about the building blocks and how to use them to map a user flow, please refer to the How to map a user flow section of this article.
Why map a user flow?
Create an intuitive interface
User flows help you understand what specific actions the user is trying to take to complete a task. This gives an idea of what workflows should be accounted for and in which order they should be in. Mapping a user flow also points out challenges the user is facing when trying to accomplish a task to then inform what needs to be accounted for and mitigated in the designs. Understanding both the user’s specific actions and pain points can help create an intuitive interface and user experience.
Evaluate existing interfaces
User flows can also be used to examine existing interfaces and point out pain points within the user experience. Once these pain points have been identified, they can be addressed and fixed in an uplift of the user interface.
Present your design ideas to stakeholders or colleagues
User flows are also helpful in organizing your ideas into a more tangible and easy-to-read format. The user flow can then be presented to stakeholders or colleagues to align on concepts and can be used for ad-hoc references.
When could you map a user flow?
The activity of mapping a user flow can support designers in different stages of the Design Process. It is very common to leverage the power of user flows during the Discovery phase in particular. This phase is when it’s the most important to identify gaps and obstacles in the user experience before moving into the design of the UI.
Here are a few examples of the key moments of the Design Process where user flows can come into help:
- Before designing a flow or feature to ensure that the overall workflow makes sense and accounts for all user tasks
- To explain to stakeholders why a particular feature, workflow, or application should be created or uplifted
- When uplifting a workflow or application to have a better understanding of the pain points of the current workflow or application
- To use to share out to stakeholders for reference
- To use to share out to the documentation team so that there is alignment on the intended user flows and actions that the user would take
Pro tip: Because it can be hard to think about the user experience from a logical standpoint only, it’s absolutely fine to accompany a user flow with UI low-fidelity sketches or wireframes, and eventually go back and adapt the user flow according to the design of the UI.
How to map a user flow
When creating a user flow, you need to account for the workflows the user will take to complete their tasks and how those connect, as well as pain points within the workflow. You would ask yourself questions like:
- How do they get from A to B?
- What options should we provide to solve a given challenge?
- What decision should a user make at a given point?
- What actions could cause errors and how would the user correct them?
- Is there more than one way for the user to complete their task?
- Is the right feedback provided when an action is taken?
Pro tip: Mapping user flows can be easy or overwhelming depending on the complexity of the specific user experience. It’s good to always start small, mapping the high-level flow first, and then eventually expand into further details.
As mentioned above, user flows are based on flow charts and include a subset of their components.
| Circles indicate the beginning and end of a user flow (entry point and final interaction) | |
| Diamonds indicate decision points, where a user’s selection (yes/no, correct/incorrect, sign up now/not today, etc) determines the next step. Diamond nodes will have branching arrows that illustrate the user path resulting from each decision. | |
| Rectangles indicate tasks the user must complete, such as creating an account, filling out a form, or entering a shipping address. | |
| Arrows indicate the user's direction from step to step. Arrows might go directly from one step to the next, branch off to a new step, or revert to a previous step based on user inputs and decisions. |
Here are a few different types of user flows:
Hand drawn
Use a pen and paper or whiteboard to quickly draw out the user flow. This can be used during the discovery phase, when you are trying things out on your own, or for a quick iteration.
Pro tip: Remember to take a picture of your user flow for future reference or iteration!
Task flow
Use a tool like Miro to iterate on and share out the user flow. This can be used to define the desired user flow and share it with stakeholders.
Resources: check the Resources section in the right hand sidebar of this article for a link to a User flow Miro template
Wireflow
Use an interface like Figma to create a very detailed user flow to share out. This can be used to get buy-in from stakeholders, hand off the designs to an engineering team, have a more detailed understanding of the exact flow the user would go through, when moving to the UI design phase, to finalize instead of iterate/experiment.
Resources: Sketch, Figma, Adobe XD, Photoshop, Illustrator
| Pros | Cons | How/When to use it | |
|---|---|---|---|
| Hand-drawn: | Quick Easy to iterate | Hard to share | Discovery phase across the entire process Trying things out on your own Need something quick to iterate on |
| Task flow: | Still quick Still easy to iterate Good for sharing | Not as quick and easy as hand-drawn | Definition phase Share out with stakeholder Need something easier for others and yourself to read |
| Wireframe: | Good for sharing Very detailed | Not quick Harder to iterate | Getting buy-in Design hand off to the engineer team Need to be understood by others When moving to the UI design phase Not suggested for experiment |
User flow Dos and Dont's
Here are a few recommendations to guide you in the creation of working user flows.
Do | Don't |
|---|---|
| Do add legends for your flow - specify what the different shapes mean | Don’t use other types of shapes, embrace clarity, less is more! |
| Try to keep the flow simple and have a clear entry point. It’s much easier and faster to focus on the main flow first from beginning to end. You can always add branches and connections to the main flow later | Don't start with a complex and branching flow from the beginning. Avoid unnecessary complexity upfront, as it can make the user flow harder to understand |
| Use frames to group flows to quickly separate and identify different parts of a flow if necessary | Don't overuse frames to the point where it creates unnecessary complexity. Avoid cluttering the user flow with excessive frames, as it may confuse rather than clarify the overall flow |
| Do use color purposefully to enhance clarity. Choose a limited color palette that serves a specific function, such as distinguishing between users or highlighting critical steps. | Don’t use many colors and avoid going overboard |
| Do use concise and clear labels, and add annotation to the labels. | Avoid lengthy labels and unnecessary information |
Additional resources
- Miro template
- Understanding User Journey vs. User Flow
- What are User Flows in User Experience (UX) Design?
- Wireflows: A UX Deliverable for Workflows and Apps
- What are UX user flows and why are they important?
Get in Touch!
Spotted a typo? Any feedback you want to share? Do you want to collaborate? Get in touch with the UXD Methods working group using one of the links below!
Drop us a message on the #uxd-hub Slack channel
Submit Feedback