Guida alla realizzazione di siti web Mobile di successo

Come deliziare gli utenti ed ottenere conversioni

Il mondo di internet mobile si sta evolvendo con un rapidità impressionante. La comodità e la facilità di utilizzo degli smartphone ha permesso alla navigazione mobile di superare quella desktop nel giro di pochi anni.

Ci siamo occupati di tradurre ed integrare la guida Google per la realizzazione di siti web mobile di successo. La pubblicazione Google è disponibile a questo link, solo in versione in lingua inglese.

I consumatori fanno sempre più affidamento sui dispositivi mobili per le loro ricerche, questo mette al centro dell’attenzione la necessità di avere una presenza efficace su mobile.

Ma cosa rende efficace un sito mobile? Ecco una guida basata sullo studio dell’interazione degli utenti con i siti web in versione mobile.

L’obiettivo è quello di definire le linee guida del design di siti web mobile.

1. Homepage e navigazione sul sito

Generalmente la homepage di un sito web per desktop è una pagina che accorpa un messaggio di benvenuto, i servizi ed uno spazio promozionale. La homepage mobile dovrebbe invece essere in grado di connettere gli utenti con i contenuti che stanno cercando.

Ecco i principi per la realizzazione di Homepage Mobile in grado di fornire agli utenti ciò di cui hanno bisogno. 

1.1. Mantieni le call-to-action al centro dell’attenzione

Mobile Design: Mantieni le call to action bene in vista

Aucotscout24 mantiene la call-to-action in primo piano su sito mobile.

La navigazione dei menù da dispositivo mobile può creare qualche difficoltà agli utenti. Per questo è fondamentale mantenere sempre le call-to-action più importanti dove gli utenti le vedranno sicuramente, ossia al centro dello schermo.

La call to action (o invito all’azione) è quel pulsante che porta l’utente a concludere l’azione più rilevante che vogliamo fargli svolgere sul nostro sito web. Nel caso di un’ecommerce, ad esempio, si tratta dell’acquisto.

Un ottimo esempio dell’utilizzo di call-to-action a centro pagina è quello usato da Autoscout24. Quando un utente si trova nella pagina con l’elenco delle auto, quasi sicuramente desidererà affinare la propria ricerca per trovare il modello di auto adatto alle proprie esigenze. Per questo la call to action “ricerca avanzata” si trova esattamente al centro della pagina e scorre assieme allo scrolling.

1.2. Usa Menù facili e brevi

Un menù ricco di sezioni potrebbe risultare utile per la versione desktop del sito web. Ma da navigazione mobile gli utenti non hanno la voglia né la pazienza di scorrere lunghe liste di opzioni per trovare ciò che stanno cercando.

Quando si realizza la versione mobile di un sito web bisogna cercare di ridurre le voci di menù al minor numero indispensabile. Un ottimo esempio è quello di Macy’s, catena di grandi magazzini statunitense, che ha ripensato il menù del proprio sito in versione mobile riducendolo ad un numero di voci più breve e maggiormente identificabile.

1.3. Facilita il ritorno alla homepage

Se il sito ha una buona homepage mobile, questa sarà il nodo principale della navigazione. Nella maggior parte dei casi, dopo aver visitato una specifica sezione del sito, l’utente potrebbe tornare alla homepage per ricominciare da qui la navigazione verso un’altra sezione.

facilitare il ritorno alla homepage in navigazione mobile

Utilizza il logo come pulsante per il ritorno alla homepage

L’abitudine all’utilizzo dei siti web ha diffuso sempre più tra gli utenti l’identificazione del logo come pulsante che riporta alla homepage del sito.
Perciò risulta fondamentale che il clic sul logo funzioni come un rinvio alla home, inoltre questo implica che l’immagine utilizzata come logo in versione mobile sia sufficientemente grande da poter essere cliccata, anche se non così grande da rubare troppo spazio agli altri contenuti.

1.4. Non lasciare che le promozioni rubino spazio ai contenuti

Inserire le promozioni del momento nella homepage di un sito desktop è una buona scelta che permette di far ottenere maggior visibilità a queste offerte.

La navigazione mobile è più delicata di quella desktop, e lo spazio a disposizione per contenuti ed informazioni è più limitato.

L’utilizzo di banner promozionali troppo grandi con colori particolarmente sgargianti potrebbe distogliere l’attenzione degli utenti dai contenuti presentati sul sito.

2. Ricerca sul Sito

La ricerca sul sito è di vitale importanza per aiutare gli utenti mobile a trovare rapidamente ciò che stanno cercando, e su mobile la rapidità è tutto.
Ecco le migliori pratiche da mettere in campo quando si tratta di organizzare la ricerca sul sito in versione mobile:

2.1. Mantieni visibile la funzionalità di ricerca

