Previous
¶ User Flow
¶ What it is
User flow refers to the sequence of steps and interactions a user takes to complete a specific task or achieve a particular goal within a product, such as a website or an app. It's a visual representation of the paths a user can take within the product, from the entry point to the outcome or action they take. User flow diagrams or flowcharts are used to visualise and plan the navigation and interactions a user will experience while using the product. User flows can be in the form of wire flows, a combination of a wireframe and a flowchart.
¶ Why it is useful
User flows are helpful because they can identify friction points or gaps in the design and accommodate the different paths users might take to perform tasks. This ensures that the product is intuitive and easy for users to navigate and achieve their goals, which can lead to a reduction in abandonment rate and an increase in conversion rate. It is also an excellent way to communicate the flow of your product to stakeholders such as developers and other team members.
¶ When to use it
User flows are typically created during the early stages of your design, after user research has been done, and can be refined throughout the design process as feedback and testing are conducted. They provide a good foundation for how your product should be built by helping to determine the number and order of screens and the design components needed. User flows are also helpful for evaluating existing interfaces and identifying areas for improving the user experience.
¶ How is it done
- Understand your users.
It is important to consider what the needs of your users are and what problems they would like solved through using your product. Additionally, understanding what features are most important to your users and why can help you prioritise including those features in your user flow. It is also essential to consider the initial questions that users may have about your product and ensure that the necessary Information is provided for them to interact with it effortlessly. - Understanding user and business goals
Considering both sets of goals when creating user flows is essential because it ensures that the user flow is designed to meet the users' needs and supports the business objectives. For example, if a business goal is to increase sales, the user flow should be designed to guide users toward purchasing. - Create a flowchart
- Start/entry point: This represents the initial point of interaction for the user, such as the landing page or home screen of an app or website.
- Action or process steps: These are the specific steps the user must take to complete a task, such as filling out a form or adding items to a shopping cart.
- Page/screen: Typically represented as rectangles, there is no action to be taken.
- Connectors/arrows: These connect the different elements of the flowchart and indicate the flow of the user's journey.
- Decision points: Represented by diamonds, these are points in the flow where a decision must be made, such as selecting a menu option or navigating to a different page.
¶ Do's & Don't
Do's
- Clearly label each element in your user flow and use a different colour for each element (e.g., blue for screens and green for decisions).
- Have a legend key to help make your user flow more understandable.
- Have a clear entry point (e.g., login screen or homepage). If there are multiple entry points, make sure they are clearly labelled or break them into different flows.
Don't
- Please don’t make the user flow diagram too cluttered or complex, making it difficult to understand.
- Don’t forget to account for error states and the paths users can take to recover from them.
- Don’t overlook the importance of the user’s context and goals.
¶ Tools needed
- Miro
- Lucid Chart
- Other similar diagram creation online tools
¶ Example
