Come creare flussi utente per l'e-commerce

Pubblicato: 2021-06-01

Immagina di creare un nuovo sito Web per il tuo negozio online. Vai in un generatore di pagine come WordPress e inizi ad aggiungere sezioni alle pagine, decidendo che la barra di navigazione dovrebbe essere centrata o che la tua clip Informazioni dovrebbe venire prima.

O forse hai già un sito web e hai deciso che potrebbe avere un aspetto migliore, quindi inizi a trasferire immagini, testo e CTA.

In ogni caso, sono già stati commessi errori: in entrambi i casi non è presente alcuna strategia o flusso di utenti. Il design è scelto casualmente, schizzato come un autentico dipinto di Jackson Pollock.

E un fan di Pollock o meno, i suoi dipinti non hanno mai dovuto passare da una fase all'altra dell'imbuto.

Nella nuova era dello shopping online, avere un sito Web di e-commerce è fondamentale: un'app potenzialmente vantaggiosa.

Ma avere un bel sito web non è sufficiente allo stesso modo in cui attirare un sacco di traffico è uno spreco a meno che non converta (cioè, acquisti i tuoi prodotti). Hai bisogno di un sito web progettato per guidare i tuoi contatti lungo il percorso verso la conversione.

Un sito Web ben progettato non inizia con la scelta del font e dell'animazione preferiti. Inizia con la mappatura dei flussi utente.

Che cos'è un diagramma di flusso utente?