Gli utenti alla ricerca di qualcosa di specifico si affidano quasi sempre alla funzionalità di ricerca sul sito. Per questo il campo per la ricerca dovrebbe essere immediatamente visibile al momento dell’accesso al sito in versione mobile.

mantenere il campo di ricerca ben visibile su mobile

Mantieni il campo di ricerca ben visibile sulla versione mobile

La miglior soluzione è quella di posizionare la barra per la ricerca nella parte alta dello schermo, appena sotto o di fianco al logo.

2.2. Assicura risultati di ricerca rilevanti

Quante volte ti capita di scorrere fino alla terza o quarta pagina dei risultati Google? Quasi mai. Soprattutto in caso di una ricerca da smartphone.
Non ci si può aspettare che un utente mobile scorra diverse pagine di risultati di ricerca all’interno del sito.
I navigatori giudicano la qualità dei risultati, e quindi quella dell’intero sito, sulla base dei primi risultati restituiti a fronte di una ricerca.
I primi risultati devono essere i più rilevanti rispetto alla query di ricerca inserita, pena la perdita dell’utente e della potenziale vendita.
Auto-completamento della ricerca e controllo ortografico possono migliorare ulteriormente la qualità dell’esperienza sul sito.

2.3. Implementa filtri per l’affinamento delle ricerche

A volte la semplice ricerca testuale può portare a risultati di ricerca poco specifici, soprattutto nel caso di siti con elevate quantità di

filtri per ficilitare la ricerca da mobile

Inserisci dei filtri che facilitino la ricerca da mobile

prodotti.
Gli utenti sono abituati a trovare filtri che permettono di perfezionare i risultati di ricerca.
I pulsanti dei filtri dovrebbero essere ben visibili, ma senza rubare spazio ai prodotti.
Per evitare di dirigere gli utenti verso percorsi ciechi di navigazione, bisognerebbe sempre indicare l’anteprima del numero di risultati che è possibile ottenere applicando un filtro.

2.4. Guida gli utenti verso ricerche più pertinenti

Capita spesso che un sito offra prodotti rivolti a dei segmenti di pubblico diversi e facilmente identificabili. Ad esempio donne o uomini. Permettere agli utenti di specificare fin dall’inizio della loro ricerca a quale segmento appartengono migliora la qualità dell’esperienza sul sito e garantisce la visualizzazione di risultati realmente rilevanti per l’utente.

3. Conversioni e transazioni

Una nozione fondamentale che chiunque voglia avere successo nel web deve avere ben chiara è che su internet sono gli utenti a comandare. I siti che non piacciono agli utenti non vendono. I siti che non piacciono agli utenti vengono declassati nei risultati delle ricerche Google, fino a sparire.
Al contrario, i siti che accontentano gli utenti ottengono traffico, sono nelle prime posizioni su Google, convertono e vendono senza quasi doversi preoccupare della SEO. Basti pensare ad Amazon o Booking.
I percorsi dei clienti si fanno sempre più complessi, offerte ed opportunità sono sempre più a portata di mano.
Prima dell’e-commerce, un buon venditore doveva saper coccolare i propri clienti che entravano nel negozio. Oggi, bisogna saper fare altrettanto online.

Bisogna offrire ai clienti la miglior qualità di navigazione, guidandoli verso l’acquisto ma lasciando che il controllo resti nelle loro mani. Questo li porterà ad essere soddisfatti ed acquistare da noi.

Ecco i principi per la realizzazione di siti mobile che invoglino gli utenti a convertire.

3.1. Permetti la navigazione senza la registrazione

Le call-to-action che portano ad iscriversi al sito, alla community o ad una newsletter possono essere molto utili per coltivare una relazione continuativa e proficua con i propri clienti.
Tuttavia, disturbare la navigazione con inviti all’iscrizione troppo invadenti e troppo presenti avrà quasi sicuramente un effetto contrario a quello sperato, causando distrazione, frustrazione e abbandono del sito.

Inseguireste mai i clienti all’interno del vostro negozio chiedendo loro di fornirvi nome,e-mail e numero di telefono ogni 30 secondi?

Allo stesso modo, permettere il download di contenuti interessanti solo in cambio della registrazione può causare frustrazione ed abbandono del sito.

3.2. Consenti l’acquisto in modalità ospite

Chiedere agli utenti di fornirci dati personali ed effettuare l’iscrizione al sito prima di aver guadagnato la loro

consenti acquisti in modalità ospite su dispositivi mobili

consenti acquisti in modalità ospite su dispositivi mobili

fiducia o il loro interesse può avere forti ripercussioni sulle performance commerciali del sito.
Gli utenti devono poter concludere una transazione in modalità ospite.
L’obbligo di registrazione, soprattutto nel caso il marchio risulti ancora poco familiare per l’utente, è forte deterrente per l’acquisto.

3.3. Usa le informazioni fornite dagli utenti per migliorare esperienza ed offerte

