UX-Konzeption · Modul 4: Nutzerwege und Interaktion

Lektion 2 von 5Übung 14 Min.

User Flows zeichnen

Lernziele
  • einen Nutzerweg mit fünf Bausteinen zeichnen
  • Verzweigungen und Abbrüche sichtbar machen
  • den Unterschied zwischen Flow und Sitemap erklären
  • einen Flow im Team zur Abstimmung nutzen

Eine Sitemap zeigt, welche Seiten es gibt. Sie sagt nichts darüber, in welcher Reihenfolge jemand sie durchläuft und wo er stecken bleibt. Genau das leistet ein User Flow – und er deckt regelmäßig Lücken auf, die in der Struktur unsichtbar bleiben.

1. Was ein Flow zeigt

Definition 2.1
User Flow
Die Darstellung eines Weges, den jemand mit einem bestimmten Anliegen nimmt – vom Einstieg über Entscheidungen und Handlungen bis zum Abschluss oder Abbruch. Er beschreibt Abfolge und Verzweigung, nicht Gestaltung.

Der Unterschied zur Sitemap lässt sich in einem Satz fassen: Die Sitemap ist der Grundriss eines Gebäudes, der Flow ist der Weg einer Person durch dieses Gebäude. Beide sind nötig, und keiner ersetzt den anderen. In der Praxis entsteht der Flow nach der Struktur und deckt dabei auf, dass Türen fehlen.

2. Fünf Bausteine genügen

BaukastenDie fünf Bausteine eines Flows

Einstieg

Woher jemand kommt: Suchmaschine, Anzeige, Visitenkarte, Empfehlung. Jeder Einstieg bringt einen anderen Wissensstand mit – deshalb gehört er ins Bild.

Mehr Formen braucht es nicht. Wer zehn Symbole einführt, zeichnet ein Diagramm für Fachleute statt ein Gespräch für alle Beteiligten.

Widerstehen Sie der Versuchung, mehr Formen einzuführen. Ein Flow ist ein Gesprächswerkzeug: Er muss von der Geschäftsführung, der Redaktion und der Umsetzung gleichermaßen gelesen werden können. Sobald eine Legende nötig wird, verfehlt er seinen Zweck.

3. Verzweigungen und Abbrüche

Abb. 2.1Ein Flow mit drei Ausgängen
SuchergebnisLeistungsseiteBudget bekannt?VerzweigungFormulardirekt, 4 FelderBeispielprojektedann FormularAbbruchkein Preis gefundenjaneinunklarDer gestrichelte Pfad ist der wichtigste: Wer ihn nicht zeichnet, plant nur den Idealfall
Abb. 2.1Jede Verzweigung braucht alle Ausgänge – auch den, der nirgendwohin führt. Der gestrichelte Abbruchpfad ist meist der lehrreichste Teil des Bildes.

Der häufigste Fehler beim Zeichnen ist der glückliche Pfad: Alle Kästen führen brav zum Ziel, jede Frage wird mit Ja beantwortet. Solche Flows sehen gut aus und helfen nicht, weil die Arbeit genau an den anderen Ausgängen liegt. Zwingen Sie sich bei jeder Verzweigung zu der Frage: Was passiert mit denen, die hier nicht weiterkommen?

Ein Flow ohne Abbruchpfade ist eine Wunschvorstellung. Zeichnen Sie zuerst den Idealweg, dann für jede Verzweigung den Weg derer, die anders antworten – dort entstehen die Aufgaben.

4. Wie man vorgeht

Tab. 2.1Einen Flow in fünf Schritten zeichnen
SchrittWas zu tun istTypischer Fehler
Anliegen festlegenEin Flow je Anliegen, nicht einer für allesEin Diagramm, das jeden Fall abdeckt und keinen erklärt
Einstieg benennenWoher kommt die Person und was weiß sie bereits?Jeder Flow beginnt auf der Startseite – das tun die wenigsten Besucher
Idealweg zeichnenDer kürzeste Weg zum Ziel, ohne UmwegeZu viele Zwischenschritte, die nur intern nötig sind
Verzweigungen ergänzenJe Entscheidung beide AusgängeNur der Ja-Zweig wird gezeichnet
ZählenWie viele Schritte, wie viele Entscheidungen?Der Weg wird nie an der Zahl der Schritte gemessen

Der zweite Punkt verdient Aufmerksamkeit. Die meisten Besucher kommen über eine Suchmaschine direkt auf eine Unterseite – die Startseite sehen viele nie. Ein Flow, der dort beginnt, beschreibt einen Weg, den kaum jemand geht.

5. Flows im Team nutzen

Der eigentliche Wert entsteht in der Besprechung. Legen Sie den Flow vor und gehen Sie ihn Kasten für Kasten durch. Drei Fragen bringen die meisten Erkenntnisse: Woher weiß die Person an dieser Stelle, was zu tun ist? Was passiert, wenn sie hier abbricht und morgen zurückkommt? Und wer im Haus bekommt mit, dass dieser Schritt passiert ist?

Die dritte Frage verbindet den Flow mit den internen Abläufen. Sehr oft stellt sich heraus, dass eine Anfrage zwar technisch ankommt, aber in einem Postfach landet, das freitags niemand liest. Solche Lücken sieht man nur, wenn der Flow über den Bildschirm hinaus gezeichnet wird.

6. Wie detailliert

Für die Konzeptarbeit genügen fünf bis zwölf Kästen je Flow. Wird es mehr, ist das Anliegen zu grob gefasst und sollte geteilt werden. Zeichnen Sie drei bis vier Flows für die wichtigsten Anliegen statt eines großen für alles – ein Diagramm mit vierzig Kästen liest niemand zweimal.

7. Häufige Fragen

Womit zeichnet man Flows? Zuerst auf Papier, dann mit einem beliebigen Diagrammwerkzeug. Wichtiger als das Werkzeug ist, dass der Flow in einer Besprechung an die Wand passt.

Wann entsteht der Flow – vor oder nach den Wireframes? Davor. Der Flow legt fest, welche Bildschirme es überhaupt geben muss; die Wireframes füllen diese dann aus. Umgekehrt entstehen Bildschirme, die niemand ansteuert.

Brauchen kleine Websites das? Für den Weg zur Anfrage ja, immer. Das ist der eine Weg, an dem das Geld hängt – er verdient eine halbe Stunde auf Papier.

8. Übung zum Selbermachen

Wählen Sie das wichtigste Anliegen auf einer Website, die Sie betreuen, und zeichnen Sie den Weg von einem Suchergebnis bis zur abgeschickten Anfrage. Verwenden Sie nur die fünf Bausteine. Ergänzen Sie danach an jeder Verzweigung den zweiten Ausgang – und zählen Sie, wie viele davon heute nirgendwohin führen. Jeder dieser Punkte ist ein verlorener Besucher, der schon Interesse hatte.

Quellen und weiterführende Literatur
  1. [1]Kalbach, J. (2020): Mapping Experiences. 2. Auflage, O'Reilly.
  2. [2]Nielsen Norman Group (2025): User Flows and Task Flows in UX Design.
  3. [3]Garrett, J. J. (2010): The Elements of User Experience. 2. Auflage, New Riders.

Stand: September 2026. Kursmaterial der Klarwerk Akademie. Methoden und Werkzeuge der Konzeption entwickeln sich weiter – die Grundprinzipien nutzerzentrierter Gestaltung bleiben.

Abschlussquiz

Drei Fragen – dann ist die Lektion geschafft.

Frage 1 von 3

Was ist der Unterschied zwischen Sitemap und User Flow?