strategy design emotion
ecommerce-checkout-mobile-design

E-commerce e mobile: ecco l’anatomia di un perfetto checkout

Test, articoli, ricerche… nel tempo si è formata un’estesa letteratura riguardante la struttura di un flusso ottimale di checkout per gli e-commerce. Ciò ha portato all’individuazione di diverse buone pratiche, come:

  • Offrire l’opzione guest checkout (cioè la possibilità di effettuare il checkout senza registrarsi al sito) riduce la resistenza degli acquirenti “first time”;
  • Inserire security badge per ridurre la preoccupazione di acquistare online per la prima volta;
  • Mantenere sempre al minimo indispensabile il numero di campi da compilare.

Queste, anche se contengono ottimi consigli, in realtà sono buone pratiche di checkout per la navigazione da desktop. Attualmente, nonostante la navigazione da dispositivi mobili rappresenti oltre il 50% del traffico degli e-commerce, è ancora abbastanza limitata la progettazione di flussi ottimali per il checkout da mobile.

Nota: i suggerimenti presenti in questo articolo sono delle buone pratiche, non una garanzia di miglioramento dei tassi di conversione.

1. Progettare per il pollice e non per il mouse

Secondo la ricerca effettuata da UX Matters, quando gli utenti toccano lo schermo possono tenere lo smartphone in 3 modi:

  • Con una mano – 49%
  • Usando una mano come supporto – 39%
  • Con due mani – 15%

progettazione-ecommerce-mobile

In ognuno di questi casi, il pollice gioca un ruolo attivo nell'esperienza di interazione touch screen.

Ecco un’illustrazione che mostra le diverse aree raggiungibili dal pollice in uno smartphone con schermo largo.

checkout-ecommerce-mobile


In fase di progettazione del flusso di checkout sarebbe quindi prudente posizionare gli elementi più importanti nell’area “easy” o “ok” dello schermo in modo tale da essere ben raggiungibili dal pollice.

ecommerce-checkout-mobile-amazon

Ecco come appare la pagina del carrello di Amazon. Da notare che logo, subtotale e box per i messaggi sono nella zona "difficile da raggiungere" e che, invece, il pulsante "procedere con il checkout" e la lista dei singoli prodotti sono tutti a portata di pollice.

2. Evitare lunghe pagine di checkout, dividendo il checkout su più pagine

progettazione-step-checkout-ecommerce

Prevedere pochi campi da compilare è una regola generale per la progettazione del checkout, ma ciò è ancora più importante se si progetta per il mobile. Capiamone i motivi.

Compilare i campi di testo da smartphone rappresenta una sfida a livello di UX: la scrittura su dispositivi touch-screen tende a essere più lenta rispetto al desktop, dove la digitazione avviene tramite tastiera. Inoltre, per poter scrivere su questi dispositivi è necessaria una tastiera a comparsa che - quando in uso - occupa la metà dello schermo visibile.

Prima di arrivare al checkout gli utenti sul sito hanno principalmente cliccato su pulsanti per scegliere la taglia, il colore, l’aggiunta al carrello… La pagina di checkout è probabilmente la prima e unica pagina del flusso che richiede l’uso della tastiera per scrivere nei campi di testo. Per questo è fondamentale non spaventare gli utenti con una pagina piena di campi da compilare e, per farlo, basta dividere il checkout su più pagine con un chiaro pulsante per passare alla fase successiva e un sommario degli step mancanti (in modo da fornire all’utente una stima dei passaggi da svolgere e del tempo necessario per completare la procedura).

ecommerce-checkout-design

Inoltre, è bene utilizzare colori diversi nella barra di avanzamento per indicare i passaggi completati e quelli ancora da completare.

3. Progettare per il pollice e non per il mouse

Un principio fondamentale per aumentare e ottimizzare le conversioni del checkout da mobile è far passare gli acquirenti attraverso il processo di pagamento nel modo più semplice e veloce possibile.

Velocità del checkout

L’85% degli utenti mobile si aspetta che le pagine si carichino a una velocità pari o superiore a quelle caricate da desktop (circa 2 secondi).

In un checkout da mobile è essenziale che i tempi di caricamento delle pagine siano inferiori ai 3 secondi o il 57% dei visitatori potrebbe abbandonare la procedura.

Ecco cosa è possibile fare per garantire la velocità di caricamento delle pagine da mobile:

  • lasciar perdere qualsiasi oggetto grafico pesante come i caroselli;
  • rimuovere eventuali script di social media o altri script di terze parti non strettamente necessari sulla pagina di pagamento;
  • grafiche obbligatorie, come il logo o icone, dovrebbero essere ospitate su CDN (Content Delivery Network);
  • installare Google page speed sul server per migliorare la latenza;
  • fare uno stress test della pagina di checkout in modo da simulare i periodi di picco elevati da traffico mobile.

Semplificazione

Per agevolare il più possibile gli utenti in fase di checkout bisogna assicurarsi che le relative pagine da mobile includano:

  • TabIndex: Precedente/Successivo

Inserendo un attributo HTML tabindex è possibile specificare la sequenza dei campi da compilare, dall'alto verso il basso della pagina. Ciò consentirà agli acquirenti di muoversi rapidamente tra i diversi campi.

  • Un campo da compilare per ogni riga

