Part of course:
User Goals, Task Lists and User Flow Diagrams
- User Goals
- Task Lists
- User Flow Diagrams
As a web or mobile developer, you may have often wondered what is it really that the UX Designers do? How do you get hands on this magic dust that makes some companies’ products noticeably easier and fun to use? How do you build products with great usability when you don’t have the budget of hiring a UX Designer for your solo side-project?
In the following tutorials, we will explain what goes on in a UX Designer’s mind when they prototype products — so you can think like one too!
A user goal is what the user is trying to achieve. For freeCodeCamp, the user’s goal is to learn web programming so that they can start making web apps. For Uber’s user, the goal is to find a cab to get to a destination. For Fandango’s user, the goal is to book a movie ticket. And so on.
It’s important to identify the user’s goals before we start designing anything. What is the user’s problem we are trying to solve? What does the user want to do here? What’s the primary job the user is hiring your product for?
There are usually multiple user goals within an application: we will break each of these goals into a list of tasks that the user must accomplish to achieve their goal.
Once you’ve identified a user goal, you can start breaking it down into a list of tasks that the user must accomplish to complete the goal successfully. For finding an Uber, a task list would look as follows:
Task lists look very simple at the face of it but can end up becoming complicated and confusing. For instance, Uber made a conscious decision to add a Confirm pickup spot step (Step 6) even though they can be reasonably confident that the GPS would pick your location accurately. Additionally, some tasks can be done in any order, some tasks may require other tasks to be done before them (step 7), or some tasks may even be optional (step 8).
Given a task list, you can convert it into a User Flow Diagram to show how a user will move through your app. User Flow Diagrams help you reason about how the application will work before you start any prototyping/building. It’s the same as the task list, except it’s a flowchart that uses symbols and arrows to communicate the task list more visually.
Here's two User Flow diagrams comparing Uber to Grab: