La navigazione è lo scheletro di un sito o di un'app. Se funziona, l'utente si muove senza pensarci; se non funziona, ogni spostamento diventa una piccola ricerca. Non esiste uno schema migliore in assoluto: esistono schemi adatti a quantità di contenuti, dispositivi e abitudini diverse. Vediamo i principali con i loro punti di forza e i loro limiti.
Il menu hamburger
L'icona con tre linee orizzontali nasconde il menu dietro un tocco. È diventata una convenzione riconosciuta, soprattutto su mobile, perché libera spazio prezioso sullo schermo.
Il suo limite è proprio ciò che lo rende comodo: nasconde. Le voci che non si vedono vengono usate meno, perché l'utente non sa che esistono o non pensa di andarle a cercare. Per questo il menu hamburger funziona bene per contenuti secondari o per siti con molte sezioni di importanza simile, e meno bene per le due o tre destinazioni principali di un'app.
Alcuni accorgimenti ne migliorano l'efficacia:
- affiancare all'icona la parola «Menu», che rende il significato esplicito;
- mettere in evidenza fuori dal menu le azioni più frequenti, come la ricerca o il carrello;
- assicurarsi che il pulsante abbia un nome accessibile e che il menu aperto si possa chiudere con il tasto Esc e da tastiera.
La barra a schede
Su mobile la barra a schede in basso mostra da tre a cinque destinazioni principali, sempre visibili. È lo schema adottato da molte app di uso quotidiano, perché permette di passare da una sezione all'altra con un solo tocco e nella zona più facile da raggiungere con il pollice.
Funziona quando le sezioni principali sono poche e di uso frequente. Se diventano sette o otto, si finisce per aggiungere una scheda «Altro» che reintroduce i problemi del menu nascosto. Ogni scheda dovrebbe avere icona ed etichetta testuale: le icone da sole sono ambigue, tranne pochissime universalmente comprese.
Il menu orizzontale
Sui siti desktop il menu orizzontale in alto, con le voci principali visibili, resta lo schema più chiaro. Tutte le sezioni sono a portata di occhio e il menu stesso comunica che cosa offre il sito.
Il vincolo è lo spazio: oltre sei o sette voci la riga diventa affollata, le etichette si accorciano fino a diventare criptiche e su schermi intermedi le voci vanno a capo. Spesso è il segnale che serve un lavoro di architettura dell'informazione, non solo di grafica.
I menu a tendina e i mega menu
Quando le sezioni hanno molte sottosezioni, i menu a tendina e i mega menu, pannelli ampi che mostrano molte voci organizzate in colonne, possono esporre la struttura in modo efficace. Alcuni rischi da gestire:
- apertura al passaggio del mouse troppo sensibile, che fa comparire e scomparire il pannello mentre l'utente si sposta in diagonale verso una voce;
- inaccessibilità da tastiera e su touch, dove il passaggio del mouse non esiste;
- sovraccarico, quando il pannello contiene decine di link senza gerarchia.
Spesso è più robusto aprire il pannello al clic o al tocco, con un indicatore visivo che la voce ha un sottomenu.
Il breadcrumb
Il breadcrumb, la traccia del tipo «Home › Elettronica › Cuffie › Cuffie senza filo», indica dove ci si trova nella gerarchia e permette di risalire di livello con un clic. Non sostituisce il menu principale: è una navigazione secondaria, particolarmente utile in siti profondi come negozi online, documentazioni e archivi.
Per funzionare deve rispecchiare la gerarchia reale, non la cronologia di navigazione, e l'ultimo elemento, la pagina corrente, non dovrebbe essere un link. Su mobile si può abbreviare mostrando solo il livello superiore, con una freccia «‹ Cuffie».
La navigazione locale
All'interno di una sezione lunga, come una guida o un pannello di impostazioni, una navigazione locale, per esempio un indice laterale o un elenco di sezioni in cima alla pagina, aiuta a orientarsi senza tornare al menu principale. Indicare la sezione corrente, con un evidenziatore o un peso diverso del testo, completa l'orientamento.
Come scegliere
| Situazione | Schema consigliato |
|---|---|
| App mobile con 3-5 sezioni d'uso frequente | Barra a schede in basso |
| Sito desktop con poche sezioni principali | Menu orizzontale visibile |
| Sito con molte sezioni e sottosezioni | Menu principale con mega menu al clic, breadcrumb |
| Sito mobile con molti contenuti secondari | Menu hamburger con etichetta, azioni chiave fuori |
| Documentazione o guida lunga | Indice laterale e navigazione locale |
Qualunque sia lo schema, alcune regole valgono sempre: indicare la posizione corrente, usare etichette comprensibili, mantenere la navigazione nella stessa posizione in tutte le pagine e verificarla con utenti reali, magari con un tree testing prima ancora di disegnarla.
In sintesi
- Il menu hamburger libera spazio ma nasconde: va bene per contenuti secondari, meno per quelli principali.
- La barra a schede è ideale su mobile per poche sezioni di uso frequente.
- Su desktop un menu orizzontale visibile resta lo schema più chiaro.
- Breadcrumb e navigazione locale aiutano a orientarsi nei siti profondi.
- Ogni schema va scelto in base a quantità di contenuti, dispositivo e verifiche con gli utenti.