Posizionare i campi verticalmente, uno su ciascuna riga, con sopra un’etichetta che indichi cosa inserire nel campo (meglio evitare di inserire due o più campi in una sola riga). Questo assicura una transizione sequenziale attraverso il checkout.

ecommerce-progettazione-checkout

4. Attenzione nella scelta dei colori delle call to action

Per semplificare la fase di checkout è bene assicurarsi che su ogni pagina del processo ci sia un solo pulsante colorato che porti l’utente a effettuare l'azione che vogliamo che compia. Un colore grigio o più chiaro può essere utilizzato su altri pulsanti di priorità più bassa come i pulsanti "indietro" o "continua lo shopping".

5. Pulsanti facili da cliccare con le dita

Un principio fondamentale per la progettazione per il mobile è rendere i pulsanti grandi e facili da cliccare (soprattutto con i pollici).

Secondo uno studio sulla Meccanica del senso tattile da impronte digitali eseguito dal MIT Touch Lab, la larghezza media del pollice di un adulto è di circa 2,5 cm mentre quella del dito indice è compresa tra 1,6 e 2 cm; convertiti in pixel il pollice corrisponde a 72 pixel e l’indice è compreso tra i 45 e i 57 pixel.

Dato che checkout, guest checkout e pulsanti successivi al checkout sono gli elementi in cui inserire le principali chiamate all’azione (CTA), è fondamentale assicurarsi che questi pulsanti siano larghi e di almeno 44 pixel.

ecommerce-design

6. Pulsanti per la chiamata diretta

Un numero significativo di rivenditori online mette il proprio numero di telefono nelle pagine di pagamento. In questo modo possono alleviare l'ansia del cliente rispondendo direttamente a tutte le domande dell'ultimo minuto o prendendo ordini dagli acquirenti che non vogliono effettuare il checkout online.

7. E-commerce guest checkout

Un importante pain point per gli acquirenti in fase di checkout è la registrazione obbligatoria per poter procedere all’acquisto. Costringere nuovi acquirenti a creare un account prima di effettuare l’acquisto può frenare la vendita.

Ecco quindi alcune opzioni per il guest checkout da mobile che vale la pena testare:

ecommerce-guest-checkout-nike

Si consiglia di posizionare il pulsante per il guest checkout come prima opzione (prima o sopra il bottone per il sign in degli utenti registrati).

ottimizzazione-processo-pagamento-ecommerce

8. Checkout in più sessioni

Gli acquirenti online sono dispositivo-agnostici: potrebbero navigare da desktop sul lavoro e infine completare l’acquisto da cellulare o da tablet una volta tornati casa. In sostanza, la maggior parte degli utenti visiterà il sito 2 o più volte da diversi dispositivi prima di concludere l’acquisto. È quindi indispensabile implementare funzioni che consentano di continuare il processo di acquisto senza dover ripetere tutto dal principio, soprattutto per gli utenti registrati.

Per esempio, mantenere il carrello di utenti non registrati per 30 giorni o più potrebbe essere un metodo efficace per aiutare gli acquirenti a riprendere e completare il processo di acquisto.

9. Utilizzare menu espandibili per FAQ e opzioni di spedizione per mantenere gli acquirenti all’interno del processo di checkout

Liminare i link di uscita in fase di checkout può aiutare a ridurre le distrazioni. Informazioni importanti come le opzioni di spedizione, le domande frequenti e la politica di reso possono essere collocati in menu espandibili (accordion).

faq-e-opzioni-spedizione-ecommerce-checkout-design

10. Mostrare le diverse opzioni di pagamento

Spesso gli acquirenti al primo acquisto sono restii a fornire i dettagli della carta di credito, preferendo piuttosto PayPal.

  • Altri elementi importanti

Altri aspetti che facilitano il processo di checkout da mobile sono:

  • supporto alla compilazione con rilevamento automatico dei campi vuoti e riempimento automatico;
  • mostrare le password nei browser o generare automaticamente password e inviarle per email agli utenti che si stanno registrando;
  • address finders;
  • attivazione di tastiere numeriche per i campi riferiti a numeri (telefono, codice postale, data di nascita, carta di credito…).

Vuoi ricevere una consulenza di UX? Contattaci, insieme possiamo progettare l’e-commerce della tua azienda!

Liberamente tradotto da The Daily Egg.

Contattaci
Grazie per averci inviato la tua richiesta!
C'è stato un errore, ti chiediamo di riprovare.
inserisci il tuo nome
inserisci il tuo cognome
inserisci la tua email
per quale azienda lavori?
inserisci il tuo telefono
in che Paese ha sede la tua azienda?
accetta la privacy e iscriviti alla nostra newsletter
invia
Loading
Ti suggeriamo
skeuomorphic-design-web-design-sito
Skeuomorphic design

I critici sostengono che lo scheumorfismo sia obsoleto, ma l’IoT, la virtual reality e i wearables stanno cambiando i trend del design. Scopriamo insieme come!

idee creative pagina 404
Realizzare pagine 404 creative

Durante la navigazione di un sito web capita di incontrare una pagina di errore 404, scopriamo insieme cos'è e come si può personalizzare.

tracciare-transazioni-ecommerce-google-analytics
Transazioni e-commerce: le trappole nel tracciamento

Il tracciamento dell’e-commerce avanzato è stato implementato correttamente, ma le transazioni riportate sono diverse da quelle reali. Scopriamo insieme i motivi!