What are flow diagrams and how do they play a role in UX?

Before you start designing or building your app, it's important to get clear on how it will all come together, especially if you decide to use a no-code tool such as Bubble or Adalo.

How will a user navigate through your app to access different screens or features? How will they achieve the task they set out to complete? To flesh out these critical details you can use flow diagrams.

Before we dive into flow diagrams, first we have to define what a flow is. A flow can be defined as a path a user might take in your app. A flow diagram (also known as a flow chart) allows you to illustrate that path to explore how a user would navigate through your app on a high level or to complete a specific task.

In other words, a flow diagram illustrates how a user might get from point A to point B and any turns they'd have to make along the way.

Flow diagrams play an important role in design, but more specifically the UX process. They are a valuable tool that helps you flesh out the experience a user will have navigating through your app on a general or detailed level.

When done right, it allows you to explore different ways a user might be able to accomplish a task, define actions a user will need to take to move forward, and catch any underlying issues such as where a user might get stuck. For apps with complex flows, flow diagrams can help provide clarity before diving into design and development.

There are a few different types of flow diagrams you can make but they all serve a different purpose.

An app flow diagram is similar to a sitemap for websites. It’s used to outline all the screens in your app and illustrate how a user might access each screen on a high level. Think of it as a map that shows a bird’s eye-view of everything, and gives you a general direction of where you can go in the app.

For example, an app flow diagram would illustrate what screens a user can access from the home screen or if they are logged out.

For anyone new to making apps, I recommend creating an App Flow Diagram once you've established your scope. This will set you up for designing and building the app by helping you to map out every screen you'll need based on the features you expect to have.

A task flow diagram focuses on a single, isolated flow performed by all users for a specific action or task. They are generally linear without multiple branches or paths unlike user flow diagrams as you’ll see next.

For example, a task flow diagram might illustrate the steps a user would take to sign up for your app from a screen level.

I would recommend creating task flow diagrams for simple, common tasks such as how a user would sign up for your app or how they might retrieve a forgotten password.

A user flow diagram is similar to a task flow diagram except it offers a more in-depth look at how a user may complete a task including how the app should respond with user behavior.

For example, when a user tries to sign up for your app, a user flow diagram would also illustrate what happens if they already have an account or if they didn't fully complete the form but hit submit.

If you find yourself overwhelmed or unable to explain certain flows or tasks for your app, such as how a user might invest in a project or make a purchase in a marketplace, then I recommend creating user flow diagrams. They will allow you to gain clarity on how a user will be able to successfully complete a task and as such improve the overall experience of your app. If you can't illustrate it in a diagram, a user will probably be confused too.

A wireflow diagram combines wireframes with an app flow, task flow, or user flow diagram to offer a full picture of an entire flow. It allows you to not only flesh out a flow but tie it directly back to the user interface.

If we use the same example as above for user flow diagrams, a wireflow diagram would include wireframes that showcase where certain actions or results would take place, such as the button they would click to submit the form or the notification that pops up if they forgot to finish the form.

Wireflow diagrams allow for much better clarity and collaboration when working with a team. If you like the idea of having the visual alongside your flow I would recommend creating them after you've created the underlying user flow diagram and accompanying wireframes separately or at least once you have a handle on creating them. Otherwise, it might be overwhelming to tackle both at the same time if this is your first time doing it.

Depending on the complexity of the app, you might only ever see the need to create an app flow diagram. And it’s one of the first items I recommend creating as part of the design process of your app.

If this is the first app you’re tackling on your own I would also suggest creating task flow diagrams or user flow diagrams for key tasks in your app. Even if it seems unnecessary, at the very least it’ll help you gain a clearer picture of how to move forward when designing and building your app.