Don’t bluff, just be that good

Here’s how to let user flows in UX design help you do that

This article is day 20 of a 31 day series. A mash-up of the Inktober 2022 prompt list and UX terminology. Read more about the challenge here.

Day 20 | Inktober prompt: Bluff | UX Term: User Flow

Do you play cards?

I don’t even know if that’s how people say it. It makes me feel old timey. “Say champ, you play the cards?” But yeah, my cards are more in the Phase 10, or Uno arena. I don’t know why, but I’ve never been a big fan of bluffing. The one time I remember getting excited about it was when I was 9 or 10 and I got to play BS, and it was exciting because I knew that even though I wasn’t saying it, BS meant bull shit! Or is it bullshit? Something can be bullshit, but you step in bull shit. Right? I just learned the other day that badass is one word and it blew my mind. I guess I should brush up on my cuss words.

Well that went off track. Back to BS. If you’re not familiar, I won’t list all the rules. I just tried that and deleted it because it was longer than I thought. And I need to keep my head in the game. I’ll just let you know, that you’re lying, pretty much the whole time. It’s great fun.

What is a User Flow?

I know you didn’t ask, and there was absolutely no transition in thought but, I’ll do that now. Today we’re talking about user flows.

Seamless.

User flows are like task flows graduated and got a job and started volunteering at the local food bank (and whatever else pillars of society do). They have it together, and they’re helping their community. If you don’t recall from Day 1 of this series, I’ll refresh here. Task flows focus on a single task, no lead-up, no outro. Just one task. I will usually gather up these valuable little bits and begin the process of incorporating them into the user flow.

Now the user flow has a beginning and an end. However it also has a lot going on in the middle. In the user flow we have tasks being completed, but now we represent them with all of their possibilities. We do this with the introduction of decision points. So if you start at the main page, the first decision might be about whether or not the user has an account already. If they do, follow the “YES” path and land at the Login page. If they don’t, follow the “NO” path and land at the Sign Up page.

Why is it important to UX?

User flows allow us to get a full picture of the various paths that a user might take. If you can’t find a path through the user flow, you know that a user will not be able to make it through your site. You haven’t built a single screen, and you’re already troubleshooting! It’s amazing.

There’s this not so hidden agenda in UX but I think some don’t realize. More than just improving the user experience, if we’re doing the job right, we’re improving the experience for the developer and stakeholders and product owner and graphic designer (man, I’m having an Oprah moment here I think). Everyone gets a better experience!

Why do I think I can be so braggadocious? The tools used by UX designers, like the user flows we’re talking about now, are meant to subject the final design to scrutiny before anything is built. Like I mentioned above, we’re learning a bunch ahead of time so that any mistake we make aren’t as costly. It’s much simpler to modify a user flow, or a sketch, or whatever other low-fidelity method we’re using, than it is to build, or rebuild, a page.

I guess this isn’t the most groundbreaking concept. You build a house, you’re going to make plans first, right? It’s not easy to change a kitchen to a bathroom and move the kitchen down the hall after you realize that no one can find it in the bedroom. Just saying.

How do you make one?

Start at the beginning, and when you get to the end, stop. But to be a bit more specific, I use a program called Overflow, though I’ve used Adobe Illustrator in the past because I felt I could make it prettier (you learn quickly that fast and effective is way more important at this stage). And I think that you can do something similar in Miro. Pen and paper also work. Basically, you have options. But if you can make it easier on yourself, that’s great! Most of these programs will give you access to various shapes. I swear I look it up almost every time because I have a tendency of second-guessing myself with things like this. But you’ll usually see them used like so:

Circle — terminators, they are used to indicate the Start of the flow, and the End

Square — used to represent screens that a user lands on

Diamond — decisions, these will have branches coming off of them for the various decisions (most commonly Yes/No)

Parallelogram? (Yes, I know that diamonds and squares are parallelograms, so maybe you tell me what to call them!) either way, use them to indicate tasks.

Here’s how they might look in action:

Whichever shapes you use, just make sure that it’s clear to anyone looking at it what each is for. I use a key to accomplish this easily. Then also make sure that you use them consistently. The beauty that unfolds when you’ve done that is that you can scan to see all of the screens that you’ll need to create for users to successfully navigate through your site. I see you blue square! And then you can do another scan to see the point of interaction that you’ll need to represent on those screens. Yes green parallelogram with the “Create Account” button, you’re going to get a spot on the Welcome screen, I promise.

Takeaway

User flows are a useful tool to ensure early on that you’re setting your users up for success. It’s a great final check before you move on to low fidelity wireframes. Use them often and you won’t have to bluff when you say the user experience is going to be excellent.