Design

Why User Flow Should Be Your Top Design Priority

And How to Do it Well

February 1, 2018

Being an app designer means having the freedom to explore. With the right app prototyping software, you can try out ideas as you go, making changes as the inspiration hits you. You can experiment and get it wrong a few times before you get it right.

With that in mind, it’s understandable that a lot of independent mobile app developers and designers don’t prioritize user flow. They’re focused on the neat stuff — making a beautiful UX design, adding innovative functionality to please existing users and entice new ones. It’s easy to assume user flow will take care of itself. Just decide what pieces you need and put them together in a way that makes sense, right?

But in reality, flow is one of the most important parts of your app design. Your users should be able to pick up your app for the first time and understand the way the pieces fit together immediately. They should be able to access any function without having to get inside your head, or studying the app’s quirks and inconsistencies. To give your users that kind of seamless experience, the flow has to be perfect.

A photo of a team meeting taking place outside on a sunny day.
Why didn’t anyone bring coffee to this meeting?

Why User Flow is Your Top Priority

User flow describes the steps that users take to access a function or perform a task in your app. Each click, swipe and drag-hold is part of user flow. Every app has it. It doesn’t matter if you’re building a complex engineering application, or a tea timer with a single button. There’s still a sequence of steps your user has to take.

Even in simple apps, flow is an important part of the UX — in fact, it can hold the key to the app’s appeal. Take Sonic Lighter, an extremely simple (and successful) iPhone app. In this app, the flow couldn’t be simpler. When the user loads the app, an image of a lighter spark wheel appears on screen. The user can start a virtual fire by dragging their finger down the spark wheel to flick the lighter. Once the lighter is lit, they can drag their finger through it to play with the flame, “blow it out” by blowing on the microphone, or pass it to another user by tapping a lit iPhone against another phone with the app installed. That’s about it.

Now, imagine the designer had decided to completely redesign the flow in order to load the app up with functions, and re-release it as Bizarro Sonic Lighter. In this new version, you start with a menu screen that allows you to pick different options — a butane lighter, a wick lighter, and a fireplace. Each of those in turn leads to its own settings, allowing you to customize the fire. For example, the disposable lighter has a switch you drag sideways to adjust the flame height, and a draggable color chart in the corner to change the hue of the flame.

Bizarro Sonic Lighter has other settings you could access from the main menu. For example, to allow a user to share the fire, you tap back to the main menu, tap “Add User” and select what types of fires they’d be allowed to share.

We could go on, but you get the idea. The new version is a lot less appealing. The fun of Sonic Lighter is that the user experience is like using an actual lighter. Turning it on is like pulling a lighter out of your pocket and flicking it. Even without all the unnecessary features, it’s just not as fun. Just having to go through a menu screen to choose the lighter, or tapping a checkbox to enable sharing makes it less appealing.

A photo of a smartphone attached to the dashboard of a car.
GPS apps need a simple user flow so drivers aren’t staring at their screens.

Flow is Often the Biggest Challenge in Mobile App Design

Mobile app development is often a complex balancing act between functionality and usability. On the one hand, you want users to be able to easily access the most important functions of your app without a lot of extra steps. That means big, easy-to-tap buttons available from the main screen. On the other hand, there’s probably far more depth to your app than you can squeeze into a few buttons.

Let’s say you’re building a music player app. On the one hand, you want your user to be able to turn it on and play their favorite songs with a tap. On the other hand, they need a way to set their favorites, choose other songs, search for new music (probably in multiple locations), control volume and equalization, shuffle, sort music and perform all the other functions that go into a music player. You may want to share some social integration as well, so users can share recommendations and playlists, and see what their friends are listening to.

Making all these options available isn’t that hard in and of itself. You can put the core player functionality on the homescreen and have menu screens for creating and queueing playlists, adding new music, and so on. But assembling it all in a way that users find appealing is a much more difficult challenge.

If they’re searching through an online store while listening to a playlist, and they decide to skip the current song, they don’t want to have to close the store and navigate back through multiple menus — they’ll want to be able to access that skip button from where they are.

