Loading...
Day 13: User Flow Diagrams2017-11-29T13:16:50+00:00

Project Description

Project Description

USER FLOW DIAGRAMS

Now that you have a task list, let’s turn that into a flow diagram to show how the user will move through your website or application.

 

What it is.

User flows are a communication tool to help the product team talk about the functions of the application before they have to build it. They show all the tasks your user has to complete in order to reach her goal, just like the task list, but using symbols and directional arrows that are the beginning of your user journey through your application.

How it’s used.

User flows can be elaborate or very simple. What kind of flow you create depends on what kind of conversation you’re having since they change constantly as the application evolves. If you’re brainstorming with your product team you’ll probably want a simple sketch on a whiteboard that you can quickly erase and rewrite. If you’re presenting the user flow to the executive team, then a detailed flow that uses symbols and diagrams created in LucidChart is a better option.

 

Discussion.

Think about your favorite mobile app. What is your goal when you open it? What steps do you have to take to reach that goal, and what screens and buttons do you see while you take those steps.

That’s your flow through the application. That’s a user flow. Every application has at least one flow, and likely has many flows depending on the many goals a user might have in using it.

What do user flows look like? Well, they look like boxes with arrows pointing from them to other boxes. (There are other things called wire flows, in which the boxes are wireframes. We’ll get to those later.)

No need to get fancy. These are all the symbols you’ll need to make a good user flow.

EXAMPLE-USER-FLOW

Here they are in action. This is the user flow to find a movie on Flixter. Notice, this is only one goal a user might have with Flixter. There are other goals and so other flows.

Examples

The hard thing about user flows is keeping to the point. It’s easy to start showing all the choices and all the screens in an app. But that’s not the point. You want to show one path to the user goal.

Later, you might show another path, or combine flows to show what happens when the user does something different.

Objectives

  • Turn a task list into a flow diagram
  • Get comfortable using symbols to diagram

Tips & Tricks

Keep it simple
  • Don’t get hung up on “correct” forms. Use squares and lines.
  • If you want to be fancy, use diamonds for decision points. But everything else is a waste of time.
  • You want to be fluid and fast with your flows.
  • It’s more important that they communicate the user’s path through the application, not that they look pretty.

Resources

Your Assignment

Take your task list from yesterday and turn it into a user flow.

Use the list of user tasks you wrote yesterday for your app and turn that into a user flow:

  • State the goal
  • Use the symbols to show screens, user decisions
  • think about where the user starts and ends
  • Don’t diagram anything more than what the user does.

Deliverables

Create a pdf and share your flow in the comments and/or on Dribbble and Twitter #100daysdesign.

Leave A Comment