UX & UI Design
B / FLOWS OHNE STOLPERSTEINE
Kernfrage
Wo bleiben Menschen in einem Ablauf hängen?
Ein Flow ist die Abfolge von Schritten, die jemand braucht, um ein Ziel zu erreichen: ein Konto eröffnen, etwas bestellen, ein Formular abschicken. Die meisten Abbrüche entstehen nicht an der grossen Idee, sondern an kleinen Stellen: ein überflüssiges Feld, eine Meldung ohne Ausweg, ein Button, dessen Wirkung unklar ist.
Lernziel: Du erkennst Reibungspunkte, Sackgassen, unklare Schritte und Randfälle in einem Flow, benennst sie und entwickelst bessere Lösungen.
Jeder Schritt muss sich für die Nutzenden lohnen.
1.1 / Reibungspunkte
Was Energie kostet, ohne etwas zu bringen.
Reibung entsteht überall dort, wo ein Ablauf mehr verlangt, als für das Ziel nötig ist. Typische Ursachen sind unnötige Eingaben (Anrede, Telefonnummer, die E-Mail-Adresse zweimal), Medienbrüche (ausdrucken, unterschreiben, per Post senden oder den Kanal wechseln) und kognitive Last (zu viele Optionen auf einmal, Fachbegriffe, Informationen, die man sich von Schritt zu Schritt merken muss).
Dazu kommen Vertrauenslücken und ungeklärte Erwartungen. Wer für einen Gratis-Test seine Kreditkarte angeben soll, ohne zu erfahren warum, zögert. Wer nicht weiss, wie lange ein Formular dauert oder was nach dem Absenden passiert, bricht eher ab.
Jede Eingabe braucht einen Grund. Frag bei jedem Feld: Brauchen wir das jetzt, später oder gar nicht? Was sich später erfragen oder automatisch ermitteln lässt, gehört nicht in den ersten Schritt.
Jedes Feld braucht einen Grund.
1.2 / Sackgassen
Jeder Zustand braucht einen nächsten Schritt.
Eine Sackgasse ist ein Zustand, aus dem kein sinnvoller Weg weiterführt. Häufig sind fehlende Rückwege (ein Overlay ohne Schliessen, ein Schritt ohne «Zurück»), Fehlerzustände ohne Ausweg («Es ist ein Fehler aufgetreten.» und sonst nichts) und leere Zustände, etwa eine Suche ohne Treffer oder ein leeres Dashboard ohne Hinweis, was jetzt zu tun ist.
Besonders teuer ist ein Abbruch ohne Wiedereinstieg. Wer einen Checkout unterbricht, die Seite neu lädt oder später zurückkommt, sollte dort weitermachen können, wo er aufgehört hat, statt von vorne zu beginnen.
Gestalte darum jeden Zustand mit einer Aussage und einer Handlung: Was ist passiert, und was kann ich jetzt tun? Leere Zustände sind keine Fehler, sondern die erste Gelegenheit, ein Produkt zu erklären.
Kein Zustand ohne Ausweg.
1.3 / Unklare Schritte
Was passiert, wenn ich hier klicke?
Unklare Schritte entstehen, wenn Menschen nicht vorhersagen können, was eine Handlung bewirkt. Mehrdeutige Beschriftungen wie «OK», «Weiter» oder «Absenden» sagen nicht, was danach geschieht. Bei folgenreichen Handlungen wie Löschen oder Bezahlen braucht der Button ein Verb und ein Objekt: «Projekt löschen», «Zahlungspflichtig bestellen».
Ebenso wichtig ist Orientierung: Wo bin ich, wie viele Schritte kommen noch, was ist der nächste? Eine Fortschrittsanzeige («Schritt 2 von 4») und ein Hinweis auf den nächsten Schritt nehmen Unsicherheit.
Uneindeutige Buttons entstehen auch durch Gestaltung: zwei gleich starke Buttons nebeneinander, eine Hauptaktion, die wie ein Link aussieht, oder ein «Abbrechen», das stärker auffällt als die eigentliche Aktion. Pro Ansicht sollte es eine klar erkennbare Hauptaktion geben.
Ein Button sagt, was er tut.
1.4 / Randfälle
Was passiert, wenn es nicht nach Plan läuft?
Entworfen wird meist der ideale Weg: Alle Angaben stimmen, die Verbindung hält, niemand drückt «Zurück». Im Alltag treten aber ständig Randfälle auf: Fehlermeldungen bei falscher Eingabe, eine abgelaufene Sitzung, der Zurück-Button des Browsers mitten im Ablauf, ein Konto, das bereits existiert, oder fehlende Berechtigungen für Kamera, Standort oder einen geschützten Bereich.
Gute Fehlermeldungen stehen dort, wo der Fehler passiert, und sagen in einfachen Worten, was falsch ist und wie man es behebt. Bereits gemachte Eingaben bleiben erhalten. Existiert ein Konto schon, führt der Weg direkt zum Login oder zum Zurücksetzen des Passworts, statt nur «E-Mail bereits vergeben» zu melden.
Randfälle lassen sich nicht alle vorhersehen, aber systematisch sammeln. Eine Checkliste pro Flow-Typ hilft, sie schon im Entwurf mitzudenken, statt sie erst im Test zu entdecken.
Der Randfall ist für jemanden der Normalfall.
1.5 / Flows prüfen
Probleme finden, bevor es die Nutzenden tun.
Viele Probleme lassen sich finden, bevor ein Produkt live ist. Beim Cognitive Walkthrough gehst du einen Flow Schritt für Schritt durch und fragst bei jedem Schritt: Weiss die Person, was sie tun soll? Sieht sie, wie es geht? Versteht sie die Rückmeldung?
In Usability-Tests lösen wenige Personen eine konkrete Aufgabe und denken dabei laut. Schon fünf Tests zeigen die grössten Hürden. Bei bestehenden Produkten zeigen Analysedaten, an welchem Schritt die meisten abbrechen.
Halte gefundene Probleme mit einem Schweregrad fest: Was verhindert das Ziel, was verlangsamt, was stört nur? So wird klar, was zuerst verbessert werden muss.
Testen schlägt Vermuten.
Übung
Einen Flow entwirren
Aufgabe: Wähle einen realen Flow, den du kennst, zum Beispiel die Registrierung in einem Onlineshop, einen Ticketkauf oder ein Anmeldeformular, und verbessere ihn.
SCHRITT 1
Dokumentiere den Flow mit Screenshots, Schritt für Schritt vom Einstieg bis zum Ziel.
SCHRITT 2
Markiere Reibungspunkte, Sackgassen und unklare Schritte direkt auf den Screenshots.
SCHRITT 3
Prüfe mit der Randfall-Checkliste mindestens fünf Randfälle und notiere, was passiert.
SCHRITT 4
Entwirf die drei wichtigsten Verbesserungen als Skizze oder Wireframe und begründe sie.
Auswertung: Teste Vorher und Nachher mit zwei Personen. Wo zögern sie, wo kommen sie schneller ans Ziel?
Literatur
Zum Weiterlesen
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 (aktualisiert 2024).
Yablonski, Jon: Laws of UX. O’Reilly, 2020.