Was ist ein User Flow und wie zeichnet man ihn?

Was ist ein User Flow?

Ein User Flow ist die Wegbeschreibung einer Aufgabe im Produkt. Wo beginnt der Nutzer, welche Screens sieht er, wo entscheidet er, wo endet er? Das Diagramm beantwortet diese Fragen mit Kästen, die mit Pfeilen verbunden sind.

Kate Kaplan definiert den User Flow in einem NN/g-Text von 2023 als Folge von Interaktionen. Diese Folge zeigt die typischen oder idealen Schritte einer häufigen Aufgabe in einem Produkt. Im Ablauf stehen zwei Dinge: die wichtigen Aktionen des Nutzers und die Antworten des Systems darauf.

Laut Kaplan beschreibt ein Flow eine Arbeit, die Minuten, höchstens einige Stunden dauert. Ihr Beispiel ist der Kauf eines Tennisschlägers auf einer Website für Sportartikel. Auch ein Passwort zurücksetzen oder einen Termin buchen sind solche Aufgaben.

Der Unterschied zu Customer Journey Map und Wireframe

Diese Begriffe werden oft verwechselt, weil alle dasselbe Produkt beschreiben. Der Unterschied liegt darin, worauf jeder genau schaut.

Die Customer Journey Map ist die Weitwinkelaufnahme. Laut Kaplans Vergleich umfasst sie mehrere Kanäle und Kontaktpunkte und kann Tage oder Monate dauern. Neben Aktionen beschreibt sie auch Gefühle und Gedanken.

Der User Flow bleibt dagegen in einem Produkt und beschreibt keine Gefühle. Kaplan sagt es klar: Flows beschränken sich auf Schrittfolgen und tragen keine Information über die Gefühlslage des Nutzers.

Kaplan schreibt auch, dass es oft hilft, beides zusammen zu nutzen. Der Flow schaut genau auf einen einzelnen Teil der Journey.

	Customer Journey	User Flow
Umfang	Mehrere Kanäle und Kontaktpunkte.	Interaktionen in einem Produkt.
Was er beschreibt	Aktion, Gefühl, Gedanke, Kanal.	Aktion des Nutzers und Antwort des Systems.
Dauer	Tage, Wochen, Monate.	Minuten, höchstens Stunden.
Ergebnis	Customer Journey Map.	Wireflow, Flussdiagramm, Aufgabendiagramm.
Forschung	Feldforschung, Tagebuchstudie, Interview.	Usability-Test, dazu Analytics.

Das Wireframe beantwortet eine andere Frage: Was steht auf einem Screen wo? Page Laubheimer schreibt in einem NN/g-Text, dass Wireframes das Layout gut zeigen, aber Interaktion schlecht beschreiben. Der Flow zeigt dagegen den Übergang zwischen Screens.

Dann gibt es noch die Informationsarchitektur. Sie ist die Landkarte des Produkts: Welche Seiten gibt es, und wie sind sie gruppiert? Der User Flow ist eine einzelne Route auf dieser Karte.

Task Flow, Wireflow und User Flow

Diese drei Begriffe werden je nach Quelle etwas anders verwendet. Ich nutze die folgende Trennung, weil sie im Team klärt, wer was meint.

• Task Flow (Aufgabenfluss): Die Schritte zu einem einzigen Ziel. Laut einem Vergleich von Overflow aus dem Jahr 2022 sind die meisten Task Flows weitgehend linear und wirken schlicht. Sie können auch nur einen Teil eines langen Prozesses beschreiben.
• User Flow (Nutzerfluss): Laut demselben Text alle möglichen Wege, die ein Nutzer zu einem Ziel nehmen kann. Er verzweigt sich, Entscheidungen und Fehlerpfade werden hier sichtbar.
• Wireflow: Das Format, das Laubheimer in einem Text von 2016 definiert. Statt abstrakter Kästen eines Flussdiagramms stehen echte Screenentwürfe da. Der Pfeil geht von dem Button aus, den der Nutzer drückt, und führt zum Screen mit dem Ergebnis.

