FOCUS: consigli per ottimizzare un sito per i cellulari (smartphone)

Come ottimizzare un sito web per i cellulari

Da circa un anno nel mondo si vendono più smarphone che computer. Il trend è pazzesco: rispetto all’anno precedente, la crescita delle vendite di smarphone si attesta intono all’80% in più,  mentre quella dei PC sale solo del 5% (fonte IDC).

Cosa vuol dire? Semplice, che bisogna farsi furbi ed iniziare a progettare siti ottimizzati per gli smartphone.

Le 10 regole principali, che di seguito andiamo ad esaminare, ci sono suggerite anche dallo stesso Google:

1. Dare priorità alla velocità.
2. Semplificare il processo di navigazione.
3. Pensare il sito per gli schermi touch-screen.
4. Progettare layout grafici semplici.
5. Progettare il sito sia per display orientati in orizzontale che verticale.
6. Fornire le informazioni principali in modo chiaro e diretto.
7. Pensare alla geo-localizzazione offrendo servizi localizzati.
8. Immagine coordinata tra le versioni PC, cellulare e tablet.
9. Usa un codice di reindirizzamento a seconda del dispositivo usato.
10. Ascolta i tuoi utenti e continua ad ottimizzare il sito secondo il feedback ricevuto.

Dare priorità alla velocità

Pensateci un attimo, quand’è che usate il cellulare per navigare? Forse siete alla fermata dell’autobus? In fila alle Poste? In una sala d’attesa? Oppure siete per strada alla ricerca di un’informazione specifica? Ad esempio un’officina meccanica, il più vicino bancomat, una farmacia, un cinema nelle vicinanze. In tutti questi casi non vorreste proprio che la vostra esperienza di navigazione sia paragonabile ad una lunga attesa tra una pagina e l’altra. E’ per questo che dovete prima di tutto pensare ad un sito snello e veloce.

Supponiamo che il vostro sito sia quello di un gommista, se un utente è per strada e vi sta cercando, qual è il motivo? Probabilmente ha forato e vuole arrivare dal gommista più vicino. Se arriva sul vostro sitomobile e legge che dal 1990 Geppino si prende cura degli pneumatici come se fossero i propri figli e che prima di lui anche il padre ed il nonno erano gommisti, non solo, ma può offrire i prezzi migliori e che il suo cane si chiama Pirellone… diciamo la verità: quanto v’interessa tutta ‘sta storia considerata la gomma che sfiata allegramente?

Forse sarebbe meglio mettere in primo piano:

1. il numero telefonico che con un tap lo chiamate;
2. gli orari in cui siete aperti e la pausa pranzo;
3. la mappa google per arrivare a destinazione.

Quindi la regola numero 1 è mettersi nei panni dell’utente che arriva sul vostro sito per cellulare, e, naturalmente, alle sue sue necessità.

Privilegiate la velocità in tutto, quindi:

• immagini dimensionate per lo schermo di uno smartphone anche piccolo;
• ed evitate lunghi testi poiché sono stancanti da leggere, meglio un veloce elenco puntato.

Semplificare il processo di navigazione

Non dimenticate che l’utente in questione usa le dita e non il mouse, quindi i vostri menu devono essere chiari, semplici, non troppo piccoli. Tutto deve essere disponibile subito e sulla prima schermata, evitate di dover far scorrere lo schermo per arrivare a ciò che serve; parola d’ordine: semplificare e ridurre all’osso. Niente animazioni da strapazzo, siate essenziali.

Usate una semplice struttura gerarchica: menu/sottomenu, niente giochetti, rollover e cose del genere. Non servono. La navigazione deve essere chiara, quindi pensate sempre ad un bel tasto “Indietro” e non fate mancare mai il tasto “Homepage” per tornare all’inizio del sito. Se il vostro sito è molto complesso per numero di pagine, allora pensate ad un campo ricerca che sia facilmente accessibile. Google suggerisce di non inserire più di 7 link per ogni pagina del sito, proprio per non affollare il piccolo schermo dello smartphone e, soprattutto, non disorientare il navigatore.

Adottate questo semplice principio, io lo faccio sempre: in un massimo di 3 click l’utente deve arrivare a ciò che sta cercando.

Pensare il sito per gli schermi touch-screen

Gli utenti pensano con i… pollici! Gli uomini del futuro, se le cose non cambieranno, avranno pollici super complessi, sensibili e flessibili, le altre dita scompariranno, i mignoli si fonderanno con gli anulari… Anche mettendo da parte questa visione fantascientifica, non si può non considerare il fatto che chi usa uno smartphone lo fa con le dita. Sappiamo inoltre che non tutti hanno le dita uguali, provate a chiederlo a Mike Tyson.

