Updated date:

Fundamental Concepts for Improving Your Website or Apps User Flow

Sketching user flows

Sketching user flows

Creating a user flow that produces efficient flow through your products app or website helps streamline the journey from searching, finding and buying, while having an inconsistent journey with distractions to users creates a product that is likely to underperform and lose users to competitors.

This article is all about the website or app design process and how there are fundamental processes every company needs to go through to ensure they are successfully gaining users with good user flows through apps and websites, rather than losing users due to poorly thought-out design.

What is a user flow?

Going back to basics, a user flow is how the user moves through the app, how they make choices and how they go from landing page to the next page and so on. On a micro level, this is about specific actions taking users from one page to another.

These flows are often the path you want your users to take through your app or website. The initial flow creation is often done during the wireframing process whereby you guide the user to carry out specific actions to get from A to B in a more macro process. Companies want to guide the users on a macro level when creating their product, this guiding hand ensures there are no distractions and users do what the company wants them to do.

This flow is one of the most important aspects of app or website navigation you need to concentrate on.

Why is it important?

Every decision you make on both your user flow and journey impacts the effectiveness of your app or website. Baymard calculated that for e-commerce specifically, there can be a 35.26% increase in conversion rate just through a better user flow through checkout. In a world with such high competition in every marketplace, an effective design can put your app or website a cut above the rest.

User flows are not only important for product success, but also to give you a clear product foundation. As Mentormate says: “these user flows then allow you to build a site map and taxonomy to define the overall information architecture”. It is also important for how you create your overall product, you build out from your flows to create a structurally sound product, but also a refined one.

Main fundamentals

Break large flows down, create simple flows into and out of each page. This not only helps create simple navigation, but it also allows you as the designer to guide the user to a very specific part of your app or website. This is especially important if there are multiple target audiences with different page destinations.

For example, a car rental company wanting to create an app to rent out their cars. A simple way of creating an effective user flow would be to create a landing page with the map on it, a search bar to find cars nearby, then a price and availability – then you would want to get the user to sign up once they have seen this. The main page of the app is the map – figuring out how to get to other parts of the app such as booking a ride, the user profile, journey history and so on determine how the user will interact with the app. Eventually in the finished product this could become a large flow from start to finish, but keeping this simple initially ensure your navigation is usable from the outset.

Create an easy to remember navigation path in and out of pages, stay consistent when implementing backlinks or homepage navigation. Depending on the type of app you are building this will vary but be consistent. For apps with a central interface screen, such as the timeline on Twitter, let the user go back to that homepage after leaving other less important features such as search or trending. Guiding the user to always go back to the page you want them to interact with most. For apps with more complex interfaces such as e-commerce sites that use breadcrumbs to go to searches or categories, use backlinks throughout the design, this is critical in how the user thinks about those interactions by letting the user go back from a product back into a sub-category, and back to a main category, the same way they came to find the product. This saves the user time and frustration by making their decision-making process natural.

Keep your fundamental app consistent, when you start creating hi-fi designs it’s easy to overcomplicate things with nice UI elements but remember the main journey you want your user to go on. If your app is a taxi finding service design the fundamental process of a user calling a taxi to your location and then design the rest; or if you are designing a recipes app you will want users to search for recipes and discover new recipes as quickly as possible.

Take the car rental app example from earlier. What issues might the company face by not optimizing the user journey? One might be mistaking the profile page for the home page and taking more time for the user to get to the important page where they find travel and pay for it. But another issue could be poor integration with payment, perhaps a user has found their ride on the map, the price comes up in a pop up but when you click on it the app takes you to a third page outside the map – this might seem nit-picky but it costs the user time to pay for the ride, it creates a new loading page as well as various other page states such as payment, confirmation or exit page. Concentrate on the fundamentals and get them right for your product so the user can carry out their transaction as simply and quickly as possible, the rest of the journey should be built around that.

Remember to test as often as possible, usability testing to check your app navigation is taking users where you want them to go. A successful product will have tens of thousands of users and testing your navigation out on as many people as possible allows a larger sample for you to iterate on your flows.

Try your user navigation out with colleagues or friends through prototypes of flowcharts to see where they end up with their choices and compare that to where you were attempting to guide them, perhaps there are reasons why they are ending up in a different area of the app to where you wanted helps show you something you overlooked.

Adapt to how users go through pages, write out logic jumps between pages so there is a clear understanding of how the user goes from page to page but understand users might find a different way around your app. As Google says (when analyzing users actual flows through apps):

“You may have a path in mind for your users like Home Page > Product Page > Shopping Cart > Checkout, but you may uncover a more popular path like Home > Product > Search > Search Results > Search > Search Results > exit.”

This is for you to adapt and either figure out how to get users back on track to your original flow path or adapt your product to suit the flow users have.

Summary

I work hard on nailing the navigation above all else, knowing that for users to find it intuitive gives me a reason to then work hard on higher level design aspects such as nicer transitions and animations. Start out from the fundamentals of your project, optimize, then iterate. Then focus on fleshing out the project with more hi-fi designing.

The best way to create user flows are to create them directly in with your mockups. You can’t go wrong when iterating user flows directly with your designs, create all flows and go through them, test them, find flaws in them. Users are unique, no matter how hard you try to keep them on your user flow they will find their way off it, but constant analysis of where users are going in your app, and iteration on the back of that, will help your product stand out above the rest.

These concepts can help you find your way by optimizing your user journey and get ahead of the competition. User journeys and flows can be tedious at the best of times, but they are fundamental to how your users interact with your product. Every user will think in different ways so keep it as simple as possible, make sure your user flow can pass a blind test of going through your app or website.

Creating user flows with mockups

Creating user flows with mockups

References

Related Articles