Laut Laubheimer eignet sich der Wireflow für Produkte mit wenigen Kernscreens, deren Inhalt sich je nach Aktion des Nutzers ändert. Mobile Apps, Web-Apps und Bezahlabläufe gehören dazu. Bei statischen Desktop-Websites ist Vorsicht geboten, weil große Screenbilder den Prozess überdecken können.

In der Praxis zeichne ich zuerst ein schlichtes Flussdiagramm. Sind die Wege klar, mache ich aus den wichtigen Schritten einen Wireflow.

Laufen Mobil- und Desktop-Version unterschiedlich, zeichne ich sie getrennt. Auch die Unterschiede zwischen iOS und Android ändern den Ablauf oft.

Symbole im User Flow

Die Formen im User Flow stammen aus der Tradition allgemeiner Flussdiagramme. Laut dem Wikipedia-Artikel zum Flussdiagramm (flowchart) hat ANSI diese Symbole in den 1960er-Jahren standardisiert, ISO übernahm sie 1970. Der heutige Standard ist ISO 5807, erschienen 1985.

• Start und Ende: Oval oder Kasten mit abgerundeten Ecken. Jeder Ablauf hat einen Eingang und mindestens einen Ausgang.
• Screen oder Prozess: Rechteck. Im allgemeinen Flussdiagramm beschreibt es einen Prozess. In der UX steht es meist für einen Screen oder eine Seite.
• Entscheidung: Raute. Hinein kommt eine Frage, die mit Ja oder Nein beantwortet wird. Laut Wikipedia wählt die Entscheidung, welcher von zwei Wegen genommen wird.
• Pfeil: die Reihenfolge der Schritte. Schreiben Sie auf den Pfeil, was der Nutzer tut, ist das Diagramm leichter zu lesen.

Nutzen alle dieselben Symbole, geht das Diagramm leicht von einem Team ans nächste. Fehlerscreens in eigener Farbe zu zeigen, ist meine eigene Gewohnheit.

User-Flow-Beispiel: Passwort vergessen

Der Ablauf unten zeigt die Schritte zum Zurücksetzen des Passworts in einer erfundenen App. Heben Sie mit den Buttons über dem Diagramm den Happy Path oder die Fehlerpfade hervor. Drücken Sie auf einen Schritt, öffnet sich darunter seine Beschreibung.

Manche Schritte kommen aus Sicherheitsregeln. Der OWASP-Leitfaden zu „Passwort vergessen“ empfiehlt, dieselbe Meldung zu zeigen, ob die Adresse registriert ist oder nicht. Der Link zum Zurücksetzen sollte nur einmal nutzbar sein und nach einer angemessenen Zeit ablaufen.

Derselbe Leitfaden verlangt, dass der Nutzer nach der Änderung des Passworts nicht automatisch angemeldet wird. Der Nutzer bekommt eine E-Mail, die meldet, dass das Passwort geändert wurde. In dieser E-Mail steht das Passwort selbst nicht.

Interaktiver User Flow

Alle: 13 Schritte. 2 Start und Ende, 5 Screens, 3 Entscheidungen, 3 Fehlerscreens.

• Start und Ende
• Screen
• Entscheidung
• Fehlerscreen

1. 1 · StartDrückt auf dem Login-Screen „Passwort vergessen“

   Die Person erinnert sich nicht an ihr Passwort und drückt auf dem Login-Screen den Link „Passwort vergessen“. Hier beginnt der Ablauf.

3. 2 · ScreenAnfrage zum Zurücksetzen: Feld für die E-Mail

   Die Überschrift lautet „Passwort zurücksetzen“. Auf dem Screen gibt es ein einziges Feld: E-Mail. Wurde auf dem Login-Screen schon eine Adresse eingegeben, ist das Feld ausgefüllt. Der Button heißt „Link senden“.

