All about user flows
What is a user flow?
A user flow is a diagram that visualizes all the different ways a user can achieve a specific goal.
In UX, it often represents the user experience of an app or website, based on user interactions with different UI elements (e.g. buttons, menus, etc.). Although user flows appear in many forms, all comprise some type of visuals of any fidelity (screens, shapes, or images) connected with lines known as connectors. Depending on the use case, a user flow can include extra elements, such as annotations, labels, branding elements, device skins, and most probably a legend.
User flows should not be confused with flowcharts. Contrary to user flows, flowcharts have zero focus on the user interface and can only be of low fidelity, made up exclusively of shapes and arrows.
Why make a user flow?
Being quite flexible and information-rich user flows can help throughout all stages of the product design process, from low to high-fidelity visuals. More specifically, they allow teams to
|Align on the basic user experience during early ideation
|Have a single source of truth throughout all project stages
|Evaluate the entire or parts of the user journey, even without the final designs
|Get the conversation started in cross-functional meetings
|Enable both synchronous and asynchronous design critique meetings
|Keep historical documentation from the beginning to product launch
Overflow not only saves us time as designers, but everyone internally that uses the link as a single source of truth for design handoff.
How to make a user flow?
Specialized tools, such as Overflow, allow you to create interactive user flows fast and easily, in a few simple steps:
Step 1 - Sync
Bring in your designs from your favorite design tool, draw shapes, or drag and drop images saved into your device.
Step 2 - Rearrange
Set up your screens in a way that makes sense. Split them into different sub-flows for a smoother presentation.
Step 3 - Connect
Draw connectors that show both forward and backward steps in the user journey. Use different styles for more straightforward navigation.
Step 4 - Annotate
Add labels, annotations, and other notes to allow your audience to follow your design story without much explanation.
What are the different types of user flows?
User flow diagrams come in many different levels of visual fidelity and complexity. Based on those two parameters, they can be categorized as follows:
Five tips for better user flows
User flow diagrams are a very effective way to showcase the user experience of any digital product, such as a website, app, or e-store. In the case of large, complex projects, where the user can follow multiple paths that often intertwine, it’s important to follow some simple rules to ensure your user flow doesn’t look like a dish of tangled spaghetti.
Rearrange your screens
The way design screens are arranged will judge how the diagram will look once everything is added on top. It’s important that you leave plenty of space and that screens are split into rows, so that when you drag connectors they overlap as little as possible.
Another useful tip is to try to include screens that work as the core of your user experience in the middle (e.g. a hub page), so all other screens and connectors spread out around it like branches on a tree.
Divide into subflows
If your project can be logically split into different processes, then group all those screens closer together within the same rectangle. For instance, if your app has a payment flow, make sure it looks relatively separated from the product catalog flow, the add review flow, and so on.
Not only will this make it easier for your audience to follow the logic behind your user experience, but you will also find it smoother to iterate on the project later on.
Use different styles
Styles will save your and your stakeholders’ life when presenting and reviewing complex user flows. A very straightforward tip is to use bolder colors for forward connectors and smoother colors or dotted lines for backward links. Additionally, you can use different colors for primary actions and secondary actions starting from the same screen, or use a different color whenever there is a branched decision to be made.
Never assume that your audience can read your mind or way of thinking. It’s important to add labels and annotations to every connector, screen, or shape included in your user flow. Try to keep descriptions as short as possible and avoid abbreviations that some people might not understand.
Include a legend
Legends add an extra layer of information that allows your audience to understand your user flow better. Some common things that can be included here: