User Flows

Summary

This video script offers a concise overview of user flows, task flows, and wire flows, essential for app planning. It explains user flows as visualized paths users take to complete tasks, with task flows being a subset focused on linear actions towards a single objective. Wire flows, combining wireframes with user flows, provide a detailed interaction view, useful for client presentations and transitioning to high-fidelity mockups. The script emphasizes the importance of understanding these concepts for effective UX design.

Takeaways

• 📊 A user flow is a visual representation of the path a user takes within an app to complete tasks, which can be single or multiple.
• 🔍 User flows have their roots in flowcharts and include elements like a series of steps to achieve a goal.
• 👤 Understanding user personas and their objectives is crucial for creating user flows that align with user needs.
• 🛠 Task flows are a subset of user flows, focusing on high-level actions in a linear sequence to reach a specific objective.
• 🔎 Task flows are straightforward, depicting only one path without branching, and include details about user choices and activities.
• ☕️ The example of making coffee illustrates the difference between a task flow (linear) and a user flow (non-linear with branching).
• 📱 UX flow diagrams, like the Health app for Apple Watch, show the complexity and clarity of user flows in action, guiding the design process.
• 🛒 E-commerce user flows are essential for visualizing the shopping experience, from homepage navigation to checkout, aiming to minimize cart abandonment.
• 🔄 User flows can include alternative paths or loops, reflecting the reality that users may not follow a linear path through an app.
• 🎨 Wireflows combine wireframes with user flows, providing a detailed view of user interactions within the context of the app's design.
• 🤝 Wireflows are beneficial for client presentations as they offer a clear, visual understanding of how users will interact with the app.

Q & A

What is a user flow in the context of app design?

A user flow is a visualized path that a user follows through an app to complete a single or multiple tasks. It shows the whole process in a simple image, often resembling a flowchart with a series of steps to accomplish a goal.

What is the difference between a user flow and a task flow?

A task flow is a subset of a user flow and is usually linear, representing high-level actions a user takes to reach a specific objective. A user flow, on the other hand, can have multiple paths and branches, accounting for different variables and situations that may occur during the process.

Why are user flows important in app planning?

User flows are important in app planning because they help designers understand the steps users need to take to meet their objectives, which in turn informs the design process and can lead to a more intuitive and user-friendly app experience.

What are some questions to consider when building a user flow?

When building a user flow, consider questions like: Who is using the product (persona)? What is their main objective? What steps do they need to take to meet their objective? What do they see on the app, and how do they know what to do next?

Can you provide an example of a task flow?

An example of a task flow is a user going to the earnings page from the navbar, seeing the available amount in the instant cash out, and then transferring the available amount to their personal bank account.

How does a user flow differ from a wire flow?

A user flow is a diagram that represents the workflow or process from the user's perspective, often in the form of a picture with blocks connected by arrows. A wire flow, also known as a UI flow, combines wireframes with user flows, providing a more detailed view of the interaction and what's happening on each screen.

What is the purpose of wire flows in UX design?

Wire flows serve to combine the structural layout of wireframes with the dynamic flow of user interactions. They are useful for presenting to clients and stakeholders, as they provide a clear visualization of how users will navigate and interact with the app.

Why are wire flows considered a good deliverable for client presentations?

Wire flows are considered good for client presentations because they offer a detailed yet visual representation of the user journey, making it easier for stakeholders to understand how the interaction happens and how users will use the app.

What is the significance of the checkout process in an e-commerce user flow?

The checkout process in an e-commerce user flow is significant because it is a crucial step where design can minimize cart abandonment. If the experience is not smooth, users may find the process too difficult and decide to abandon their purchases.

How do user flows help in reducing user overwhelm in app design?

User flows help in reducing user overwhelm by mapping out the journey in a way that presents one or two choices at any one point, which is particularly important for devices with limited screen space, like a watch, where too many options can be overwhelming.

Outlines

00:00

📱 Understanding User Flows in App Design

This segment introduces the concept of user flows in app design, emphasizing their importance for planning and user experience. A user flow is a visual representation of the path a user takes within an app to achieve a goal or complete tasks. It originates from flow charts and includes a series of steps. Key considerations for creating a user flow include understanding the user persona, their main objectives, and the steps they need to take to meet those objectives. The segment also differentiates user flows from task flows, which are simpler and linear, representing high-level actions users take to reach a specific goal.

