Ein Benutzerreise-Diagramm beschreibt die Schritte, die ein Benutzer unternimmt, um ein bestimmtes Ziel innerhalb Ihrer Anwendung zu erreichen. Im Gegensatz zu systemorientierten Flussdiagrammen oder Ablaufdiagrammen konzentrieren sich Benutzerreisen auf menschliche Handlungen, Arbeitsablaufstadien und die Verfolgung der Benutzerzufriedenheit im Zeitverlauf.
Grundlegende Syntaxstruktur
Jede Benutzerreise beginnt mit der ReiseDeklaration, gefolgt von einem Titel und sequenziellen Abschnitten, die die Benutzererfahrung aufteilen.
Reise
titel Beispiel-Benutzerreise
Abschnitt Stadienname
Aufgabenname: Bewertung: Akteur1, Akteur2
Syntaxreferenz
Die folgende Tabelle zeigt die wichtigsten Elemente, die zur Erstellung einer Benutzerreisekarte in Mermaid.js verwendet werden.
| Komponente | Beschreibung | Syntaxbeispiel |
|---|---|---|
| Deklaration | Initialisiert den Renderer für das Benutzerreisediagramm. | Reise |
| Titel | Definiert die Hauptüberschrift oder das Benutzerziel am oberen Rand der Karte. | titel Anmeldevorgang |
| Abschnitt | Stellt eine hochrangige Phase oder ein Stadium der Benutzerreise dar. | Abschnitt Entdeckungsphase |
| Aufgabe | Eine spezifische Aktion, die der Benutzer innerhalb eines Abschnitts unternimmt. | Dokumentation durchsehen |
| Zufriedenheitsbewertung | Eine ganze Zahl von 1 bis 5, die das Benutzerwohlgefühl oder die Reibung abbildet. | : 4 : (4 von 5) |
| Akteure | Durch Kommas getrennte Liste der Rollen, die an der Erfüllung der Aufgabe beteiligt sind. | Benutzer, System |
Realitätsnahes Blueprint: E-Commerce-Kassen-Erlebnis
Dieses Blueprint zeigt eine vollständige Benutzerreise, bei der die Erfahrung eines Kunden beim Online-Kauf eines Artikels verfolgt wird, einschließlich emotionaler Schmerzpunkte (niedrige Werte) und Momente der Freude (hohe Werte).
journey
title Online-Kauf-Reise
section Produktentdeckung
Artikel suchen: 4: Benutzer
Preise vergleichen: 3: Benutzer
Produktbilder anzeigen: 5: Benutzer
section Kasse
Artikel in Warenkorb legen: 4: Benutzer
Konto erstellen: 2: Benutzer, System
Versanddetails eingeben: 3: Benutzer
Kreditkarte verarbeiten: 1: Benutzer, Zahlungsgateway
section Nach dem Kauf
E-Mail-Bestätigung erhalten: 5: System
Paketverfolgung: 4: Benutzer, Logistik
Syntax-Tipp:Zufriedenheitswerte werden vom Renderer automatisch farblich kodiert. Ein Wert von 1 oder 2 markiert betriebliche Reibung (rot/orange), ein Wert von 3 ist neutral (gelb), und Werte von 4 oder 5 stellen reibungslose, erfolgreiche Interaktionen dar (grün).
Erweitertes Konzept: Mehr-Akteur-Reisen
Bei komplexen Workflows werden Aufgaben selten von einer einzigen Person abgeschlossen. Mermaid ermöglicht es Ihnen, mehreren Akteuren eine einzelne Aufgabe zuzuweisen, indem Sie deren Namen durch Kommas trennen. Dies ist hilfreich, um darzustellen, wo eine Kundeninteraktion Unterstützung aus dem Hintergrund oder Automatisierung durch ein System erfordert.
journey
title Beispiel für Mehr-Akteur-Unterstützung
section Kundensupport-Fall
Störungsfall melden: 3: Kunde
Fall einem Agenten zuweisen: 4: System, Support-Administrator
Technischen Fehler untersuchen: 2: Entwickler, QA-Tester
Problem lösen und benachrichtigen: 5: Support-Administrator
Häufige Syntax-Fehler
Beim Schreiben von Benutzerreise-Karten können kleine Formatierungsfehler dazu führen, dass der Rendering-Engine einen Fehler auslöst. Behalten Sie diese drei Formatierungsregeln im Gedächtnis, um sicherzustellen, dass Ihr Diagramm korrekt erstellt wird:
- Die Doppelpunkts-Regel: Jede Aufgabenzeile muss genau der Struktur folgen:
Aufgabenbeschreibung: Bewertung: Akteur. Das Vergessen des zweiten Doppelpunkts vor der Akteurliste ist der häufigste Grund dafür, dass eine Reise-Diagramm nicht geladen wird. - Einschränkungen für Bewertungsbereich:Zufriedenheitswerte müssen eine ganze Zahl zwischen 1 und 5 sein. Eine Bewertung von 0 oder eine Zahl über 5 bricht die Layout-Parameter.
- Einrückung: Obwohl Mermaid flexibel mit Leerzeichen ist, macht die Einrückung Ihrer Aufgaben unter ihren jeweiligen Abschnitten Ihre Rohtextdateien viel leichter lesbar und wartbar, je weiter sich Ihre Produktfunktionen entwickeln.