Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Making User Flows

2:14 with Alena Holligan and Kaleigh Veca

Now that we’ve sorted the cards into steps the user should take, let’s arrange that into a User Flow. A User Flow is the path you mark out for your users to take, and you should make it easy for them to discover the next step in the process.

Build Your Own User Flows

If you want to build a User Flows on the computer, my top recommendation is Sketch because it is a popular tool of choice for many people working in User Experience

Sketch is a design toolkit built to help you create your best work — from your earliest ideas, through to final artwork.

I have included a Sketch file in the project downloads for this course.

There are many other options besides Sketch. Here are a couple of alternatives.

  • Funnelytics is a website that is meant for digital marketing sales funnels, but it has the components needed to make visual user flows quickly...and it’s free!
  • LucidChart is $5/month for a basic plan, but it includes a lot of premade shapes and features. It is less visual than Funnelytics, relying on text to convey meaning.

These are just a few options for you. There are many out there, and we recommend you looking for yourself to see what solution best suits your needs.

Further Reading:

This article explains user flows clearly, and it also shows other common types of flows you may see. It does a good job comparing and contrasting differences between user flows and the other flows represented

Linked earlier course notes, this Optimization Glossary from Optimizely does an excellent job covering what user flows are.

Now that we've sorted the cards, we're ready to create our userflow. 0:00
Again, a userflow should be the easiest path to the user's goal. 0:04
Each user type might take a slightly different path. 0:09
We can't account for every possible action users take so we look for 0:12
the easiest path for the user to reach their goal. 0:16
Though our user flows are similar, the more different the user goals, 0:20
the more different their paths will be. 0:24
The reality is that you will have one product to meet all of these users' needs. 0:27
As you move in to design and development, you should keep in mind each separate 0:32
goal, moving fast or saving money, to help guide your product's development. 0:35
We can't always bring a stack of cards with us when we try and share our ideas. 0:41
So we are going to make it into a diagram. 0:46
We can draw this diagram on a single piece of paper and 0:48
even take a picture to make a sharable image. 0:51
We can also use a computer program to create these diagrams with simple shapes 0:54
and arrows. 0:58
Many computer programs also make the sharing process easier by including 1:00
share settings and share comments. 1:04
I'll provide some options in the next step. 1:07
But for now let's go over what these diagrams will look like. 1:09
These diagrams should have arrows to show how the users move. 1:14
We want them to have clear options and clues that guide them through the process. 1:18
The dotted lines represent optional or 1:23
conditional steps that may not always be part of the process. 1:26
We have text in place where the diagram may be confusing. 1:30
You can keep each user in a separate document or 1:35
combine multiple user flows into a single document. 1:38
Either is acceptable. 1:41
By keeping them separate, you can focus on an individual path, 1:43
while showing them together makes it easier to see the key differences. 1:47
Visually some user flows have small, 1:51
wire frame like elements to help viewers envision this depth a little more clearly. 1:54
While others are more low fidelity and just have words. 1:59
There are a lot of techniques. 2:04
But as long as they are clearly showing how a user should move 2:05
through the product, the style doesn't matter as much as the content presented. 2:09

You need to sign up for Treehouse in order to download course files.

Sign up