User Flow Diagramvon Owl-Listener

User Flow Diagram Skill.

Zeige die Wege, die Nutzende nehmen können, um ein Ziel zu erreichen.

Prototyping
User Flows

OpenDesign herunterladen Anwendungsleitfaden ansehen

Quellenprüfung · User Flow DiagramSKILL.md

Aufgabe Prototyping Ergebnis • Ein Flussdiagramm für ein Nutzerziel. • Beschriftete Entscheidungen, Auslöser, Hintergrundvorgänge und Ausstiege. • Fehler- und Wiederherstellungspfade neben dem erfolgreichen Weg. Vor dem Start Die Quelle verlangt keine bestimmte Diagramm-Anwendung; das gewählte Ausgabeformat muss eine klare Notation beibehalten.

Redaktionelle Zusammenfassung · Quelle geprüft 2026-10-07 · kein generiertes Beispiel

01 Funktionen

Pfade, Entscheidungen und Wiederherstellung abbilden

Ein Leitfaden für Flussdiagramme auf Screen-Ebene mit Standardelementen, Auslöserbeschriftungen, Systemanmerkungen und Wiederherstellungszweigen.

Auf der Quelle basierender WorkflowKein Ausführungs-Benchmark

Die Arbeitsweise

User Flow Diagram bildet die Bewegung durch ein Produkt auf Screen- und Aktionsebene ab. Es unterscheidet Einstiegspunkte, Screens, Entscheidungen, Nutzeraktionen, Hintergrundprozesse und Endpunkte, sodass ein Diagramm sowohl den Weg als auch den Auslöser jedes Übergangs vermittelt.

Die Quelle empfiehlt, mit dem Happy Path zu beginnen und dann Verzweigungen, Fehler, Wiederherstellung und Ausstiege zu ergänzen. So bleibt ein Flow lesbar, ohne Fehlerfälle als Nebensache zu behandeln. Außerdem unterscheidet sie zwischen einem linearen Task Flow, einem verzweigten User Flow und einem Wire Flow mit Screen-Thumbnails.

Erwartete Ergebnisse

Ein Flussdiagramm für ein Nutzerziel.
Beschriftete Entscheidungen, Auslöser, Hintergrundvorgänge und Ausstiege.
Fehler- und Wiederherstellungspfade neben dem erfolgreichen Weg.

Beispiel-Briefing ansehen

Vom Briefing zur Prüfung

01
Ziel und Einstieg festlegen
Kläre, was Abschluss bedeutet und wo Nutzende beginnen können.
02
Hauptweg zeichnen
Bilde Screens und Aktionen mit einheitlicher Notation ab, bevor du Verzweigungen ergänzt.
03
Entscheidungen und Wiederherstellung ergänzen
Beschrifte Bedingungen, Systemereignisse, Verzögerungen, Fehler und Ausstiege, damit jeder Pfeil einen Grund hat.

02 Einsatzbereiche

Wann es sich eignet

Die Quelle verlangt keine bestimmte Diagramm-Anwendung; das gewählte Ausgabeformat muss eine klare Notation beibehalten.

Gut geeignet

Aufgaben über mehrere ScreensNützlich, wenn Teams sich darüber einigen müssen, wie Nutzende über mehrere Screens ein Ergebnis erreichen.
Verzweigte WorkflowsHilft, unterschiedliche Wege sichtbar zu machen, die durch Berechtigungen, Entscheidungen oder fehlgeschlagene Vorgänge entstehen.

Zu beachtende Grenzen

Keine Emotional JourneyEs ersetzt keine durchgängige Journey Map mit Gefühlen und Touchpoints.
Kein visuelles UI-MockupEin Flow kann auf Wireframes verweisen, beschreibt aber vor allem Wege und kein fertiges Screen-Design.

Diese Eingaben mitbringen

AufgabenzielNenne das Ergebnis und die Abschlussbedingung.
Screens und EinstiegspunkteLiefere bekannte Ansichten und Stellen, an denen Nutzende starten können.
VerzweigungsregelnBerücksichtige Berechtigungen, Validierung, Fehler und systemseitige Ereignisse.

03 Wichtige Entscheidungen

Entscheidende Punkte

