UX & UI Design
B / STUMBLE-FREE FLOWS
Key question
Where do people get stuck in a process?
A flow is the sequence of steps someone needs to complete to achieve a goal: opening an account, ordering something, submitting a form. Most drop-offs don't happen because of the big idea, but because of small friction points: an unnecessary field, an error message with no way out, a button whose action isn't clear.
Learning objective: You will identify points of friction, dead ends, unclear steps, and edge cases in a flow, articulate them, and develop better solutions.
Every step must be worthwhile for the users.
1.1 / Points of friction
What drains energy without offering any benefit.
Friction occurs wherever a process demands more than is necessary to achieve the goal. Typical causes include unnecessary input fields (title, telephone number, entering the email address twice), media disruptions (printing out, signing, sending by post, or switching channels), and cognitive load (too many options at once, technical jargon, or information that users must remember from one step to the next).
On top of that, there are trust gaps and unclear expectations. If someone is asked to provide their credit card details for a free trial without being told why, they will hesitate. Those who don't know how long a form takes or what happens after submitting are more likely to drop out.
Every input needs a purpose. Ask yourself for each field: Do we need this now, later, or not at all? Anything that can be asked later or determined automatically does not belong in the first step.
Every field needs a reason.
1.2 / Dead ends
Every state needs a next step.
A dead end is a state from which there is no sensible way forward. Common examples include missing ways back (an overlay without a close button, a step without a 'Back' option), error states with no way out ('An error has occurred.' and nothing else), and empty states, such as a search with no results or a blank dashboard without any guidance on what to do next.
An abandonment without re-entry is particularly costly. Anyone who interrupts a checkout, refreshes the page, or returns later should be able to pick up where they left off, rather than having to start from scratch.
Therefore, design each state with a message and an action: What happened, and what can I do now? Empty states are not errors, but the first opportunity to explain a product.
There is no situation without a way out.
1.3 / Unclear Steps
What happens if I click here?
Unclear steps occur when people cannot predict the outcome of an action. Ambiguous labels such as 'OK', 'Next' or 'Submit' do not explain what happens next. For high-consequence actions like deleting or paying, the button needs a verb and an object: 'Delete project', 'Place order with obligation to pay'.
Orientation is just as important: where am I, how many steps are left, what comes next? A progress indicator (‘Step 2 of 4’) and an indication of the next step remove uncertainty.
Ambiguous buttons are also created through design: two equally prominent buttons side by side, a primary action that looks like a link, or a “Cancel” button that stands out more than the actual action itself. There should be one clearly recognisable primary action per view.
A button says what it does.
1.4 / Edge Cases
What happens if things don't go to plan?
Usually, the ideal path is designed: all details are correct, the connection holds, nobody clicks 'Back'. In everyday life, however, edge cases constantly crop up: error messages due to incorrect input, an expired session, hitting the browser's back button mid-flow, an account that already exists, or missing permissions for the camera, location, or a protected area.
Good error messages appear where the error occurs and explain in plain language what is wrong and how to fix it. Any details already entered are retained. If an account already exists, users are directed straight to log in or reset their password, rather than simply being told 'Email address already in use'.
Not all edge cases can be anticipated, but they can be collected systematically. A checklist for each flow type helps to consider them during the design stage, rather than discovering them only during testing.
Someone's edge case is someone else's normal case.
1.5 / Check flows
Finding issues before users do.
Many issues can be identified before a product goes live. During a cognitive walkthrough, you go through a user flow step by step and ask at each stage: does the user know what they are supposed to do? Can they see how to do it? Do they understand the feedback?
In usability tests, a small number of people complete a specific task while thinking out loud. As few as five tests reveal the biggest hurdles. For existing products, analytics data shows at which step most users drop out.
Record any issues found with a severity rating: What prevents the goal, what slows things down, what is merely an annoyance? This makes it clear what needs to be improved first.
Testing beats guessing.
Exercise
Untangle a flow
Task: Choose a real-world flow you are familiar with, such as registering in an online shop, buying a ticket, or a sign-up form, and improve it.
STEP 1
Document the flow with screenshots, step by step from entry to goal.
STEP 2
Highlight friction points, dead ends, and unclear steps directly on the screenshots.
STEP 3
Check at least five edge cases using the edge case checklist and note down what happens.
STEP 4
Design the three most important improvements as a sketch or wireframe and justify them.
Evaluation: Test before and after with two people. Where do they hesitate, and where do they reach their goal faster?
Literature
Further reading
Krug, Steve: Don’t Make Me Think, Revisited. New Riders, 2014.
Norman, Don: The Design of Everyday Things. Revised and Expanded Edition. Basic Books, 2013.
Wroblewski, Luke: Web Form Design: Filling in the Blanks. Rosenfeld Media, 2008.
Jarrett, Caroline; Gaffney, Gerry: Forms that Work. Morgan Kaufmann, 2008.
Nielsen, Jakob: 10 Usability Heuristics for User Interface Design. Nielsen Norman Group, 1994 (updated 2024).
Yablonski, Jon: Laws of UX. O’Reilly, 2020.