User Flow 101: What it is & How to do it
Fala português? Veja a tradução do artigo:
TL;DR
User Flow is a tool that allows you to quickly map all the flow of screens of your website or app. This tool works well to align the paths and actions that the user can do along with team members.
Ideally, these diagrams should be made before drawing prototypes such as wireframes or mockups.
What are User Flows?
Before you start designing screens for your new website or app, it’s interesting to know your users and set the purpose of your digital product.
Some examples of goals may be for the customer to contact your institutional site, buy a product from your online store or subscribe to a service on your platform.
These two aspects are the ingredients for making good user flows. Basically this diagram helps you design the path that your users will have to go through to get the value they are looking for.
Flows are made of several small interactions. Each screen offers some possibilities and the user chooses one of them.
The example below shows how 37 Signals uses the concept of user flows in their projects. At the top is described what the user sees and below is described what the user does. The arrow indicates the screen path and connects the points.
Example of User Flow
It is nice to remember that the user can get in you flow through many different sources and they can also leave the flow in the middle.
Because of this it is important to map possible entry points such as:
- Organic search: The user comes from Google, after searching certain keywords.
- Paid Search: The customer arrives through an advertisement made in Google Adwords.
- Social networks: The user gets in your site through Facebook, Twitter, LinkedIn.
- E-mail: A customer brought by an email marketing or a transactional email.
- News websites: A visitor who arrives through news from a blog or portal.
- Direct link: An old customer who has already decorated the direct access link.
How to make User Flows?
To make user flows, you can start by drawing with only pencils and paper. Once you get a more structured version, you can use tools like Sketch, Axure, or Google Draw to better document the flow and share with your team.
See the sign up flow below for a slightly more complex example:
Example of User Flow
Note that in this example, there are some more notations:
- Use the dotted line: When a screen has more than one possible action
- Do not fill in the bottom: If a screen does not have an action
- Use more arrows: When one action takes more than one screen
These diagrams serve to map the initial flow. So it’s not worth getting attached because they will be naturally replaced by wireframes, mockups or by the site/app itself.
Do you own User Flow
We’ve created a template in Sketch so you can start your user flows quickly:
Download now:
Concluding…
Creating User Flows is a quick way to map the key touch points between your customer and your product or service.
They are useful for aligning the team on the purpose of the business and for guiding the development of the screens and features.
Despite the utility, user flows end up being abandoned after a while, and this is natural. But it is always good to remember this tool when some part of the flow needs changes.
Have you used User Flows in your projects? Leave your comment below!
Have you found this article interesting? Share it to your friends!
