In questo ultimo mese si parla parecchio della notizia che Google, di qui a poco, dividerà la search in funzione di due distinti indici, uno per le ricerche da mobile, l'altra per quelle da desktop.
In questo articolo non tratteremo questo argomento e nemmeno i diversi motivi per cui è necessario un sito mobile, in quanto alla fine del 2016 mi sembra scontato e fondamentale avere una versione ottimizzata per smartphone e tablet del proprio dominio, non tanto in vista di una possibile penalizzazione SEO relativa alla visibilità sui motori di ricerca, ma per il semplice fatto che la maggior parte dell'utenza (anche se questo dato non è poi valido per tutte le SERP) utilizza oramai uno smartphone per navigare sul web. Anzi dirò di più: da mia esperienza ho incominciato a vedere accessi da device mobile ai miei siti web dal 2010, poi nell'anno tra 2011 e 2012 le percentuali di visualizzazione delle pagine da mobile sono salite oltre il 10% e già a fine 2012 erano sul 20%.

Insomma come avrete capito già allora non avere un sito mobile equivaleva a dire che vi erano grosse possibilità di vedersi bruciare le visite di 2 utenti su 10. Per questo da fine 2012 incominciai a realizzare solo siti web responsive.

Quello che vedremo oggi è come ottimizzare l'usabilità di un sito web per l'utenza che arriva da device mobile. Come è facilmente intuibile è necessario avere già un sito adattivo o una versione dedicata del vostro dominio ottimizzata per mobile per applicare alcuni dei concetti che andrò a spiegare a seguire.

Scopriamo come ottimizzare l'usabilità di un sito web mobile, migliorando la user-experience Share on X

Monitor diverso, sito mobile differente

Quando realizziamo un sito mobile la prima e più importante (n.d.r. "è un mio pensiero") cosa a cui dobbiamo pensare è che il nostro sito si visualizzerà su un monitor nettamente diverso e più piccolo.
La fruizione ai nostri contenuti cambierà drasticamente e in sostanza il concetto da tenere a mente è che dobbiamo cercare di "condensare" il contenuto che proponiamo rispetto alla versione classica.

Per questo motivo è opportuno ragionare su due fronti separati per ottimizzare un sito mobile:

• layout proposto all'utenza;
• come si visualizzerà il contenuto;

Layout del sito mobile

Il concetto più importante da tenere a mente ai fini dell'usabilità di un sito mobile è che il layout deve essere a colonna singola, poi a seguire gli altri elementi da considerare sono:

• in testata l'utente deve comprendere l'identità del sito (logo, claim);
• menù di navigazione ottimizzato per il mobile e ben identificativo;
• mostrare il contenuto;
• mostrare il restante contenuto pertinente alla pagina e il footer;

In particolare è necessario che l'identità del sito in testa alla pagina non occupi più del 5/10% del totale di ciò che viene visualizzato sul device mobile, per dare modo di far visualizzare (above the fold, ossia senza che l'utente effettui uno scroll) buona parte del contenuto.

Il menù di navigazione deve essere ad espansione e ben riconoscibile secondo gli standard, ma questo discorso lo affrontiamo a seguire.

Dopo il contenuto possiamo mostrare tutti gli altri elementi della pagina (banner, categorie del sito, sezioni particolari, etc) cercando di snellire gli elementi e mostrando solo le informazioni che reputiamo utili e necessarie. In sostanza sia l'architettura dell'informazione che il layout devono essere semplici e di facile comprensione.

Per comprendere nel dettaglio questo concetto vi rimando ad un mio precedente articolo in cui analizzo la differente anatomia di un sito web nella visualizzazione su computer e device mobile.

Il contenuto proposto above the fold

Quando un utente atterra su un nostro contenuto deve comprendere da subito il contenuto della pagina.

Per questo ci possono aiutare alcuni concetti:

• il titolo deve essere esplicativo del contenuto che l'utente andrà a leggere;
• le briciole di pane e la categoria fanno capire da subito all'utente in quale sezione del sito è inserito l'articolo che si appresterà a leggere;
• inseriamo nelle prime righe del nostro contenuto un riassunto delle informazioni presenti nella pagina;
• per i contenuti lunghi mostriamo un sommario degli argomenti trattati, per dar modo all'utenza di saltare direttamente ai punti reputati più interessanti o per comprendere in sintesi se vi sono argomenti interessanti a cui dedicare tempo;

