User Flows
In website and app design, when we talk about usability and user experience design, we must talk about user flows. A user flow is a visual depiction of the steps a user or customer takes to navigate a website*. User flows show each step required to complete a specific task or goal such as ordering food online, or resetting a password. When creating a user flow for your website or app, begin with a precise goal in mind and then work out the steps that must be taken to accomplish that goal.
7Krave™ is a Jamaican food service based in Kingston, Jamaica. In the example below we look at a portion of a user flow for the specific task of ordering jerk chicken online.
Here is a breakdown of the steps from the above example:
Step 1: The user (we will call him Ron) enters his region of choice: Kingston & St. Andrew.
Step 2: He must close a pop-up message in order to move on.
Step 3: He then types “jerk chicken” in the search bar and presses the search icon (the magnifying glass).
Step 4: Ron has the option of looking at a menu from Island Grill which apparently sells jerk chicken.
In this user flow, Ron took 4 steps to get to a menu. If we were to continue the user flow we would see how many more steps it would take for Ron to be able to place his final order for jerk chicken. Those steps could include adding sides to his order, entering a delivery address, and choosing whether to pay by cash or card.
User Flows & Roadblocks
Potential problems in your app can be revealed using user flows. If you, the designer, encounter any difficulties, so will your user.
In the example below, Tracey is on the Caribbean Airlines™ website and has forgotten the password she uses to login into her Caribbean Miles account. She wants to find out whether she has enough miles for a trip to Guyana so she goes about trying to reset her password.
As seen in step 1 below, she heads to the Caribbean Miles webpage, and clicks the ‘SIGN IN MILES’ button.
In step 2, on the sign-in/login page, Tracey clicks the ‘Retrieve your password’ link.
In step 3, she must enter her membership number and click the ‘Retrieve your password’ button.
In step 4, she is prompted to check her email where she will get a link to reset her password.
In step 5, Tracey goes to her email inbox, opens the email and clicks on the link (this is more like 3 steps, but we will merge them into 1).
So far, so good.
In step 6, there can be a problem if you enter a new password that is…well…who knows!
In step 6, Tracey has entered a password with exclamation points (which you cannot tell by the image). But when she clicks ‘SEND’, the only message she gets is that “the password you entered is incorrect.” Stacey has no idea why her password is incorrect because Caribbean Airlines has not told her. She has to figure out, on her own, what the issue is. She might make a lucky guess and try something without an exclamation mark and be successful, or she can spend more time than she’d like figuring out the issue by trial and error.
We will get into good and bad error messages in a separate article. The point here is that in the above user flow, the designers can now see that the user of their website might have to spend unnecessary time figuring out what is wrong with her password, and they can go about creating a clearer error message so that the user has a better experience.
Conclusion
With a website or app, there will always be an update to be made, an issue to be resolved, or a feature to be fixed in order to improve your user’s experience. User flows can be extremely useful in pointing out what works and what does not work as it pertains to allowing your customer to accomplish tasks as seamlessly as possible. Use user flows and use them often to give yourself, the designer, and your user, less headaches in the long run.
*In this article, the words ‘website’, ‘app’ and ‘software’ are used interchangeably.
References:
Laubheimer, P. (2016) Wireflows: A UX Deliverable for Workflows and Apps. Retrieved at: https://www.nngroup.com/articles/user-journeys-vs-user-flows/
Nielson, J. (2020) 10 Usability Heuristics for User Interface Design. Retrieved at: https://www.nngroup.com/articles/ten-usability-heuristics/