UX di eCommerce per l'esperienza mobile

Il termine "commercio mobile" è stato introdotto 20 anni fa da Kevin Duffey quando ha suggerito che un dispositivo mobile potrebbe funzionare come un punto vendita al dettaglio nelle tasche di un cliente. Considerando i limiti tecnologici del tempo, chi avrebbe mai pensato che un giorno saremmo stati in grado di esplorare, recensire e acquistare facilmente beni su un piccolo dispositivo tascabile?

Non posso sopravvalutare come i dispositivi mobili stiano cambiando il modo in cui interagiamo con i nostri consumatori; dobbiamo abbracciare questi cambiamenti. – Joel Anderson, CEO di Walmart

La sorprendente crescita dell'eCommerce ha anche alimentato la crescita dell'eCommerce mobile, che ora vale quasi 700 miliardi di dollari. L'eCommerce mobile è attualmente la fetta più grande del gigantesco mercato online. Più dell'80% degli americani ha effettuato un acquisto online nell'ultimo mese: tre anni fa, il numero era solo dell'11,6%.

Un rapporto di Business Insider Intelligence ha suggerito che il commercio mobile aumenterà fino al 45% entro il 2020. La ricerca ComScore ha concordato e, nel 2016, ha riportato un aumento del 44% della spesa tramite dispositivi mobili rispetto al 2015.

Nonostante gli alti numeri di vendita, oltre il 60% degli utenti è ancora preoccupato per l'hacking delle proprie informazioni finanziarie quando utilizza un telefono cellulare. Tuttavia, la soddisfazione dei clienti è ancora abbastanza alta, con giganti della vendita al dettaglio mobile come Amazon e Apple che ricevono entrambi un punteggio di soddisfazione superiore all'80%.

Best practice per l'esperienza utente di eCommerce mobile per il successo

Supporta lo zoom dell'immagine pizzicando e toccando due volte i gesti

Le persone hanno familiarità con gesti come toccare due volte e pizzicare per ingrandire le immagini sul dispositivo mobile. Durante uno studio sull'usabilità dell'eCommerce mobile, il Baymard Institute ha scoperto che, in modo del tutto naturale, gli acquirenti vogliono essere in grado di ispezionare a fondo il prodotto e sono preoccupati per i piccoli dettagli. Gli utenti che erano interessati all'acquisto di un prodotto ma non potevano esplorarlo ingrandendo non si sentivano a proprio agio nell'acquistarlo e spesso non si impegnavano nella vendita.

È abbastanza sorprendente che delle 50 applicazioni di eCommerce mobile con il maggior incasso, oltre il 40% non supportasse i gesti di zoom. Anche i siti che offrivano versioni ravvicinate di immagini hanno riscontrato frequenze di rimbalzo simili, il che suggerisce che il supporto dei gesti di zoom dell'immagine del prodotto in un'app di eCommerce mobile è fondamentale.

Considerando le dimensioni ridotte dello schermo dei dispositivi mobili, questo è un problema specifico della piattaforma. Il supporto di almeno una di queste funzionalità metterà un'app in compagnia del 50% più ricco delle applicazioni di eCommerce, ovvero l'elenco dei maggiori incassi.

Alcuni fattori da considerare:

• Le immagini a bassa risoluzione sono l'equivalente delle immagini senza zoom. Gli utenti sono interessati a vedere chiaramente i dettagli di un prodotto e per farlo hanno bisogno di immagini ad alta risoluzione. L'opzione per ingrandire un'immagine di bassa qualità è praticamente inutile, in quanto non consente all'utente di vedere i dettagli.
• Il Baymard Institute ha scoperto che il 50% delle app non indica agli utenti che possono pizzicare o toccare due volte le immagini dei prodotti. Indicare la disponibilità dello zoom dell'immagine è importante. Sebbene questi gesti siano comunemente noti agli utenti mobili, è comunque necessario dimostrare che sono disponibili. A tale scopo si consiglia l'uso di icone o rappresentazioni visive.

Fornire una funzione "Salva" per il carrello

