M-Commerce e usabilità: le best practices per ottimizzare le conversioni - seconda parte

Continuiamo il nostro viaggio nella mobile eCommerce usability, M-Commerce, per l’appunto. Nel primo articolo abbiamo presentato un’analisi completa delle attuali performance di usabilità rispetto al tema della Ricerca Prodotto, ovvero la navigazione e la ricerca prodotto da mobile, la mobile search, le liste prodotto, le categorizzazioni, i filtri di ricerca e infine la cross navigation. In questa seconda puntata approfondiremo il processo di checkout e la realizzazione form e campi usabili. Nonostante il profilato campione di studio, che comprende 50 tra i migliori siti mobile eCommerce, si registra un’esperienza negativa a livello di processo di checkout e inserimento dati (ex. campi di un form). Nello specifico, gli ostacoli a livello di usabilità sono tali da impedire agli utenti di completare l’ordine. Quanto emerge è un pessimo intreccio di problemi di usabilità, indipendenti dal dispositivo, e vincoli unici dati dal tipo di device. I test di usabilità e l’analisi comparativa hanno inoltre rivelato che, nonostante il “costo totale dell’ordine” sia un aspetto molto importante durante il checkout, molti siti presentano implementazioni non adeguate e poco chiare. Nell’immagine che segue notiamo ad esempio come le opzioni di consegna di Costco (a sinistra) non includano alcuna informazione rispetto ai tempi e al costo di ciascuna opzione di spedizione. Questo approccio lascia l’utente all’oscuro di quali siano le differenze tra le possibilità proposte. Se invece consideriamo il sito di Sears (a destra dell’immagine) troviamo una stima relativa ai tempi di consegna e ai costi di trasporto di ciascuna delle opzioni di spedizione proposte. In questo modo il visitatore può scegliere la migliore per le sue esigenze.

Checkout & Form su dispositivi mobile

Durante l’analisi dei risultati dello studio sono emersi pattern interessanti relativi ai principali aspetti da migliorare rispetto alla presentazione e interazione utente relativa al costo totale, le spese di spedizione e la registrazione (account). Sono stati inoltre riscontrati problemi rispetto alla ridondanza dei form, la mancanza di descrizione dei campi e di messaggi di errore. Tutte queste aree, lato mobile, risentono di importanti mancanze a livello di usabilità e causano in primo luogo la frustrazione degli utenti e il conseguente abbandono del carrello. In questo articolo vedremo quindi quali sono i principali aspetti problematici riscontrabili sui siti mobile. Partiamo da un esempio. Quasi 80% del campione analizzato ha registrato degli attriti rispetto all’identificazione della data di uno specifico giorno della settimana (venerdì). Il soggetto si orienta contando i giorni sulle dita della mano prima di compilare il campo relativo alla data. Se in questa interfaccia fosse stato applicato un calendario grafico, il compito sarebbe risultato molto più semplice e immediato.

Mobile Checkout Usability: aree critiche

Il grafico che segue mostra la distribuzione relativa al processo di checkout. I punti rossi indicano scarsa usabilità, i gialli performance accettabili e i verdi segnalano una buon livello di usabilità (1).

Quando si parla di processo di checkout, le questioni più urgenti si identificano a livello di costo totale, spese di trasporto e caratteristiche dell’account. La maggioranza degli utenti è molto attenta al costo totale dell’ordine in quanto è perfettamente consapevole che la sola spesa del prodotto non porterebbe al totale presente nel riepilogo dell’ordine, che comprende costi di spedizione, tasse o altro. La mancanza di una pagina di riepilogo dettagliata unita all’ostilità dell’utente verso la compilazione da mobile portano la modalità di presentazione del costo totale un aspetto assolutamente centrale nel contesto mobile. Attualmente la maggioranza dei mobile site non presenta un resoconto completo. L’immagine che segue mostra i 5 lunghi passaggi che l’utente deve superare per concludere il processo di checkout, che richiede tutti i dettagli della carta di credito e il pagamento dell’ordine prima che venga esplicitata la spesa totale.