05:01

🛒 E-Commerce User Flows and Their Impact on Shopping Experience

This part of the script delves into e-commerce user flows, illustrating how they help visualize and optimize the shopping experience. Starting from the homepage, users can navigate to various paths such as exploring products, learning about the company, or contacting support. The user flow continues through product pages, where they can gather information like price, description, and reviews, and then add items to their cart. The checkout process is highlighted as a crucial step where a smooth design can minimize cart abandonment. The segment also discusses the use of flowcharts to detail each step in the user's journey, including alternative paths and the overall user experience.

10:04

🎨 The Role of Wireflows in UX Design and Client Presentations

The final paragraph summarizes the discussion on user flows, task flows, and wireflows in UX design. Wireflows, which combine wireframes with user flows, are particularly useful for presenting to clients as they offer a clear view of user interactions and the overall app experience. The segment reiterates that user flows can be non-linear, often including alternative paths or loops, and that wireflows are an effective way to visualize these interactions. The distinction between UI flows and wireflows is clarified, noting that they serve the same purpose in design and can transition into high-fidelity mockups.

Keywords

💡User Flow

A user flow is a visual representation of the path a user takes through an application to complete a task or multiple tasks. It is crucial for understanding how users interact with an app and is used to map out the steps users follow to achieve their goals. In the video, user flows are described as originating from flow charts and are used to plan and design user experiences by considering the personas of users and their objectives, as illustrated by the example of making coffee where different paths are taken based on the availability of instant coffee.

💡Task Flow

A task flow is a simpler and more linear subset of a user flow that represents the high-level actions a user takes to reach a specific objective or endpoint. Unlike user flows, task flows do not have branching paths and are straightforward, detailing each step necessary to complete one task. The video script uses the example of transferring money from an earnings page to a personal bank account to demonstrate a task flow.

💡Wire Flow

A wire flow, also known as a UI flow, is a deliverable that combines wireframes with user flows. It provides a more detailed and visual representation of how users interact with an application by incorporating the actual design elements of the interface. The video emphasizes that wire flows are beneficial for client presentations as they offer a clear view of the interaction process and are a step towards high-fidelity mockups.

💡Persona

A persona in the context of the video refers to a hypothetical user that represents a segment of the actual users of a product or service. Personas are used to understand user behavior, needs, and motivations, which in turn inform the design of user flows. The script mentions considering the persona as important for creating user flows that align with user needs.

💡Objective

An objective, in the video, refers to the main goal or purpose that a user has when using an app. It is a key consideration when designing user flows, as the flow should facilitate the user in achieving their objectives. The script discusses how user flows are designed as a response to what the user's needs are, which are tied to their objectives.

💡Flowchart

A flowchart is a diagrammatic representation of a process or workflow, which is used to visualize a series of steps in a logical sequence. In the video, it is mentioned that user flows have their origins in flowcharts, inheriting elements such as a series of steps to accomplish a goal. The script uses flowcharts as a basis for explaining the concept of user flows.

💡E-commerce User Flow

An e-commerce user flow is a specific type of user flow that visualizes the shopping experience within an e-commerce platform. It includes navigating through the homepage, exploring products, and proceeding through checkout. The video script provides an example of an e-commerce user flow that starts at the homepage and leads to various paths, including product pages and checkout, highlighting the importance of a smooth experience to minimize cart abandonment.

💡UX Design

UX design, or user experience design, is the process of designing products with the user's experience in mind. It involves creating user flows and wire flows to ensure that the interaction with an application is intuitive and meets the user's needs. The video emphasizes the importance of UX design in creating user flows that guide the design process and offer a tailored experience without overwhelming the user.

💡High Fidelity Mockups

High fidelity mockups are detailed designs that closely resemble the final product. They are used in the design process to test and refine the user interface and experience. The video mentions that wire flows can move to high fidelity mockups, indicating their role in the progression from initial design concepts to more detailed, realistic representations of the user interface.

💡Cart Abandonment

Cart abandonment refers to the scenario where users add items to their shopping cart but do not complete the purchase. The video script discusses the importance of minimizing cart abandonment in e-commerce user flows by ensuring a smooth checkout process, as a high rate of abandonment can indicate usability issues in the user flow.

Highlights

User flows are visualized paths that users follow in an app to complete tasks.