5. 3 · EntscheidungIst die E-Mail-Adresse richtig geschrieben?

   Das System prüft nur die Schreibweise: Gibt es ein @ und eine Domain? Ob die Adresse registriert ist, wird in diesem Schritt nicht geprüft.

   Nein
   F1 · FehlerscreenFeldfehler, derselbe Screen↩ Zurück zu Schritt 2

   Der Screen bleibt, und die eingegebene Adresse wird nicht gelöscht. Unter dem Feld steht „Geben Sie eine gültige E-Mail-Adresse ein, etwa [email protected]“. Die Person korrigiert und sendet erneut.

6. Ja
7. 4 · ScreenMeldung „Gesendet“

   Die Meldung lautet: „Wenn diese Adresse registriert ist, haben wir den Link zum Zurücksetzen gesendet.“ Ob die Adresse registriert ist oder nicht, es erscheint dieselbe Meldung. Darunter stehen ein Hinweis auf den Spam-Ordner und der Button „Erneut senden“.

9. 5 · ScreenE-Mail zum Zurücksetzen

   Der Betreff nennt den Namen des Produkts. Darin steht ein einziger Button: „Neues Passwort festlegen“. Bis wann der Link gilt, steht klar dabei.

11. 6 · EntscheidungIst der Link noch gültig?

    Das System prüft zwei Dinge: Ist der Link abgelaufen, wurde er schon einmal benutzt?

    Nein
    F2 · FehlerscreenScreen „Link ungültig“↩ Zurück zu Schritt 2

    Die Meldung lautet: „Dieser Link ist abgelaufen oder wurde schon benutzt.“ Es gibt einen Button: „Neuen Link anfordern“. Er bringt die Person zu Schritt 2, das E-Mail-Feld ist ausgefüllt.

12. Ja
13. 7 · ScreenScreen für das neue Passwort

    Ein Passwortfeld mit dem Button „Anzeigen“ daneben. Die Passwortregeln stehen unter dem Feld und werden beim Tippen einzeln abgehakt. Der Button heißt „Passwort speichern“.

15. 8 · EntscheidungErfüllt das Passwort die Regeln?

    Das System prüft das neue Passwort nach den Regeln des Produkts, etwa wie viele Zeichen es mindestens braucht.

    Nein
    F3 · FehlerscreenPasswortfehler, derselbe Screen↩ Zurück zu Schritt 7

    Der Screen bleibt, und das eingegebene Passwort wird nicht gelöscht. Die Meldung sagt, welche Regel noch fehlt. Die Person korrigiert das Passwort und speichert erneut.

16. Ja
17. 9 · ScreenBestätigungsscreen

    Die Meldung lautet: „Ihr Passwort wurde geändert.“ Der Button heißt „Anmelden“. Das System meldet die Person nicht von selbst an. An die Adresse des Kontos geht eine E-Mail, die die Passwortänderung meldet.

19. 10 · EndeMeldet sich mit dem neuen Passwort an

    Die Person kehrt zum Login-Screen zurück und meldet sich mit dem neuen Passwort an. Das Ziel ist erreicht, der Ablauf endet.

Weil JavaScript ausgeschaltet ist, funktioniert der Filter nicht. Alle Schritte und Beschreibungen stehen oben der Reihe nach.

Diesen Ablauf „Passwort vergessen“ habe ich erfunden, er gehört zu keinem echten Produkt. Die Meldung „Gesendet“, der einmal nutzbare Link und dass nach dem Zurücksetzen nicht automatisch angemeldet wird, beruhen auf den Empfehlungen von OWASP.

Den Login-Screen selbst, das Passwortfeld und den Platz des Links zum Zurücksetzen beschreibe ich im Muster Login und Registrierung.

Happy Path und Fehlerpfade

Der Happy Path ist die Route, auf der alles gut geht. Der Nutzer schreibt die Adresse richtig, die E-Mail kommt sofort, das Passwort erfüllt beim ersten Versuch die Regeln. Im Beispiel oben dauert dieser Weg 10 Schritte.

