4 Steps to Create a User Flow Diagram
Your users should be at the forefront of your design process. If a user can’t achieve what they want to on your website or app, they will go...
User flows are the foundational outline that’s key to every successful app, even though they’re rarely thought about by people who aren’t developers. A user flow diagram lays out the path a user might take as they travel between screens or individual features on an app. Understanding what comprises an efficient user flow can be what makes or breaks an app.
In this guide, we’ll unpack everything you’ll need to know to feel confident about user flows for app development. Topics discussed include what a user flow is, how to design a good user flow, and how it differs from user journey, along with implementing user flow wireframes and effectively testing your user flows.
What is a User Flow?
Think of user flows like a map. They paint a picture of where a user starts on an app then show that users’ forward movement through different features and screens on the app until they complete a goal. It describes the steps a user takes to achieve a desired outcome, like making a purchase or submitting a form.
The best way to describe a user flow is to give it some context. A common user flow is one that describes how someone on a clothes shopping app might make a purchase. If the goal is to buy a new shirt, the user flow could look like this:
1.User opens up the app to the homepage →
2. Scrolls through “recently listed” →
3. Finds a shirt. Add to Cart? Yes or no? →
3a. If yes, proceed to the payment screen →
3b. If no, return to browsing clothing items (step 2) →
4. From the payment screen, the user completes the purchase.
Another example of a user flow in it’s illustrative form is below, which shows the flow for how a user might log in to an app:
To use an analogy of developing a new town, user flows are what a city planner would create to layout the road systems. Some roads go from point A to point B, some roads are one-way streets, and some roads cut through downtown while others don’t. Eventually, people will drive on those roads to get around, just like how real users will take the pathways defined by a user flow. This is why it’s so important to have clear user flows defined while developing an app. These flows make the foundational structure of an app, so it’s important that they are designed to make the user’s movement through features intuitive and efficient.
How to Make a Good User Flow?
User flows diagrams shouldn’t be one giant diagram with many arrows going every which way and two dozen pathways illustrated as going out from the home screen. That would be overwhelming.
Instead, break a user flow down into separate steps and depict just one goal that a user might take during that flow. For example, logging on to their banking app and going from the home screen → checking their accounts overview. Then make a separate flow for going from the home screen → reviewing past account statements.
Adding on to that, try to avoid having a lot of circular or multidirectional arrows within a flow. If all the directional arrows between step A, decision B, and step C lead back and forth to each other in a loop, it creates a convoluted flow that is confusing both for the user and the developers.
Here is an example of a clean app user flow that covers a carefully selected portion of an app’s functionality. In this example, it’s the flow surrounding receiving support tickets.
User Flow vs User Journey
User flow and user journey are commonly used interchangeably. However, there is a nuanced difference between the two terms. Though both depict user pathways through an app, a user journey takes into consideration the user’s feelings and thoughts as they explore the app. It’s less about assigning context to how screens and features relate to each other and more about graphing a user’s first to last interaction with the app and their emotions along the way.
For example, a user journey about Spotify would be a segmented high-level overview.
- It would begin with the different ways a user could come to download the app, maybe from hearing a Spotify radio commercial or a friend’s recommendation. At this point, the user is intrigued by the new app.
- Once downloaded, the user can listen to music. There are a few ways to listen to music- such as the “browse” feature on the home screen, viewing a playlist, or searching directly for a specific artist. The user gets excited to see the music library.
- From here, the user could want to cycle through an album’s songs, but only be able to play it on shuffle with the basic account. This could leave the user feeling frustrated.
A user flow for the same process would be more specific, saying what screen is seen immediately after a user logs in for the first time and from there, what other features the user can access, like a search bar, a folder of favorite artists, and a “recommended for you” browse feature. It would answer questions like “from the browse new music screen, what does the user click next if they want to play music?”
Grafting a user journey can help identify potential pain points and negative user experiences. So it is important in its own right while remaining distinct from user flows.
Why is a User Flow Important?
There are many reasons why having a clear visual representation for a user flow is vital to an app’s success. A lot can be revealed in the process of designing one. While something might sound easy on the surface when it comes to app development, diving into the details can reveal how complicated an idea might be. Thinking through these scenarios upfront will help minimize complexities and make sure the whole development team is on the same page.
Benefits of Making a User Flow
- Less time iterating a product: It is much easier to change an idea than to re-code an already built app. Creating a user flow diagram can show how a pathway might not be ideal. Instead of getting into the thick of it and then having to backtrack to change both UX and UI for that feature, problems can be spotted and avoided from the beginning.
- Creating an intuitive interface design: With a clearly defined user flow, UI developers don’t have to sit around waiting for the UX team to create something just to get started. Designers can get the jump on making mockups for features and screens, ensuring it’s easily navigable and aesthetically pleasing. Because a “lot of the fat” can be cut out in drafting user flows, the interface can be designed to be intuitive and pleasing.
- Clarifying the idea to colleagues and backers: It’s surprising how different assumptions can be from person to person when it comes to developing an app. Let’s say a creator says their app should have the ability for users to log in to their account. The app creator imagines this will be done with a username and password, then take you to your profile page. Maybe a developer hearing the idea of a log-in screen assumes that a user logs in with their email address, then is taken directly to a feed on their home screen, not their profile page. Specifying a user flow removes accidental assumptions and makes sure everyone has the same clear understanding of the concept.
- Predicting potential frustrations: Visually having to write out how a user goes from one point to an end-goal can reveal if a pathway is too complicated. Sometimes features are revealed to be more complex than initially suspected, so they need to be retooled to create a more fluid user experience. Instead of building an app and patching complexities together, developers have the opportunity to create a flow that is instinctive and efficient for users, which will keep them coming back to the app.
User Flow for App Design with Wireframes
After user flows establish what a users’ needs are and how they would go about achieving goals within an app, wireframes can be used to take these ideas a step further. Though typically user flows are made before wireframes, these two elements of app development go hand-in-hand.
Wireframes allow developers to sketch out different ways a screen on an app might look and how that design leads users to other pages. It piggybacks off a flow establishing that an app user could go from a home screen and to their notifications inbox, to mocking up what that home screen looks like and if they would access their inbox from a button, a static menu category, or some other way.
A hybrid of user flows and wireframes are “wireflows.” This is where the user flow is pictured by using mobile screen mockups. Mobile screens naturally are easier to make a mock version of than full web pages. So sometimes you can see developers create their user flow through basic illustrations of what the app screen could look like, showing the user flow pathways between them.
Below is an example of a user flow depicted in wireframes:
Testing User Flows
The best evidence for if you have created a workable user flow is to test it with actual users. Design your app to include just the minimal viable products, so you can A/B test your user flows. Let users travel through the different pathways during beta testing, then take notes on their feedback. If one pathway provides a lot more friction for a user or a less enjoyable experience, then you’ll have your answer!
How to Make a User Flow Yourself
User flow diagrams are one of the most helpful tools in developing an app. Even if you don’t have technical knowledge, you can get started simply by drawing boxes on paper and sketching out how users might interact and travel through your app idea. User flow diagrams don’t have to be complex to be effective in defining pathways.
Think about the needs of your user and what problems they want to solve. Then pick one of the actions that they would take. Make a circle for an entry point, then draw the screen or experience the user would see next. This could be a rectangle saying “Welcome.” The next rectangle could be a task, like “browse library.” And from here, maybe there is a decision the user makes, such as “add to cart” or “see details.” It’s possible to have two pathways branch off from here with different outcomes.
This can be done by drawing on paper, crafting something in Adobe illustrator, using graphics in Figma, or any number of user flow/wireframe tools on the market. Simply thinking through this process helps streamline production down the line, by taking an abstract idea and explaining how this would actualize for the user.
So before you go full steam ahead in creating an app, take a moment to create an example app user flow diagram.
Interested in discussing what a user flow for your app would look like? Let’s talk about it!
You might also like:
Want to learn more?
Subscribe to our newsletter.
Recommendations:
How Communities Increase Habit Formation (and Retain App Users)
Why is it so much easier to be consistent with your workout when you go to your gym vs. exercising at home? And why does it seem so much easier to...
What's the Difference Between UX and UI?
It seems as if the terms user interface and user experience pop up together more than they do apart, which makes it easy for many to assume they’re...