The better the design of your user flows, the easier it is for your audience to understand the story behind the designs and, therefore, the more constructive the feedback they will give. Here's a list of eight useful tips, tailored primarily for users with little prior exposure to user flow diagramming:
#1 Use meaningful titles
Meaningful titles or headings help your audience understand the flow they see. The name of the project is not always enough to describe what the user flow exactly represents. For example, in the case of subflows, the title could include information about the specific part of the user journey, e.g., “First-time user onboarding” or “Sending money to another bank account”, etc.
In cases where you design different flows for different personas, make sure to include the user persona name in the title.
#2 Leave adequate space between screens
Position your screens logically to increase clarity. Adequate space between your screens will also help flows with multiple connectors appear cleaner and less cluttered.
Branch out subflows to different directions so that they can be easily distinguished. The positioning of your screens should ideally reflect the Information Architecture of your app (as shown below).
Overflow allows you to easily space out selected screens in the Editor by using ALT + the arrow keys to increase or decrease the distance between them, vertically or horizontally.
#3 Include device skins where necessary
When presenting user flows device skins can put your designs in context, allowing the user to associate the medium with the design. Moreover, in the case of long screens that are meant to be scrollable, including the device skin gives you an indication of which part of the design would be visible before scrolling.
#4 Use different connector styles to increase clarity
Numerous connectors in the same user flow might make it challenging for your audience to follow. This is especially true when all connectors are styled in the same way.
Style connectors differently depending on semantics to address this problem. For example, prefer softer colors or dotted lines for backward links, so you can give more prominence to your forward links, as we've done in the example below:
Overflow Styles can help you achieve consistency and use the same pattern or color for the same type of connectors.
#5 Use connector labels to explain actions
There are cases, such as that of decision points, where connector labels become necessary to show when the flow follows one path vs the other. Labelling connectors is also useful when linking two screens directly (without picking layers as starting points), as the action is not obvious in that case.
#6 Use a legend to describe connector styles
With two or more connector styles, it is necessary to add a legend your audience can refer back to and not feel lost in all the visual information your diagram is offering. This example of a sitemap flow contains a simple, clean legend at the bottom left corner for clarity.
#7 Use shapes purposefully
Shapes, such as rectangles, ovals, and diamonds can be used in multiple ways.
Rectangles are mostly used for grouping, as subflow backgrounds, frames for notes, replacement flow steps where no design is yet available, etc.
Diamonds are mostly used to represent decision points, where the user flow needs to branch out to different directions.
In early stage user flows, like the above, shapes play an even more crucial role: rectangles represent screens or steps in the flow, ovals are used to mark the flow start and end or to link two subflow, whereas diamonds signify decision points.
#8 Break down large flows into subflows
Breaking down complicated flows into logical subflows will make your presentation job smoother and your diagram easier to read and follow.
There are two ways to achieve this:
- Use rectangles as background borders for each one of your subflows, while leaving adequate space between subflows OR
- Create multiple boards, each one containing a different subflow. Use the link to board functionality to effortlessly move between them while presenting.