Fehlerpfade sind die Zweige, die sich öffnen, wenn eine Entscheidung mit „Nein“ beantwortet wird. Jeder Fehlerpfad muss zwei Fragen beantworten: Was sieht der Nutzer, und wohin kehrt er zurück? Im Beispiel gibt es drei Fehlerpfade, und alle drei führen den Nutzer zurück, ohne dass er Eingegebenes verliert.

In den meisten Teams wird der Happy Path gestaltet, die Fehlerpfade bleiben der Entwicklung überlassen. Heraus kommt eine Meldung „Ein Fehler ist aufgetreten“, die den Nutzer auf den ersten Screen wirft. Verbinden Sie jeden Nein-Pfeil mit einem Screen, ist dieses Problem von vornherein gelöst.

Wie ich die Meldung selbst schreibe, beschreibe ich auf der Seite zu Fehlermeldungen.

Ist der Ablauf fertig, prüfen Sie: Gehen aus jeder Raute mindestens zwei Pfeile? Bleibt kein Kasten in einer Sackgasse? Diese zwei Fragen finden die meisten fehlenden Screens, bevor das Design beginnt.

Wie man einen User Flow zeichnet

Einen Ablauf können Sie auf Papier oder in einem Designwerkzeug zeichnen. Wichtiger als das Werkzeug ist die Reihenfolge der Schritte. Ich gehe so vor:

1. Wählen Sie Aufgabe und Nutzer. Schreiben Sie ein Ziel in einem Satz, etwa „Der Nutzer setzt sein Passwort zurück“. Klären Sie mit einer Persona, für wen Sie zeichnen.
2. Schreiben Sie den Einstieg auf. Woher kommt der Nutzer in diesen Ablauf: vom Login-Screen, aus einer E-Mail, aus einer Anzeige? Verschiedene Einstiege können verschiedene erste Screens brauchen.
3. Zeichnen Sie zuerst den Happy Path. Ziehen Sie eine einzige gerade Linie von Start bis Ende. Geben Sie jedem Screen einen Namen.
4. Fügen Sie jeder Entscheidung den Nein-Zweig hinzu. Gehen Sie Fälle wie falsche Daten, abgelaufenen Link oder Verbindungsabbruch einzeln durch. Schreiben Sie auf, wohin jeder Zweig zurückführt.
5. Schreiben Sie die Antwort des Systems auf. Laut Kaplans Definition beschreibt der Ablauf auch, was das System bei jedem Schritt zeigt.
6. Testen Sie den Ablauf mit echten Nutzern. Als passendste Methode für Flows nennt Kaplan den Usability-Test. Um zu sehen, wohin der Nutzer zuerst tippt, ist auch ein First-Click-Test ein guter Anfang.
7. Gehen Sie danach ins Wireframe. Jedes Rechteck im Ablauf wird zu einem Screenentwurf.

Auch wann Sie den Ablauf zeichnen, ist wichtig. Ein Ablauf, der gezeichnet wird, bevor Problem und Nutzer klar sind, beschreibt schön die falsche Aufgabe. Deshalb zeichne ich die ersten Abläufe am Ende der Discovery-Phase, bevor es ins Design geht.

Meine Notiz

Für mich ist der User Flow das günstigste Dokument, das ein Produktteam zeichnen kann. Er ist schnell gezeichnet und beendet viele Diskussionen zwischen Design und Code von vornherein. Die Entwicklung sieht im Diagramm, welchen Fehlerscreen sie bauen soll.

Die häufigste Lücke in meinen Audits: Fehlerpfade sind gar nicht gestaltet. Der Happy Path ist sorgfältig gezeichnet, aber wer auf einen abgelaufenen Link drückt, landet auf einer leeren Seite.

Wenn Sie Ihren Ablauf mit mir zeichnen und seine Screens zusammen mit dem Code geliefert haben wollen: Der Design & Ship Sprint ist genau dafür da. Im zweiwöchigen Sprint liefere ich Design und Code in Ihr Repository.