Come accennato in precedenza, le dimensioni ridotte dello schermo dei dispositivi mobili sono un ostacolo principale quando si tratta di eCommerce mobile. Il Baymard Institute ha osservato che oltre il 61% degli utenti mobili utilizzerà spesso il proprio desktop per completare un acquisto anziché il telefono.

Una funzione "salva carrello" riduce il numero di abbandoni del carrello e consente agli acquirenti di salvare gli articoli per un acquisto successivo. I carrelli degli acquisti persistenti consentono ai clienti di continuare a fare acquisti senza la necessità di cercare il prodotto desiderato al momento del reso, una funzionalità che utilizzerebbe il 55% degli acquirenti.

Ecco come fidelizzare questi clienti:

1. Fai funzionare il carrello come una lista dei desideri salvando gli articoli aggiunti al carrello.
2. Crea un'opzione per consentire agli acquirenti di ricevere e-mail con gli articoli salvati. Mostra promemoria che possono utilizzare il proprio desktop per finalizzare l'acquisto.

Usa moduli descrittivi e ben etichettati

L'applicazione delle migliori pratiche per i moduli mobili è un'altra considerazione. È importante che il design dell'esperienza utente di un'app o di un sito di eCommerce, pur eliminando qualsiasi confusione, consenta agli utenti di completare i moduli il più rapidamente possibile.

Di seguito sono riportate le best practice per l'usabilità dei moduli mobili:

• Posizionare le etichette dei moduli sopra il modulo per migliorare la leggibilità, la facilità d'uso e la chiarezza. Spiegare perché sono necessarie determinate informazioni ridurrà l'ansia degli utenti durante la compilazione di moduli sul proprio cellulare.
• Abbina gli input di testo con la tastiera appropriata. Visualizza un tastierino numerico quando si inseriscono numeri di telefono e cifre della carta di credito e un tastierino di testo quando si inseriscono indirizzi e testo. Ciò ridurrà gli errori degli utenti e accelererà il completamento dei moduli.
• Limita il numero di campi di input per ridurre lo sforzo di digitazione. Un minor numero di campi di input genererà un modulo meno caricato e migliorerà il flusso di checkout dell'esperienza utente.
• Avanza automaticamente ogni campo sullo schermo una volta completato. Ciò non ostacolerà la visualizzazione dei campi incompleti.
• Usa gli stepper invece dei menu a discesa per ridurre lo sforzo degli acquirenti. Gli stepper vengono utilizzati per aumentare o diminuire il valore di una quantità costante e sono una soluzione con cui è più veloce lavorare e più attraente per gli occhi.

Fornire suggerimenti automatici, rilevamento automatico, ricerca indirizzi ed errori intelligenti

Lo scopo principale del suggerimento automatico è rendere più semplice e veloce la compilazione dei moduli da parte degli utenti. Il suggerimento automatico prevede le query di ricerca comuni e aiuta gli acquirenti a trovare i prodotti più facilmente.

L'usabilità mobile può essere ulteriormente migliorata utilizzando il rilevamento automatico del tipo di carta di credito. Il rilevamento automatico semplifica il processo di acquisto fornendo un feedback immediato per i tipi di carta supportati. L'automazione del maggior numero possibile di processi di immissione dei dati, preferibilmente con elementi visivi, migliora l'esperienza dell'utente e influirà positivamente sui tassi di conversione.

La ricerca e la convalida degli indirizzi accelerano il processo di pagamento: varie API (come Google Places e USPS) consentono una facile implementazione di questa funzione.

Fornire la convalida dell'input in linea per gli errori è anche una best practice nella progettazione dell'UX mobile. La mancanza di prestazioni rapide è una grande frustrazione per gli acquirenti di eCommerce. Questo può essere aiutato fornendo agli utenti un feedback in tempo reale sui loro progressi (durante il checkout, ad esempio), specialmente quando commettono un errore involontario. Ciò consente agli utenti di correggere immediatamente i propri errori, il che influisce sull'usabilità in modo positivo.

Usa le microinterazioni per migliorare l'esperienza utente di Mobile Shopping

Le microinterazioni sono dettagli nell'interfaccia di un prodotto destinati a svolgere una singola attività migliorando al contempo il flusso naturale del prodotto. Apprezzare e valutare un prodotto, scegliere un colore e una taglia e scorrere verso il basso per aggiornare i dati sono tutti esempi di microinterazioni.

