Crafting User Flow
Regardless of what type of website you’re building—you want it to be successful. One of the best ways to achieve this is to shift your focus to a user centered design. After all, happy and engaged users translate into lower bounce rates, more time on site, and increased page views. When planning your website, it is important to think about how your users will interact with your pages and content. It is important to identify user entry points, goals, and all the steps in between.
Planning user flow in advance guides your overall website building process. Once you have a high level understanding of what the user will be doing on your website, deciding on what content to create and where to place it becomes a much simpler task. This process also helps with team planning, by first aligning the stakeholders. While it will take some extra time to initially craft your user flow, think of the time and money you will save when you reduce revisions, excess pages, or unneeded content.
What is User Flow?
Simply stated, user flow describes how a user will move through a website or an app. User flows are typically designed in the form of a flow diagram—a visual representation that shows the various website locations your users will visit along a particular path, from entry point to goal. It is important to understand that even simple websites may offer multiple paths that users may follow to reach their goals.You may find it helpful to create multiple flow diagrams for each user type or persona rather than try to include everything in one diagram or one path.
Interested in learning more about user flow trends on best practices? Check out our User Flow Blog
When to Create User Flows
It is important to understand how user flows fit into the big picture of website planning. User flows are most helpful in the early planning phase for a new website or a website redesign. A user flow diagram can be very helpful in documenting the steps needed for a user to reach their goals. In effect, this process identifies which pages you will need to create and how to arrange them.
User flows are essential for diagnosing improvements in an existing system. By recognizing key goals and the paths users take on your site to accomplish these goals, you may identify flows that are not as optimal as they could be. Look for ways in which you can reduce the number of steps it takes to reach a particular goal or reduce any content that may not be relevant to the user. You may find opportunities to lead different types of users on a particular user flow path, increasing the chances to offer them targeted and relevant content or activities.
Creating “Flow”
The term “flow” was coined by psychologist Mihály Csíkszentmihályi to describe a “feeling of energized focus, full involvement, and enjoyment in the process of the activity.” Creating user flow diagrams should be about more than just the diagram or the website itself. A website that has good user flow is one that does not interrupt the user’s mental thought processes as they navigate through it. When you clearly understand your user’s goal before you create a user flow, you avoid added distractions or unnecessary clicks in a user’s path.
Optimize, But Avoid Fast-Tracking Conversion Funnels
When you shorten user paths on your website and remove irrelevant content, you must also use care not to fast-track your users to the end goals too quickly. This is particularly important for conversion funnels. Your goal is to get the user to buy your product, sign up for a service, or join a mailing list. The user’s goal is generally to learn more about you, buy into a product or idea, research alternatives, decide whether to buy a product, or take an action. If you understand each point in between the entry points and the end goals are key to getting them closer to make a decision or take an action. When you force a user decision or action too soon, you risk a premature exit by the user from your site.
User Experience and How it Relates to User Flow
A good user flow diagram can quickly and easily be diagrammed and shared. The tasks that lead to a well-designed user flow are meant to be nimble and freeing. Crafting optimum user flow offers a top down approach to designing exceptional user experience and user interface. The user flow diagram is the foundation in which you should be able to filter information for your Information Architecture (IA), Interaction Design, and User Interface (UI). User experience is ultimately a sum of many parts; however identifying potential pain points, gaps, or dead-ends in your user flow is a good first step that will go a long way toward ensuring good User Experience.
User Flow Tools
User flow tools come in many shapes and sizes - they are sometimes called UX (user experience), UI (user interface) or IX (interface experience) flows. They help web developers and designers visualize the path that users will follow through an app or website.
While user flow (especially the word “flow”) may sound like a flowchart or diagram, that is only part of the story. User flow diagrams, in their true form, are hybrids of flowcharts and wireframes. They closely mimic, though aren’t the same as, site flows. See how they differ.
How to Draw User Flow
The wireframes represent the skeletal model of the design -- often with placeholders for copy, images, and calls to action sketched on the page. However,user flow need both wireframes and flowcharts to show how the user is expected to travel through the app or website.
For example:
- User lands on homepage from search
- User enters main navigation and chooses products
- Product page delivers content, images, specifications of interest to the user
- Call to action encourages user to purchase product
- Link leads user to shopping cart and payment gateway to complete purchase
This is just one example of how user flow tools can represent UX, but ideally, user flow should capture any major transaction or conversion on your site, so you and your team can appropriately plan the design and experience.
When drawing user flow, you can use numbers or arrows to represent the stages of a user’s engagement in each wireframe. These represent how the user should travel the website UX.
How Designers Plan User Flow
Drawing a wireframe starts with collaboration, often between designers, digital marketers, and content experts. These professionals plan for various situations, including how users find the site or app, what they read, what they see, and how it lays the foundation in the design itself, which is essential to the UX.
But when user flow diagrams enter the process, the wireframes and user path or journey intersect. Before a designer plans a user flow, it’s essential to know:
- What does the user need? What are they trying to accomplish on the site?
- Who are your users? What skills or life experiences are bringing them to your site, product, app, etc.?
- What are the most important pieces of content or information that users should interact with on the site?
- Where are we trying to convert the user? What’s the end-point of their journey?
User flow that does not outline purpose, conversions, and true user needs are doing a disservice to your design process. Other pitfalls of user flows can include:
- Over-reliance on user characteristics and personas. User flow shouldn’t capture every possible visitor scenario: They should capture the ideal journey.
- Putting too much stock in the wireframes. Wireframes are a component of user flow, but not the solution. User flow planning is meant to outline wireframes and the journey to see where obstacles may stand in the way of UX. Consider using flowcharts along side wireframes, to show different paths and decisions a user can take while navigating a site.
As you answer these questions and build your wireframes, you can start your user flow. Slickplan Diagrams can help your team collaborate and build detailed, useful user flow diagrams for your team.
User Flow Analytics
User flow is part of the design planning and development process: It’s a way to capture the most favorable journey and experience that users will have with the design and conversion points or calls to action. It’s not visible to the end users, since it’s part of the planning and “blueprint” process of the website.
Nevertheless, if you build your site or app the way you outlined in your user flow plan, the user experience can be easily tracked with UX specific data and analytics. Utilizing and understanding user flow metrics is crucial towards building a successful site. It’s impossible to predict all possible user behaviors in the site planning stage so to track your user flow success once your site or app is live, consider using:
- Google Analytics Users Flow - Google describes its Analytics Users Flow as a “graphical representation of the paths users take through your site” including sources, pages, and where they exit. These flows can be tracked by establishing Google Analytics goals and tracking their success.
- Google Analytics Behavior Flow - Similar to the Users Flow, the Behavior Flow tracks how users travel from page to page, or to events on your site. According to Google, this is a great way to track the success and interest your content has for users.
- Google Analytics Goals - Goals can be easily established in Google Analytics in the Conversion settings. These allow administrators to track specific conversion points like goal destinations, duration (such as a goal for watching videos or reading a page of content), pages and screens per session, and event. Events are great for downloads, forms, video plays, and more.
- Google Tag Manager - This takes Goals a step further and allows admins to collect, configure, and report on a host of events and conversions inside your website or app. As a free tool, it’s a great way to gain insight into the snippets of your website where you’re trying to drive the most conversion.
If you have a user flow in place and you’ve gotten useful data from tracking, learn how you can fix any gaps to improve your user flow and create a better user experience for your visitors.
Previous
How to create a diagram?
Get started by creating your own website flow diagram from a user first perspective. Learn our step-by-step methodology.
Next
Diagram reference symbols guide
Slickplan uses industry standard symbol libraries. Take a detailed look at the meanings and usage for each diagram symbol, connector, and design element.