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

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.

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.

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

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).

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

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

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.

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

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).

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).

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.