User flow

Innholdsfortegnelse

What is user flow?

A user flow is a user experience (UX) concept that investigates and documents the user actions required by a typical user to complete a defined task.

When complete, your user flow chart describes how the user will travel from an entry point (or entry points) through a set of distinct touchpoints and towards a successful outcome and final action, such as completing a sign-up.

There’s no one way to build a user flow, but many product managers and UX designers build user flow diagrams by starting with flow chart templates in tools like Figma, Miro, and LucidChart.

Here is a flow chart example from Balsamic:

diagram

A user flow chart is typically owned by product managers, user experience teams and designers, and/or product development teams to better understand the usability of a website, mobile app, or software product.

At the same time, user flows are helpful for all stakeholders in understanding customers’ experience of the product. Other teams who will have an interest in but not ownership of user flows include:

Customer teams (sales, customer success/service, account managers)
Product marketing teams
Wider product management, design, and product engineering teams whose work is adjacent

How are user flows different from task flows or a user journey?

All of these tasks are UX flows and are part of developing a customer-centric mindset, but each of them serves a distinct purpose for the product management and product design teams.

Here’s a quick overview of the differences between the three tasks:

Task flow	User flow	User journey (customer journey)
Simple pathway	Complex pathways	Incorporates data from task and user flows into a customer journey map
No entry or exit points	Features entry and exit points	Builds in problem and solution in wider context (both in product and in accounting for other tools)
Sequential with no branches or decision points	Shows branches, decisions, and options to account for user choice	Articulates the emotional side of using the product
Fits into larger user flow		Identifies areas of focus based on opportunities to surprise and delight customers

When should you create a user flow?

Is every single new feature or UX change worth building a user flow?

The answer is: it depends.

We know that plenty of app developers, in particular, don’t prioritize user flows, particularly when you have high-quality prototyping software. And we understand the hesitation to add more steps into the process, particularly when resources and timelines insist you streamline the build.

However, when you have the resources, you’ll want to create a user flow chart for any new feature or substantial UX change.

Why? Because a user flow will:

Give your users the most intuitive experience from day 1
Keep you user-centered and organized
Help you continually create seamless experiences by ensuring you document, understand, and iterate from baseline information

When you zoom out to the rest of your stakeholders, producing user flows will:

Help colleagues understand users better
Allow you to work more closely with other teams to find optimization points
Align your user flows with the data produced by other teams

At what point in the design process should you build your user flows?

You want to fit it in after the initial user research and discovery process and before creating the wireframe.

By starting early, you can use it in customer research to iterate without creating a graveyard of wireframes, wireflows, and high or low-fidelity mockups.

Typically the workflow goes like this:

Finish user research and discovery and generate analysis
Complete task flows
Build user flowchart
Create low-fidelity mock-ups, wireframes, or prototypes
Build a wireflow or screenflow (optional)
Begin usability testing
Iterate on the above

How to start building a user flow chart

By the time you’ve completed your user research and analysis, you will have most of the information you need to start your user flow.

But what’s the most relevant information for this exercise? In our experience, the questions you need to pull out of your analysis include:

What are the user goals for the task?
What is important to the user and what will give them confidence to continue?
What additional information will the user need to accomplish the task?
What are the user’s hesitations or barriers to accomplishing the task?
What is the entry point?

The answers to those questions will inform how you design the pages, and determine what content and navigational links to include.

For example, if the primary user goal is to browse various items, your page or screen will offer a different design and functionality than it would have if its primary goal is to purchase a product and move on.

diagram

How many steps should be in a user flow?

The answer is highly dependent on the task, types of user, and your vertical.

A shorter user flow doesn’t necessarily indicate a better experience than a longer user flow, particularly if it’s missing out on potential user interactions or oversimplifies users’ objectives.

For example, a landing page user flow is going to be less complicated than the onboarding user flow for an app offering both freemium and paid versions.

User flow example

User flows can take many different forms, depending on the type of website or app you are building. For example, for an ecommerce site, a typical user flow might look like the following:

The user starts on the homepage
From the homepage the user clicks onto a category page
From the category page the user clicks on a product
From the product page the user adds the item to the cart
From the shopping cart the user checks out
From the checkout screen the user completes the purchase

In the real world, users can take many different paths to purchase. For example, in the scenario above, the user could go back to the category page to view more products instead of going directly to the shopping cart. Or they could use search to navigate the site instead of clicking through the site hierarchy. Or the user could come in from a different page other than the homepage.

Because there are many different paths that users can take, user flows are often modeled as flow charts with nodes for each of the major navigational paths. The purpose of user flow analysis is to identify the main user flows through your app or website and identify areas where the navigational flow can be improved.

Free user flow templates to try

Want to get your user flow map started quickly or find some help to stay on track? There are plenty of free user flow templates available and validated by product team members at some of the world’s most user-centric companies.

Here are a few of our favorites:

You can also use dedicated tools like:

Overflow - a user flow diagramming tool that animates your imported user flow designs
MockFlow - a brainstorming tool to help visualize your ideas before documenting them
Timblee - a UX planning tool designed for

Don’t forget to account for leaky data

Collecting data on each step in your user flow will allow you to evaluate how your users navigate your product or webpage. By their very nature, funnels will shrink at each step where users drop out. Data will indicate where your funnel is ‘leaky’ (with a large percentage of people dropping out between steps) and might need help.

To close up the ‘leaks,’ consider where you can correct points of pain or friction, where to offer more information, and where to reduce distractions and offer less.

For example, on an ecommerce site, you might conduct a user flow analysis and notice that a lot of people are getting to the shopping cart but not completing their purchase. By identifying that shopping cart abandonment is a problem, you can start generating hypotheses for why users are dropping off at that point.

It could be that your shipping rates are too high, and users are getting sticker shock. Or perhaps there are too many fields to fill out, and customers are losing interest. Or perhaps the navigation is not clear as to what action to take next.

Once you’ve generated a hypothesis for why your user flow is suboptimal, you can begin A/B testing your ideas to determine which of the changes will have a positive impact on your user flow.

How A/B testing can help improve your user flow

A/B testing is the process of comparing two different versions of a site or app against each other to see which one performs better using real-world data. A/B testing is a great way to validate hypotheses about changes to your site or app.

By going through your user flows, identifying opportunities for improvement, and testing different ideas, you can continually improve your conversion rates.