The biggest WTF in design right now – UX Collective

What are user flows and why you need to use them. An illustrated guide on going from “WTF, am I looking at”, to a clear design of how your app works.

My life-long goal is to spread the word about user flows… Nah, not really, but I do care deeply about technology and the way we communicate how it works.

I like to think about what tools and methods we use to get our ideas across among other designers.

I also like think about how we communicate with people outside of our professions, away from the comfort of our jargon and familiar tools. This is why I care about user flows and I guess because I’m building this.

In this article we’ll go through the big WTF in design: “What’s the flow!”. Answering what user flows are, the fundamentals of user flows, and then we’ll finish with a few examples.

Contents:

  • WTF are user flows? 🤷
  • WTF am I looking at? 👀 ⁉️
  • The fundamentals of user flows 📖
  • Putting it all together with examples 🔥

WTF are user flows?

What are user flows in a nice neat sentence?

A user flow is a series of steps a user takes to achieve a meaningful goal.

And why are they used?

They are used to communicate the intended flow of a user through various pages and actions in an app or website.

Great, and what are they made of?

A User Flow usually includes a name, steps, users, and a description of what happens at each step.

And where did you pull that 💎 of a quote from?

Alex Handley, just then, Primary Co-founder 🙃

Others have progressed the adoption of user flows and offered their own definition. Tools like Overflow and Flowmapp exist to help you create user flows. Ryan from Basecamp invented a great short-hand for user flows (what he calls UI flows):

Nice and simple. Source here

(Now I can cross off “referencing an OG Signal v. Noise article in a Medium article” from my bucket list).

User flows are another method to segment and define your digital product, customer experience, website, or app.

So it’s just another method, except, the beautiful thing about user flows is their ability to define sections of something gnarly, abstract and technical like “cross-platform mobile experiences” from the perspective of the user.

  • Not the underlying technology’s flow. ❌
  • Not the development methodology’s flow. ❌
  • Not the person implementing the design’s flow. ❌
  • It’s the user’s flow. As in, the people that you’re designing for. ✅

If you remember one thing about user flows, it’s to define them by the goal your user achieves by completing the flow.

For example, a User Flow could detail how website visitors create an account, order a flamethrower or subscribe to a mailing list.

Here’s a stock-standard example of a user flow:

And for something a bit more interesting:

WTF am I looking at?

I’m lucky enough to help and receive help from over a dozen startups this year alone. In every conversation I think “WTF”, you know what’s the flows”.

Here’s the reconstruction of a few typical conversations and why they highlight the need for user flows.

Startup founder
Product designer. I forgot to include the 2.1gb Sketch file.
Business Analyst AKA UX designer (well kinda, not really, what do you think?)
Okay, this one wasn’t a helpful example more just an opportunity to vent.🕊️

Technology is wonderfully free. Free like H1N1 in an international airport. Free like a team independently creating the different parts of a rubric’s cube where the colours and number of sides is decided in progressive sprints.

Dear Agile coaches, please feel free to tell me in the comments that my non-positive view on Agile stems from my inability to do Agile or insufficient application of all Agile principles. 🙃Photo by Alvaro Reyes (sorry to drag your harmless picture into an Agile debate)

This freedom works for software but it has it’s side-effects. I think that user flows are best antidote we have for the “wtf am I looking at” issue we have in communicating anything tech. They help our audience orient themselves on jargon-free and sensical questions:

  • What is the goal of this thing (app/website/product/digital kiosk future customer experience)?
  • Who is doing it?
  • and How do they do it?

Let’s go through a simple system to create these (overly?) hyped user flows.

The fundamentals of User Flows 📖

I think there are three foundations that make up great user flows. Some other people think differently, they are proponents of the “free-flow” movement (that I just named) and advocate for free-form, infinite scroll, chose your own adventure, snakes, ladders and navbar flows.

After witnessing enough software project blowouts, I’m a stickler for structure.

Fundamental 1: User flows show their purpose 🏆

A user flow has a name which describes it’s purpose: the goal your users achieve by completing the steps. Naming your user flows is an important factor and is often missed.

Name your flow after the user’s goal and get bonus points by saying who the user is.

Fundamental 2. User Flows go in one direction ➡️

By sticking to one direction and limiting the decision points in your flows you separate it from sprawling sitemaps and free-form clickable prototypes.

Both have their utility, but for conveying distinct behaviours, user flows work best. (So user flows ≠sitemaps or high-res prototypes).

User flows can have multiple paths but only to show different states, not different goals.

Why do user flows work? The main reason seems to be that they tell a story. Our brains are hardwired to remember stories and the people involved.

Although the “Create an account” user flow may not be the most interesting story, it is far easier for the reader to remember than a sprawling map of possible flows. And easier for the non-tech folk than “Ticket #678: Asset 47 (non-staff account) activation”.

Fundamental 3. User flows represent a complete task ✅

In order to keep your app (or any digital product’s) design organised the scope of each user flow should be a single task or goal of your user.

If your user flow is only a fragment then it loses the power to tell the story of your users. If they go on for too long they lose their meaning.

If you have interfaces (wireframes, mockups) show them! Describe each step and detail why there are alternate paths.

User flows, out of all of the artefacts produced in your digital project, should be the unambiguous model of your app or website design.

Make sure you include all of the information you need to show the reason for the design of the User Flow.

Putting it all together with examples

Now let’s put those fundamentals into practice.

1. User flows show their purpose 🏆

This user flow may be pretty but it’s vagueness hides potential complexity and doesn’t communicate enough information back to the viewer.

By naming your user flows you’re able to design from the user’s perspective and split your flows based off their goals.

2. User flows go in one direction ️️️➡️

This works as a good sitemap or to show navigation.

It is better to split your user flows into distinct flows.

3. User flows represent a complete task ✅

Idk who Pam is but they could be getting a lot of emails.

Avoid adding in detail that doesn’t help to communicate the flow and actions of the user.

In this example anyone can read and understand the User Flow.

All together now!

Let’s say you’re a billionaire and want to use your massive marketing and PR team to come across as a bored polymath who funds his crazy ideas with novel products like roofing torches. WTF!? Say it with me: what’s the flows?

Toasty!

If you read this far instead of doing the “twenty open Medium tabs on UX tools and trends articles” thing then you must have an opinion.

If were entertained by mine, tap away 👏 (you know it now goes up to 60 now?). If you have your own opinion then leave a comment below.

Author: Alexander Handley

Collect by: uxfree.com

Comment

Top