Oggi parlerò di un argomento che interesserà moltissimo a tutte quelle persone che sentono il fiato di Google sul proprio collo dopo l’annuncio del mini rollout del mobile first indexing di Dicembre 2017 che verrà completato, pare, durante il 2018: sto parlando di come ottimizzare l’esperienza dei menu di navigazione mobile nel modo corretto, mettendo da parte il malefico menu hamburger, amato dai web designer ma guardato con sufficienza dagli esperti di User Experience e spero, da oggi, dai SEO o da chi perlomeno fa SEO sul proprio sito web.
NOTA: questo articolo è la versione per ipoudenti di un podcast che puoi ascoltare dal player sottostante
I sistemi di navigazione nascosti o a scomparsa fanno male alla User Experience
Proprio per ribadire questo concetto ho ricondiviso proprio questa settimana, sia sulle community SEO italiane che sulla newsletter, uno studio del Nielsen Group che in poche parole sostiene che l’utilizzo di sistemi di navigazione a nascosti e/o a scomparsa come appunto l’hamburger menu vanno a impattare negativamente diverse metriche della user experience, tra le quali l’effettiva possibilità da parte degli utenti della scoperta e dell’utilizzo del menu di navigazione che, mi piace ripetere, è uno dei pilastri dei path che scolpiamo come ideali esperienze utente finalizzate alla conversione.
Qualche designer che evidentemente non si trova d’accordo con questo studio ha ben pensato addirittura di utilizzarlo nei siti desktop, dove questa cosa disorienta ancora di più l’utente. Ragionando sul perchè c’è un motivo atavico descritto magistralmente da Andrea Saletti sul suo libro sul neuromarketing: l’uomo vive di abitudini. Chi utilizza internet da desktop è abituato, come ribadisce il gruppo Nielsen, a trovare una navigazione palese nella parte superiore del sito o in alternativa in quella sinistra. Le conseguenze sono facili da intuire. Sugli ulteriori motivi di questo impatto negativo dei menu a nascosti o a scomparsa vi rimando alla lettura dello studio dal link che trovate qui sopra.
Regola d’oro: se una cosa è importante per il tuo sito rendila il più possibile palese
Ora, prima di partire a parlare dei menu e di quant’altro ricordiamoci di tenere a mente che Google vuole valutare la soddisfazione dell’utente nel nostro sito e in qualche misura lo fa già. Teniamo anche a mente che la soddisfazione dell’utente si lega a doppio filo alle conversioni e quindi al business. Senza queste premesse, è difficile capire l’importanza del resto del post.
Una delle mie regole d’oro è che le cose importanti in un sito devono essere palesi il prima possibile rispetto alla loro funzione: come non è il caso di nascondere le informazioni centrali di un contenuto semplicemente aspettandosi che l’utente effettui in autonomia una specifica quantità di scroll della pagina, non è davvero il caso nascondere il menu di navigazione dietro simboli che richiedono un certo grado di consapevolezza digitale, chiamiamola così, per essere interpretati, e non parlo di mera dimestichezza.
Insomma se un elemento ha un funzione importante nel sito, sopratutto se questo deriva da un intento specifico come quello di un utente che atterra nel sito da una query di ricerca, deve essere subito accessibile e comprensibile.
Mia madre, che naviga come me su internet dal lontano 1996, probabilmente quindi da prima di alcuni di voi, ad oggi non ha idea di come identificare un menu come quello hamburger. Scrolla, e qua si vede l’esperienza, e cerca. Ci ritorneremo.
Come lei una buona fetta degli utenti non sanno che dietro a quei simboli simili ad un panino si celano quelli che sono, in un sito ben strutturato, lo voglio ripetere, i blocchi di partenza per tutti i tipi di esperienza offerta dal sito stesso, sopratutto negli ecommerce. La cripticità di questi segnali equivale quindi a nascondere il menu e ciò che viene nascosto può di fatto venire ignorato.
In parte questo vale anche per il crawler ( ad esempio su elementi in page quali accordion o tabs, vedi esempi qui sotto ) ma attenzione: non sto dicendo che un menu a scomparsa viene ignorato dal crawler, intendiamoci, ma piuttosto che una navigazione veramente ottimizzata per il mobile, della quale vi parlerò a breve, porta con se elementi in grado di migliorare notevolmente il grado di gerarchia nella struttura del sito e quindi la sua scansione.
L’alternativa performante al menu hamburger
La soluzione proposta dal gruppo Nielsen per la navigazione mobile è quella di un menu ibrido con 4 elementi palesi e il resto a scomparsa. Come esempi virtuosi di approcci in linea con questo ragionamento mi vengono in mente:
- la versione mobile di Google Plus, con i 5 pulsanti che si nascondono solo con lo scroll verso il basso ma riappaiono appena l’utente cercando il menu tenta, per istinto, lo scroll verso l’alto alla ricerca di un top menu che di fatto non c’è. Un ottimo modo di venire incontro alle abitudini ( lo stesso metodo è utilizzato da Instagram );
- medium.com con quel bel menu con scrolling orizzontale con voci palesi presenti fin da subito, supportato da elementi grafici che invitano al comportamento ed elementi di navigazione inseriti direttamente nella pagina, altro elemento molto importante;
Naturalmente questi sono solo 2 esempi virtuosi ( se ne avete altri segnalatemeli nei commenti, li integro molto volentieri ) e sicuramente qualcuno, magari qualcuno di noi ( voi ) arriverà ad inventarsi qualcosa di geniale e veramente usabile, ma sono due ottimi punti di partenza dai quali partire a sviluppare l’esperienza ottimale descritta dallo studio di Nielsen.
L’importanza degli elementi di navigazione in page
Quelli che io definisco come elementi di navigazioni in page sono ad esempio quei pulsanti che metto su tutti i siti dei miei clienti con call to action alle sottosezioni relative a query per la quale la pagina si sta posizionando.
Se ad esempio, come il mio amico ing. Battistoni fate un sito sulla ricetta dell’amatriciana e volete giocare con il testo per inserire incastri semantici non potete però nascondere la ricetta “dietro” tantissima attività di scroll: chi atterra deve poter subito accedere al contenuto relativo ad una query importante come “ricetta amatriciana” anche se la pagina si posizionerà, ad esempio, per “Cracco amatriciana“. Da qui l’implementazione di quel bel pulsantone per saltare alla ricetta.
Qualcuno mi dirà che è semplicemente una call to action, io dico invece che oltre ad essere tale è un vero e proprio elemento di navigazione pensato ad hoc per chi atterra su questa pagina da query legate alla ricerca della ricetta.
Per farvi un altro esempio, chi cerca un gatto di razza e atterra su di un sito trovandosi davanti del testo inserito da un bellissimo e bravissimo per aumentare la rilevanza della pagina rimarrà disorientato, pensando di aver sbagliato pagina, una delle reazioni peggiori che si può suscitare in un utente. Lo dico per esperienza ( sono io il bello del paese della situazione ) avendo fatto il sito all’allevamento che mi ha venduto le mie 2 gatte. Lo dico perchè ci sono stati feedback diretti quali “dove sono i gatti?” e l’incredibile differenza di clickthrough nelle singole schede dei gatti dopo aver inserito un semplice elemento di navigazione in page dalla dicitura “vai alle fotografie”.
Due punti fondamentali sugli utenti mobile
Con questi esempi ho parlato anche di due fattori molto importanti per l’esperienza mobile:
- il primo è che l’utente mobile è frettoloso e nevrotico, più diretto al punto e spesso inserito in un contesto sociale, ad esempio un gruppo di persone, che lo porta a voler reperire informazioni o effettuare operazioni nel modo più veloce possibile.
- Il secondo è che l’utente mobile è abituato ad usare la user experience delle applicazioni, che sono un’esperienza che ha preceduto e quindi plasmato quello che oggi chiamiamo il mobile web.
Gli esempi che vi ho fatto della navigazione con 4 o 5 pulsanti sono di fatto adattamenti di esperienze in stile app. Dovete assolutamente scardinare l’insana passione del cliente medio per i menu del “tutto subito”, perchè l’utente “deve poter scegliere” ( SIGH! ) per arrivare a strutturare sentieri di navigazione che possono partire da questi menu ibridi ma che devono sfruttare al meglio l’implementazione di elementi di navigazioni in pagina.
Gennaio 2018: lo stato del mobile web
Voglio chiudere con una breve riflessione sullo stato del mobile web mentre sto scrivendo, alle 3 di notte del 25 Gennaio 2018. Sinceramente penso che il web lato mobile sia essenzialmente un disastro: tutti i giorni mi scontro con siti lenti, legnosi ed evidentemente pensati da designer che hanno ben pensato di basarsi, essenzialmente, sulle mode del momento o sul proprio gusto e sulla propria esperienza personale di operatori avezzi all’utilizzo del web.
Se ci si mette per un secondo nelle scarpe della mamma o del papà ( almeno i miei ) o di un qualsiasi altro utente che il web lo vive lo stretto necessario non c’è bisogno dello studio di Nielsen per arrivare a comprendere che bisogna non dare niente per scontato e cercare invece di modellare l’esperienza utente su di una profonda comprensione ( derivata dallo studio ) del proprio pubblico di riferimento. Questo e debellare ora e per sempre l’utilizzo del malefico hamburger menu.