I diagrammi di flusso utente, chiamati anche diagrammi di flusso utente, diagrammi di flusso delle attività e diagrammi di flusso dell'interfaccia utente, mostrano il percorso che un utente compie attraverso il tuo sito Web o app per raggiungere un obiettivo o un'attività. Illustrando i passaggi che un utente compie per passare da una pagina all'altra fino a quando non completa l'attività (come l'acquisto di un prodotto), acquisisci una comprensione di come incoraggiare il completamento dell'attività.

Esempio di diagramma di flusso utente
Esempio di diagramma di flusso utente da UX Collective.

Il ruolo dei flussi utente nella progettazione UX

La progettazione dell'esperienza utente (UX design) riguarda la creazione di progetti incentrati sull'utente. Mettendo i tuoi utenti, alias potenziali clienti, al centro delle tue scelte di design, migliori la loro esperienza e aumenti le possibilità che arrivino alla fine della vendita.

I flussi utente rivelano come gli utenti interagiscono con il design del tuo prodotto, tenendo conto delle azioni dell'utente e della funzionalità del prodotto necessarie per creare una conversione.

Crea un diagramma di flusso utente prima di iniziare il processo di progettazione per informare le esigenze del tuo sito web. Strateghi, designer e sviluppatori web utilizzano i flussi UX per individuare le carenze del prodotto e comprendere l'ambito di un progetto, incluso il numero di pagine, i componenti per ciascuna e l'architettura dell'informazione di tutto.

Puoi anche creare flussi utente dopo lo sviluppo del sito Web per individuare aree di semplificazione e miglioramento.

Esempio di diagramma di flusso delle attività utente Esempio di diagramma di flusso utente da Creately.

Flussi utente di alto livello e flussi utente dettagliati

I flussi utente di alto livello sono rapidi e brevi, creati per fornire una rapida panoramica di un'idea o di un processo.

I flussi utente dettagliati, o flussi di attività, sono più utili, poiché descrivono in dettaglio tutti i passaggi e le decisioni coinvolti nel completamento di un'attività. I diagrammi di flusso dettagliati sono ciò che desideri creare per informare il design e il contenuto del tuo sito Web di e-commerce.

Alcuni differenziano i flussi utente dai flussi di attività in tali flussi utente sottolineano che un'attività può essere completata in modo diverso dagli utenti in base alla persona e al punto di ingresso.

Flussi utente vs Percorsi utente

I flussi utente sono diversi dalle mappe del percorso utente che delineano l'esperienza end-to-end di un utente con un prodotto. Laddove i flussi sono puramente basati sull'azione, i percorsi degli utenti tengono conto di fattori come le emozioni degli utenti.

Le mappe del percorso dell'utente e le mappe del percorso del cliente vengono talvolta utilizzate in modo intercambiabile, ma ciò funziona solo quando l'utente e il cliente sono la stessa persona, il che non è sempre il caso. Ad esempio, un datore di lavoro (il cliente) potrebbe acquistare uno strumento online che i propri dipendenti (gli utenti) possono utilizzare.

Come creare diagrammi di flusso utente

1. Decidere lo scopo del diagramma

Ciò che include il diagramma di flusso utente dipenderà dal tuo obiettivo e dall'attività che stai monitorando. Limitare il numero di obiettivi o attività per diagramma; tracciarne solo uno alla volta è la cosa migliore. Guardarne più di uno può complicare eccessivamente e sovraccaricare il diagramma, rendendolo meno efficace.

Assegna al flusso utente un titolo chiaro in base al suo scopo per riferimento futuro.

2. Comprendi il tuo utente tipico

La comprensione dei tuoi utenti aiuterà a informare la navigazione del flusso di attività che funziona meglio e il contenuto da includere in ogni pagina.

Conduci ricerche sugli utenti per raccogliere:

  • Obiettivi
  • Motivazioni
  • Caratteristiche desiderate
  • Livello di esperienza/conoscenza
  • Barriere

Questi fattori possono cambiare per diversi segmenti di pubblico e fasi del percorso di acquisto, ma li utilizzerai per determinare cosa accade in ogni pagina web, come progettare ogni pagina e dove collegarti.

Gli obiettivi dell'utente e dell'azienda dovrebbero essere allineati in modo da poter progettare flussi di siti Web di e-commerce che soddisfino entrambi.

Anche lo studio dei flussi della concorrenza può fornire informazioni dettagliate.

3. Creare una chiave del flusso di attività

Non ci sono regole rigide per come dovrebbe apparire il diagramma di flusso delle attività purché tu sia coerente e fornisca una chiave per i colori e le forme utilizzati in modo che gli altri possano capirlo.

I simboli del flusso utente comuni includono:

Tasto simboli flusso utente

Altre forme talvolta utilizzate includono triangoli, parallelogrammi obliqui e forme tratteggiate (invece di contorni solidi). Puoi ottenere le specifiche che desideri, cambiando le forme per elementi aggiuntivi come attività di sistema, elementi di input o selezioni/clic.

Qualsiasi colore utilizzato dovrebbe contribuire al significato e alla leggibilità del diagramma di flusso dell'utente. Considera come il colore può aiutare a raggruppare oggetti, identificare elementi e rivelare modelli.

Altri tipi di diagrammi di flusso utente

Poiché i diagrammi di flusso degli utenti sono unici per il tuo sito Web, non tutti seguono la pratica comune di utilizzare forme e colori.

Un altro stile di flusso utente è modellato sui diagrammi di stato utilizzati nell'informatica. I diagrammi di stato variano nell'aspetto, ma puoi scriverli come una serie di frazioni con frecce che guidano il flusso del processo di e-commerce. Le frazioni includono ciò che l'utente vede sopra la linea di frazione e ciò che l'utente fa sotto di essa, in questo modo:

Altri tipi di diagrammi di flusso utente

Esistono anche flussi utente modellati sulle mappe del sito. Oltre alle azioni intraprese, presentano a ciascuna pagina Web coinvolta nel flusso dell'utente un elenco di tutte le sezioni e sottosezioni di tali pagine. Quindi, le frecce o le linee mostrano quali sezioni di pagina e CTA portano gli utenti al passaggio successivo del flusso.

esempio di flusso utente di e-commerce
Esempio di flusso utente da Salinthip Kaewkerd su Behance.

4. Delinea il diagramma di flusso dell'utente

Una volta deciso il formato, puoi iniziare a mappare i flussi di attività. Inizia con il punto di ingresso scelto per il tuo diagramma particolare ed elenca tutti i passaggi tra il punto di ingresso e il completamento dell'attività.

I punti di ingresso possono essere qualsiasi fonte che porta un utente al tuo sito Web, inclusi annunci pubblicitari, social media, risultati di ricerca organici, collegamenti esterni, campagne e-mail e altro ancora. Le app tendono ad avere meno punti di accesso rispetto ai siti web.

I passaggi che seguono (la sostanza del diagramma di flusso dell'interfaccia utente) dipenderanno dall'attività che hai scelto di mappare. Possono includere elementi come moduli di accesso e registrazione, navigazione dei prodotti, processi di pagamento o onboarding. Considera come l'utente arriva a ciascuna pagina, tutte le azioni che può intraprendere su di essa e dove va da quella pagina per progredire verso il suo obiettivo.

Il passaggio finale nel flusso utente non dovrebbe essere l'azione dell'utente che completa l'attività, ma la funzionalità che conferma il completamento per l'utente.

Se stai aggiornando un sito Web di e-commerce attuale, puoi utilizzare i rapporti Flusso comportamentale di Google Analytics per ottenere informazioni dettagliate sulla provenienza dei tuoi utenti, su come navigano nel tuo sito Web e dove escono.

Durante la mappatura del flusso utente, noterai che esistono più percorsi che un utente può intraprendere per completare un'attività. I rami oi nodi si interromperanno in questi punti per continuare a mappare i percorsi primari.

Quando crei diagrammi di flusso, puoi aumentare la leggibilità limitando il numero di direzioni in cui si muovono. Se finisci con le frecce che puntano in ogni direzione, il tuo diagramma inizia a sembrare più simile a un labirinto. Sono disponibili molti strumenti di flusso utente per la creazione di diagrammi funzionali.

5. Riduci i tuoi flussi

Una volta creato il diagramma di flusso dell'utente, è il momento di tirare fuori le cesoie. Questo passaggio prevede tre modifiche significative:

  1. Rimozione di informazioni non essenziali per visualizzare il flusso
  2. Spostamento di dettagli al di fuori della pura navigazione dell'utente in una mappa di viaggio
  3. Identificazione di passaggi ridondanti o non necessari

Quest'ultimo passaggio serve meno per visualizzare il flusso di navigazione e più per l'utente di cui stai migliorando l'esperienza. Più decisioni e azioni un utente deve intraprendere per completare un'attività, meno è probabile che lo faccia. Semplifica il più possibile il flusso di utenti per aumentare le possibilità di conversione.

6. Etichettare con intenzione

Etichetta tutti gli elementi del tuo diagramma di flusso utente con chiarezza. Dovrebbe essere chiaro a cosa si riferisce ogni forma, pagina, sezione o azione. Evita di usare l'abbreviazione se sminuisce il significato. Al termine, chiedi ad alcuni colleghi di esaminare i flussi utente per vedere se sono in grado di interpretarli.

Ottimizza i flussi utente con i dati

Quando crei un nuovo sito Web o test nuovi design o contenuti, considera di esaminare i flussi di utenti nella vita reale e confrontarli con le tue aspettative come illustrato nel diagramma di flusso. Se si verificano discrepanze, puoi usarle per correggere il diagramma di flusso o modificare l'interfaccia utente stessa per guidare gli utenti nel modo in cui hai pianificato. Diversi metodi di ricerca UX testano i flussi degli utenti, inclusi test di usabilità, analisi delle attività e test degli alberi.

Puoi anche utilizzare i dati di Google Analytics o la ricerca per vedere dove puoi ottimizzare il flusso di utenti per aumentare le vendite. Quando si creano siti Web di e-commerce, i flussi di utenti si collegano alla canalizzazione di vendita dell'e-commerce. È naturale che gli utenti scendano più in basso nell'imbuto (da cui la forma dell'imbuto), ma i punti di abbandono drastici indicano aree di miglioramento.

E spesso, miglioramenti significano ottimizzare il flusso utente, sia rendendo la navigazione più naturale, modificando il design o aggiungendo copia direzionale.

I cali di flusso possono anche derivare da scelte commerciali: un aumento delle frequenze di rimbalzo dopo che i potenziali acquirenti hanno visto il costo della spedizione indica che probabilmente il problema sono le tariffe di spedizione elevate.

Analizza i passaggi relativi alle frequenze di rimbalzo e ipotizza quale potrebbe essere il problema (e la soluzione). Testare A/B le tue soluzioni fino a quando gli abbandoni non diminuiscono e più utenti passano al passaggio successivo.

Differenziare il flusso del tuo sito di e-commerce

I diagrammi di flusso dell'e-commerce tendono a seguire uno schema simile: scoprire una pagina esternamente, entrare nella pagina, guardare i prodotti, aggiungere prodotti al carrello, effettuare il checkout, ricevere conferma.

Sebbene questi siano tutti passaggi coinvolti nell'e-commerce per natura, vale la pena considerare la tua proposta di valore e il tuo pubblico unici durante la progettazione dei flussi utente.

Puoi offrire di più? I tuoi utenti possono beneficiare di funzionalità aggiuntive?

Alcuni negozi di e-commerce confondono i percorsi degli utenti e i flussi di attività includendo quiz di personalizzazione o funzionalità di prova. L'artista virtuale di Sephora, ad esempio, consente agli utenti di simulare l'aspetto del trucco su di loro prima dell'acquisto da casa.

Un altro punto di differenziazione nell'e-commerce che spesso viene dimenticato quando si progettano i flussi degli utenti è il post-acquisto. La conferma dell'acquisto di un cliente non è mai la fine del percorso del cliente. Ora devono rintracciare il loro pacco, attendere con ansia il suo arrivo, disimballarlo con entusiasmo e potenzialmente restituirlo. Vale la pena considerare come potresti migliorare l'esperienza utente con la spedizione, le pagine di ringraziamento e l'upselling.

Quando crei flussi per siti Web e app di e-commerce, tieni presente tutte le fasi della canalizzazione di e-commerce:

  • Considerazione
  • Valutazione
  • Acquistare
  • Acquisto postale

Promuovi le vendite con flussi UX efficienti

L'esperienza dell'utente è più di un bel design che gli utenti si divertono a guardare. Sta progettando l'architettura delle informazioni e i contenuti che guidano il percorso dell'e-commerce verso la conversione.

Si tratta di creare un sito Web o un'applicazione in cui un utente può navigare con facilità, spostandosi da una fase all'altra, trovando il prodotto che sta cercando e facendo clic sull'invito all'azione giusto quando arriva il momento.

Fare troppi passaggi tra il punto di ingresso e il punto vendita significa chiedere loro di lavorare di più; troppi pochi passi potrebbero non essere sufficienti per appianare le loro esitazioni, il che significa chiedere loro di correre un rischio maggiore. A nessuno piace lavorare o rischiare quando acquista online.

La mappatura di un flusso utente efficiente per ciascuna delle attività sul tuo sito Web è un modo efficace per individuare i punti di attrito dei consumatori, in modo da poter progettare un prodotto digitale che offra una maggiore esperienza utente e, di conseguenza, aumenti le vendite.