User Experience Design

Non esiste arrivo senza partenza: l’importanza degli indicator progress checkout

Tempo di lettura 4 minuti


I carrelli abbandonati sono un tema centrale nelle dinamiche eCommerce e trascurare la fase di check-out comporta la perdita di vendite e conversioni.

In questo articolo vediamo come la strutturazione di un efficace processo di check-out sia fondamentale per la vendita. Infatti se non si prevede l’inserimento di progress indicatorche guidano gli utenti nella fase finale dell’acquisto, questi si trovano in un labirinto senza uscita dove la via più rapida è l’abbandono dell’eCommerce.

L’importanza dei progress indicator

Le percentuali di abbandono del carrello, relative all’anno appena concluso, si aggirano intorno al 74%. Questo dato evidenzia che solo un quarto delle persone è riuscito a raggiungere il bottone di pagamento e a concludere l’acquisto.

 

Da un recente studio condotto da UPS è emerso inoltre che una delle cause principali che portano gli utenti ad abbandonare il carrello è da attribuire a processi di check-out troppo lunghi, complessi e spesso poco chiari.

UNAV11F

I progress indicator hanno proprio la funzione di risolvere questo problema. Infatti, indicando precisamente agli utenti in che punto del processo si trovano e quanto manca al termine, si semplifica l’intero sistema.
Si registra inoltre che il 27% degli abbandoni è dovuto ai limiti di tempo entro i quali concludere le procedure di acquisto.
Anche questo aspetto può essere parzialmente risolto grazie all’introduzione di indicatori che segnalano l’incombenza del termine della sessione: la pressione data dalla durata limitata della possibilità di acquisto porta alla continuazione e conclusione, da parte del consumatore, del processo.

Altro elemento fondamentale è la lunghezza delle procedure di check-out: per evitare che gli utenti si stanchino dei molteplici step, e abbandonino di conseguenza l’acquisto, è importante ridurle il più possibile. Alcuni brand le hanno addirittura condensate in un’unica pagina.
Se invece non è possibile snellire i processi di check-out, è necessario inserire chiari e precisi progress indicatorche identificano il progressivo raggiungimento del goal, in modo da rendere gli utenti maggiormente inclini a terminare l’acquisto.

Per rendere meglio l’idea, immaginate di percorrere una distanza di cui però non si conosce la meta. Dopo i primi chilometri percorsi comincerete a perdere l’entusiasmo e a pensare di abbandonare la prova. Applicando questa metafora a una pagina di eCommerce check-out è possibile iniziare a capire l’aspetto psicologico che racchiude.
Passiamo dalla teoria alla pratica con alcune best practice di successo relative all’inserimento di progress indicator checkout, di differenti forme e dimensioni, applicati sia lato desktop che mobile, in modo da confrontare i diversi approcci sulle due piattaforme.

Desktop

Amazon rende semplice e on brand gli step verso il check-out facendo progredire l’esperienza attraverso lo spostamento lungo una progressive ba. Grazie a questo approccio l’utente è consapevole dei passaggi che ha compiuto e quelli che mancano alla conclusione dell’acquisto.
wEs5gOx

Dollar Shave Club utilizza dei progress indicator oltre che funzionali, anche molto accattivanti, che si adattano perfettamente allo stile del sito e del brand.
Il processo si compone di trestep numerati e descrittivi che, al completamento, si arricchiscono di un flag.

YEGZ3Ht

I progress indicator di AO.com consentono il passaggio tra le diverse fasi grazie a un bottone, che conduce alla successiva. Questo è uno dei possibili approcci per concentrare, in un’unica pagina, tutti i passaggi del processo di check-out.
aXJubNM

Mulberry sceglie invece di rendere contemporaneamente visibili tutte le fasi del processo di check-out e di espanderle in conseguenza della progressione dell’utente verso il completamento dell’acquisto.
È inoltre possibile cliccare, se necessario, su ogni singola sezione completata per modificare i dettagli o le informazioni inserite.

0saplaz

Vertty sceglie di utilizzare come indicatore, il proprio logo. Il design, semplice e d’immediata comprensione, facilita l’utente a raggiungere senza difficoltà la fine dell’azione.

UuAc66h

Mobile

Farmdrop punta tutto sulla semplicità di utilizzo e interazione: due step connotati da colori a contrasto per indicare quale sezione si sta completando e quale, di conseguenza, è disattiva.

cPA5JA8

Anche l’approccio di Firebox di adatta perfettamente al design generale del sito. La caratterizzazione sia a livello di layout, contraddistinta dall’oscuramento delle fasi concluse, sia delle parole “done” o “confirm”, assolutamente esemplificative della progressione verso l’acquisto, guida con chiarezza l’utente verso la fine del processo.

6zEAgUi

L’approccio di Apple è simile a quello di Mulberry: il brand sceglie di mostrare sullo schermo tutti gli stepdel processo di check-out e di espanderli, per l’editing, con un semplice click.
Questa soluzione è ottimale a livello mobile, in quanto, in concomitanza dello scorrimento della pagina si procede anche con le fasi di check-out.

1BHbklV
Infine, vediamo l’approccio di Whisky Exchange che include, tra gli indicatori di check-out termini come “offers” che informano l’utente rispetto alla tipologia di acquisto che sta andando a effettuare. Un dettaglio in più per migliorare l’interazione con i consumatori.

FdWm2ds

Le principali caratteristiche di un efficace progress indicator

Sulla base delle case history presentate è possibile identificare le caratteristiche principali che un progress indicator check-out deve prevedere per facilitare l’utente a completare gli acquisti e a diminuire di conseguenza la percentuale degli abbandoni.

  • Chiaramente visibile
  • Testo semplice
  • Design minimale e bold font
  • Coerenza con il brand (visual design generale)
  • Indicazione chiara degli step completati e dei rimanenti

 

Ti è piaciuto questo articolo?

Iscriviti alla Newsletter per non perderti le novità sul mondo del Conversion Marketing

Iscriviti alla Newsletter!