Ottenere i dati di registrazione di un utente è una magnifica opportunità per migliorare la sua esperienza ed il rapporto con il sito/marchio. Chi sfrutta questi dati solo per l’invio di email commerciali indistinte sta sprecando un sacco di risorse.
I dati utente permettono di personalizzare l’esperienza di navigazione e di migliorare la fruibilità mobile con l’utilizzo di offerte personalizzate ma soprattutto della precompilazione dei form, anche nel caso di pagamenti appoggiati a siti di terze parti.

3.4. Inserisci pulsanti clic-to-call per azioni complesse

La necessità di compilare campi complessi o form particolarmente lunghi può causare alti tassi di abbandono del funnel di conversione.
Questa problematica è risolvibile mettendo a disposizione degli utenti un servizio di chiamata (tramite pulsante clic-to-call) al centro assistenza che può risolvere ogni dubbio e guidare la corretta compilazione dei campi.

3.5. Facilita la conversione da altri dispositivi

La navigazione mobile ha superato quella da desktop, provocando però un aumento delle vendite da desktop più che da smartphone. Questo perché gran parte dei consumatori effettua le proprie ricerche da mobile, ma preferisce ancora completare l’acquisto su desktop. 
Offrire agli utenti mobile la possibilità di inviare il link della pagina prodotto(o servizio) al proprio account email permette loro di concludere la transazione in un secondo momento, magari da un altro dispositivo.

4. Compilazione di form

Che si tratti di concludere un acquisto, ottenere un preventivo o iscriversi ad una newsletter, il processo di compilazione dei form deve essere reso più semplice possibile per l’utente. Ecco i principi da tenere in mente quando si progetta un form.

4.1. Autocompilazione e campi intelligenti

Facilitare e velocizzare la compilazione dei form risulta particolarmente importante nei siti in versione mobile. L’autocompilazione dei campi “ridondanti” può dimezzare il tempo necessario per completare il form. Ad esempio l’inserimento del codice postale permette la compilazione automatica di comune e provincia, il codice fiscale fornisce a sua volta informazioni su sesso, data di nascita e provincia. L’attivazione della tastiera numerica per i campi composti da cifre è un ulteriore elemento che facilita e velocizza la compilazione.

4.2. Metodi di inserimento intuitivi

Tutti i campi del form che comportano la scelta tra un numero limitato di opzioni (es. mese dell’anno) devono essere gestiti in maniera interattiva, ad esempio con menù a tendina. Le diverse opzioni devono essere facilmente leggibili e selezionabili.

4.3. Usa calendari per l’inserimento di date

calendari interattivi per form mobile

usa calendari interattivi per la compilazione di date da mobile

Nella maggior parte dei casi i form online prevedono l’inserimento di date da parte degli utenti. Questo tipo di campo può essere gestito in 3 modi diversi: scrittura manuale di giorno, mese anno: comporta l’attivazione della tastiera per 3 volte e richiede all’utente 3 azioni di scrittura. Inoltre è soggetta ad errori di battitura; singoli menù a tendina per giorno, mese, anno: comporta l’apertura di 3 menù a tendina. Ma non richiede l’utilizzo della tastiera; calendario visuale: permette all’utente di completare l’inserimento della data completa in un solo passaggio. L’inserimento di un calendario visuale per l’inserimento dei campi data riduce a meno di un terzo le azioni richieste all’utente e diminuisce la possibilità di errori nell’inserimento.

4.4. Etichette e validazione istantanea dei dati

Le etichette dei campi del form guidano gli utenti nella compilazione e dovrebbero essere chiare, univoche e sempre visibili. Ad esempio: l’etichetta “indirizzo” potrebbe creare confusione in quanto si potrebbe riferire all’indirizzo email o a quello di residenza. Anche l’inserimento di etichette all’interno dei campi del form può risultare poco vantaggioso in quanto questi suggerimenti spariscono nel momento in cui l’utente inizia ad immettere il dato. La validazione istantanea dei campi inseriti permette all’utente di modificarli immediatamente. Attendere l’invio del form per segnalare le informazioni incorrette può causare frustrazione e abbandono del processo.

4.5. Progettazione efficace dei form

Una volta identificate tutte le informazioni necessarie da richiedere agli utenti è possibile progettare la sequenza dei campi del form in modo ottimale. Questo andrebbe fatto evitando tassativamente i campi ridondanti e progettando una sequenza di campi di input che permetta di sfruttare al massimo l’autocompilazione. Nel caso di form a più step è molto importante prevedere una barra di avanzamento da porre nella parte alta dello schermo, che permette agli utenti di visualizzare un’anteprima delle fasi successive del processo di compilazione.

5. Usabilità

