Quanti aspetti bisogna tenere in considerazione perché il menu del nostro sito risulti fatto bene? Ma soprattutto… cosa vuol dire che un menu è fatto bene?
Per rispondere a queste domande approfondiremo:
- Il menu dal punto di vista della UX
- Il menu dal punto di vista SEO
- Il menu dal punto di vista del copy
Come progettare un menu user-friendly
Quando un utente atterra su un sito web deve sapere dove si trova e come raggiungere le pagine più importanti. O meglio: quelle più interessanti. Ragionate come un utente: di cosa ha bisogno? In fase di progettazione create una sitemap con le pagine principali del sito.
Sitemap menu. Fonte: Butterfly
Non linkate tutte le risorse del vostro sito. L’utente può scoprirle man mano che prosegue la navigazione e familiarizza con la struttura gerarchica del sito.
Per scoprire le pagine con il CTR (percentuale di clic) più alto e maggiormente visitate negli ultimi 90 giorni, aprite la Search Console di Google alla voce Search Analytics selezionando l’opzione Pagine. Valutate se includerle nel menu, perché sono quelle che i vostri utenti trovano più utili.
Attenzione: essendo la massima espressione della navigabilità di un sito, il menu non deve essere letto, ma guardato! Quindi dobbiamo assicurarci che sia sempre possibile, con un numero prestabilito di click, arrivare ovunque nel sito.
Non deve mai e poi mai succedere che l’utente si perda in un labirinto di pagine o non riesca a trovare subito quello che sta cercando.
Possiamo ricorrere anche a menu correlati distribuiti tra le varie pagine. I contenuti corporate, se non necessari, possono essere posti anche solo nel footer.
Le voci di un menu: 7 is the magic number
Non esagerate con le voci. Non inserite voci ridondanti o irrilevanti.
L’ideale è non superare le 7 voci nel menu principale, per non rischiare di perdere l’attenzione dell’utente:
Four decades ago, G. Miller offered a general rule of thumb that the span of immediate memory is about 7 +/- 2 items. When people are asked to distinguish between different tones, if the number of tones presented is over about 5, their accuracy at this task decreases rapidly. When asked to recall a series of unrelated words or numbers, people fail when the size of the series increases to 6 or 7. In other words, the span of immediate memory imposes severe limitations on the number of items we are able to receive, process and remember.
https://www.microsoft.com/usability/UEPostings/p25-larson.pdf
Sottolivelli: mai scendere troppo in basso!
Anche i sottolivelli vanno usati con moderazione, non scendendo mai oltre il secondo. Come dicevamo poco sopra, l’utente deve vedere, non leggere. Il visitatore deve fare minore fatica possibile per capire dove si trova e come raggiungere le pagine di suo interesse. Non costringetelo a dover interpretare, pensare o tirare a indovinare. Le voci intuitive e chiare portano l’utente dove vuole arrivare con naturalezza e facilità.
Chiaro ma non banale: l’esempio di Coca-Cola
Chiarezza non fa rima con banalità. Non dovete per forza limitarvi a voci standard e anonime come Chi siamo; La nostra storia; Prodotti; Dove acquistare.
Guardate ad esempio il menu di Coca-Cola.
Il brand ha rispettato il suo tono di voce diretto e coinvolgente. La voce che rimanda ai prodotti del marchio è una call-to-action chiara e invitante.
Sottolinea due punti di forza del brand: l’offerta di bevande per tutti i gusti; la capacità di far sentire i consumatori protagonisti e speciali.
Questo dimostra che un menu, se ben progettato e curato nel copy, può diventare un potente strumento di web marketing.
Per aumentare le conversioni seguite l’esempio di Coca-Cola: sfruttate call to action originali e coinvolgenti.
Il menu deve parlare la lingua del target
Il menu ovviamente va scritto nella lingua del vostro target. Non deve solo parlare in una lingua specifica, ma anche usare termini comuni e noti ai vostri utenti. Un cliente di un sito e-commerce di abbigliamento si aspetta di trovare nella barra di navigazione voci quali Catalogo, Prodotti, Collezione autunno-inverno 2018, Nuovi arrivi, Trend. Questa aspettativa dev’essere pienamente soddisfatta.
Non usate termini incomprensibili al vostro pubblico o troppo settoriali. Anche le voci creative vanno dosate con cura perché rischiano di far smarrire l’utente.
Creatività sì, ma con saggezza. Nel caso della voce menu di un ristorante potete usare varianti come “I piatti del giorno”; call-to-action come “Entra in cucina”, che stuzzicano la curiosità dell’utente. O ancora varianti più creative, ma facili da capire come “Cosa bolle in pentola”.
Le voci di menù scelte da Gattomilano.com
Le voci di menù scelte da Sarpiotto.com
Per assicurarvi che le voci siano comprensibili effettuate dei test con le mappe termiche. Questi strumenti vi permettono di scoprire le aree più “calde” del vostro sito. Scoprirete dove si sofferma l’utente e con quali elementi interagisce maggiormente. Nel caso del menu individuerete le voci che ricevono più clic e quelle ignorate.
Come creare un menu SEO-friendly
Il menu di un sito web prima di tutto deve essere pensato per l’utente: questo è il modo migliore di applicare i principi della SEO. Tutte le altre considerazioni vengono rigorosamente dopo.
Esempio: se gli utenti comprano soprattutto il prodotto X fra i 1000 prodotti di un ecommerce, il prodotto X può (anzi, deve!) diventare una voce del menu principale.
Inoltre il menu può essere usato anche per ridurre il tasso di rimbalzo, aumentare il traffico e migliorare il ranking. Se i visitatori trovano subito le informazioni che stanno cercando saranno più propensi a tornare, e il sito di può dire ottimizzato.
Ricordatevi che i menu devono avere sempre link testuali. Gli anchor test devono essere scelti con cura. Per evitare che gli spider incontrino difficoltà a leggere il menu non usate solo immagini. Per gli effetti grafici meglio agire via CSS.
Anche se Google consente oltre 250 link in una pagina, limitate il numero di voci. Non linkate gli archivi del blog, centinaia di categorie e non abusate dei sottomenu. Se una pagina contiene troppi link ciascuno avrà un valore inferiore.
Dove collocare il menu
Come per la scelta del testo, anche la collocazione del menu deve rispondere alle aspettative degli utenti. Fate in modo che sia sempre ben visibile su ogni dispositivo. Il menu di navigazione principale solitamente viene cercato sotto alla fascia in alto, mentre quello di approfondimento sulla sidebar a sinistra o a destra.
Orizzontale o verticale?
Se vi state chiedendo quale sia la disposizione migliore, orizzontale o verticale, non esiste una risposta unica. I menu orizzontali presentano diversi vantaggi. Innanzitutto vi costringono a scegliere le 6 voci principali e a limitare il numero di voci secondarie. Il numero limitato di voci agevola la scelta dell’utente.
L’utente inoltre sa dove individuarli, perché è abituato a cercarli nella barra di navigazione principale in alto al centro. Questo non lo costringe a pensare
Il menu verticale d’altro canto è utile perché vi permette di superare i limiti di larghezza della pagina. Sicuramente è l’opzione migliore da mobile e per menu con tante voci.
Attenzione: questo non significa costringere l’utente a uno scorrimento infinito. O inserire i link a tutte le pagine del vostro sito. Anche in questo caso la regola è: less is more. Linkate solo le risorse più utili e importanti.
Di seguito un esempio di menu verticale che l’ha tirata decisamente per le lunghe. Il risultato è una barra di navigazione confusa e inusabile. L’utente è costretto a leggere e a pensare prima di trovare la voce che cerca e a cliccarci.
Il re della navigazione verticale: il menu hamburger
Un menu hamburger è caratterizzato da un’icona di diverse linee sovrapposte. Le voci sono disposte una sopra l’altra, come gli strati di un hamburger. Il menu si espande in verticale, diventando visibile solo quando l’utente clicca sull’icona.
Icona classica del menu hamburger
Con il menu hamburger la barra di navigazione non interferisce con la lettura dei contenuti.
Guardate questo fortunato esempio dell’artista Christoph Niemman. Grazie al menu hamburger lo slider con le sue opere ha ottenuto più spazio. L’utente non viene distratto dagli elementi di navigazione.
Ecco altri esempi di menu verticali ben riusciti e menu hamburger:
http://bashooka.com/inspiration/examples-of-effective-use-of-vertical-navigation-menu-in-web-design/
I megamenu: quando usarli e perché
I megamenu sono pannelli di navigazione molto estesi che possono avere diversi vantaggi, tra cui:
- Mostrano molte opzioni in un solo colpo
- Sono utili per gli e-commerce che non riescono a inserire tutte le categorie in un menu standard
- Possono offrire dei contenuti immediati (foto, video, recapiti, form…)
Anche i siti che offrono tanti servizi, come le compagnie aeree, ne fanno un largo uso.
Alitalia alla voce Volare ad esempio linka tutte le sezioni del sito che rispondono alle domande più comuni degli utenti sulle varie procedure: dall’imbarco dei bagagli al check-in.
Parlando di megamenu non potevamo non citare McDonald’s. Il colosso americano dei fast food lo usa per mostrare la sua offerta e ingolosire gli utenti. Lo stile è quello tipico di un menu cartaceo.
Le voci contengono testi affiancati da immagini che rendono facile, intuitiva e… appetitosa la navigazione. In linea con la mission del suo brand il menu fa venire fame.
Immagini e icone nel menu: pro e contro
Inserire le immagini nel menu come ha fatto McDonald’s non sempre è consigliabile.
Ricordate: nessun elemento dev’essere superfluo.
Le icone vanno inserite solo se facilitano la navigazione e l’immediata comprensione della voce. Fate in modo che siano di uso comune e facilmente riconoscibili.
Tips: Gli utenti riconoscono facilmente l’icona del carrello nella voce “Acquista ora”.
A livello di design ogni voce dev’essere riconoscibile e distinta. Meglio non inserire i testi in forme geometriche identiche. L’occhio umano tende infatti a percepire come identici gli elementi simili.
Le best practices per i menu mobile
La regola numero uno dei menu mobile perfetti: veloce è meglio. Inserite per prime le pagine principali: dai contenuti più importanti alle call-to-action.
Scegliete testi corti e chiari. In questo modo potrete anche inserire un menu orizzontale che compare sempre al top della pagina sotto forma di barra statica. Per i menu con più voci invece è preferibile una navigazione verticale a scomparsa.
Prestate particolare attenzione al testo: dev’essere chiaro e leggibile anche da mobile. L’utente non deve zoomare per leggere.
Scegliete un font alto che aggiunga spazio extra tra le lettere. I più usati sono Arial, Helvetica, Courier, Georgia, Times New Roman e Trebuchet MS. Google consiglia di usare un font base di 16 CSS pixels scalabile in base ai dispositivi.
L’utente deve avere abbastanza spazio per cliccare le voci sul touch screen.
Tips: A un dito medio occorre uno spazio di almeno 44 pixels, da sinistra a destra e sopra e sotto. In questo modo non cliccherà sulla voce sbagliata.
Per far capire all’utente che ha selezionato la voce giusta aggiungete dei feedback visivi. Ad esempio un colore diverso e vivace che si attiva alla selezione della voce.
Ispiratevi ai migliori design per menu mobile selezionati dal sito specializzato Bashooka.
Tiriamo le somme
Come abbiamo visto, per creare un ottimo menu, bisogna mettersi nei panni dell’utente.
Una navigazione difficile e poco user-friendly può compromettere gli obiettivi del vostro sito: dalle conversioni al posizionamento.
Anche un menu che non parla la lingua del vostro target e non usa il tono di voce aziendale impoverisce l’esperienza utente e l’immagine del brand. Il nostro consiglio è di ragionare a 360 gradi, studiando le migliori pratiche e testando diversi tipi di menu.
È importante modificare il menu se le voci non hanno una buona percentuale di clic o se avete scoperto che sono altre le pagine più utili e visitate. O ancora se avete individuato errori nel design come elementi troppo vicini, testo illeggibile da mobile. O nella struttura: voci superflue o ridondanti. Vi lasciamo con le basi per realizzare un menu (verticale, orizzontale, responsive) e personalizzare la barra di navigazione.
Buono studio e felice navigazione!
