Diagram przejścia użytkownika opisuje kroki, które użytkownik wykonuje w celu osiągnięcia określonego celu w aplikacji. W przeciwieństwie do schematów przepływu skupionych na systemie lub diagramów sekwencji, przejścia użytkownika skupiają się na działaniach ludzkich, etapach przepływu pracy oraz śledzeniu satysfakcji użytkownika w czasie.
Podstawowa struktura składni
Każde przejście użytkownika zaczyna się od przejście deklaracji, po której następuje tytuł i sekwencyjne sekcje, które rozkładają doświadczenie użytkownika.
przejście
tytuł Przykładowe przejście użytkownika
sekcja Nazwa etapu
Nazwa zadania: Wynik: Użytkownik1, Użytkownik2
Odwołanie składniowe
Poniższa tabela rozkłada podstawowe elementy używane do tworzenia mapy przejścia użytkownika w Mermaid.js.
| Składnik | Opis | Przykład składni |
|---|---|---|
| Deklaracja | Inicjuje renderowanie diagramu przejścia użytkownika. | przejście |
| Tytuł | Określa główny nagłówek lub cel użytkownika na szczycie mapy. | tytuł Przepływ logowania |
| Sekcja | Reprezentuje wysoki poziom fazy lub etapu przejścia użytkownika. | sekcja Faza odkrywania |
| Zadanie | Pewna określona czynność wykonana przez użytkownika w ramach sekcji. | Przeglądaj dokumentację |
| Wynik satysfakcji | Liczba całkowita od 1 do 5 odzwierciedlająca radość lub trudności użytkownika. | : 4 : (4 z 5) |
| Uczestnicy | Lista ról rozdzielonych przecinkami uczestniczących w zakończeniu zadania. | Użytkownik, System |
Prawdziwy szablon: Doświadczenie zakupowe w e-commerce
Ten szablon przedstawia pełną podróż użytkownika, śledząc doświadczenie klienta przy zakupie produktu online, śledząc punkty bólu emocjonalnego (niskie oceny) oraz chwile radości (wysokie oceny).
podróż
tytuł Podróż zakupowa online
sekcja Odkrywanie produktu
Wyszukaj produkt: 4: Użytkownik
Porównaj ceny: 3: Użytkownik
Przejrzyj zdjęcia produktu: 5: Użytkownik
sekcja Kanał zakupowy
Dodaj produkt do koszyka: 4: Użytkownik
Utwórz konto: 2: Użytkownik, System
Wprowadź dane dostawy: 3: Użytkownik
Przetwarzaj kartę kredytową: 1: Użytkownik, Brama płatności
sekcja Po zakupie
Otrzymaj potwierdzenie e-mail: 5: System
Śledź dostawę przesyłki: 4: Użytkownik, Logistyka
Wskazówka składni:Oceny satysfakcji są automatycznie kolorowane przez renderowanie. Ocena 1 lub 2 wyróżnia trudności operacyjne (czerwony/oranżowy), ocena 3 to obojętność (żółty), a oceny 4 lub 5 oznaczają płynne, skuteczne interakcje (zielony).
Zaawansowane pojęcie: Podróże wielu uczestników
W złożonych przepływach pracy zadania rzadko są wykonywane przez jednego człowieka. Mermaid pozwala przypisać wielu uczestnikom jedno zadanie, rozdzielając ich nazwy przecinkami. Jest to pomocne do pokazania, gdzie interakcja z klientem wymaga wsparcia backendowego lub automatyzacji z systemu.
podróż
tytuł Przykład wsparcia wielu uczestników
sekcja Sprawa obsługi klienta
Zgłoś błąd: 3: Klient
Przypisz błąd do agenta: 4: System, Administrator obsługi
Zbadaj błąd techniczny: 2: Programista, Tester jakości
Rozwiąż problem i poinformuj: 5: Administrator obsługi
Powszechne błędy składniowe
Podczas tworzenia map podróży użytkownika małe błędy formatowania mogą spowodować błąd w silniku renderowania. Pamiętaj o tych trzech zasadach formatowania, aby upewnić się, że twój diagram zostanie poprawnie wygenerowany:
- Zasada podwójnego dwukropka: Każda linia zadania musi mieć dokładnie strukturę
Opis zadania: Ocena: Uczestnik. Pominięcie drugiego dwukropka przed listą uczestników jest najczęstszą przyczyną niepowodzenia ładowania diagramu podróży. - Ograniczenia zakresu ocen:Oceny satysfakcji muszą być liczbą całkowitą z zakresu 1 do 5. Przekazanie oceny 0 lub liczby większej niż 5 spowoduje uszkodzenie parametrów układu.
- Wcięcia: Choć Mermaid jest elastyczny w stosowaniu odstępów, utrzymywanie zadań wciętych pod ich odpowiednimi sekcjami znacznie ułatwia odczytywanie i utrzymanie plików tekstowych wraz ze skalowaniem funkcji produktu.