Progettare correttamente un sito web mobile significa facilitare la navigazione da parte degli utenti, aumentando la loro soddisfazione ed il legame con il brand.
Ecco i consigli per progettare un sito mobile che sappia accontentare le esigenze degli utenti.

5.1. Crea una versione mobile completa

Ottimizzare un sito per la navigazione mobile significa farlo per ogni pagina presente. Siti con un mix di pagine desktop e pagine mobile risultano difficili da navigare. Questo vale in particolar modo per pagine come il carrello o il processo di pagamento.

5.2. Non costringere gli utenti ad usare lo zoom

Progettare un sito mobile non significa restringere tutte le sezioni di pagina in modo da farle calzare all’interno dalle schermo di uno smartphone. Alcune scritte o immagini potrebbero diventare difficili da visualizzare se troppo rimpicciolite, costringendo gli utenti ad usare lo zoom.
L’utilizzo dello zoom limita la porzione di pagina visualizzata sullo schermo e potrebbe impedire agli utenti di visualizzare call to action o informazioni importanti posizionati a bordo schermo.
Gli utenti dovrebbero poter navigare il sito senza mai dover ricorre allo zoom (ad eccezione dello zoom per le foto prodotto).

5.3. Usa immagini prodotto espandibili

I consumatori vogliono vedere bene ciò che stanno per acquistare. I siti di vendita al dettaglio dovrebbero sempre permettere di visualizzare immagini di prodotto in alta risoluzione ed espandibili per la visualizzazione dei particolari.
Anche nella versione mobile, così come in quella desktop, una pagina di prodotto dovrebbe presentare più immagini per ogni prodotto, compresi dei primi piani dei dettagli chiave dell’articolo.

5.4. Comunica l’orientazione ideale dello schermo

Chi naviga da smartphone tende a mantenerlo sempre nella stessa orientazione a meno che non venga stimolato a modificarla, ad esempio all’avvio di un video in streaming.
Comunicare agli utenti l’orientazione ideale per la visualizzazione del sito mobile può migliorare la qualità della navigazione. In ogni caso ci si dovrebbe assicurare che le call to action importanti siano sempre ben visibili, sia in posizione verticale che orizzontale.

comunica l'orientazione ideale dello schermo mobile

comunica l’orientazione ideale dello schermo mobile

5.5. Mantieni gli utenti in una sola scheda browser

Passare da una scheda del browser all’altra è facile in versione desktop ma lo è di meno quando si naviga da dispositivo mobile.
La navigazione dovrebbe essere mantenuta all’interno della stessa scheda, evitando che le call to action provochino l’apertura di nuove finestre.
Identificare i motivi che spingono gli utenti ad aprire altre finestre di navigazione mentre compiono azioni sul nostro sito, come ad esempio la ricerca di coupon o informazioni su siti esterni, permette di incorporare queste risorse in modo da renderle reperibili senza abbandonare il sito.

5.6. Permetti agli utenti di scegliere la versione preferita

Nel caso in cui la versione mobile del sito non sia un riadattamento grafico della versione desktop (comunemente chiamata versione responsive), ma un vero e proprio sito web completo e separato da quello per PC, è bene inserire un rimando che permetta ad ogni utente di scegliere se visualizzare la versione desktop nonostante stia navigando da un dispositivo mobile.
È importante che il pulsante per lo switch non porti ad interpretazioni errate, come ad esempio “Sito Completo”, che potrebbe portare gli utenti a pensare che la versione desktop sia più ricca di contenuti rispetto a quella mobile.

6. Checklist tecnica

Grafica e design sono solo una parte degli ingredienti che portano ad un sito mobile di successo. Anche l’aspetto tecnico gioca un ruolo fondamentale. Ecco i principali consigli in campo tecnico:

  • Assicura corrispondenza tra gli annunci Adwords ed il sito mobile

Il sito mobile potrebbe presentare contenuti parzialmente diversi da quello desktop, gli annunci Adwords dovrebbero essere congruenti con queste differenze.

  • Assicurati che gli annunci Adwords mobile puntino al sito mobile

Nel caso di siti mobile separati dalla versione desktop è fondamentale indirizzare gli annunci Adwords mobile alla versione corretta del sito.

  • Minimizza i download

Consolidare e pre-caricare i contenuti web del sito mobile permette al dispositivo di eseguire download più corposi ma meno frequenti.

  • Testa il sito su una gamma di dispositivi

Fare dei test del sito su diversi dispositivi mobili permette di controllare sia la corretta visualizzazione che il funzionamento.

  • Assicurati che i contenuti di pagina siano caricati secondo una logica

Mettersi nei panni degli utenti che navigano sul sito permette di comprendere quale sia la miglior sequenza di caricamento dei contenuti.

  • Traccia la navigazione e le conversioni

Utilizzare un sistema di web analytics permette di analizzare più a fondo le abitudini di navigazione sul sito mobile ed identificare eventuali punti critici.