In UX design a flowchart is used to visually represent user flows or user tasks. More specifically, a flowchart is a diagram of a process using a set of standard symbols and connecting lines.
Flowcharts are used in many different fields, not only in UX. However, it's a great tool to have in your UX design arsenal and is an effective deliverable that will help you get acceptance from potential stakeholders. They can even participate in this exercise, which is a huge advantage, because they feel more invested.
Flowcharts can also serve as a fantastic discussion piece for your team and to get a collective overview of the entire process. Identifying potential flaws becomes so much easier and the scope is suddenly crystal clear for everyone involved.
Let's have a look at the most common flowchart symbols used in UX design and what they mean.
The oval symbolize the start or the end in a flowchart.
The rectangle symbolize steps in the process. This is your go-to symbol in any flowchart and by far the most commonly used.
The parallelogram symbolize input/output.
The diamond symbolize decisions. This will typically split your flowchart using arrows.
The arrow symbol is used to represent a flow direction. This will be, coupled with the rectangle, your go-to symbol.
Let's have a look at how flowcharts can be used in a UX context with user flows and task flows as examples.
A user flow helps us get a better understanding of the steps a user takes through an entire service, app or a website (i.e. from entering an eCommerce site to purchase confirmation).
The example above show a very simplified version for illustrative purposes and could include more decisions with branches.
However, I like to keep them related to a user goal, so that it doesn't get overly complicated. Once you have all your user goals mapped out as flowcharts, you can merge them all into one single diagram to see the bigger picture.
A user task on the other hand, is a more isolated part of a service, app or website (i.e. checkout process).
Again, the example above is a simplified version for illustrative purposes. It could include more decisions with branches.
Task flows should be simple, so don't over complicate things. The point is to isolate specific user tasks within user flows. A deep dive so to speak.
As you can see, using flowcharts as a tool in your UX design process offers a lot in return with very little effort.
It's easy to pull off and works well as a team exercise. Go fast and iterate quickly.
Whether you're preparing for your first interview, switching jobs, hiring for your company or just want insight into how things are done; this book is a must-read.
It gives you a step-by-step framework to follow and teaches you what to expect. The book even goes into the business side of design (a huge competitive edge).
Alexander Graham Bell said it well:
"Before anything else, preparation is the key to success".