Il tunnel d’ordine di PrestaShop è stato concepito per uno schermo largo. Su mobile, da cui passa ormai la maggioranza del traffico, conserva scelte di interfaccia che costano ordini a ogni passaggio.
Ecco l’analisi schermata per schermata, con ciò che si corregge senza rifacimento.
Schermata 1: il carrello
Tre problemi ricorrenti.
Il pulsante d’ordine sotto la lista. Su un carrello di cinque articoli, si trova sotto un lungo scorrimento. Il comportamento atteso è un pulsante fisso in basso allo schermo, che mostra il totale, visibile in permanenza.
I selettori di quantità minuscoli. I pulsanti più e meno misurano spesso meno di trenta pixel. La raccomandazione di accessibilità colloca l’area di tocco minima intorno ai quarantaquattro pixel di lato. Al di sotto, il cliente sbaglia pulsante, il che lo obbliga a correggere e lo irrita.
L’eliminazione senza conferma né annullamento. Un tocco accidentale sul cestino svuota una riga senza rimedio. Un’opzione di annullamento temporaneo evita la ricostruzione mentale completa del carrello.
Schermata 2: identificazione
È la schermata che produce più abbandoni su mobile, e bastano due dettagli tecnici.
Il campo email non richiama la tastiera giusta. Un campo correttamente tipizzato fa apparire una tastiera con la chiocciola accessibile. Senza, il cliente passa dal tasto di commutazione a ogni inserimento.
La compilazione automatica non funziona. I browser sanno compilare email, nome, indirizzo e carta bancaria, a condizione che i campi portino le indicazioni di autocompletamento attese. Un modulo correttamente annotato si compila in due tocchi. Un modulo senza annotazioni impone un inserimento completo.
È probabilmente la correzione più redditizia di tutto il tunnel, e richiede solo di aggiungere attributi ai campi esistenti.
Terzo punto: la password. Se imponete la creazione dell’account, l’assenza di un’opzione per mostrare la password digitata produce errori ripetuti su una tastiera touch.
Schermata 3: l’indirizzo
Il modulo dell’indirizzo è il più lungo del tunnel e il meno adattato.
Troppi campi. Molte configurazioni chiedono azienda, complemento di indirizzo, secondo complemento, telefono fisso e mobile. Su mobile, ogni campo aggiuntivo è un ostacolo. Riducete allo stretto necessario e nascondete i campi facoltativi dietro un link.
Il codice postale non richiama la tastiera numerica. Stessa osservazione dell’email: il tipo di campo determina la tastiera proposta.
L’ordine dei campi non segue la logica locale. In Italia si inserisce il CAP prima della città, e il primo dovrebbe precompilare la seconda. Questo autocompletamento elimina un campo intero e riduce gli errori.
Gli errori si mostrano dopo la convalida. Un modulo che segnala cinque errori in blocco dopo un tocco sul pulsante obbliga a risalire nella pagina. La convalida durante la digitazione, campo per campo, è nettamente meno frustrante.
Checkout Semplice e Elegante per PrestaShopUn checkout one-page elegante che converte€99.00
Schermata 4: la spedizione
Due problemi.
Le opzioni di trasporto in radio compressi. Tre corrieri presentati in righe compatte con pulsanti radio di piccole dimensioni producono selezioni errate. Ogni opzione dovrebbe essere una scheda interamente cliccabile.
Il punto di ritiro in una mappa non adattata. I moduli di punto di ritiro mostrano spesso una mappa concepita per desktop, con segnaposti minuscoli e uno zoom capriccioso. Su mobile, una lista ordinata per distanza, con la mappa come opzione, funziona meglio.
Schermata 5: il pagamento
È la schermata dove un problema costa di più, poiché tutto lo sforzo precedente è perduto.
La tastiera numerica per la carta. Il numero di carta, la data di scadenza e il codice di sicurezza devono richiamare una tastiera numerica. È ancora frequentemente mal configurato, anche in moduli di pagamento recenti.
La compilazione automatica della carta. I browser e i gestori di password sanno compilare una carta salvata, a condizione che le indicazioni di autocompletamento siano corrette. Senza, il cliente deve tirare fuori la carta fisica, il che interrompe il percorso e lascia il tempo di rinunciare.
Il reindirizzamento verso una pagina bancaria non adattata. L’autenticazione forte apre a volte una pagina con la visualizzazione rotta su mobile. Testate questo percorso in condizioni reali, con una vera carta: è il punto del tunnel meno testato e più critico.
Il ritorno dopo l’autenticazione. Se il cliente passa alla sua app bancaria per convalidare, esce dal browser. Il ritorno deve ripristinare la sessione e proseguire l’ordine, non ripartire dal carrello.
I problemi trasversali
Quattro elementi che riguardano tutte le schermate.
Lo zoom automatico alla messa a fuoco. Su alcuni browser mobili, un campo con una dimensione del carattere inferiore a sedici pixel innesca uno zoom automatico alla selezione, che sposta tutta la pagina. La correzione consiste nel non scendere mai sotto questa dimensione nei moduli.
La tastiera che nasconde il campo attivo. Su un modulo lungo, la tastiera virtuale copre a volte il campo in corso di compilazione. Lo scorrimento deve adattarsi all’apertura della tastiera.
I banner fissi cumulati. Intestazione fissa, banner cookie, banner promozionale: su uno schermo di telefono, a volte resta solo un terzo dell’altezza per il contenuto. Nel tunnel, eliminate tutto ciò che non è necessario.
Il tempo di caricamento tra i passaggi. Ogni ricaricamento completo è un’occasione di abbandono. Un tunnel in una pagina, o con transizioni senza ricaricamento, elimina questi punti di rottura.
Il metodo di diagnosi
Tre azioni, in quest’ordine, prima di qualsiasi modifica.
Effettuate un ordine sul vostro telefono, in condizioni reali, con una vera carta e una rete mobile piuttosto che il wifi. Rivela in dieci minuti l’essenziale dei problemi.
Rilevate il tasso di completamento per passaggio, separatamente su mobile e su computer. Lo scarto tra i due localizza il problema: se il mobile molla all’indirizzo, è inutile ritoccare il pagamento.
Guardate registrazioni di sessioni mobili che non sono arrivate in fondo. Le esitazioni, le correzioni ripetute e gli zoom manuali si vedono immediatamente e indicano i campi problematici.
Da dove cominciare
Se potete fare solo tre cose, prendete queste.
Gli attributi di autocompletamento su tutti i campi del tunnel. Costo basso, effetto immediato, e ne beneficiano tutti i browser.
I tipi di campo, perché ogni inserimento richiami la tastiera giusta. Stessa logica, stesso rapporto sforzo risultato.
Le aree di tocco portate a quarantaquattro pixel minimo su tutti gli elementi interattivi del tunnel.
Queste tre correzioni non richiedono alcun rifacimento e trattano la maggioranza degli attriti misurabili.
Il modulo Checkout Semplice ed Elegante per PrestaShop ricostruisce questo percorso su PrestaShop 8 e 9: tunnel in una pagina senza ricaricamento tra i passaggi, modulo di indirizzo alleggerito con precompilazione della città dal codice postale, tipi di campo e attributi di autocompletamento correttamente impostati, e aree di tocco dimensionate per il mobile.