Il 33% di siti mobile dello studio non presentano, in nessun punto del processo di checkout, il costo totale dell’ordine, prima di chiedere i dettagli delle carta di credito. Gli utenti sono quindi costretti a fornire tutti i dati richiesti senza sapere con esattezza quanto sarà loro addebitato. Questo è ovviamente molto dannoso a livello di esperienza utente e, durante i test, si è rivelato essere una causa diretta di abbandoni. I siti campione non sono performanti anche rispetto alle opzioni di spedizione. Ad esempio, il 24% ,oltre a non fornire informazioni rispetto ai costi e tempi, obbliga gli utenti a ripetere le loro preferenze in più momenti del checkout. Allo stesso modo, a esclusione degli omnichannel site che offrono soluzioni di Store Pickup o similari, il 47% non mostra lo Store Pickup in aggiunta alle classiche opzioni di spedizione. Questo porta gli utenti a trascurare le possibilità offerte o a selezionare soluzioni indesiderate durante il processo di checkout. L’immagine che segue riassume la difficoltà che gli utenti hanno riscontrato durante il processo di checkout di Buy.com. La maggior parte dei soggetti sottoposti al test ha avuto grossi problemi con questa pagina, tanto che alcuni hanno erroneamente creato un account anche se non necessariamente richiesto.

La peggior performance si registra però a livello di account. Anche se l’80% dei mobile checkout offre agli utenti la possibilità di utilizzare un guest checkout, l’88% realizza layout che portano l’utente a ignorare questa possibilità, per la precisione il 66% degli utenti sottoposti al test non ha visto il guest checkout. La modifica degli step di selezione dell’account è una delle soluzioni assolutamente da implementare per migliorare il flusso di cassa dei dispositivi mobile.

È importante però aggiungere che molti siti presentano una buona pagina carrello. Agli utenti è fornito un controllo piuttosto funzionante delle fasi di editing e verifica dei dati inseriti, molto importante visti i numerosi errori di digitazione riscontrati durante i test.

Form usability: aree critiche

Anche per questa sezione, relativa al data input, il grafico che segue mostra la distribuzione. I punti rossi indicano bassa usabilità. quelli gialli una condizione accettabile e quelli verdi un buon livello di usabilità. Dalla distribuzione sopra riportata si evince che in media i siti campione hanno ottenuto performance mediocri in termini di data Input. Semplicità e ridondanza sono aspetti chiave e fondamentali per la comprensione del contesto, soprattutto quando si tratta di dispositivi mobile. Dal momento che a livello di scrittura touch non è possibile attuare miglioramenti, è importante progettare moduli e form semplici e di immediata comprensione, in modo che l’utente sia stimolato a proseguire lungo il funnel di conversione. Nella schermata che segue vediamo come un utente sia messo in difficoltà da un form design errato e poco usabile. Il consumatore sta compilando il form relativo alle spese di spedizione. Nonostante la selezione dell’opzione “come indirizzo di fatturazione”, il sistema visualizza, ancora da compilare, tutti i campi relativi all’indirizzo di destinazione. Questo approccio confonde l’utente in quando sono fornite informazioni contraddittorie e, spesso, può indurlo ad abbandonare l’acquisto.

Anche se sembra scontato eliminare ridondanze a livello di digitazione e selezione nella progettazione di piattaforme mobile, la performance media riscontrata rispetto a questa tematica non è positiva. Infatti, in un alto numero di siti sono trascurate le principali nozioni di semplificazione rispetto all’inserimento dati. Nello specifico:

• 16% dei siti, di default, mostra il doppio dei campi relativi all’indirizzo: uno dedicato alle spedizioni e uno per i pagamenti.
• 28% richiede le stesse informazioni due volte invece di prediligere, dove possibile, campi di auto-riempimento.
• 30% prevede un inserimento differenziato sulla base del tipo di carta, invece di un auto-detecting basato sul numero di carta.

Migliorando queste lacune è possibile ridurre la complessità dell’inserimento dati, semplificando all’utente il processo di compilazione. Dalla schermata che segue notiamo come Kohl predisponga un menù a tendina per la scelta della carta di credito utilizzata, mentre siti come Crate & Barrel semplifichino questo processo inserendo un auto-detected, che individua la carta di riferimento sulla base del numero (3).

