Mobile shopping: come aumentare le vendite e-commerce con la UX
Gli acquisti da mobile hanno raggiunto circa i 2 miliardi di dollari nel 2022 e hanno rappresentato il 59% di tutte le vendite e-commerce in tutto il mondo.
Secondo Netcomm NetRetail, in Italia la metà degli acquisti online nel 2023 sono effettuati tramite un dispositivo mobile (smartphone o tablet). L’incremento dell’utilizzo di device mobili è passato dal 34% nel 2019 all’attuale 48%.
Non è mai stato così facile per i clienti cercare prodotti e completare acquisti sfruttando la comodità dei dispositivi mobili:
- l’accesso alla rete è diventato disponibile in aree prima escluse
- la tecnologia degli smartphone si arricchisce di anno in anno
- l’interazione con i device portatili diventa sempre più facile ed intuitiva
- l'autenticazione in fase di pagamento ha assunto un ruolo fondamentale per la gestione degli acquisti (riconoscimento facciale o fingerprinting)
La crescita del comparto e-commerce in tutti i settori significa essenzialmente più concorrenza, una concorrenza che non si giocherà esclusivamente su qualità, prezzo o esclusività del prodotto/servizio offerto, ma anche sulla piacevolezza dell’esperienza di acquisto. Probabilmente la sola versione ottimizzata (responsive) del tuo sito e-commerce non sarà sufficiente, nel medio periodo, a soddisfare le elevate aspettative dei tuoi clienti quando consultano il negozio da smartphone.
Attraverso i consigli che seguono non pretendiamo di essere esaustivi sull’argomento mobile e-commerce, ma di fornire spunti da applicare su alcuni aspetti chiave dell’esperienza di navigazione e sul processo di acquisto sul vostro e-commerce.
Suggerimenti generali
Passiamo velocemente in rassegna le condizioni base che il vostro negozio online deve supportare per essere navigato da device mobile.
Il sito deve essere performante da un punto di vista tecnico (caricamento veloce) e deve rassicurare l’utente sulla serietà del venditore, attraverso una serie di fattori che includono: qualità del design, tono del testo, prove di esistenza del brand, riconoscimenti e storia del negozio online oltre che certificazioni e sistemi di sicurezza per i pagamenti.
Queste caratteristiche devono essere condivise da entrambe le versioni del sito (mobile e desktop), ma alcuni aspetti cominciano a diventare più rilevanti nella versione per smartphone, ecco una serie di aspetti che il sito deve possedere:
- Ottimizzare i form per renderli leggibili e navigabili
- Provvedere suggerimenti per la compilazione dei campi
- Utilizzare microinterazioni per guidare l’utente e fornire interazioni naturali
- Disporre gli oggetti in funzione della Thumb Zone
- Fornire al cliente un processo di checkout facile e veloce
Una volta accertato che questi aspetti rispondano alle esigenze dei clienti, su cosa si può lavorare? Nei prossimi paragrafi trarremo di:
- Hero
- Carosello
- Ricerca
- Preview della scheda prodotto
- Footer
Hero
La hero, ovvero la prima schermata con cui si apre la homepage, è la prima impressione che i tuoi clienti si fanno del sito, sarebbe opportuno crearne una coinvolgente.
Purtroppo, nella maggior parte dei siti mobile, vediamo hero circondate da tantissimi elementi: logo, carrello, hamburger menù, tasto login/registrati, campo per la ricerca, link ai social oppure banner pubblicitari. Le informazioni che possiamo inserire sono decine ma, se per schermi grandi non è un problema, nel mobile potrebbero rendere la nostra hero meno visibile e quindi meno efficace, è quindi necessario ridurre all’essenziale dando evidenza solo ai contenuti realmente utili ed importanti.
"Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away"
Antoine de Saint-Exupéry
La soluzione ideale è trovare un equilibrio tra le informazioni essenziali e quelle che possono essere rimandate ad un momento successivo. Alcuni elementi rimangono improrogabili: logo, campo cerca e menù (ad hamburger o meno), mentre altri possono diventare utili in un secondo momento (carrello, accedi e registrati). Il tutto, ovviamente, non va preso alla lettera ma analizzato caso per caso in funzione delle esigenze.
Carosello
Spesso come hero si utilizza un carosello (slider). Il suo scopo è mostrare le cose meravigliose del tuo negozio, facendo attenzione alla sua versione mobile che spesso è un semplice adattamento dalla versione desktop.
Purtroppo questa abitudine comporta una serie di problemi: titoli e testi delle descrizioni sono troppo piccole o troppo grandi per il telefono, la call to action sembra essere fuori posto e spesso dà l’impressione di non essere cliccabile, l’immagine di sfondo è mal disposta e riduce la leggibilità e, cosa ancora più importante, l’immagine del prodotto che stai mostrando è troppo piccola. Senza contare i problemi degli utenti nel riconoscere il Carosello e utilizzarlo di conseguenza.
Per migliorare la leggibilità dei caroselli bisogna progettare appositamente per schermi interattivi i singoli elementi che lo compongono, scegliendo di dare priorità a quelli più interessanti oltre che ad assicurarti che non esista un numero eccessivo di elementi (che rischiano di essere ignorati dai clienti). Uno dei principali limiti del carosello è che le persone non visualizzano più di 2, massimo 3 slide: è un fattore chiave da tenere in considerazione.
È importante far capire alle persone che sono disponibili più contenuti rispetto a quelli presentati, per esempio utilizzando immagini o parole incomplete che suggeriscono lo scorrimento nella direzione desiderata. È inoltre buona norma che gli elementi del Carosello siano in relazione l’uno con l’altro e che comunque (specialmente se rilevanti) sia possibile accedere ad essi attraverso un percorso alternativo.
Se vuoi più informazioni sul Carosello su dispositivi mobili leggi questo: Carousels on Mobile Devices
Ricerca
Il box di ricerca già aperto, sebbene consigliato, non è l’unica soluzione disponibile per un’esperienza appagante sul tuo e-commerce. Con un box espandibile l’icona della ricerca, una volta cliccata, si allarga per creare lo spazio che l’utente utilizzerà per digitare. Il vantaggio è che se l’utente non clicca lo spazio per attivare la ricerca è minimo e può essere usato per altri elementi importanti e/o bilanciare il layout dell’interfaccia.
Un altro aspetto che può essere facilmente implementato nei negozi online è la presentazione dei risultati di ricerca, una pagina spesso trascurata dai rivenditori. Nonostante lo spazio per i risultati di ricerca debba essere ottimizzato per uno smartphone bisogna tenere in considerazioni gli aspetti che interessano gli utenti:
- Le informazioni chiave sui prodotti ottenuti dalla ricerca
- Rendere chiaro se il prodotto non è disponibile, ma offrire alternative
- Consentire l’utilizzo di filtri se i risultati sono numerosi
- Tollerare gli errori di ortografia nell’input di ricerca
- Presentare i ratings dei prodotti/servizi (se disponibili)
- Mantenere un design esteticamente appagante
Scheda prodotto
Già dalle pagine dei risultati di ricerca o di categoria, le immagini, i titoli, le descrizioni ed i prezzi dei prodotti costituiscono una parte consistente dell’esperienza di acquisto. Un’idea per rendere più efficiente un e-commerce in versione mobile è ripensare la gerarchia delle informazioni in queste pagine.
Una volta aperta la scheda prodotto è facile notare che, se alcuni principi sono validi per la versione desktop, non sono più funzionali per quella mobile: i testi allineati centralmente, le spaziature abbondanti ma anche l’utilizzo della stessa quantità di superficie per il prezzo originale (adesso scontato).
La gerarchia per una scheda prodotto deve essere pensata in funzione della leggibilità:
- Testo allineato a sinistra
- Spazio per un testo descrittivo
- Prezzo originale ridotto al minimo della leggibilità
- Utilizzo di tag con le percentuali di sconto
Una volta organizzati e distribuiti questi elementi fondamentali si può cominciare a pensare a tutti gli altri aspetti indispensabili per una scheda prodotto:
- Descrizioni dettagliate, ma non superficiali
- Utilizzo di immagini e/o video che rispondano ad eventuali dubbi degli acquirenti
- Informazioni sulle variabili di prodotto (se esistono)
- Un sistema di comparazione con prodotti simili
- Un sistema di rating o recensione del prodotto
Se vuoi più informazioni sulle schede prodotto per dispositivi mobili leggi questo: UX Guidelines for Ecommerce Product Pages
Footer
Il piè di pagina è la parte più trascurata dei siti e-commerce, molto spesso è il luogo dove si accumulano le cose che non si desidera far vedere (Copyright, Sitemap, Privacy, Termini legali, Contatto…).
In realtà, una volta presentate le informazioni strategiche del sito nella parte superiore della pagina, è importante fornire un’altra serie di elementi che gli utenti spesso cercano proprio nel footer. La gente, infatti, usa i piè di pagine per:
- Essere convinti, se non lo sono ancora
- Cercare cose che non hanno trovato
- Contattare il personale del sito
In qualunque caso il footer deve essere coerente con il resto della comunicazione, leggibile, facilmente individuabile e rassicurante (visto che probabilmente è il luogo dove vanno gli utenti quando si sono persi).
Se vogliamo lasciare una buona impressione è fondamentale non trascurare la parte inferiore della pagina. Anche le sezioni più banali e funzionali di un’interfaccia possono avere il maggiore impatto sull’esperienza di un utente.
Se vuoi più informazioni sulle schede prodotto per dispositivi mobili leggi questo: Footers 101: Design Patterns and When to Use Each
I progetti e-commerce per smartphone stanno diventando sempre più comuni e questo comporta un aumento delle aspettative da parte degli utenti. I progettisti non possono più vedere il design mobile come un adattamento della versione desktop, ma devono considerarla alla stregua di una nuova versione, dedicando le giuste risorse per la sua progettazione.
Hai a disposizione solo pochi secondi per attirare l’attenzione dei tuoi potenziali clienti, non puoi permetterti che le persone abbandonino il tuo sito a favore di uno più intuitivo e facile da usare.
Con questi suggerimenti di progettazione sarai in grado di migliorare la user experience del tuo sito web offrendo un’esperienza mobile di acquisto impeccabile, in grado di portare risultati concreti in termini di traffico, conversioni e fidelizzazione.