A guide on user flow diagrams for both beginner and expert UX and product designers.
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.
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.
Label everything
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:
