Get an overview of how users interact with your UI or digital touchpoints using UX flow charts.
- What is a UX Flow Charts and Why Use One?
- 1. Establish the Scope of Your User Flow
- 2. Decide Upon the Fidelity of Your UX Flow Charts
- 3. Find the Right Tool for Creating Your User Flow Diagram
- 4. Start by Mapping the Structure
- 5. Make Notes on Related Interlinking
- 6. Flesh Out Content and Functionality
- Finding the Balance
What is a UX Flow Charts and Why Use One?
The most effective UX flow charts draw inspiration from 3 existing tools user experience professionals already use. These are:
- Site tree diagrams.
- Flow diagrams.
1. Establish the Scope of Your User Flow
Be clear about what your UX flow chart will cover. I find it preferable not just to cover the site or app you are working on but also some of the steps that precede or follow it. That helps to provide context to the project you are working on.
For example, when creating a UX flow chart for a website, including how users arrive on the site can prove invaluable. Also, you may wish to include any interactions that immediately follow users taking action on the site (e.g., any emails sent to users).
2. Decide Upon the Fidelity of Your UX Flow Charts
Many describe a UX flow chart as a series of boxes and arrows representing users moving between pages, screens, or other touchpoints. Personally, I have described above, I see it as more detailed than that. That said, both approaches are valid.
Which end of the spectrum you lean towards will depend on the complexity of the interaction you are trying to map.
If the user’s journey is strictly hierarchical with straightforward branching nodes, then a flow diagram or site tree diagram will be sufficient.
However, suppose the interactions are more complicated and have many different options and cross-linking. In that case, a detailed user flow chart will prove more helpful because you will have a clear understanding of the content of each page.
3. Find the Right Tool for Creating Your User Flow Diagram
The tool you choose will be dependent on the fidelity of the UX flow chart you are trying to create.
For example, if you want to create basic flow diagrams, you could easily do that in Powerpoint or Keynote. That said, there are also tools like Lucidchart that make the process somewhat easier.
4. Start by Mapping the Structure
Start by mapping just the primary structure of all the pages. What is the main flow the user will go on, and what are the primary points their journey may branch.
For example, if you are working on a website user flow, focus on mapping the primary navigational system (found on the menu bar).
Draw these up as a series of interconnected boxes.
As you are planning the basic flow, you will identify secondary navigational connections. For example, you might decide the homepage needs to deep-link to something buried in the primary information architecture.
If there are only a few of these secondary links, they can be added as connections between pages. However, this can quickly make the diagram unreadable if there are too many of them.
If that is the case, make a note of this cross-link to visually represent it when we flesh out the individual pages.
6. Flesh Out Content and Functionality
If you are creating a more detailed UX flow chart as I described earlier, you will need to revisit each of the ‘boxes’ you identified in your initial version and visualize what is happening at that step.
In most cases, this means showing what kind of content will be displayed on the screen in low-fidelity form. However, it might also mean showing secondary links, state changes, or even backend processes, depending on the specific use case.
Finding the Balance
Ultimately creating a UX flow chart is about finding a balance. You want to visualize any complexity of the interaction, but not to the point where the flow chart becomes unreadable.
Too little information and it becomes nothing more than a traditional information architecture or flow diagram. On the other hand, too much information, and you might as well have built an interactive prototype.
UX Flow charts help me think through the journey the user will take through a digital service and consider the various stages in that journey. However, they are easier to produce than a complete set of wireframes. This middle ground makes them a valuable tool in any UX professional’s arsenal.