User flows in web design

Making use of user flows helps ensure that a site is clear, intuitive, and usable.

It's a basic tenet of usability that software must support multiple screen flows and click patterns through a system.

This means that we must allow for different interaction styles and different page flows in designing our websites and apps. We must also create pointers for users to navigate back through their journey if they get lost.

Traditionally in web development, this has meant using breadcrumbs as a navigational aid. Breadcrumbs are very useful for websites that have a lot of pages with conventional information architectures. However, breadcrumbs don't necessarily work in other contexts, such as mobile websites or mobile apps. In these cases, the primary navigational tool may be search or high-level functionality tied to persistent app elements. For a microsite, content may be surfaced through on-page elements and Calls To Action; for a news site, it may be surfaced via promotion modules and related content.

Creating user flows is a useful way to map how users may interact with your site or app. User flows have long been used in web design for figuring out information architecture and site structure. They are also useful for figuring out the purchase journey of an e-commerce platform.

However, user flows are often created early in the site-development process, and then condensed to representative flows. While this is fine for mapping out the basic flow of the simple website or application, it frequently represents the basic interaction pattern of the designer or developer.

Because of this psychological blind spot, we often miss other interaction patterns that may be common for other users. We can also miss edge cases and dead ends.

For this reason, creating screen flows throughout the definition and development process is a useful thing. This can help you to ensure that different flows have been accounted for.

Creating a screen flow is relatively simple; it can be done with printouts and scissors. If you are at the definition stage of your website, you can use wireframes; if you're at the design stage, you can use page designs; and, if you have an in-progress website, you can use the website itself.

Print out the pages or screenshots, and stick them up on the wall. Trace your way through the site, starting with a basic click path. Try getting into the head space of one of your personas, and figure out how they might fulfill their needs with your website. See if there are any situations where the user might get lost or confused. Take notes.

Once you have done that, try a more complex click path. Perhaps the user has arrived via a search engine, and has landed on an inside page. How do they get back to the home page? Do they navigate by search, by breadcrumbs, or is content surfaced on the page that will help them navigate?

Once you've completed these user flows, you can fix any issues you've identified.

Repeat this process until you are satisfied that your site is navigable and not confusing for your users.

If you have budget for user testing, you should take notes of how your test subjects navigate your site. They may find issues that you've missed. If you don't have budget for this, try to do some guerilla user testing.

You should repeat this process once your site is built. You can click through the site and ensure that there are no dead ends, confusing elements, and users can navigate your site easily.

Once you've actually deployed your site, you can use analytics software to track site flows with actual user data.

If your site has Google Analytics installed, you can track the click path via the "Visitors Flow" function. You can also isolate exit pages and pages that have a high bounce rate, and ensure that these pages aren't confusing or alienating users.

You can also use the Google Analytics Goal functionality to map out the expected user flows and purchase funnels on your site. This will allow you to track where users are deviating from the expected flow. If your site has e-commerce capability, tracking the purchase funnel can help you to see whether users are aborting their purchases.

By using this technique, you can ensure that your site is clear, intuitive, and usable, and that your users don't get frustrated and leave.


Barry Saunders is a UX Architect. He has worked on projects for News Ltd, Google, Westpac, EFIC, WWF-Australia, QUT, and SBS.

Editor's Picks