🚶 Mermaid

Podróż użytkownika

Zobacz swój produkt oczami użytkowników

Otwórz ten przykład w edytorze Wygeneruj własny z AI

Czym jest Podróż użytkownika?

Podróż użytkownika mapuje kroki, jakie użytkownik wykonuje, aby osiągnąć cel, z oceną satysfakcji na każdym etapie. Natychmiast ujawnia punkty tarcia w onboardingu, procesie zakupowym czy obsłudze klienta.

Podróże użytkownika powstają raczej na ścianę sali warsztatowej niż do dokumentu architektury: produkt, wsparcie i design czytają ten sam obrazek i spierają się o tę samą niską ocenę. Ich wartość jest emocjonalna, nie techniczna — krok działający bez zarzutu wciąż może dostać dwójkę. Ich ograniczeniem jest to, że diagram mieści jedną liniową ścieżkę z jedną liczbą na krok. Współczynniki porzuceń i kanały mieszkają gdzie indziej.

Żywy przykład

Kod Mermaid

journey
    title Checkout experience
    section Browse
      Find product: 5: Customer
      Compare options: 3: Customer
    section Purchase
      Add to cart: 4: Customer
      Enter payment: 2: Customer
      Confirm order: 5: Customer

Żywy przykład

Kiedy go używać

Mapowanie doświadczeń onboardingu i procesu zakupowego

Identyfikowanie punktów tarcia dzięki ocenom satysfakcji

Uspójnianie zespołów produktu i wsparcia wokół rzeczywistej ścieżki użytkownika

Częste błędy

Krok bez aktora

Zapis Find product: 5 renderuje krok, ale nie przypina go do nikogo, więc znika on z legendy aktorów, a rząd buziek wygląda na niekompletny. Każdy krok potrzebuje po ocenie przynajmniej jednego aktora.

Nazwy aktorów muszą się dokładnie zgadzać

Customer i customer to dwaj różni aktorzy, każdy z własnym kolorem i wpisem w legendzie. Diagram nadal się renderuje, więc duplikat łatwo przeoczyć — kopiuj nazwę, zamiast wpisywać ją ponownie w każdej linii.

Persona to nie aktor kroku

Wypisanie Customer, Support przy jednym kroku jest w porządku — nazywa to, kto w nim uczestniczy. Psuje się co innego: przeprowadzenie dwóch person przez tę samą podróż, bo jedna linia ocen uśrednia wtedy dwa różne doświadczenia. Rysuj jedną podróż na personę.

Podstawowa składnia

.mmd

journey
    title My journey
    section Phase
      Step name: 5: Actor

journey title Checkout experience
Tytuł nazywa cel, do którego zmierza użytkownik. Jedna podróż powinna obejmować jeden cel jednej persony; druga persona oznacza drugi diagram.
section Purchase
Sekcje dzielą podróż na fazy — przeglądanie, decyzja, płatność, odbiór — i rysują się jako pas nad krokami, które obejmują, co grupuje też wizualnie linię ocen.
Enter payment: 2: Customer
Krok to tekst, potem ocena od 0 do 5, potem aktorzy, wszystko rozdzielone dwukropkami. Ocena wyznacza buźkę oraz wysokość, na jakiej rysowany jest punkt.
%%{init: {"theme": "forest"}}%%
Dyrektywa init w pierwszej linii zmienia motyw, co jest jedyną dźwignią stylowania, jaką daje podróż — nie ma kolorów osobno dla kroku ani dla sekcji.

Pytania o ten diagram

Co oznaczają oceny?

Każdy krok otrzymuje ocenę satysfakcji 0–5 wyświetlaną jako buźka. Niskie oceny pokazują dokładnie, gdzie użytkownicy mają trudności — Twój backlog usprawnień w formie wizualnej.

Czy w jednej podróży może wystąpić kilku aktorów?

Tak — wymień kilku aktorów po ocenie (np. „Płatność: 3: Klient, Wsparcie”), aby pokazać, kto bierze udział w każdym kroku.

Jak wyeksportować podróż użytkownika do prezentacji warsztatowej?

Eksportuj PNG w 2× albo 4×, żeby buźki pozostały czytelne z projektora, albo SVG na drukowany plakat. Źródło zostaje tekstem, więc diagram da się zaktualizować między dwiema sesjami w kilka minut.

Czy podróż w Mermaid pokaże współczynniki porzuceń albo kanały?

Nie. Jedynym elementem ilościowym jest ocena 0–5; nie ma kolumn na metryki, kanały czy punkty styku. Trzymaj je w tabeli obok diagramu, a podróży pozwól nieść emocjonalny kształt ścieżki.

Jak pokazać użytkownika, który rezygnuje w połowie?

Wewnątrz podróży nie da się rozgałęzić — to jedna liniowa ścieżka. Zamodeluj rezygnację jako krok z niską oceną, a alternatywne trasy narysuj obok na schemacie blokowym, gdy to samo rozgałęzienie jest tematem rozmowy.

Czym to się różni od pełnej mapy podróży klienta?

Podróż w Mermaid zatrzymuje trzy rzeczy: kroki, aktorów i satysfakcję. Klasyczna mapa podróży niesie dodatkowo kanały, punkty bólu, szanse i cytaty użytkowników. Użyj diagramu jako kręgosłupa, a resztę umieść w otaczającym dokumencie.

Podróż użytkownika czy inny typ diagramu?

Podróż użytkownika czy schemat blokowy?

Schemat blokowy pokazuje, na co system pozwala: każdą gałąź, każdą ścieżkę błędu. Podróż pokazuje, co jedna osoba faktycznie zrobiła i jak to odebrała. Spór o to, czy przypadek brzegowy jest obsłużony, to pytanie do schematu; decyzja, co naprawić najpierw — do podróży.

Podróż użytkownika czy oś czasu?

Podróż porządkują kroki, oś czasu — daty. Podróż powtarza się dla każdego użytkownika i niesie ocenę; oś czasu wydarzyła się raz i niczego nie ocenia. Onboarding to podróż; historia przebudowy tego onboardingu to oś czasu.

Poznaj pozostałe typy diagramów

🔀 Schemat blokowy 💬 Diagram sekwencji 🧩 Diagram klas 🗄️ Diagram związków encji 🔄 Diagram stanów 📅 Wykres Gantta 🥧 Wykres kołowy 🧠 Mapa myśli 🌿 Graf Git 🕰️ Oś czasu 🎯 Wykres ćwiartkowy

Stwórz swój Podróż użytkownika już teraz

Opisz go naturalnym językiem — AI napisze kod Mermaid za Ciebie.

Otwórz Mermaid Studio