User flow is an important aspect of building better products, both mobile or web. Starting out as a UIUX designer, I struggled with creating user flows. During a project I worked on in my design class, my instructor kept laying emphasis on user flow. I can still remember his words “You have to be able to create a good user flow that shows the user journey for any product you are designing, It’s one of the major determining factors in creating a great user experience in any product.”
So of course, I put myself to the task and I dive deep into understanding user flows and how to create it effectively. Over time, I have been able to hone the skill of creating good user flows; if you are trying to understand user flow better, here is a simple guide I have created to help you.
What is User Flow?
User flow is a diagram that shows the steps a user will take on a website or an app to complete a task or series of tasks. Examples of such tasks may include: signing up or logging in to an app or website, making a purchase, subscribing to a newsletter etc.
The primary reason for creating user flow is to design a smooth user experience while helping users achieve specific goals in a digital product.
Creating user flow also makes designing a product interface easier and faster because you already have a sense of the key steps the user will take, so you design the interface in line with those steps.
Here is an example of a user flow
This is a user flow for a charity app to show how users are going to navigate through the app to achieve a series of tasks.
In the image above, you can see that user flow is a diagram. This means in creating user flow, shapes are being used as a means of representation to show a task or series of tasks. The most common shapes used are diamonds, rectangles, circles, lines with arrows.
Below is a brief explanation of these shapes and what they represent:
Diamonds
Diamonds are used to show when decisions have to be made, they ask questions. Answers to these questions are represented by lines extending out of the diamonds. Examples of such questions are “Do you have an account?”, “Do you wish to proceed?” with the answer “yes” or “no” extending out of each side like the image above shows.
Rectangles
Unlike diamonds that require users to make a decision, rectangles display a screen or represent a page. Screens such as home screen, confirmation screen, sign up and sign in pages, etc.
Circles
Circles are used to represent an action. They show a task that must be completed or steps that must be taken. Actions such as “select item” or “send order”.
Lines with Arrows
Lines with arrows (also known as connectors) determine the flow of the diagram. They connect the diamonds, rectangles and circles together. They show the flow of the process from start to finish.
In the next article, I would be sharing how to create a user flow and the steps you need to take.
By: Adisa Rebecca
(Perxels Mentee)