User flows have multiple variations, including task flows and Y flows.

Task flows are a subset of user flows, focusing on a single linear path to achieve an objective.

User flows originate from flow charts, inheriting elements like a series of steps to accomplish a goal.

When building a user flow, consider the user persona and their main objective.

User flows help in understanding what steps users need to take to meet their objectives.

Task flows are straightforward, with only one path and necessary steps to complete a task.

User flows can include multiple paths and branches based on user decisions.

Wire flows combine wireframes with user flows, showing both structure and interaction.

Wire flows are useful for client presentations, as they show how users interact with the design.

UX flow diagrams illustrate the complexity and clarity of user flow charts in action.

E-commerce user flows visualize the shopping experience, guiding users from product pages to checkout.

User flows are crucial for minimizing cart abandonment by ensuring a smooth checkout process.

Flowcharts detail each step in the user path, including alternative paths and loops.

User flows are important for understanding how users navigate through an app's main menu.

Designing user flows helps in offering a tailored experience without overwhelming users with choices.

Wire flows can transition to high-fidelity mockups, bridging the gap between design and user interaction.

Transcripts

hi there and welcome back to ID apps

today's very short PO is on user flows

task flows and wire flows and sort of

understanding the difference between

them um they're kind of important to

understand in terms of planning for your

app so let's get

going okay so what are user flows let's

just start with those in a nutshell a

user flow is a visualized path that your

user will follow through your app to

complete either a single or multiple

tasks um this deliverable that you're

looking at now shows the whole process

in a simple image user flows have got

multiple variations and one subset of

them are the task flow or in fact the Y

flows which we'll go through in a moment

um but user flows have their origins in

flow charts hence the flow word and they

inherit lots of their elements um so

it's a series of steps the user flow is

a series of steps to accomplish the goal

so we met through that before so when

you're building out a user flow there's

a few questions or a series of questions

that you need to consider think about

who uses the pro product so your persona

is um important here what's their main

objective so if you're thinking about

your user then your user flow will be as

a response to what their needs are so

what steps do they need to take to meet

their objective um so we've written

scenarios in this class which are great

for understanding what they're thinking

and so then after that what steps they

need so in other words what do they see

on your app what do they need to do and

what do how do they know what they need

to do next so answering those questions

are part of doing a user flow um great

so let's move on to the next one so

that's a user flow really just it's like

a flowchart of what the user can do

through your app next one our task flows

which are a lot simpler to understand um

and they're they're a good place to

start so they're usually linear which

means they're just in one single line

and they represent the high level

actions that a user would take to arrive

at a particular objective or endpoint so

we've written scenarios and then we did

actually write a task flow so what

happens at each step of the way what is

the user doing and what's actually on

the screen task flows are really they

are what they are they're really

straightforward they only have one path

there's no branching happening anywhere

and this all of the steps here are

necessary to complete one task or goal

um and it includes some details about

users's choices and activities so you

can see there that task flow there the

user goes to the earnings page from the

navbar they see the available amount in

the instant cash out they transfer the

available amount to the personal back

account Etc so it's describing step by

step what the tasks St that the user's

doing okay so next let's look at a user

flow for making coffee so you can see

we've started with a task flow and you

can see they take the hot milk into the

Container they had coffee powder and

sugar they stir well and then their

coffee is ready um but a user flow for

making that might include some other

steps there so you can see that they're

starting there and they're going to see

if they've got instant coffee to use if

it's yes they do that it's no so it's in

a way not in a way but a user flow will

account for all the different variables

and situations that happen um in this

example for making coffee so it's not

just linear there are different branches

based on decisions that need to be made

during the

process all right so that's a user

flow next looks let's look at another

one and people do call the things

different things as you go on so um bear

with me this is a userflow diagram

example so it's it's called a ux flow I

would say it's a task flow first up and

then it's a a user flow below but um

they can be called different things

which is what I wanted to get across to

you now um U ux flow diagrams like these

ones here illustrate the complexity and

Clarity of user flow charts in action so

each of these examples that we're

looking at right now show how a user

flow chart um Can guide our design

process so in this first one that we're

looking at the health map health health

mess app diagram we can see it's for a

Apple watch um we can see that it starts

with a simple notification on the home

screen that's that little Dotty thing

that's your our entry point so of bit

like the beginning of a chapter the user

glances at the short look notification

