Mobile shopping: come aumentare le vendite di un e-commerce con la UX

Le vendite al dettaglio tramite dispositivi mobili sono in crescita in tutto il mondo. Gli esperti stimano che entro il 2021 il 72.9% delle persone effettueranno acquisti tramite cellulare.

Mobile retail commerce sales as percentage of retail e-commerce sales worldwide from 2016 to 2021 (fonte: Statista)

Nel 2019, soltanto negli Stati Uniti, risultava che il 35% dei consumatori americani usasse solo il loro smartphone per acquistare online. E in un sondaggio dell’aprile 2020, riferito all’anno solare 2019, risultava che il 76% degli italiani avesse usato il cellulare per effettuare un acquisto online negli ultimi 12 mesi.

Have you used your cell phone to buy products online at any point in the last 12 months? (fonte: Statista)

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

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.

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:

1. Le informazioni chiave sui prodotti ottenuti dalla ricerca
2. Rendere chiaro se il prodotto non è disponibile, ma offrire alternative
3. Consentire l’utilizzo di filtri se i risultati sono numerosi
4. Tollerare gli errori di ortografia nell’input di ricerca
5. Presentare i ratings dei prodotti/servizi (se disponibili)
6. 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

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.