If they’re on the main screen and a song comes up which they really like, they’ll need an intuitive way to learn more about that song, or find related music. They won’t settle for a separate “learn more” screen — they’ll want to be able to tap through from the song, search for new music, buy it and add it to their queue, then return to the music player.

And they’ll need to be able do all of that automatically, without really thinking about it. They won’t take time to read a manual, take a tutorial, or tap around trying to figure it out. Because if your app doesn’t have a user flow they find intuitive from the start, it’s very easy to find another app that does.

A photo of a couple using their tablet on moving day.
Apps that keep us organized on moving day must have excellent user flow.

Consistent User Experience Depends on Flow

Apps aren’t isolated tools that only have to be internally consistent — they exist in a wider context. For example, some apps are used to access data and services that can also be accessed using a browser. Others work to supplement platforms that have their own particular feel and user flow.

Particularly in business applications, flow can literally determine whether your app is approved by a client or accepted as part of an ecosystem — or if it’s thrown to the curb. Consistent flow in a set of utilities makes it easier for users to learn new tasks, reduces errors, and can be every bit as important to branding as the logo on the splash screen.

But even if you’re creating a one-off app on your own, you still have to contend to user expectations around flow. Your scheduler, game, or fashion app might be innovative, but it’s probably not brand new. Your users have used other tools to do similar things and they come in expecting to go through certain steps to access a function. And as users (hopefully) try multiple apps from your company, that can create expectations, too.

As a rule, you should strive for consistency, but it’s not always that easy. Desktop applications can have different workflow conventions than mobile ones. The same goes for Windows versus macOS, iOS versus Android, Chrome versus Firefox, and even tablets versus smartphones.

Flow isn’t just important for fitting in, though — sometimes it’s about standing out from the crowd. After all, if you can perfect user flow, your app will be able to grow faster than your competitors’. 

A photo of a woman holding a phone up to take a selfie.
Easy user flow is crucial when you’re trying to capture a Kodak moment.

How to Get User Flow Right

Diagram Your Workflow

Do you remember teachers forcing you to outline essays before you drafted them in school? Sure, it was a little bit of a hassle and you probably would have preferred to dive right in sometimes, but it was worth it. You’d end up with stronger organization, better supporting evidence and less work in the revision stage. It might have even saved you time!

The same is true with user flow. It can feel like a waste of time, but for most apps, it’s worth it. Even if you’re a solo app developer, diagramming can help by forcing you to think through every step of user flow.

Revisit the Apps You Love

Flow is one of those things that you don’t always notice until you’re looking for it. It’s what’s going on in the background, connecting the mobile app design elements together. If this is your first time thinking really seriously about user flow, it’s a good idea to take a fresh look at some familiar apps. Ask yourself how flow contributes to (or detracts from) the user experience.

You should also take a close look at how user flow works in your niche. If you’re building a fitness app, how do other fitness apps flow? What elements make the really successful ones take off? What conventions can be improved, or tuned to better appeal to your niche? What conventions should be left alone?

A photo of baking supplies next to an iPad on a kitchen counter.
Can we get a baking app that incorporates AI, please?

You Can’t Build User Flow Without Plenty of Testing

There’s no substitution for actual testing. It doesn’t matter how skilled you are as an app developer, or how carefully you design, build and debug your software — usability testing mobile apps is the only way to make sure your user experience actually lives up to its promise.

Of course, testing can be exhausting — especially when you’re deep into the development of your app. Often, by the time outside users get their hands on what you’re building, it’s so far into development that major elements can’t be changed. You can avoid this problem altogether by using a prototype. With a functional prototype, you can hand your prospective users something that they can actually use, getting an idea of how good your user flow really is.

Ultimately, perfecting user flow isn’t something that happens overnight. Like any element in the development of your app, it takes planning, execution, and (lots) of reiteration. In the end, though, all of that work is worth it — as getting it right will ensure you’ll create a successful, popular app.

Proto.io lets anyone build mobile app prototypes that feel real. No coding or design skills required. Bring your ideas to life quickly! Sign up for a free 15-day trial of Proto.io today and get started on your next mobile app design.

Got a tip on creating the perfect user flow? Let us know by tweeting us @Protoio!

Author