Building an elaborate yet clean user flow makes it significantly easier for any audience to follow the story behind the design and provide relevant and constructive feedback. Drawing from our experience here at Overflow, we put together a list of seven code-free tips and tricks, aimed primarily at product designers with no significant exposure to user flow diagramming.
#1 Use titles that make sense
Meaningful headings give your audience some much needed context in any user flow they might be trying to make sense of. People often use the umbrella project name as the title of their user flow, e.g., “XYZ Bank — New Android app.” Even though this title is accurate, in some cases it might be lacking that extra context that the audience needs to be aware of. For instance, in the case of user flows with multiple sub-flows, the title could include more elaborate information about each part of the user path, e.g., “Help Center screens, XYZ Bank, Android app.” or “New SEPA payment flow, XYZ Bank, iOS app.”
Alternatively, you can choose shorter but more on-point subflow titles (e.g. “New SEPA payment flow”), while the project as a whole can be titled after the project and the target device type (“XYZ Bank - New Android app”).
In case your project contains different sub-flows for different user personas, it might be a good idea to add this information in your titles as well (e.g. “Onboarding - Business account holders”).
#2 Leave adequate space between screens
Position your screens in a way that is easy to follow and add enough space between them for more clarity. Adequate space will also make flows with multiple connectors appear tidier and less cluttered.
Expand your subflows in different directions to also avoid cluttering and make each one of them more distinguishable. The position of each screen also matters and should reflect the Information Architecture of your app or website.
Tip for Overflow users: You can easily space out selected screens vertically or horizontally with the ALT + directional arrows keyboard shortcut.
#3 Wrap in mock devices when needed
Device skins are a very effective way to add visual and contextual consistency to your user flow, especially in the case of mobile app flows. Another advantage of wrapping your design screens in mock devices is that, in the case of long, scrollable screens, this gives your audience a feel of which part of the screen will be directly visible without scrolling.
Overflow allows you to add device skins with a single click. You can customize their dimensions or color, so that they better match your presentation needs.
#4 Use labels to explain actions
Connectors are frequently self-explanatory. However, adding text labels to each one of them can answer questions from your audience before they even need to ask.
There’s a couple of instances, however, where adding labels is more than optional. For example, when your flow contains decision trees with more than one possible outcome, labels allow you to add that extra context and expose the logic behind each option without effort. Additionally, in the case of early ideation flows without finished designs, where each screen is represented by a simple rectangle, labels allow your audience to understand the logic behind each step in your flow, even though critical visual cues are missing.
#5 Style your connectors for more clarity
Connectors are possibly the most crucial element of your user flow diagram, as they dictate the logical flow of your product experience, while also guiding your audience’s attention while you present your work. In many cases, one screen might be linked with others with multiple outgoing and incoming connectors, making it hard to understand the interaction between them. This is where connector styling comes to the rescue.
One easy way to customize your connectors to improve your flow is to use a more prominent style for forward navigation connectors. Similarly, backward navigation connectors can be less prominent, with softer colors or even dotted lines, as the below example displays.
Lastly, when using multiple connector styles, it is necessary to add a legend in a corner of your user flow, so that your audience can understand what the purpose of each style is.
#6 Use shapes purposefully
Along with screens, connectors, and labels, shapes are the fourth major element of any user flow diagram and, possibly, they are the most versatile one of them all.
In early-stage user flows (such as the one displayed above), shapes play a very crucial role, as even whole screens can be represented by rectangles until the design process is over. Another use of rectangles is as a background to group screens together and signify the existence of a subflow. Diamonds, on the other hand, are mostly used to signify decision points, where the user flow splits in branches, depending on what the user chooses to do or which persona they belong to. Lastly, ovals are mostly used as connecting points between subflows or as markings for the starting or ending point of a flow.
#7 Split large user flows in subflows
Massive user flows are hard for your audience to follow and can look rather messy. By breaking down each big flow to smaller subflows it becomes easier for the presenter and the audience to focus on the big picture but also on the details. One good approach is to split your user flow screens into different product steps, each one of them being one distinct subflow: onboarding, registration, product browsing, payment, etc.
For an even better presentation experience, Overflow allows you to create multiple boards and add logical internal connections between them. We recommend you build each subflow on a separate board and then ensure that each board links to the other in a way that makes sense in terms of logic and navigation.
Conclusion
Creating effective user flow diagrams takes practice. Both the layout and annotation aspects are vital, as they contribute to how well the audience can follow the story behind your design work. By following the tips described above, you will make both yours and your audience’s life easier in your next design presentation and you will be able to get better, more actionable feedback to improve your product’s user experience.
About Overflow
Overflow is the world’s first user flow diagramming tool tailored for Product & Design teams. It allows users to turn their static designs into playable, interactive user flows in just a few minutes and deliver more engaging, memorable design presentations. Overflow syncs seamlessly with the most popular design and collaboration tools, with plugins available for Sketch, Figma, Adobe XD, Jira, and more.