that's that second screen there

um and decides to engage with it um so

if they want more detail they move to

the custom long notifications through

their tap you can see that's the third

one along at the top there um and that

can lead to different uh actions

depending on what they want to do so

that they might want to send a voice

message or um or use some sort of preset

template

response okay the second one um the

diagram doesn't just stop at these

notifications it shows the users

navigating through the app's main menu

to change their status view messages or

check their favorites so each decision

branches out in this second one um and

they offer options um but they keep the

journey relatively

smooth um so it's it's a great example

of offering quite a tailored experience

without overwhelming the user with all

of the choices at the start so they land

on a screen choose a status and move on

so they they ever really seem to have

one or two choices at any one point

which is good for a a watch because you

don't have I mean you'd get overwhelmed

looking at a menu of five to seven

things but you can see there um the

first one's mapping out the task as the

ux flow and the second one is really

mapping out the entire app experience

it's not necessarily the flow that the

user has taken but it's um what is

possible in that particular

example all right so let's move

on um to an e-commerce

userflow um and e-commerce obviously

uses user flows to visualize the

shopping experience and they're pretty

important um starting at the homepage

there user can navigate to various paths

they can explore products learn about

the company um getting contact via the

contact page Etc so and it also shows

that when users find a product they like

they proceed to the product page um

which gives information like price

description reviews Etc and if satisfied

they add the item to their cart which is

quite straightforward and intuitive as a

step um The Journey continues through

the cart proceeds to the um payment page

or the

checkout and

this last part I would say is crucial

step and it's where design can minimize

cart abandonment if they don't have a

smooth experience there quite a lot lot

of the times you'll find that your users

will

just go this is too hard I'm shutting

this down but you can see um it says Jer

flow means us flow so you can see the

page layout which is you know the

structure and then the user flow through

the pages there and those little orange

um joining lines will show us how they

can um navigate through this user flow

using the pages as the basis which I

think is quite a good way to do

that a lot less uh complicated than a

flowchart this next one is a is a

flowchart which um can look overwhelming

to begin with but you can see that it's

highlighting the various paths so it's a

combination between the screens and a

flowchart proper and you can see that

initial sign up page there um there's

multiple Pathways to create an account

so you don't just have to start at the

start um you can see use social

platforms to do the the sign up like the

Facebook Google and

Linkedin um but the main thing here is

that the flowchart details each step in

the user PA and if they take different

paths that details that um it's quite

complicated and I'm not not expecting

that from you guys but you can see it's

quite a nice way

to diagram out the user experience and

account for all different modes so quite

often our users don't just have one path

like a task flow they don't just go

through step by step there might be that

they do things in a different order to

what we expect how can they go back and

do things and this is why um being able

to diagram a user flow is

important for us at this stage so that's

quite a complicated one but I thought

it' be useful to look at you can see

even in there that they've got some

screen and what's on the screen so you

can see that um detailed so as part of

sort of like combin combination of

screen design and the user

flow okay so just to recap and I did say

this would be short it is short so

hopefully you're getting the idea that

the user flow is a diagram that's used

in ux design it represents the workflow

or in fact the process from the user's

perspective uh in the basic form user

flows represents the task in the form of

a picture with blocks connected with

arrows um the diagram doesn't have to be

linear not unlike the task flow it does

usually have alternative paths or Loops

we know now that there are different

types of user flows the first one the

task flow which is what the user tasks

are

um the user flow itself and lastly that

third one which we had a quite a little

look at in the previous slide is a

wireflow

um and I did cover them in the

wireframing Pod but just to recap wire

flows are the deliverable that combines

the wireframes with user flows so

instead of just these raw little

diagramming things we have the

wireframes in them and I think as

designers or visual people I would say

that wire flows are a really nice way to

do a user flow so that you can really

see what's actually happening um they're

great to present to clients because any

stakeholder including your clients can

quickly see how the interaction happens

and how people will use it

um so wi FL flows are good because they

can move to High Fidelity mockups um I

would say that there's not really

significant difference between UI flows

and wi flows and they've got they got

both the same purpose all right so

that's our very short introduction

hopefully you're going away with an idea

about what task flows are you know what

a user flow is we're thinking about that

like a flowchart or could be a diagram

and wire flows or UI flows they called

the same sort of thing um great well

thanks for listening and I will see you

in class