How to Understand UX Flow?

When people see a tiny diagram of few blocks, many don’t quite understand why this primitive tool is so important. Does creating a sequence of easy steps really take more than few minutes?

Here are the questions that clients think of but don’t ask because they don’t want to look unprofessional. We’ll try to answer them in this article and explain why UX flows are one of the most effective tools to build a smooth user experience.

What is UX flow?

UX flow is a diagram that shows the path a user goes through when using your product from the start point to the final interaction.

For example, if our product is an e-commerce website, a UX flow may be something like this: choose male jeans in the drop-down menu — click on a pair — watch other pictures — choose size — click “order” — enter data for delivery — enter payment details — click “pay”.

Of course, such information is much better perceived when visualized, so user flows are typically organized in a group of blocks that look something like this:

How to build a UX flow?

User flows are created at the initial stages of the design process, however, designers refer to them later as well. If we squeeze the design process into a sequence of main steps, user flow would be a part of the UX strategy.

Building a diagram of few blocks may seem an easy task, but to make it correctly, UI/UX designers have to dedicate quite some time and analytic work to it. Here are the main steps:

1. Research. Most of the work with user experience starts with research. You have to find who your target audience is, what are their needs and how they solve the problems. Looking at competitor products also can be useful to get some ideas about UX flow.

2. Define the task — the goal that the user has to achieve with the user flow.

3. Create a sequence of steps. Don’t worry if these steps don’t look perfect yet: going through the iterations is totally normal and is actually positive for the product.

4. Design each step. It can be a detailed wireframe or just some key elements, or you can skip this step completely if you are building a basic diagram. User flow does not have a single correct look, as you can see from the examples in this article.

5. Add description. If you plan to work on UX flow jointly with other team members (which is highly recommended), make sure that the diagram is as understandable to other people as it is to you. In case you created it all together, this step can be skipped.

6. Evaluate and refine. Make sure that you have designed the shortest way of reaching the goal. Think of the points where users might have some issues and how you can address them. Ask your teammates to give their opinion, if you haven’t involved them yet.

Building a solid UX flow is worth the time invested: being the basis of the product, it would be way more complicated to change something at later stages when the prototype is done.

What is it used for?

First of all, UX flow helps to structure designer’s work. It is like a table of contents for a book: you clearly see how many screens you need, and what should be on each of them.

Secondly, having a user flow at hand connects designers to the users, makes them see the product from the other side. Keeping the focus on users and their interaction with the app or website is a key for creating a product that people would love to use.

Another benefit is that user flow facilitates in-team communication: a diagram is easier to understand and discuss than the multitude of screens.

And finally, UX flow is used to detect weak points in existing design: all those pain points, bottlenecks, and usability flaws. Structured as a simple diagram, it allows us to focus on the essence of user interaction without being distracted by all the visual elements.

Types of UX flows

There is no single canon for a UX flow. Depending on your product and specific objectives, you can choose one of few kinds of user flows — or make your own tailored one. Here are the most common types.

Flowchart

This is the same simple group of blocks with arrows that you have seen in the beginning of the article.

To better structure the steps, you can use traditional symbols of algorithm visualization: rectangles for simple actions, diamond-shaped blocks for choices and ramification, and so on.

Task flow

While user flow can include more or less complex scenarios, task flow is limited to just one task. It won’t have ramifications. Task flow shows the “ideal” way of achieving a goal and leaves out all the potential issues that a user might face.

Wire flow

This type of user flow includes wireframes attached to each step. (Wireframes are simplified representations of screens, showing only the structure of the page and the layout.)

In this picture, the wire flow of a mobile app looks clean and clear. In the case of a desktop app, big screens might look a bit messy, so make sure to keep it readable or go for a different way of visualization.

Screen flow

Screen flow designed by Eleken for Findo, money transfer system

This user flow is similar to the previous, but instead of wireframes, we use actual screens. It can be done at the later stages of the design process when the user interface is ready. Screen flow is one step away from the prototype.

To sum up

UX flow is a simple concept that does big work for creating a good user experience. The visualization of user flow can be as basic or complex as you wish. The important thing is to take it seriously and not fall into the temptation of using the first standard flow that you see elsewhere.

Hopefully, after reading this text, you won’t be confused next time you hear about UX flow. Curious to learn more? Check out this article about user experience flow.