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.

3. Velocità e semplificazione del processo di checkout

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.

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.

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:

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.