🚶 Mermaid

Percorso utente

Guarda il tuo prodotto con gli occhi dei tuoi utenti

Che cos’è un Percorso utente?

Un percorso utente mappa i passaggi che un utente compie per raggiungere un obiettivo, valutati con un punteggio di soddisfazione a ogni passaggio. Rivela all’istante i punti di attrito nell’onboarding, nel checkout o nelle esperienze di supporto.

I percorsi utente sono fatti per la parete di una sala workshop più che per un documento di architettura: prodotto, supporto e design leggono la stessa immagine e discutono dello stesso punteggio basso. Il loro valore è emotivo, non tecnico: un passaggio che funziona perfettamente può comunque valere due. Il loro limite è che il diagramma contiene un solo cammino lineare con un solo numero per passaggio. Tassi di abbandono e canali stanno altrove.

Esempio dal vivo

Codice 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
Esempio dal vivo
Customer
Browse
Browse
Customer
Find product
Find product
Customer
Compare options
Compare options
Purchase
Purchase
Customer
Add to cart
Add to cart
Customer
Enter payment
Enter payment
Customer
Confirm order
Confirm order
Checkout experience

Quando usarlo

Mappare le esperienze di onboarding e di checkout
Identificare i punti di attrito con i punteggi di soddisfazione
Allineare i team di prodotto e supporto sul percorso reale degli utenti

Errori frequenti

Un passaggio senza attore

Scrivere Find product: 5 disegna il passaggio ma non lo attribuisce a nessuno, quindi sparisce dalla legenda degli attori e la fila di faccine sembra incompleta. Ogni passaggio ha bisogno di almeno un attore dopo il punteggio.

I nomi degli attori devono coincidere esattamente

Customer e customer sono due attori diversi, ciascuno con il proprio colore e la propria voce in legenda. Il diagramma viene disegnato lo stesso, quindi il duplicato passa inosservato: copia il nome invece di riscriverlo a ogni riga.

I profili utente non sono attori

Elencare Customer, Support su un passaggio va benissimo: dice chi è coinvolto lì. Quello che si rompe è far percorrere lo stesso percorso a due profili utente: l’unica linea dei punteggi media allora due esperienze diverse. Disegna un percorso per profilo.

Sintassi di base

.mmd
journey
    title My journey
    section Phase
      Step name: 5: Actor
  • journey title Checkout experience

    Il titolo nomina l’obiettivo che l’utente sta cercando di raggiungere. Un percorso dovrebbe coprire un solo obiettivo per un solo profilo utente; un secondo profilo significa un secondo diagramma.

  • section Purchase

    Le sezioni dividono il percorso in fasi — esplorare, decidere, pagare, ricevere — e vengono disegnate come una fascia sopra i passaggi che contengono, il che raggruppa anche la linea dei punteggi.

  • Enter payment: 2: Customer

    Un passaggio è testo, poi un punteggio da 0 a 5, poi gli attori, il tutto separato da due punti. Il punteggio determina la faccina e l’altezza del punto.

  • %%{init: {"theme": "forest"}}%%

    Una direttiva init sulla prima riga cambia il tema: è l’unica leva di stile che un percorso utente offre — non esiste alcun colore per passaggio o per sezione.

Domande su questo diagramma

Cosa significano i punteggi?

Ogni passaggio riceve un punteggio di soddisfazione da 0 a 5, mostrato come una faccina. I punteggi bassi evidenziano esattamente dove gli utenti faticano — il tuo backlog di miglioramenti, visualizzato.

Più attori possono apparire in uno stesso percorso?

Sì — elenca più attori dopo il punteggio (es. «Checkout: 3: Cliente, Supporto») per mostrare chi è coinvolto a ogni passaggio.

Come esporto un percorso utente per le slide di un workshop?

Esporta in PNG a 2× o 4× così le faccine restano leggibili quando vengono proiettate, oppure in SVG per un poster stampato. Il sorgente resta testo, quindi il diagramma si aggiorna tra una sessione e l’altra in un paio di minuti.

Un percorso utente Mermaid può mostrare tassi di abbandono o canali?

No. L’unico elemento quantitativo è il punteggio da 0 a 5; non ci sono colonne per metriche, canali o punti di contatto. Tienili in una tabella accanto al diagramma e lascia che il percorso porti la forma emotiva del cammino.

Come mostro un utente che abbandona a metà?

Dentro un percorso non si può ramificare: è un unico cammino lineare. Modella l’abbandono come un passaggio con punteggio basso, e disegna le strade alternative in un diagramma di flusso accanto, quando è proprio la ramificazione l’oggetto della discussione.

Che differenza c’è rispetto a una customer journey map completa?

Un percorso Mermaid tiene tre cose: passaggi, attori e soddisfazione. Una journey map classica porta anche canali, punti di attrito, opportunità e citazioni testuali. Usa il diagramma come spina dorsale e metti il resto nel documento intorno.

Percorso utente o un altro tipo di diagramma?

Percorso utente o diagramma di flusso?

Il diagramma di flusso mostra ciò che il sistema permette: ogni ramo, ogni percorso di errore. Il percorso utente mostra ciò che una persona ha davvero fatto e come l’ha vissuto. Se un caso limite sia gestito è una domanda da diagramma di flusso; che cosa correggere per primo è una domanda da percorso utente.

Percorso utente o linea temporale?

Il percorso utente è ordinato per passaggi, la linea temporale per date. Il percorso si ripete per ogni utente e porta un punteggio; la linea temporale è accaduta una volta sola e non esprime giudizi. L’onboarding è un percorso; la storia della sua riprogettazione è una linea temporale.

Crea ora il tuo Percorso utente

Descrivilo in linguaggio naturale — l’IA scrive il codice Mermaid per te.

Apri Mermaid Studio