Come migliorare l’usabilità mobile del tuo sito? Ecco i nostri consigli – Parte 1

,

Prima di suggerirti delle possibili migliorie da apportare al tuo sito nella versione mobile, devi essere sicuro che il tuo sito si presti ad essere ottimamente navigato dai dispositivi mobili.

Guardalo con gli occhi del tuo potenziale cliente:

  • Arrivi facilmente a tutte le informazioni che stai cercando?
  • Il sito è veloce?
  • È intuitivo?
  • Si adatta bene al dispositivo mobile?

Se hai risposto no anche ad una sola di queste domande, chiama la tua web agency e corri ai ripari.

Se invece è tutto ok, ecco alcuni consigli per migliorare ulteriormente l’usabilità mobile del tuo sito:

1. Dai priorità ai contenuti importanti, che devono apparire per primi.

I contenuti non prioritari, se sono molti, possono essere nascosti, concentrando la navigazione sulle informazioni che ritieni importanti.

Ti può sembrare una cosa scontata e banale, ma ti assicuro che non è così. Il tuo dispositivo mobile ha uno schermo più piccolo rispetto a quello desktop, e le informazioni vengono mostrate in modo completamente diverso. Valuta se c’è qualcosa di cui il tuo cliente può fare a meno mentre naviga il tuo sito da mobile. Se il tuo sito è realizzato con una tema abbastanza recente di WordPress, utilizzerà quasi sicuramente un framework (che si chiama bootsrap) che rende il tuo sito responsivo; cioè si adatta ai dispositivi mobili. Ma attento, non è “nativo mobile”; si sforza di esserlo.

Pagine molto lunghe su mobile sono spesso inutili, perché i contenuti più in basso non vengono letti, e anzi rischiano di appesantire la pagina.

2. Semplifica il menu e lo schema di navigazione del sito

Il menu di navigazione del tuo sito può contenere diverse sotto-voci ed avere un “albero di navigazione” particolarmente complesso. Questo è un bene, perché probabilmente hai molte informazioni da dare, e hai creato un posto per ognuna di queste.

Attento però: da mobile la navigazione non è sempre così agevole. La differenza maggiore la fa l’utilizzo del touch. Mentre su desktop il menu può approfittare delle funzionalità “on hover” del mouse su mobile questo non può succedere. Quindi ogni sotto-menù per essere navigato deve essere aperto. Se sono troppi, il navigatore può perdere il filo logico della ricerca. Valuta attentamente se costruire un menù ad hoc per mobile. CMS come WordPress lo permettono agevolmente.

3. Usa un unico menu di navigazione, se possibile

Oltre al menu principale è spesso necessario avere altri menù soprattutto nelle pagine interne. Mentre il menu principale nella maggior parte dei casi viene collassato nella classica forma a tre linee orizzontali (sandwich), per i menù interni conviene trovare una collocazione diversa. Possono stare sopra al contenuto, sotto o addirittura essere nascosti. Questo dipende dall’importanza che rivestono. Tieni sempre presente che un menù non deve ostacolare la visione dei contenuti, anzi agevolarla.

4. Utilizza layout semplice a singola colonna

Come già detto, lo spazio orizzontale su mobile è poco. Il minimo e 320px. Quindi ti consiglio vivamente di gestire i tuoi contenuti in un’unica colonna. Ci possono essere delle eccezioni, come ad esempio delle icone social o simili, una piccola foto di un post (non prioritario) con il titolo in fianco, due bottoni (es: “avanti” e “indietro”), o con delle tecniche di cui al punto successivo ti porto un esempio.

5. Evita scroll orizzontale

Da mobile, il navigatore non si aspetta di scorre orizzontalmente le pagine, perché è cosciente e abituato che lo spazio orizzontale è poco, ed è abituato a scrollare le pagine in senso verticale. Questo è valido finché l’utente non viene “invitato” allo scrolling orizzontale, e se ben fatto è una tecnica molto efficace per risparmiare spazio verticale, e dare un’esperienza di navigazione all’utente molto semplice e conseguentemente apprezzata. La tecnica attualmente più diffusa per invitare l’utente alla navigazione orizzontale da mobile, è mostrare una parte di contenuto successivo, che spunta alla dx del contenuto visualizzato.

A parole sembra complesso, ma l’immagine sottostante ti sarà chiarificatrice. Come vedi, la stessa Google per presentare alcuni articoli AMP, mostra per ogni scroll orizzontale, un articolo e mezzo. Ecco che così l’utente è incentivato a sfruttare anche questa dimensione.

 

 

6. Utilizza font chiari e di dimensioni adeguate

Mentre su desktop l’utilizzo di più font diversi (ovviamente che si sposino bene insieme) può essere un piacere per gli occhi, da mobile questo non succede, ed anzi può dare un aspetto disordinato. La dimensione di base del font dovrebbe essere di 16px, con la possibilità di aumentare o diminuire del 25% il carattere a seconda dell’importanza del contenuto (quindi 12px e 20 px). Le raccomandazioni della stessa Google suggeriscono di mantenere un’interlinea di 1.2em.

7. Inserisci un link alla versione desktop del sito

Se il tuo sito è molto complesso, rendere la versione mobile più semplice non è scelta ma un obbligo. Immagina un sito di una banca o di una assicurazione, o semplicemente un sito con molte funzionalità riservate e accessibili solo attraverso credenziali di accesso come potrebbe essere un e-commerce o un crm. L’accesso ad alcune funzioni potrebbe non essere presente nel sito mobile, perché così complesse da utilizzare che sarebbe impossibile dare una buona usabilità con l’uso del touch o con dimensioni così limitate. In questi casi è bene riportare in fondo pagina il link alla versione desktop del sito, cosicché il navigatore possa accedere a tutte le funzionalità (ovviamente conscio delle difficoltà che incontrerà da mobile).

Non perderti la seconda parte di questo articolo

ISCRIVITI ALLA NEWSLETTER