Ecco quindi che si rende necessario pensare ad un sito i cui tasti siano facilmente selezionabili sia da chi ha dita da fata che da chi le ha come Shreck. Il consiglio è usare tasti grandi in posizione centrale, inoltre è bene che questi tasti siano abbastanza distanti gli uni dagli altri in modo da evitare che ci siano clic involontari, non c’è cosa peggiore di fare clic su una funzione che non si desiderava e dover attendere il caricamento di una pagina inutile.

Se si hanno delle caselle di controllo o di opzione, è bene rendere cliccabile anche il testo, in questo modo si estende l’area sensibile al clic a tutto vantaggio dell’utente.

Progettare layout grafici semplici

Lo smartphone, essendo per sua natura un dispositivo mobile, non saprete mai dove verrà utilizzato, ad esempio non saprete com’è l’illuminazione. Il consiglio è sempre quello di comunicare in modo semplice, con testi chiari, caratteri non troppo piccoli – provate il sito anche su display piccoli – lo sfondo deve contrastare perfettamente con il testo, nero su bianco è sempre una soluzione ottimale. I link devono essere riconoscibili, quindi usare un colore diverso che però si distingua sempre bene con lo sfondo. Attenzione ad accoppiate di colori che possano produrre fastidiosi effetti “rimbalzo” (es. blu su rosso, viola su arancione).

L’ideale sarebbe che il layout del sito si adatti automaticamente alle dimensioni dello schermo, senza costringere l’utente a lavorare con le dita sullo zoom per correggere le dimensioni.

Progettare il sito sia per display orientati in orizzontale che verticale

Come sicuramente saprete, Flash non è supportato da tutti i dispositivi, ad esempio l’iPhone e l’iPad non lo visualizzano (a dire il vero, Flash è morto; ma lui non lo sa ancora). Quindi sarebbe impensabile utilizzarlo per il vostro sito per cellulari. Un’alternativa valida e consigliabile HTML5. Considerate anche un altro aspetto importante: gli smartphone hanno la caratteristica di poter orientare lo schermo sia in verticale che in orizzontale. Il vostro sito dovrebbe adattarsi a qualsiasi layout. Le informazioni più importanti devono sempre essere visibili, come i tasti principali che non devono “perdersi” nel passaggio tra un orientamento e l’altro.

Fornire le informazioni principali in modo chiaro e diretto

Se le informazioni (i tasti ed i link) sono chiare, ben visibili e facilmente accessibili, sicuramente la capacità di conversione del sito non può che migliorare. La procedura di acquisto, d’iscrizione ad unanewsletter oppure di compilazione di un modulo di contatto, deve essere ottimizzata per l’uso della tastiera virtuale degli smartphone. Non richiedete troppe informazioni scritte, è sempre fastidioso. Se possibile, utilizzate dei moduli con opzioni prestabilite che possano essere selezionate da un menu a tendina. Tutto ciò deve favorire il processo di conversione, il quale deve essere il più breve possibile: pochi clic, poche cose da scrivere, poche (meglio una) pagine da caricare. Infine, ricordate che anche una telefonata deve essere considerata come una conversione, ricordate l’esempio del tizio che cerca un gommista: probabilmente non ha voglia né di leggere troppo né di scrivere, meglio telefonare e chiedere aiuto. Ciò significa che tutti i numeri telefonici devono avere abilitata la funzione click-to-call.

Pensare alla geo-localizzazione offrendo servizi localizzati

Questo è un aspetto a mio avviso fondamentale e che fa la differenza. Chi usa uno smartphone per andare sul web, specialmente se è per strada, è molto probabile che lo faccia per una necessita impellente: cerca un ristorante, una pompa di benzina, una farmacia, un bacomat, qualcosa da visitare, un rivenditore e così via. Questo vuol dire che dovete prestare particolare attenzione nel fornire agli utenti funzionalità utili non solo a trovarvi ma anche consigli su come arrivare a voi dal punto in cui si trova l’utente.

Risulta chiaro che fornire una mappa con l’indicazione “Da/A” è il minimo che possiate fare. Molto interessante sarebbe l’uso delle funzionalità GPS per individuare la posizione dell’utente e fornirgli consigli utili per raggiungere la vostra azienda, pizzeria o attività commerciale.

