What is a user flow map?
A user flow is a visual representation of all steps a user has to perform in a product to complete a specific use case.
It can be compared to the storyboard in film making.
A storyboard is used to unfold each camera scene, shot by shot. Shooting a movie is a complex process and even if the single scenes are well planned, a lot can go wrong without a carefully created storyboard at the beginning, before starting the shootings. In film making the storyboard is used to plan camera movements, actor movements and actions as well as setting up the framing for the camera.
Gladly, it's not necessary to create a storyboard for our product, but a simple user flow can achieve the same results. It's a scribbled or wireframed flow chart showing all actions and decisions a user has to take. Designing useful flows takes time and iterations and needs to be checked with (potential) users. But it will be the fundamental tool for the UI work and can be used throughout the whole process of a feature creation.
Why create a user flow map?
The flow chart is only helpful if created at the beginning, way before the design process can start. If done right, they are a strong foundation to create intuitive user interfaces. You can use the user flow...
- to gain a common understanding of the user's journey. In the early phase it is crucial to get a common understanding of what needs to be done throughout the whole value creation team. A user flow map is the simplest and easiest way to get to that understanding in terms of the UI.
- to validate with users. Once created, use the flow chart to validate the assumptions with users (is this really the way they are used to work? Do they expect these steps? Is the flow intuitive for them?)
- to identify too long or too complex journeys. A user flow can also be used to identify where in a process users get lost or drop out and visually represent these actions or pages. All pathways through a feature to reach specific goals should be rather simple and direct. Use the flow chart to find out which journeys are too complex (too many clicks, hidden entry points, lost context, etc.), this is where you need to start working on. Creating a user flow will also help you to reduce wrong turns or to even identify missing turns.
- to define a scope. Use the flow chart to visually represent the scope of your project. It is important to know that it can't always be achieved to fix or improve the whole user flow. For some projects you have to take care of one part of the user flow and still evaluate if it doesn't break the whole experience for the user. In this case you also need the complete user flow and have to mark the path that is in the scope of your project. Use the complete flow to double-check entries and following steps.
Remember to use the flow repeatedly throughout the project to check in various phases if the expectations are still met.
The elements of a user flow
Start with defining the start and end points of the journey. Only after that, fill in the gaps between start and end with the whole journey. This makes sure that the whole flow is always related to start and end. Break down the journey into all pages a user will have to walk through to complete the desired task. Continue with adding the actions and decisions to reach these pages in between.
All shapes used in a user flow diagram depend on meaningful labels. As user flow charts are always created for better collaboration it is crucial that everybody understands the meaning of each step.
Circles and ovals
Circles or ovals are used to show the entry and exit actions or pages. The define the start and the end of your user flow.
Rectangles
Rectangles represent pages or views within the product or actions the user is performing.
Diamonds
Diamonds represent decisions, so questions the user has to answer in order to continue in a flow direction. They most likely have more than one path to continue on.
Lines
Lines represent connections between pages, actions and decisions. They are used to show the flow direction. That's why they have arrows attached to them.