User Flows: How Popular Apps and Websites are Developed
Why is a user flow used, and why is it valuable? What can an app user flow look like, and how is it created? Let’s dive deeper into it.
Note: The article has been written by Maxim Skvortsov, a UX/UI-designer at Omega-R, an international company that designs and implements ITsolutions. Translated and reposted with permission by Alconost, professional localization service.
Maxim Skvortsov:
I work on interface design and visualization for mobile and Web-based applications. Based on my IT experience and the company’s expertise, I’d like to share our vision and approach to using a design-development tool called a user flow. Why is a user flow used, and why is it a valuable aid to the designer? What can a user flow look like, and how is it created?
What is a user flow?
Scenario: you find a new app that promises to do exactly what you want, so you impatiently press the download button. A moment later, the app launches, and you’re ready to get to work. But first, you have to create an account, give the app permission to access your location and send you push notifications, scroll through a whole tutorial, read a user agreement and privacy policy, etc. The bitter truth is that, during an interaction like this, the user will usually just close and delete the app, no matter how function-rich it might be. That’s why it’s so crucial to optimize the user’s path to the app using a user flow.
A user flow is a visual representation of the sequence of actions the user has to perform in order to reach their goal. It can encompass either a specific function or an entire product.
In order to establish this sequence, we need to conduct research and answer three basic questions:
1. Who is the user?
2. What is their goal?
3. Which steps do they have to take in order to reach this goal?
These are vital questions that can sometimes be difficult to answer precisely, so the following additional questions can help:
● For what purpose is the user using the application?
● What is motivating the user to reach their goal?
● How can the application help the user reach their goal?
● What might prevent the user from using the application?
● Which characteristics of the product or service are more important for the client or user? What are their primary issues, doubts, or sources of uncertainty?
● Which of the application’s characteristics are most important for the user?
● What information does the user need in order to perform a given action?
● Which emotional trigger is motivating them to perform this action?
There are always many questions that can arise during the development process. Searching for answers to them gives you an opportunity to examine every minor detail from every angle. This is the only way to end up with a truly user-friendly product.
A user flow is a story about the user
A user flow allows you to take a look at the user’s interaction and the application itself from the user’s perspective.
If full-fledged websites provide sufficient space for creativity, developing mobile apps always forces us to try to strike a balance between functionality and user-friendliness. On the one hand, users need to be able to easily access the most important functions from the main screen without lots of additional steps just by pushing the big buttons. On the other, when it comes to apps, we’re dealing with more than just buttons.
Let’s say you’re developing an app for a music player. On the one hand, you want the user to be able to play their favorite songs with a single tap. On the other, they need a way to identify their favorite tracks, look for new music (possibly in multiple places), adjust the volume, configure the equalizer, sort the music, shuffle a playlist, read an artist’s biography, make purchases, and have easy access to all the player’s other functions. The user is going to want to share recommendations and playlists on social media and see what their friends are listening, too.
If the user is surfing an online store while listening to a playlist and decides to skip the current track, they shouldn’t need to close the store and go back through several different steps in the menu — they should be able to access the skip button on the same screen.
It isn’t that difficult to develop an app with as much functionality as possible, but collecting all those functions into the most attractive, easy-to-use format possible is a much more daunting task. If a development studio fails to accomplish this task and develops an app that is unintuitive, there will be no demand for it in stores. It’s always easier for the user to download the most easy-to-understand app than it is to spend time reading manuals and tutorials or wandering around endlessly trying to figure it out.
The role of the designer
Imagine that you’re working on a product in a team with a project manager, backend developers, and Web developers. Let’s say you even get some kind of statement of work from the client that contains reasonably detailed and comprehensive information. Now you just have to go ahead and make the product.
What is the designer supposed to do? Judging from the expected result, they’re supposed to draw all the necessary screens in such a way that the end product is easy to use and attractive, then hand them off to the developers.
Well, that’s basically true. But it’s just the tip of the iceberg. Underneath that tip are a number of things that very few people think about. We all love easy-to-use, intuitive, comprehensible interfaces. We love it when everything works logically and the result of every interaction is predictable. And, in order for all of this to happen, every single detail has to be carefully worked out.
This is where a user flow comes in — it’ll help you identify the path the user will take in order to reach their goal. It’ll help you formulate positive and negative scenarios along your chosen path toward the achievement of the potential user’s goal.
It’ll give you the ability to know whether or not all the processes in the product have a logical conclusion and are structured efficiently, in such a way that the user spends as little time as possible reaching their goal.
Here’s an important point: the more problems and the more functions you have, the more scenarios you need to work through.
In this way, a user flow helps overcome the widespread mistake in which the developers draw up a list of necessary functions and then just design interfaces based on it. Needless to say, this kind of approach is possible. But it can lead to a situation where user/interface interaction scenarios force the user to take too many steps in order to perform basic operations.
Value for the product team
A user flow helps you make top-level agreements with the client on scenarios for the product’s operation and functionality — especially when the client has no specific, detailed requirements (i.e. when they don’t really have a good understanding of what they actually want). In this case, a user flow can give you a specific focus for the client, which can then get them to tell you exactly where they’d like to change the logic. They can do this by giving you feedback, either as comments or by adjusting the current schematic on their own. Creating a user flow might seem like a complex, time-intensive process, but it helps you avoid a number of mistakes when developing a product. It’s like the old carpenter’s adage: “measure twice, cut once.”
A PM can use a user flow as a convenient way to identify tasks for developers because it makes it clear which changes need to be made to the current logic and which new functions will be added.
Testers can prepare use cases (tests) and checklists since they demonstrate user scenarios in a convenient format.
User flows are very convenient for teams, especially larger teams since you don’t need to explain the work logic to each member individually. In this way, a user flow gets the client involved in the design process, motivates the team, and directs all work processes into a single stream, since each member of the team sees the big picture.
Value for the client
The user is always the person who buys or uses the product or service or is potentially prepared to do so. How comfortable this process is will determine the user’s loyalty. No matter how the product or service was purchased — whether at the office, over the phone, via an expert’s visit to the user’s home, through a website, or through an app — the path to purchasing and using the product needs to be as simple as possible.
When it comes to websites and mobile apps a, user flow is how the user will move from one piece of content to another (text, images, audio, or video). A user flow includes a definition of priorities in the demands for content, barriers to navigation, and searching for the fastest, most painless routes to the target action. Essentially, user flow is directly connected to the conversion funnel, and an ITcompany that uses user flows automatically develops an effective conversion funnel or optimizes its existing funnel.
The result of the assistance given to the user in reaching their goal, which is embodied in the design thanks to the user flow, is a happy, invested user. A happy, invested user means more time spent in the app or on the website, lower churn rates, increased conversion rates, and improved user experience.
In this way, a user flow directly affects the success of a website or mobile app and the client’s revenue. The design is centered around the user, and this fully corresponds to the principle of a customer-focused business.
What does it all look like?
I’ve never seen a clearly-defined standard for designing a user flow. The presentation of a user flow can vary, and it depends on the amount of detail required. It’s important to reach your goal as a designer, which is for the client and product company to understand how the user will gain access to certain functions, where they will be located, and how they will work.
A user flow can be presented as a combination of the following factors:
● task flow
● wire flow (lo-fi)
● screen flow (hi-fi)
Let’s examine each of these and see what they might look like. As an example, we’ll use an online appliance store. We identify the user, their goal, and the steps that need to be taken in order to reach that goal.
Let’s say our user is a young mother whose goal is to buy a multi-purpose food processor. One scenario for a sequence of steps could look like this:
1. Go to the online store’s website.
2. Enter “food processor” in the search bar.
3. Compare a few different products from the search results.
4. Put the preferred product in the shopping cart.
5. Place the order.
6. Pay.
7. Leave the website.
Task flow
Task flow is a simple representation of what the user does during each step in order to reach a goal or perform a certain task. It is essentially a traditional logic diagram defining this sequence.
This diagram doesn’t show conventions and other issues that don’t need to be worked out. What happens if nothing turns up in the search results? What if the payment doesn’t go through? We’re only interested in listing general steps that could assume a number of actions: for example, the search could be expanded with a number of filters, the payment path could depend on the choice of payment tool, etc.
To build this diagram, you can use a list of necessary and sufficient elements from traditional logic diagrams presented in the image below or use a standard BPMN — it’s oriented at both technical specialists and business users.
Wire flow (lo-fi)
A wire flow is a combination of a logic diagram and wireframes. A wireframe is a low-detail sketch of a screen design focused not on its visual essence, but rather on the distribution of elements and the contents of the screen.
In a wire flow, instead of elements from a logic diagram, we present schematic mockups of the screens with which the user interacts along the way to reaching their goal. There’s no need to brood over visual details and draw every single button and icon. More often than not, the emphasis is on the navigational elements in the design of each separate page.
Wire flows are especially convenient when developing mobile screens — the relatively small size of mobile screens can easily be used to replace the more abstract elements of logic diagrams. Wire flows are convenient for drawing up and refining a statement of work, but they’re not very useful when it comes to testing.
Here’s an example of this kind of diagram.
Screen flow (hi-fi)
Right now we’re talking about detailed, well-thought-out screens that are comprehensible to users as well as developers. The emphasis here is usually on navigational elements and certain behavioral nuances. It can be used as a standardizing document for confirming design mockups.
A screen flow could essentially be considered a prototype if you were to add interactivity to it. Its main feature is high accuracy or perfect pixel matching — it accounts for the physical size of the screen and presents all the visual and typographical details of the product. The elements of a screen flow are essentially mockups of screens from the completed application.
The client might be pleasantly surprised by the speed of development when you show them a screen flow, and they might even think that development is nearing completion. As a rule, we warn the client in advance that a screen flow isn’t backed up by any code, but having a screen flow still gives the client a guarantee that the excellent UX and UI they see will be followed by equally excellent code.
Here’s an example of a screen flow:
Below is an example of how a hybrid of a traditional logic diagram, schematic images, and final mockups might look.
As I’m sure you understand, the most time-intensive version is also the most well-thought-out one: the screen flow. This is the one that looks like a working app and is ready for interactive prototyping, testing, new iterations, confirmation, and handoff to the developers. When designing a user flow with a team, there are a number of automation-based tools such as Overflow, Miro, Flowmapp, etc.
By encompassing the entire product, a user flow systematizes and structures the process of its development and maximally orients the product team on the user’s needs and their shared understanding, allowing them to develop an extremely easy-to-understand and intuitive product by analyzing user scenarios. All of this not only significantly speeds up development, but also deepens client interaction. A user flow forces an IT company to always think about the client’s business requirements in order to develop an application that is more effective and successful than it could have been with the same budget and timeframe but without a user flow.
You might also find useful:
32 Design Differences between iOS and Android Apps
Sign in with apple announced, or on June 30 your app will turn into a pumpkin