Immagine coordinata tra le versioni PC, cellulare e tablet

Il nocciolo della questione, per questo punto, è rendere l’esperienza di navigazione dell’utente il più omogenea possibile. Immaginate di avere un sito e-commerce, magari un utente, mentre attende l’autobus, potrebbe vedere la pubblicità di un notebook su un cartellone stradale, quindi che fa? Prende il suo telefono ed inserisce la sigla del notebook. Considerato che voi avete un  buon consulente SEO che ha fatto sì che il vostro sito sia posizionato tra i primi posti, l’utente in questione fa clic proprio sul vostro sito. Trova il modello di notebook, ma – disdetta! – sta arrivando l’autobus.

Ecco il punto focale: se non avete previsto la possibilità di salvare la ricerca oppure il carrello, probabilmente avete perso un contatto importante. Il nostro utente ha preso l’autobus per andare in ufficio, quindi se ha la possibilità di salvare la ricerca, magari utilizzando un servizio cloud, riprenderà il vostro sito su PC dell’ufficio. Il sito mostrato sul monitor del computer non deve essere troppo diverso, nella struttura di navigazione, nei colori, nella disposizione delle informazioni, al sito della versione mobile. Se il carrello era stato salvato, l’utente può riprendere l’articolo per approfondirne le caratteristiche tecniche, che sicuramente avrete inserito nelle pagine del sito, convincersi che è l’acquisto giusto e procedere col pagamento. Missione compiuta!

Usa un codice di reindirizzamento a seconda del dispositivo usato

Se avete creato una versione del sito ad hoc per i cellulari, allora perché non farla scegliere in automatico se un utente arriva col suo smartphone? In fin dei conti il codice da inserire nella index del sito non è poi così difficile e si può offrire un servizio veloce e trasparente all’utente. Tuttavia è sempre bene mostrare chiaramente un tasto/link per tornare alla versione desktop, questo perché l’utente potrebbe avere un telefono con un display abbastanza grande da consentirgli la navigazione sulla versione standard del sito. Allo stesso modo, mostrate un tasto/link facilmente accessibile anche nella versione desktop nel caso l’utente voglia tornare ad utilizzare la versione per cellulare. Un cookie potrebbe memorizzare la scelta dell’utente e mostrargli la stessa visualizzazione nella sua prossima visita. Ad esempio un utente potrebbe arrivare sul vostro sito, essere reindirizzato alla versione per cellulare, tuttavia scegliere quella desktop; a questo punto il cookie memorizza questa scelta. Il giorno dopo l’utente torna sul sito e gli viene mostrata direttamente la versione desktop. Comodo, no?

Ascolta i tuoi utenti e continua ad ottimizzare il sito secondo il feedback ricevuto

Il business nell’era del Web 2.0 non può prescindere l’ascolto del cliente. Esso avviene principalmente attraverso i social network. Tuttavia, se avete utenti affezionati e accorti, probabilmente vi capiteranno messaggi che contengano consigli. Se arrivano, prendeteli come la scoperta di una pepita d’oro! Tutti i suggerimenti dei vostri clienti/utenti circa l’uso del sito, i suoi contenuti e perfino suggerimenti circa i vostri prodotti/servizi sono sacrosanti e vanno esaminati con attenzione. In ogni caso, non aspettate d’incappare in un cliente predisposto a lasciarvi un suggerimento utile, di solito chi arriva su un sito poco funzionale lo abbandona e basta. Pensate al modo per invogliare i vostri utenti a lasciarvi un feedback. Potete chiederlo in modo esplicito: se già avete un elenco di indirizzi email relativi a clienti che magari hanno già effettuato un acquisto, o si sono iscritti alla vostra newsletter, chiedete loro come si trovano, se vorrebbero migliorare qualcosa. Potete anche lasciare una richiesta nelle comunicazioni di risposta o di contatto.

Non trascurate l’analisi dei dati statistici (Web Analytics) per capire cosa fanno i vostri utenti quando arrivano sul sito: da quale pagina statisticamente iniziano la navigazione? E non è detto che sia la homepage come i più possono pensare. Qual è la pagina con maggiore bounce rate (frequenza di rimbalzo)? Vi siete chiesto perché ciò accade? Cosa stavano cercando gli utenti? E dove sono arrivati con quella chiave di ricerca? E quanto tempo sono stati? Insomma le domande sono tante, ma le risposte possono essere oro nell’ottimizzazione del vostro sito.

Infine, non dimenticate che l’ottimizzazione dev’essere un processo costante.