Il sommario, se realizzato secondo gli standard HTML, aiuta anche il motore di ricerca Google a presentare direttamente nello snippet nella SERP un link al contenuto ricercato. Per chi fosse interessato a questi argomenti vi rimando ad un articolo dedicato a comprendere come realizzare un sommario con i link ai diversi argomenti trattati in un articolo, mentre per capire cosa viene visualizzato dall'utenza è possibile utilizzare un tool fornito da Google dal nome Resizer.

Eliminare gli elementi non necessari

Per rendere la pagina più snella e meno pesante (sia in termini di peso file e conseguente velocità oltre che di visualizzazione dell'intero contenuto) possiamo pensare di "spegnere" alcuni elementi nella versione mobile. Se ad esempio la nostra sidebar della versione desktop ha troppi banner, blocchi aggregativi o elementi grafici, possiamo non farli visualizzare nella versione mobile. Se avete un layout responsive viene facile utilizzando le media query dei CSS e la clausola display: none; mentre se serviamo un layout diverso in funzione dello user-agent o su sottodominio m.sitoweb.tld eliminiamo gli elementi che ci sembrano non necessari direttamente via codice, lato server.

Nell'analisi di usabilità della pagina conviene effettuare le modifiche a seguito di esame delle mappe di calore o heatmap generate su un campione considerevole di utenti.

Ottimizzato per tutti i device, non solo per i più usati

Quando realizziamo una versione mobile del nostro sito dobbiamo pensare di ottimizzarlo per la maggior parte dei device in commercio moltiplicata per i browser più usati. Il lavoro da questo punto di vista potrebbe sembrare infinito, ma ci vengono in aiuto:

• Responsive Web Design o RWD e la corretta configurazione del meta-tag viewport;
• immagini possibilmente adattabili via CSS se non servite mediante RWD;
• come già accennato un corretto uso delle Media Query CSS per modificare l'aspetto del contenuto in funzione delle diverse risoluzioni;

In questo caso per lo sviluppo e il test è opportuno analizzare il nostro file HTML utilizzando diversi user-agent.

Ricordiamo poi che è possibile ottimizzare la grafica e le icone dei preferiti per alcuni device mobile e che è molto importante fare attenzione a controllare i diversi elementi nella pagina per evitare che fra di loro si sovrappongano o vengano visualizzati solamente in parte.

Infine facciamo attenzione agli scroll orizzontali. In alcuni casi vi sono elementi che sbordano dal nostro layout e allargano la pagina, obbligando l'utenza a scrollare non solamente in verticale, ma anche in orizzontale.

Interazione del sito con l'utenza

Come accennato precedentemente è necessario semplificare il più possibile la navigazione e la fruizione dei contenuti. Vediamo alcuni punti da considerare nella realizzazione di un layout mobile.

Utilizzare gli standard grafici

Il menù è necessario che si aprà solo se richiesto dall'utenza, per non occupare troppo spazio sul device e l'icona che lo contraddistinguerà dal resto degli elementi deve essere quella classica con le tre linee. Al massimo possiamo pensare ad un bottone con la scritta menù che, però, è graficamente meno bello. Se utilizziamo icone diverse per identificare il menù rischiamo di disorientare l'utenza.

Facciamo attenzione alle dimensioni dei font e al loro colore, dando il giusto contrasto e facilitando la lettura dei nostri contenuti sui dispositivi mobili.

Ottimizzare il comportamento dell'interfaccia

Per navigare e visualizzare il sito mobile gli utenti non usano il puntatore di un mouse, ma le dita. A seconda dell'alfabetizzazione informatica e delle dimensioni delle falangi (pensate al polpastrello di un muratore a confronto con quello di un bambino) sarà più o meno semplice comprendere quali sono le zone su cui è possibile effettuare interazione e dove/come digitare. Attenzione quindi agli effetti Javascript dei menù ad espansione e diamo il tempo all'utenza di premere sulle voci comparse prima di mostrare di nuove. Offriamo poi il più ampio spazio possibile tra le diverse zone sensibili in modo tale da agevolare chi ha dei "ditoni" o poca praticità nell'uso dello strumento.

In particolare possiamo:

• aiutare le azioni dell'utenza grazie a call to action e bottoni per invogliare e rendere più facile compiere determinate azioni ai nostri visitatori;
• i link testuali da questo punto di vista funzionano molto bene, ma facciamo attenzione a non inserirne troppi e tra loro vicini;
• ricordiamoci poi che su device mobile non esiste l'effetto di rollover, per cui non è uno stato da considerare ai fini grafici;
• teniamo sempre ben a mente che gli elementi e le pagine non si scrollano con una rotellina, ma con le dita. Sfruttiamo questo concetto nei nostri slideshow o gallerie di immagini/contenuti;
• sia smartphone che tablet si possono ruotare e per questo motivo l'area visibile cambia di proporzioni. Per questo il contenuto si deve adattare e un sito web responsive è una ottima soluzione per creare un vero sito mobile friendly. Una scelta potrebbe essere quella di obbligare l'utenza a visualizzare il sito mediante device orientato in una maniera specifica, ma ricordiamoci che questa soluzione blocca la libertà di uso dello strumento da parte dell'utenza;
• se abbiamo zone di testo troppo ampie, che possono interessare solo a determinate persone e non alla totalità dell'utenza, racchiudiamole in accordion o elementi ad espansione a seguito di selezione da parte dell'utenza (ad esempio nella pagina contatti, nella sezione come arrivare inseriamo in un accordion il testo relativo alle spiegazioni dell'uso dei mezzi pubblici o delle strade da prendere in auto);
• inseriamo un bottone/zona adibita a effettuare la ricerca del contenuto in maniera ben visibile per far cercare dei contenuti all'utenza che è atterrata su una pagina errata. Aiuta molto se i risultati della ricerca dell'utenza vengono forniti mediante AJAX, in maniera dinamica mentre il visitatore digita nella finestra di ricerca, evitando troppi tap sull'interfaccia del nostro sito. Nel caso di elevato numero di contenuti proponiamo dei filtri all'utenza per limitare i risultati proposti;
• attenzione alle sezioni infinite scrolling, in alcuni casi quando il contenuto è troppo rischiamo di rallentare la visualizzazione del nostro articolo su device non troppo performanti. In quel caso è meglio paginare il contenuto dividendolo in diverse sezioni a cui l'utente può arrivare mediante icona;
• per migliorare la navigazione per contenuti mostriamo i correlati all'argomento trattato in coda al nostro contenuto;
• in casi particolare, se abbiamo pagine con troppe zone di contenuto, mostriamo un menù all'utenza per spegnere i blocchi di informazioni non desiderate;

Ritorno in testa alla pagina, ritorno al sommario

Una volta che l'utente arriva al termine della nostra pagina forniamo uno strumento (un bottone ad esempio) per tornare in testa velocemente.

Lo stesso si deve dire dei contenuti molto lunghi, sopratutto se hanno un sommario. Inseriamo quindi un link per far tornare i nostri visitatori direttamente all'indice.

Facilitiamo la condivisione

Quando l'utenza naviga sul nostro sito mediante uno smartphone ha la possibilità di condividere il contenuto sui social configurati mediante app dedicata. In più è necessario fornire strumenti per far "memorizzare" il nostro contenuto, in modo da farli tornare in seguito.

Forniamo quindi una veloce soluzione di condivisione del nostro articolo mediante bottoni dedicati, contrassegnati da icone chiare che utilizzino simboli grafici standard e relativi colori.

In più diamo un occhio di riguardo ai servizi di messagistica come Whatsapp e, per i siti che si occupano di tecnologia consiglierei anche Telegram. Di mio ad esempio su questo sito ho aggiunto un bottone per la condivisione con questo strumento dato che viene utilizzato molto dall'utenza che fruisce dei contenuti presenti su questo dominio.

I form devono essere usabili

Uno dei principali elementi di interazione con l'utenza sono i form presenti sul nostro sito.

Le regole di usabilità di questi elementi per la visualizzazione su computer sono valide anche per i device mobile, ma in alcuni punti differiscono.

In particolare è necessario che:

• i campi da compilare siano lo stretto necessario;
• se dobbiamo effettuare questionari dividiamoli in step;
• quando possibile completiamo automaticamente i campi dei form (ad esempio per gli utenti registrati);
• i campi del form devono essere ottimizzati per la risoluzione utilizzata dal dispositivo;
• l'utenza deve poter visualizzare con semplicità il contenuto che inserisce nei diversi campi del form e non solamente una parte del contenuto inserito;
• i campi a scelta multipla devono poter essere selezionabili con facilità (facciamo sempre attenzione alle "ditone"!);

Per concludere questo argomento ricordatevi che se un visitatore effettua interazione con il vostro sito è sempre necessario fornire un feedback, per far comprendere che l'azione effettuata è andata in porto (o no). In sostanza se l'utente inserisce un commento è necessario pubblicarlo o spiegare che è in moderazione, se compila un form la faccenda è leggermente più complicato, ma in genere è opportuno:

• reindirizzare ad una pagina di ringraziamento (se vogliamo monitorare la conversione con Google Analytics) o almeno mostrare un messaggio di avvenuto invio delle informazioni al server;
• inviare una email di risposta che, soprattutto in questo caso, deve essere ottimizzata per i device mobile;

Sfrutta le potenzialità dei device mobili

Come già accennato per ottimizzare un sito web per i device mobile dobbiamo pensare che lo strumento con cui l'utenza visualizzerà il nostro sito è ben diverso da un computer e in particolare possiamo dire che è necessario:

• pensare che l'utenza può arrivare direttamente in una determinata sezione di un nostro contenuto grazie ad una foto fatta su un QR code da noi generato e stampato;
• le mappe presenti sul nostro sito possono sfruttare la geolocalizzazione e lo stesso si può dire di particolari servizi che possiamo implementare sul nostro sito;
• sui numeri di telefono o su alcuni banner possiamo sfruttare le potenzialità del clickToCall, permettendo all'utenza di telefonare direttamente con un tap su un link realizzato mediante il markup dedicato dell'HTML5 (a href="tel:prefisso/numero");

Sito mobile NON vuol dire AMP

In questi giorni leggo parecchi articoli e domande di utenti, webmaster e SEO che chiedono se è possibile considerare una versione AMP come sito ottimizzato per il mobile e, se una volta che uscirà il nuovo indice di Google dedicato alla SERP per i device mobili i siti senza una versione mobile friendly ma con layout strutturato con markup AMP, riceverenno penalizzazione o meno.

Di mio posso dire che, a parte le parole di George Muller o Gary Illyes (che sostengono che un sito con solo AMP senza versione mobile è considerabile solamente a sito desktop) non possiamo pensare di avere solamente una versione AMP del nostro sito da fornire alla nostra utenza proveniente da device mobile per i seguenti motivi:

• non è possibile usare i form;
• l'utilizzo del touch è limitato;
• in media sparisce il menù di navigazione e se lo vuoi far comparire son dolori;
• generalmente puoi far navigare l'utenza solo con i link interni al contenuto;
• graficamente una pagina AMP tende a (utilizzando gergo tecnico) fare schifo;
• AMP va bene per siti di news, contenuti testuali e (al limite) intercettare utenza per l'e-commerce;

Per cui in sostanza ricordiamoci che realizzare una versione mobile di un sito non vuol dire crearlo solamente in AMP, ma ANCHE in versione Accelerated Mobile Page. Così facendo potremo aumentare il CTR dei nostri snippet sulla SERP di Google, ma poi a seguito di navigazione da parte dei nostri visitatori fidelizzeremo l'utenza grazie al nostro sito nella sua interezza e non soltanto con la qualità dei contenuti.

Cosa dice Google per i siti mobile

Vediamo ora tutte quelle informazioni relative all'usabilità utili anche per i consulenti SEO più tecnici, ma che valgono ai fini pratici dell'ottimizzazione globale di un sito web per i device mobile. In più se questi dati ci vengono forniti dal motore di ricerca è molto probabile che siano importanti ai fini del corretto posizionamento di un sito web sulla SERP mobile.

Alcune delle best pratics consigliate da Google le abbiamo già viste nei precedenti paragrafi e per questo non ve le ripropongo (testi troppo piccoli, link troppo vicini fra loro, viewport) e vediamo a seguire solamente i punti non trattati fino ad ora.

Velocità di caricamento

La velocità di caricamento di una pagina web influisce in primis sulla pazienza dei nostri visitatori.

A partire dagli anni 2000 una delle regole base dell'usabilità è quella che una pagina web si deve caricare in meno di 7 secondi. Scaduto questo termine l'utenza ritorna indietro e nel caso effettua una nuova ricerca, atterrando su un sito diverso.

Ad oggi, complice il miglioramento delle infrastrutture dei nostri provider, i tempi di caricamento dei siti web si sono notevolmente ridotti e con l'uso di app, AJAX, pagine AMP e Instant Articles l'utenza diviene sempre di più "viziata" richiedendo pagine web che si caricano in un attimo, con tempi minimi di un paio di secondi.

Di mio, mediamente, cerco di far si che un sito carichi del contenuto (non necessariamente tutto, ma almeno una parte, in modo che l'utenza incominci a visionare qualcosa) in non più di 4/5 secondi.

Per capire come analizzare la velocità di un sito web, in funzione dei diversi device e delle diverse connessioni, vi rimando ad un articolo dettagliato sui differenti tool online per l'analisi dei tempi di caricamento del first byte e dei restanti file che compongono il nostro sito.

Uso di Flash

Come già spiegato in un precedente articolo ad oggi è opportuno smettere di sviluppare siti web in Flash per tutta una serie di motivi (scarsa compatibilità e sicurezza sono i primi).

In particolare dobbiamo sapere che le animazioni Flash non si visualizzano correttamente sui dispositivi mobile e nella maggior parte dei casi viene richiesta l'installazione di componenti aggiuntivi per far visualizzare il contenuto. In questi casi l'utenza sceglierà un altro sito al nostro.

Per ovviare a questo problema realizzate animazioni solamente in HTML5, che sono compatibili per tutti i browser e dispositivi.

Interstitial banner

Dal motore di ricerca Google ci dicono che a partire dai primi di gennaio 2017 verranno penalizzati, a livello di posizionamento, tutti quei siti che mostrano gli Interstitial Banner a limitare la navigazione dell'utenza proveniente dai device mobile. Gli interstitial banner sono tutti quei popup pubblicitari che compaiono automaticamente in sovra impressione quando gli utenti atterrano su determinate pagine.

In questo caso di mio devo dire che, a parte la possibile penalizzazione SEO da parte del motore di ricerca, è necessario pensare a soddisfare l'utenza per fare modo che ritorni in seguito e tempestarla di popup e banner non è il migliore dei metodi, a meno di non avere del contenuto così unico da far digerire una navigazione a singhiozzo e confusionaria.

Risorse bloccate

Mediante il file robots.txt possiamo scegliere di bloccare l'inclusione nel motore di ricerca di alcuni file in funzione dei differenti spider che effettuano attività di crawl delle nostre risorse.

Impedendo l'accesso ad alcuni contenuti rischiamo di far renderizzare male le nostre pagine al motore di ricerca, che potrebbe interpretarle come non ottimizzate o, nel peggiore dei casi, potrebbe non leggerle nemmeno.

Per capire come ottimizzare il file robots.txt per l'inclusione nei motori di ricerca vi rimando ad un articolo dedicato sull'argomento, mentre per capire come usare il file robots.txt appositamente sui device mobile su questo sito è presente una ulteriore risorsa.

Reindirizzamenti errati

Quando realizziamo la versione mobile del nostro sito web su un dominio diverso, ad esempio su un sottodominio tipo http://m.sitoweb.tld è opportuno che ogni pagina del sito originale, se visualizzata da device mobile, reindirizzi al corrispondente URL sulla versione mobile e NON sulla homepage.

Il motivo è semplice, non dover far navigare l'utente forzatamente nel tuo sito per raggiungere il contenuto desiderato.

Riferimenti

Vuoi approfondire il discorso? Oltre ai link sparsi nel contenuto ti lascio dei riferimenti ad articoli interessanti presenti in rete:

• www.smashingmagazine.com - Come ottimizzare i form per mobile;
• www.thinkwithgoogle.com - Come migliorare la user-experience su mobile;
• usabilitygeek.com - Linee guida sull'usabilità;
• developers.google.com (1) - Panoramica sulla SEO per i dispositivi mobili;
• developers.google.com (2) - Errori comuni nella progettazione di siti mobile;
• storage.googleapis.com (PDF) - Principi per il design di siti mobile;