If someone asked you to define the word “flow” or describe an example of one, what would you say? Would you immediately think about flow as it relates to user experience or interaction design? Maybe… but, maybe not.
In this post, I’ll describe how to create smooth user flows based on my experience as a UX designer.
You may think about flow in terms of water. For example, how snowmelt flows into waterfalls and streams, which in turn, flow into reservoirs, lakes and the ocean.
You may also think about flow in terms of air. Did you know that a golf ball has dimples to turbulate the flow of air around it (which reduces drag), causing the ball to fly farther than a smooth ball?
Photo Credit: New Brunswick Tourism (Herring Cove Golf Course, New Brunswick, Canada), Creative Commons 2.0 via Wikimedia Commons
You can also measure the success of a flow (or lack thereof) in terms of efficiency. Just look at NASA and Boeing who collaborated on solving a flow problem this past April in a wind tunnel.
The teams outfitted a Boeing 757 tail with special technology that could potentially make flight more efficient. The impact of this? Lower fuel burn that might save airlines millions of dollars, which in turn, could save frequent flyers hundreds, possibly even thousands, of dollars on plane tickets. Sounds good to us!
How Flows Relate to UX Design
So what do all these notions of “flow” have in common?
- Flow depicts movement: movement through water, through air, through websites, through apps, etc.
- Flow is variable: Flow variability can cause a golf ball to fly farther (or fall short); a plane to cruise faster (or have more drag); and an online shopper to checkout with ease (or abandon her cart).
Long story short, the concept of flow is important. The success of your website or app is often contingent upon how well your modeled flows meet the needs of your targeted users (personas), as well as the needs of your business.
Because lo-fi prototypes lack visual detail, the user flows are the heart of your prototype. Lo-fi prototypes help you focus on creating the smoothest flows for users to accomplish their goals.
Building a Flow with Users in Mind
When you build a user flow, what’s the first thing you should think about?
It might be obvious… your users!
For example, if you are designing a business intelligence tool that allows users to create reports and share them, you will want to have at least two flows: one flow for the Data Consumer (i.e. the user receiving/reviewing the reports) and an entirely separate flow for the data analyst (i.e. the user building/sharing the reports).
Photo credit: Persona tool in UXPin
Editor’s note: If you want to create your own user personas, you can do so in UXPin with a free trial.
Before you start creating your prototype flows, you should clearly understand your personas’ motivations and needs. Ask yourself, what drives my personas and what are they trying to accomplish?
Once you’ve created your persona, you can better grasp user goals. Map out both sets of goals so you know what your prototype needs to accomplish.
For templates and helpful tips on creating personas, check out the chapter “Analyzing Users Before Diving Into Design” in the free ebook The Guide to UX Design Process & Documentation.
Considering Goals & Entry Points
If you are designing a website user experience, another good practice before creating your flows is to determine and map out where your users are coming from. Based on Morgan Brown’s advice in Stop Designing Pages and Start Designing Flows, we’d recommend you consider the following sources for your web or mobile prototype:
- Direct traffic
- Organic search
- Paid advertising
- Social media
- Referral sites
Photo Credit: “CCF Use Flows” by Rob Enslin is licensed under Creative Commons 2.0
Different entry points define different user behavior. Take a look at the difference in the below hypothetical scenarios for someone looking to buy a smartphone on Amazon.
Organic Search Visitor:
- Searches for reviews of iPhone
- Enters Amazon.com.
- Uses search bar to find iPhone
- Browses more iPhone reviews
- Uses search bar to find Samsung Galaxy
- Browses Galaxy reviews
- Returns to original iPhone Amazon vendor
- Buys iPhone
Direct Visitor:
- Enters Amazon.com
- Uses search bar to find iPhone
- Buys iPhone
Now, we’re not saying the comparative shopping experience is that simple (or that the behavior between direct and organic visitors is always black-and-white). We are saying, however, that you must map out these different flows in order to deliver a comprehensively smooth experience.
To view some sample flows based on these entry points, check out the article Build it with the User in Mind: How to Design User Flow. The author, Peep Laja, has created three different user flows, where each flow originates from a different entry point and aligns with specific user and business objective.
Creating a Flow Outline
At this point, you should know:
- Which users/personas you will be designing your flows for
- What user and business objectives need to be accomplished
- Where your users are coming from (i.e. entry points)
Now you can think about what happens before and after a user is on a particular page. Like it’s described in Interaction Design Best Practices, you can link up your pages and create as many flows as you need.
One quick way that you can begin to begin exploring different page flows is by creating a simple flow outline. Before sketching or prototyping, a written outline helps you explore the most important part of your app or website – the content. Building flows around content gives you a much more accurate assessment of the total number of pages required for the user experience.
Here are a couple techniques for outlining your flow.
Writing-first Approach to Outlining a Flow
You can use the writing-first approach, which Jessica Downey writes about in her article Jumpstarting Your App Conception Without Sketching UI. This outlining method helps flesh out ideas and build a “common understanding” of each page of your app or site.
Let’s create one for, say, a banking app. The scenario: someone wants to turn on auto deposit. Note in the outline below, content in [brackets] represents action buttons/links.
Step 1: Would you like to set up auto deposit?
[Set auto-deposit]
Step 2: Select Deposit Frequency
[Once per month][Twice per month]
[Every other week][Every week]
Step 3: Deposit Once per Month
[Select calendar day]
Step 4: Set Amount
Display amount field
[Set auto-deposit]
Shorthand Approach to Outlining a Flow
You can also try a shorthand approach used by Ryan Singer at Basecamp. Ryan’s approach treats flows as ongoing conversations.
For our banking app example above, we can create a shorthand for Steps 2 and 3 that looks something like this:
To see how Singer demonstrates shorthand for Basecamp and how he can illustrates complex flows with this outlining process, check out A Shorthand for Designing UI Flows.
Sketching and Prototyping a Flow
Now we’re ready to create a low-fidelity sketch for each page in our flow outline and/or flow shorthand. The sketches bring your ideas to life with more detail around layout and structure. Once you have created your sketches, a simple low-fidelity prototype can help you test those ideas with users.
Photo Credit: “MF211: Figure 6.15” by Rosenfeld Media is licensed under Creative Commons 2.0
You can sketch out user flows in a variety of ways, as demonstrated in these examples of user flows and wire flows from Wireframes Magazine. Before committing to any particular flow, however, create a simple prototype to validate that its alignment with your user and business objectives. It doesn’t have to be anything fancy — your prototype can be done on paper so you can start understanding how users flow between content and actions.
Photo Credit: “Paper Prototype of Mobile Application” by Rodolphe Courtier is licensed under Creative Commons 2.0
From there, you could continue iterating the sketches on paper and cut them out for a paper prototype, or move to a digital prototyping tool like UXPin.
Photo credit: UXPin
Real Examples of Flows and Their Teardowns
Now that we’ve shown you the process for creating your own user flows and turning them into sketches and low-fidelity prototypes, we’re going to leave you with some interesting examples of real UX flows for user onboarding.
Photo Credit: “Numbers” by Gustavo da Cunha Pimenta is licensed under Creative Commons 2.0
User onboarding is a great scenario in which it requires particular skill to balance user needs and business needs. The user wants to dive straight into the app with as little learning curve as possible. The business obviously also wants the user to dive in, but they also want to gently nudge users into upgrading their plans. To see deconstructed examples of what we’re talking about, we highly recommend going to User Onboarding.
You certainly need to master the art of persuasive design in order to create flows that educate users while helping them discover the benefits of upgrades.
Next Steps
When it comes to mastering user experience, there’s absolutely no substitute for practice.
I’ve used UXPin in my own career to create user flows, interactive wireframes, lo-fi prototypes, and even animated prototypes. Apply what you’ve learned here and feel free to create a free account so you can start experimenting.
I’d recommend you start by wireframing basic flows like a mind map (making each box represent a step in a user action). Once you feel satisfied, feel free to build wireframes for each page, then add interactions to bring your flow to life with a prototype.