Considerando quanto sono comuni, le microinterazioni possono creare o distruggere l'UX di un'applicazione di eCommerce mobile.

Le microinterazioni possono essere utilizzate per:

• Guidare l'utente attraverso l'applicazione in modo più intuitivo;
• Trasmettere un migliore senso di fiducia, ridurre l'ansia del cliente e aumentare il comfort psicologico generale grazie a interazioni più fluide e naturali;
• Prevenire errori futuri e fornire un feedback immediato agli utenti in base alle attività che hanno completato; e/o
• Migliora l'interazione dell'utente con l'app rispondendo alle notifiche.

Fornisci un'interazione facile e orientata al pollice

Comprendere i modi più comuni in cui gli acquirenti tengono i propri dispositivi mobili migliora l'esperienza utente e l'usabilità dell'eCommerce mobile. Nel 2013, Steven Hoober ha chiesto "In che modo gli utenti tengono davvero i dispositivi mobili?" e osservato come le persone interagiscono e tengono in mano i loro smartphone, e notato tre modelli comportamentali principali che dovrebbero guidare la progettazione dell'esperienza utente mobile.

L'adattamento delle interfacce al modo in cui le persone usano naturalmente i telefoni cellulari aumenterà il comfort dell'utente e ridurrà l'ansia degli acquirenti. I dispositivi mobili e le dimensioni dello schermo variano, ma la "zona del pollice", un aspetto critico del design e dell'esperienza utente, rimane la stessa.

Progettare attorno alla "zona del pollice":

• Risolve potenziali problemi con la navigazione e l'esplorazione
• Migliora l'interazione adattando meglio i gesti e la portata delle dita
• Converte meglio e migliora l'usabilità posizionando elementi importanti in zone "facili da raggiungere".

Considerazioni sulla progettazione di eCommerce mobile orientata alla conversione

Trasmetti una sensazione di sicurezza nelle applicazioni di eCommerce mobile

La sicurezza è una delle maggiori preoccupazioni per gli utenti durante gli acquisti su dispositivi mobili. Comunicare che le loro transazioni sono sicure aggiunge molto valore alla percezione positiva che gli acquirenti hanno nei confronti di un negozio.

Ecco alcune tecniche di progettazione UX che comunicano sicurezza agli utenti e riducono l'ansia degli utenti:

• Rendi le etichette dei pulsanti suggestive e chiare su dove stanno andando gli acquirenti. Parole come "procedi", "sicuro" e "crittografato" rafforzeranno il comfort psicologico degli utenti.
• Utilizza i simboli del lucchetto per garantire agli acquirenti che le loro transazioni sono sicure.
• Utilizza badge di affidabilità di fornitori di sicurezza come McAfee Secure e Norton. Questo aiuta gli utenti a percepire positivamente un sito web (studio del Baymard Institute).
• Applica i principi della psicologia del colore nel design per una percezione ancora migliore della fiducia da parte degli acquirenti. Alcuni di questi principi includono colori orientati al pubblico e specifici per genere.

Dai la priorità alla ricerca (e mantienila above the fold)

Gli acquirenti utilizzano un sito di eCommerce mobile o un'app per esplorare i prodotti o per acquistare un particolare prodotto; di conseguenza, una ricerca ben progettata assume un'importanza fondamentale per un'applicazione di eCommerce mobile. eBay ritiene che la ricerca sul sito sia una delle funzionalità più importanti per gli acquirenti mobili e la enfatizza posizionandola al centro e above the fold sull'interfaccia.

Considerazioni importanti per la ricerca mobile:

• Assicurati che sia visibile! Mantenere la barra di ricerca di facile accesso e above the fold offre agli acquirenti un modo per cercare i prodotti senza sforzo.
• Fornisci una ricerca anticipata utilizzando i dati acquisiti da modelli di ricerca comuni e visualizza i prodotti correlati nelle pagine dei risultati di ricerca.
• Fornisci opzioni di filtraggio avanzate che consentono ai clienti di trovare i prodotti desiderati in modo rapido e semplice.

