The idea of “flow” was first coined by a psychologist named Mihaly Csikszentmihalyi. He described it a highly focused mental state where the user is completely immersed in their tasks with a goal or task to compete it.
Often referred as “in the zone”, it helps UX designers better understand and anticipate the cognitive patterns of users in order to create products that activate the user’s state of flow.
In this article, Understanding User Flow in UX Design, we will discuss several aspects of user flows to gain a better understanding of what they are and how they are utilized in the design process.
Flow is a term that depicts movement. UX product designers should know the user’s path when it comes to navigating through the website or mobile applications, which prompts the use user flow.
The user path is divided into a series of steps, starting from the entry point through conversion funnels and towards doing the final action (signup, purchase, etc.).
User flow examples
Here’s an example of a purchase flow for eCommerce website screens:
User’s staring point: Homepage
From the home page, the user navigates to a product category
In a product category page, the user clicks a specific item and navigates to the item page
On the item page, the user adds an item to the cart and navigates to the cart page
From the cart page, the user navigates to checkout
From the checkout page, the user completes the purchase and sees a confirmation page
The eCommerce user flow example is what we often called the ‘happy path’, which is a simplified version of the user flow with a successful outcome.
In real life, there are several alternative paths like for example, the user wants to compare different products or read about delivery information. Thus, the user flows are typically described as flow charts with several nodes for different user paths.
Why create user flows?
There are so many reasons why you should create and use user flows, especially during the product’s design phase.
Here’s several advantages of user flows to your design:
Focus on a user-centered design
User flows help you think and focus on the user and how the user will navigate through your app screens or website. The reason for this is to help the user achieve their goal or task. It helps you create designs in a productive way.
User flows help users unveil any hesitations they may have when it comes to navigating through the different options, screens, features and controls of your product. It also reveals any possible areas of friction.
This can be helpful if you consider alternative user flows or if you are interested to simplify the original path before several expensive and time-consuming errors are made.
Prevent costly and time-consuming errors
We have been taught several important lessons on user flows by The London App Brewery, which according to them, if you need to change the way a user navigates or uses a feature, this can take a UI designer a few to several hours in Photoshop. Additionally, they have pointed out that if this realization comes at a later phase of the product development, it takes a few days to change all the codes, which can be very expensive too.
The good news is, with user flow, changing things can take several seconds or minutes only.
Now that we’ve established what UX flows are and their importance, we can look at why they are beneficial to the design process.
Studying the user flow of a website or mobile app screen can prove useful whether you are designing a brand-new product or revamping an old one.
User flows are extremely useful in UX design if you need to:
Create an intuitive user interface
One of the main benefits of designing a product to get the user “in the zone” is to increase the probability of a user purchasing or signing up.
Another advantage of user flows to UI is it helps enhance the ease of movement within the platform, making sure the user’s time is not wasted on looking for the next action. There could be several use flows to follow to complete the task. The point is with user flows, it helps UX and UI designers portray several possible patterns that makes it easy for them to assess the efficiency of the interface they are creating.
Evaluate existing user interfaces
For products that are already in use, utilizing user flow charts help determine what’s working, what’s not, and what areas need improvement.
In user research, It helps identify the reasons why users might be stalling at a certain point and helps designers provide solutions to fix it.
Product presentation to clients and colleagues
User flows can easily help you with communication of the user research product flow to stakeholders, It helps provide a general overview of how creating a user flow is made to function in the most efficient way.
User flows provide a step-by-step breakdown of what the customer will see and do next when it comes to making a purchase, logging in, signing up, etc.
By helping the design team visualize how users will move through the product ensures all team members is on the same page. In turn, this allows for a more productive and rewarding work environment.
User Flow vs User Journey
It is quite an understate when there are a lot of terms for the various deliverables of the UX design and one of the documents that many (especially the newbies) tend to confuse with user flows is the user journey.
User flow refers to mapping the paths the user takes on the website or application screens. User flow starts with user interaction on the website or application and ends with the user’s final action. In short, user Flow is a map of users making decisions on a website or app screens.
On the other hand, a user journey, starts way before the users reach the app or website. The rumors they hear about your product, the advertisements they see on the internet, the newsletters they get are all a part of their user journey.
Think of it this way: If user flow is a state, the user journey is the whole country.
Here are several key differences between the user flow a user journey:
Navigation vs life story
The user flows focus is on mapping out the user progress through different screens of the website, app, or product interface to achieve a certain goal.
On the other hand, the user journey is about one of two lines that explains a feature requirement, which is dependent from the point of view of the user such as what the user is looking for to accomplish a goal or task, or why the user needs it.
Technical vs human approach
User flows only focus are the technicalities and logistics of how a user interacting with the user interface app or website.
User journey, however, describes the user’s motivations and frustrations in detail. It describes the feature needed to make it easier for users to utilize the product.
Smaller picture vs bigger picture
In a user journey, you follow the user story through arranging story maps. This often consists of arranging sticky notes.
The user journey maps document in a bigger picture. Like mapping how the user hears and discovers about the product and the various touch points the users may access it through.
User flows, specifically relate to how a user carries out a particular task on the app on or website.
Overall, the key difference between the user flow and user journey is the end and the beginning. User flow’s beginning and end are definite. On the other hand, a user journey, however, continues.
The purpose of user flow diagrams is to show the actions of users on a app or website. It acts like a map of users’ minds when users are browsing the website or using the product.
Why is it important to improve and change the design of your user interface based on the needs of users? Simple: user flow diagrams help visualize the most efficient user experience that you want to offer your users.
When you utilize user flow diagrams, it’s easier to notice the elements and act upon them. This visualization helps the UX team to analyze user flow without missing essential details.
It could cost a lot of money when it comes to changing the UX design of your website or application. Thus, it is important that you find your user flow and design your website design according to your user flow diagram.
How to make a user flow diagram
When it comes to creating a user flow diagram, you should not do your best guess. Look at the data and analyze it.
Below are the suggested and example steps that you can do to make a good and working user flow diagram:
Step 1: Know the objectives as well as the users’ objectives
This is the first step as you cannot give proper directions if you don’t know what the destination is in the first place.
On a similar note, you cannot create a user flow unless you determine where you want your users to end up, and more importantly, what your users want from your app or website.
Also, be aware of your company’s objectives such as convincing users to purchase a product, sign up for a newsletter, or download an ebook.
A good start would be to create a customer journey map to give your company a shared vision of what the user experience should be. This will help visualize how a customer feels at different stages of their journey as well as the important touchpoints they might encounter.
You may also look at using a customer journey mapping software that can easily uncover how your users are entering your site, what they’re doing once they’re leaving your site, and what they’re doing on your site.
This information will influence the next steps in this process.
Step 2: Determine how users will find your website
If you’re trying to improve an existing website or mobile app start by digging more information. For example, Google Analytics will provide you with a breakdown of the percentages for each of the following entry methods:
· Direct traffic
· Organic search
· Paid advertising
· Social media
· Referral sites
· Email
Consider what these different entry points say about your users and think how you can better adapt the experience to what they need. These entry points will be the start of your user flow design diagram.
Step 3: Identify the information your users need and when they need it
Once you have the entry point, the next step is to consider what information your user needs and what actions they need to take. In order to convert users, you will need to deliver them the right information at the time they need it the most.
Ask yourself the right questions as you create your user flow diagram to get the mind of your customers. Example questions would be:
What action should I take on this page if I were my customer?
How do I navigate the checkout process?
If I were this customer, how would I feel about this testimonial video?
Aside from the example questions above, always consider what the customer wants out of a particular page. Also consider what he or she may be feeling, and what mindset they’re in.
For instances where you are optimizing an existing website, look at what kind of design is working now. In other words, when people buy or perform other successful activities, think of the paths they’ve taken through the website. Don’t focus on the purchase alone as it usually takes several visits to a site before a customer completes a sale. However, if a visitor signs up for your newsletter or submits text notifications via a pop-up, that counts as a success action taken.
Step 4: Map out your user flow
Once you have known your audience, their motivations, and the paths they’re raking in order to perform various actions, you can begin to now create a user flow diagram.
While you can create sticky notes to process your visual user flow diagram, you may also choose a visual workspace where you can easily drag and drop shapes into the user path and take notes of the opportunities that delight and inform your customer.
For visual notes, you can start with shapes that indicate entry points (such as organic, social or paid). You can also utilize low-fidelity wireframe shapes instead of just geometric shapes to give you an idea of what the website or app should look and where the calls-to-action should be design in placed.
Then you need to determine next what the landing page will be and what decisions your customer will have to make on that page. To do this, you can make further shapes and decision points until the flow is completed.
Also, remember that your user flow diagram may change over time, depending on how your audience changes and what their motivations are for navigating your site.
Step 5: Gather feedback, finalize, and share
For building a new website or application, share your user flow diagram with other team or stakeholders to gather feedback and make adjustments. This visual is especially powerful in these cases because stakeholders can properly understand the user experience and design, you’re proposing at one glance.
When you have finalized the user flow diagram, share it with the UX designers, web developers, software engineers, and other team members to provide context before they even start building or designing the website or app.
The user flow diagram shows the steps users are supposed to take when using the HealthMes application on the Apple watch. It’s simple but detailed and displays every action the users should take while checking the notifications,
Instead of using shapes, you can see that the user flow shows the screen of the watch. The flow is from left to right, and the commands are straightforward.
Music Player user flow is a bit more complex than the Apple Watch Health app user flow. It uses the color red for the flow and the options between steps. It also utilizes a black background, where important data gets highlighted.
Note that this flow displays every action the user takes. It has the changing screens but with the “the taps.”
The Student Guide website provides wireframes instead of a user flow diagram shapes. The wireframed diagram's entry point with the homepage and shows the other pages as users navigate to pages such as categories and user forums.
The detailed shopping website starts with the user adding an item to the shopping cart. Then, the user proceeds with the following options.
The map flows from left to right, and the diagram is multidimensional. The main steps are written above the diagram with the white and grey colors that separate the phases from each other.
The UX diagram shapes show the actions taken by the users. There are different routes available for existing and new users, but these all connect to the final step of placing an order.
Conclusion
User flows are important when it comes website and product processes. With user flow diagrams, you can fully understand the users to better design the website or app based on the users’ needs.
Additionally, UX diagram preparations before the design process can save time and money in the long run as you already offer the best version of the product.
While this article is comprehensive enough to start your own user flow diagram, we still recommend that you practice. Start by creating your own user flow of an existing website or app that you often use.