Pfeile erklären Verhalten
Beschriftete Verbindungen machen einen Flow umsetzbar; eine unbeschriftete Linie verbirgt den Auslöser, den die Implementierung braucht.
Ein Ziel hält es lesbar
Wer unabhängige Ziele trennt, verhindert, dass ein Diagramm zur unlesbaren Karte des gesamten Produkts wird.

04 Beispielbriefing

Ein fokussiertes Briefing ausprobieren

Das folgende Beispiel-Briefing wurde nicht getestet. Prüfe die Einrichtung des Skills, bevor du es verwendest.

Einrichtung prüfen

Nutze den dokumentierten Installationsweg des Repositorys und behalte alle referenzierten Begleitdateien. Dieser Eintrag beschreibt eine fokussierte Designmethode und keine ausführbare Anwendung.

Quelldatei im Upstream

https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/prototyping-testing/skills/user-flow-diagram/SKILL.md

Die Quelle verlangt keine bestimmte Diagramm-Anwendung; das gewählte Ausgabeformat muss eine klare Notation beibehalten.

Mit einem Ergebnis beginnen

Passe Umfang, Quellmaterial und Rahmenbedingungen in diesem Briefing an, bevor du den Skill ausführst.

Beispiel-Briefing

Verwende user-flow-diagram für die Einladung eines Teammitglieds in einen Workspace. Berücksichtige den Einstieg über die Einstellungen und einen Screen für leere Teams, Zweige für bestehende und neue Konten, abgelaufene Einladungen und Berechtigungsfehler. Beschrifte jede Verbindung und unterscheide Nutzeraktionen vom E-Mail-Versand im Hintergrund.

Ergebnis prüfen

Prüfe die tatsächliche Ausgabe anhand dieser beobachtbaren Kriterien.

Jeder Pfeil hat einen Auslöser oder eine Bedingung.
Abschluss und frühe Ausstiege sind eindeutig dargestellt.
Zumindest die bekannten Fehlerpfade haben einen Wiederherstellungsweg.

OpenDesign bietet einen lokalen Design-Workspace für Coding-Agents. Dieser Eintrag bedeutet nicht, dass der Skill gebündelt ist oder dass externe Tools, Zugangsdaten und Software-Abhängigkeiten enthalten sind.

OpenDesign herunterladen Quickstart lesen

05 Quelle und Lizenz

Quelle und Lizenz

Diese Seite beschreibt die unten verlinkte, fixierte Quellrevision. Verhalten und Anforderungen im Upstream können sich ändern.

Quellen-Inhaber: Owl-Listener
Repository: Owl-Listener/designer-skills
Skill-Datei: prototyping-testing/skills/user-flow-diagram/SKILL.md
Lizenz: MIT
Geprüfter Stand: 2026-10-07 · 9a6930cf84a8

Redaktionelle Quellenzusammenfassung

Ein Leitfaden für Flussdiagramme auf Screen-Ebene mit Standardelementen, Auslöserbeschriftungen, Systemanmerkungen und Wiederherstellungszweigen.

Originalzusammenfassung von OpenDesign auf Basis der verlinkten Quelle. Repository-Sterne sind ein datiertes Popularitätssignal, weder Skill-Nutzung noch Qualitätswert.

06 Fragen vor dem Start

Fragen vor dem Start

Was ist ein Wire Flow?

Er verbindet ein Wegdiagramm mit Wireframe-Thumbnails, sodass Pfad und grobe Screen-Struktur gemeinsam gelesen werden können.

Sollte er das gesamte Produkt abdecken?

Die Quelle empfiehlt einen Flow pro Ziel, damit die Verzweigungen verständlich bleiben.

Wie unterscheidet er sich von einer State Machine?

Ein User Flow beschreibt den Weg durch Screens und Aktionen. Eine State Machine legt gültige Zustände und Übergänge für ein eng umrissenes Verhalten fest.

OpenDesign

Schaffe Raum für die nächste Design-Iteration.

Halte Briefing, Quellmaterial und Designarbeit in einem lokalen Workspace zusammen. Prüfe die Einrichtung des Skills, bevor du ihn in deinen Workflow aufnimmst.

OpenDesign herunterladen Design-Skills durchsuchen