Use flows

A user flow is a series of steps a user takes to achieve a goal within a digital product. They are used to design and communicate the intended flow of a user through an application. Making use flows, before designing individual screens, helps in creating a logic sequence of steps for the user. While making the flows, the interaction designer has to decide on the order in which information is displayed to or asked from the user. Use flows are made at the beginning of the design phase of a project, after which the more detailed screens can be designed. Additional use flows can be created later in the project, when functionalities are added that where out of scope for the first iteration.

How to

1. Determine or choose one of the user tasks or user goals for the application. These are probably already defined in use cases, user stories or scenario’s.
2. Translate the scenario, use case or information architecture structure into a sequence of steps. This is the time to move away from abstract schemes to rectangles representing actual screens. You can start with post-its or rough sketches, as long as there is a sequence of actions and a completed task.
3. Determine the content of each screen, how all the screens in the sequence are related, and through which interaction they are connected.
4. When the flow is complete, you can design each screen in more detail.

Tips

• You can make the first version of each use flow on paper, as they will likely change while you are sketching them out. However, as the use flows are the basis to explain the relation of screens to stakeholders and developers, it is advisable to turn them into a neat diagram with annotations. (For example, number each screen for reference.)
• Don’t try to capture all possible screen relations in one diagram (this is not a sitemap). Split up into different flows, and make a diagram for each flow. One flow can have multiple paths, but the goal for each path should be the same.(For example, in a forgot-password-flow, you can retrieve your password through a recovery email, secret question or text-message. But the final step is always a recovered password.)
• The level of detail of screens in a user flow can vary, but don’t put too much detail in each screen. You want to understand and communicate the entire flow, not the workings of a single page.
• Give each flow a clear beginning (entry point) and goal (completed task).
• Remember! User flows should represent a series of actions from the users perspective. The goal is to ensure the application makes sense to the user. Within this method the system actions are not relevant. (Although they should be possible!)

Learn more

• Wireflows by Nielsen Norman Group
• Flows for developer handover on uxplanet.org
• Summary of what a User Flow is and isn’t on uxdesign.cc