I risultati relativi invece dal layout del form sono parzialmente positivi, anche se solo una manciata di siti performano al meglio rispetto a questo aspetto. La performance dei layout del form è strettamente interconnessa ai campi che prevede infatti, design inappropriati causano equivoci e fraintendimenti rispetto alla funzione della pagina o del form. Si riscontra inoltre che 80% dei siti ancora non presenta possibilità di completamento automatico prediligendo invece menù a tendina per selezionare paese e stato di provenienza. L’implementazione di funzionalità come, ad esempio, la localizzazione del device ridurrebbero il tempo che l’utente deve dedicare alla compilazione di informazioni facilmente autocompilabili. Il tallone d’Achille dei mobile form usability è la descrizione, dove i siti campione, oltre a registrare una performance pessima, presentano anche errori di implementazione. Per la progettazione di questo campo, a livello mobile, è importante seguire rigorosi requisiti di chiarezza. Molti abbandoni sono infatti attribuibili a utenti bloccati dalla compilazione di questo campo, non immediatamente visibile o posizionato in parti della pagina non in prossimità del punto di compilazione. In alcuni casi risulta addirittura assente. Come si vede dall’immagine che segue, in modalità landscape e una volta attivata la tastiera, il contesto della pagina risulta minimo. Dal momento che la tastiera (in questo caso ci riferiamo alla visualizzazione di un iPhone 5s) occupa il 70% dello schermo, l’utente riesce a vedere 1 o 2 capi del form.  

Come regola generale è importante far in modo la compilazione di ogni campo sia un’attività separata e completa, con tutti i contenuti necessarie nelle immediate vicinanze. Questo, come abbiamo visto, perché durante la compilazione l’utente non ha la possibilità di avere una visione complessiva della pagina. Gli attriti possono essere numerosi, ma le maggiori lacune riscontrate includono:

• 94% dei siti non indica con chiarezza i campi obbligatori, costringendo gli utenti a “indovinare” quali siano da compilare o esplorare la pagina per individuare quelli che hanno omesso.
• 60% non fornisce preview o esempi di input nei punti in cui sono previsti molteplici possibilità di formati.
• 65% non spiega nel dettaglio le modalità di trattamento dei dati personali pur richiedendoli come obbligatori.
• 38% disegna etichette esteticamente molto gradevoli ma di difficile interazione. Una soluzione molto funzionale è posizionare le label sopra il campo da compilare.

Nella schermata che segue vediamo come un soggetto, inserendo il proprio numero di telefono includendo gli spazi, provoca un errore di inserimento. È importante che il messaggio di errore spieghi all’utente dove agire per risolvere il problema. Nel caso in esame non avviene, tanto che l’utente prova, a tentoni, a fare modifiche nei diversi campi compilati, ottenendo sempre lo stesso messaggio. A questo punto l’utente frustrato abbandona il sito. La causa è un errore di progettazione.

I media i siti offrono scadenti messaggi di errore che, chiaramente, inficiano l’esperienza dell’utente. Infatti, 92% dei siti utilizza solo un generico non valido [telefono / e-mail / codice di sicurezza / ..] senza specificare agli utenti che tipo di errore hanno commesso e come correggerlo. Inoltre, per ciò che concerne gli indirizzi di spedizione, il 39% non implementa un address validato mentre 18% non prevede blocchi nel momento in cui si inseriscono informazioni non valide. Questa è una grossa mancanza di segnalazione di errori in una delle parti più importanti e cruciali del sito. I maggiori cambiamenti da implementare per rendere maggiormente user-friendly il processo di checkout e la form field experiece sono:

• Tenere in considerazione i limiti del touch keyboard che può indurre all’errore nell’inserimento dati.
• La mancanza di una visione complessiva della pagina causata dalla ridotta porzione di schermo visibile (una volta attivata la touch keyboard).
• La mancanza di riferimenti precisi, atti a rendere meno ingannevole l’interfaccia (ad esempio, l’assenza di stato hover, nessuna informazione su parti potenzialmente coperti di schermo dell’utente, etc).

I trend di design vanno e vengono in fretta e le novità devono sempre esser implementate velocemente e spesso senza fase di testing, ma i fondamenti di usabilità restano, a volte per decadi, i medesimi, ed è importante considerarli come centrali per la strutturazione di qualsiasi interfaccia. Chiaramente questi cambiamenti non possono essere risolti in una notte, ma è importante realizzare design e layout che incorporino e creino la miglior esperienza utente possibile (4).