User-Flow-Diagramm für eine Aufgabe in deiner App oder Website
Stell die Bildschirme und Aktionen dar, die Nutzer für eine Aufgabe durchlaufen, mit Anmeldeprüfungen, Fehlerzuständen und Zurück-Wegen, und jeder Zweig endet irgendwo.
Ein Flussdiagramm einer einzelnen Nutzeraufgabe, vom Einstiegspunkt über deine Bildschirme, Aktionen und Bedingungen bis zu jedem Erfolgs- oder Ausstiegspunkt. Bildschirme und Systemprüfungen werden unterschiedlich gezeichnet. Prüfe jeden Zweig, Zurück-Weg und Fehlerzustand gegen dein Design.
Checkout mit Limit für Zahlungsversuche, Zurück-Weg und langen Bildschirmnamen
Einstiegspunkt
Wiederkehrende Kundin öffnet den Warenkorb auf dem Handy über die Erinnerungs-E-Mail
Bildschirme und Aktionen in Reihenfolge
Bildschirm - Warenkorb mit gespeicherten Artikeln und voraussichtlicher Lieferzeit
Aktion - tippt auf Zur Kasse
Bildschirm - Lieferadresse und Auswahl des Lieferfensters
Aktion - wählt ein Lieferfenster
Bildschirm - Bezahlung mit gespeicherten Karten und Option für neue Karte
Aktion - tippt auf Bezahlen
Bildschirm - Bestellbestätigung mit Sendungsverfolgungslink
Bedingungen und wohin jede Antwort führt
Adresse noch gültig? Nein → Bildschirm Adresse bearbeiten, dann zurück zu Lieferadresse. Ja → Auswahl des Lieferfensters
Zahlung genehmigt? Ja → Bestellbestätigung. Nein → Bildschirm Zahlung fehlgeschlagen, erneut versuchen (höchstens zwei Wiederholungen, dann Bildschirm Support kontaktieren)
Nutzerin tippt auf Zurück bei Bezahlung → zurück zu Lieferadresse, Lieferfenster bleibt erhalten
Erfolgs- und Ausstiegspunkte
Bestellung aufgegeben; Nach fehlgeschlagenen Zahlungen an den Support verwiesen; Ablauf auf beliebigem Bildschirm verlassen
Notation oder Hervorhebung
Leer gelassen
Geprüft wird, dass die Wiederholungsschleife nach zwei Versuchen stoppt und zum Support führt, dass der Zurück-Weg zum richtigen Bildschirm führt und lange Bildschirmnamen vollständig bleiben.
Eine Aufgabe, drei Richtungen
Wähle eine Richtung als Startpunkt.
01
Erfolgspfad zuerst
Der Hauptweg zum Erfolg als gerade Linie, jede Alternative zweigt davon ab, für eine schnelle Abstimmung mit Stakeholdern.
02
Fehler- und Randfälle
Dieselbe Aufgabe mit jedem Fehler, jeder Wiederholung und jeder Sackgasse sichtbar, für QA-Planung oder ein Design-Review.
03
Neue und wiederkehrende Nutzer
Zwei Einstiege, die an einem gemeinsamen Bildschirm zusammenlaufen, für Aufgaben, bei denen Registrierung und Anmeldung vor dem Kernablauf getrennt sind.
Was die Vorlage beibehält
Diese Teile bleiben gleich.
01
Bildschirme und Aktionen getrennt
Bildschirme sind Kästen, Aktionen beschriften die Wege dazwischen, sodass sich das Diagramm wie ein Durchlauf liest.
02
Jeder Zweig hat einen Ausstieg
Jeder Pfad endet an einem genannten Ausstieg oder führt mit einer Beschriftung, die den Grund nennt, zu einem früheren Bildschirm zurück.
03
Deine Bildschirmnamen
Die Namen entsprechen denen aus deinen Design-Dateien und Tickets.
So funktioniert’s
Von deinen Angaben zum Ergebnis.
01
Eine Aufgabe und ihren Einstieg wählen
Kurs buchen, Passwort zurücksetzen, bezahlen. Eine Aufgabe pro Diagramm hält es lesbar.
02
Bildschirme und Aktionen in Reihenfolge auflisten
Beginne jede Zeile mit Bildschirm oder Aktion, damit das Diagramm Orte von dem unterscheiden kann, was Nutzer tun.
03
Bedingungen ergänzen
Formuliere jede Prüfung als Frage und sag, wohin jede Antwort führt, einschließlich Zurück- und Wiederholungswegen.
04
Jeden Ausstieg nennen, dann in Vizify prüfen
Erfolg, Abbruch und Fehlerenden. Nichts läuft, bevor du das Briefing sendest.
05
Jeden Zweig gegen dein Design prüfen
Folge jedem Pfad bis zu einem Ausstieg und bestätige, dass die Bildschirmnamen zu deinen Wireframes passen.
Grenzen des Ergebnisses
Das solltest du vor der Nutzung prüfen.
Das Diagramm zeigt den Ablauf, nicht die Bildschirme selbst. Wireframes, UI-Texte und Layouts werden nicht gezeichnet.
Vizify testet deine App nicht und findet keine fehlenden Randfälle. Es markiert Zweige ohne Ziel, nicht Pfade, die du nicht erwähnt hast.
Eine Aufgabe pro Diagramm. Mehrere Aufgaben in einem Diagramm werden schnell unübersichtlich.
Das Layout entsteht automatisch. Die Exportoptionen sind die, die die Vizify-App für das Diagramm anbietet.
FragenWas ist der Unterschied zwischen einem User-Flow-Diagramm und einem Wireframe?+
Ein User-Flow-Diagramm zeigt die Reihenfolge von Bildschirmen und Entscheidungen einer Aufgabe. Ein Wireframe zeigt, wie ein einzelner Bildschirm aussieht. Einigt euch mit dem Flow auf den Weg, bevor ihr die Bildschirme gestaltet.
Wie zeige ich, dass Nutzer zurückgehen können?+
Ergänze eine Zeile wie „Nutzerin tippt auf Zurück bei Bezahlung → zurück zu Lieferadresse“. Daraus wird ein beschrifteter Pfeil zum früheren Bildschirm.
Funktioniert diese User-Flow-Vorlage für Websites genauso wie für Apps?+
Ja. Bildschirme können Seiten, Modals oder Schritte in einem Formular sein. Nutze die Namen, die dein Team schon verwendet, damit das Diagramm zu euren Tickets passt.
Was, wenn ich nicht weiß, was nach einem Fehler passiert?+
Lass die Frage im Briefing stehen. Vizify fragt nach, wohin der Zweig führen soll, statt einen Fehlerbildschirm zu erfinden, und so kannst du die Lücke leicht im Team ansprechen.