Un aspetto importante da considerare quando si visualizzano i moduli di ricerca è che sono utili solo nelle prime fasi dell'interazione dell'utente con l'applicazione. Gli utenti in genere cercano nell'applicazione all'inizio del loro percorso di acquisto e possono verificarsi casi in cui la visualizzazione di un modulo di ricerca più avanti nel percorso può danneggiare l'esperienza utente.

Ad esempio, durante il processo di pagamento, la ricerca non è più utile e distrae solo perché potrebbe far perdere la concentrazione agli utenti e rinunciare al loro impegno per l'acquisto.

Fornisci un checkout fluido, facile e veloce

Gli studi hanno dimostrato che il processo di pagamento è la parte più stressante del completamento di un acquisto online. Il Baymard Institute segnala un tasso del 35% per l'abbandono del carrello a causa dell'obbligo di creare un account prima dell'acquisto. Per ridurre i tassi di abbandono del carrello, è importante progettare un processo di pagamento semplice e veloce che non chieda agli acquirenti di registrarsi prima.

Gli studi sull'usabilità hanno rilevato che oltre il 60% degli utenti ha avuto difficoltà a trovare l'opzione di pagamento degli ospiti; ergo, l'opzione di check-out degli ospiti deve essere chiaramente visibile e di facile accesso.

Ecco alcuni suggerimenti per un flusso di pagamento eCommerce migliorato:

• Per promuovere il coinvolgimento degli utenti, etichetta ogni passaggio del processo di pagamento numerando e visualizzando il passaggio attualmente attivo.
• Usa rappresentazioni visive come le barre di avanzamento per visualizzare l'avanzamento nel processo di pagamento.
• Fornisci un'opzione per registrarti e accedere durante il processo di pagamento, ma sceglila.
• Per ridurre l'ansia e le frequenze di rimbalzo, suggerisci agli utenti di accedere o di registrarsi dopo il check-out se hanno effettuato il check-out come ospiti.
• Applica tecniche di divulgazione progressiva per migliorare l'attenzione dell'utente e caricare i contenuti il ​​30% più velocemente.

In sintesi: quali sono alcune caratteristiche chiave di un design eCommerce mobile di successo?

• Fornisce flussi di processo di registrazione e checkout facili e veloci
• Infonde un senso di sicurezza e fiducia visualizzando icone, badge, recensioni e testimonianze appropriate
• Fornisce un'interazione progettata attorno alle zone a misura di pollice
• Utilizza una navigazione coerente e condensata
• Incorpora una ricerca veloce e un facile filtraggio dei prodotti
• Comprende il collegamento diretto tra stress, ansia e tassi di conversione degli utenti per le applicazioni mobili
• Fornisce esperienze reattive e di caricamento rapido dei siti per dispositivi mobili
• Supporta i gesti per lo zoom dell'immagine del prodotto

Lo spazio di eCommerce mobile non farà che aumentare

Le tendenze dell'eCommerce mobile mostrano che il mercato dell'eCommerce mobile sta crescendo in modo esponenziale e la crescita del settore ha creato una moltitudine di vantaggi per i venditori. Tuttavia, con ciò sono arrivate molte best practice e standard per la progettazione di eCommerce mobile che i venditori devono seguire se vogliono avere successo.

Gli acquirenti si aspettano un'applicazione mobile che funzioni bene, sia bella e si adatti ai loro comportamenti. Sebbene ogni applicazione sia diversa con i propri limiti e obiettivi, seguire i principi fondamentali delineati in questo articolo aiuterà a creare applicazioni di eCommerce mobile di successo.

Scarica un cheat sheet per il miglioramento dell'esperienza utente di eCommerce mobile

• • •

Ulteriori letture sul blog di Toptal Design:

• Tendenze di spicco dell'e-commerce e loro influenza sul design (con infografica)
• eCommerce UX: una panoramica delle migliori pratiche (con infografica)
• eCommerce UX - Strategie e principi di progettazione essenziali
• La guida definitiva alla progettazione di siti Web di e-commerce
• eCommerce ridisegnato: come modifiche minori hanno apportato importanti miglioramenti alla UX