When it comes to designing digital products, UX design is unquestionably one of the essential process for developing better products.
Of the many stages of the UX design process, defining the end-users’ goals, actions, and expectations via user flowchart is a crucial step in determining the functions and features of the product from the perspective of a user (remember User-Centered Design?).
Just imagine a potential customer trying to purchase a product from an online store and is required to register for a user account even though the user beliefs it will be a one-time purchase. The additional and unnecessary steps it will require the user to set up the account before he/she can proceed to purchase the item may very well drive the customer away.
For that reason, defining What’s the Flow (abbreviated as WTF in the title) from a user’s perspective, figuring out a step by-step user flow before any actual UI design is created will ensure that the product being developed will offer the right functions for the right users at the right time.
User flows are:
a series of steps a user takes to achieve a meaningful goal
used to communicate the intended flow of a user through various pages and actions in an app or website
visual diagrams with description of what happens at each step
Benefits of Drawing User Flow Chart
1. Ease of Presentation and Communication
Provide a step-by-step view of how the interface is intended to work (e.g. purchase, log in, sign up, etc.). Allowing product owner or teammates to visualize the user flow in the most efficient form.
Visualizing the user login flow, making steps easy to understand
2. Evaluate Task Flow for Improvement
Enhance the ease of flow by evaluating and eliminating unnecessary steps, thereby improving efficiency of the interface and enhancing user conversion rate (e.g. registering an account or purchasing a product).
Validating an email address and password can be done in one step
3. Create an Intuitive Interface for Users
Helps to identify weaknesses in the user flow and see what options are available to help user accomplish a task innately and without wasting time.
Should login fail be directed to a Reset Password page? Or is there another appropriate option?
Stages of User Flow Chart Development
User Stories: Short and simple descriptions of a feature told from the perspective of the product user
Task flow: A single flow that focuses on how users perform a specific task
Wire flow: Convey the page-to-page sequence with individual page layout
User flow: Convey all the pathways with process and individual page layout
Elements of a User Flow Chart
Each node in the flowchart is represented by different shapes, and each shape indicates a particular process:
Most used elements of a flow chat
Best Practices for Creating Flow Chart
1. Use Even Sizes and Spacing
Consider making all flowchart symbols the same height and width (does not apply to symbols that is intentionally smaller). Try to maintain even spacing both horizontally and vertically between symbols.
2. Consistent Flow Direction
Flowchart should be top-to-bottom or left-to-right (or right-to-left for RTL languages). Avoid mixing top-to-bottom and left-to-right flows in the same flowchart.
3. Consistent Branch Direction for Decision Symbol
Use consistent flow direction for the “Yes” (e.g. right from the Decision symbols) and “No” (e.g. bottom from the Decision symbols) condition.
4. Merge Flow Lines to Simplified Visual
A page may often have more than one subsequent flow line. Improve readability by merging flow lines so that they convey a sense of hierarchy and sequence.
5. Use Sub-flows or Connector Nodes
If the user flow is running exceedingly off the page because it’s too long, use a Sub-flow or Connector Nodes (labeled circles) that serve as jump points from one part of the process to another.
6. Use Colors Wisely
Using too many colors can be noisy and may distract your reader. Use colors to help reader identify and group resources, and highlight important user actions.
7. Avoid Confusion in User Flow
Avoid any confusions by using hop-lines or rounded corner connectors to links between screens and actions.
Hop-line
Rounded corner connectors
8. Include Symbol Legend
Include a flowchart key to describe the meaning of symbols, shapes and colors if you use more than the usual basic ones (process, terminator, decision, document).
There are many online tools available for designing user flowcharts. Furthermore, most of them support remote collaborative feature to encourage team collaboration or allow for client/team co-creation. The following are a few examples of online tools which provides a decent amount of features for creating user flowchart at no-cost to get you started.
1. Draw.io
2. FlowMapp.com
This post was inspired by Alexander Handley’s article from Medium.com and references has been taken from it. Visit course section to check out our Certificate in Business Design course. This course enables you to upgrade your UX skills by learning the practical concept and technique of UX design and designing user flowcharts.
Related Workshop and Course: