Il menu di un sito web sembra un elemento semplice, da fare in un attimo prima di scrivere i contenuti: una voce per ogni pagina, magari un sottomenu – così ci si orienta meglio –, un chi siamo e una sezione contatti. In realtà, il menu del sito non è per niente scontato, anzi, è uno di quegli elementi che aiutano una persona a capire immediatamente dove trovare le informazioni che cerca (evitando esitazioni e inutili passaggi avanti e indietro tra le pagine). Un buon menu non deve stupire: deve orientare. Spesso chi arriva su una pagina non passa nemmeno dalla home; ecco perché la navigazione deve aiutare a capire dove ci si trova, quali sezioni esistono e quale percorso conviene seguire.

Indice dei contenuti

• Partire dall’architettura e non dalla grafica
• Scegliere voci del menu che si capiscano al primo sguardo
• Menu sito web orizzontale, dropdown, mega menu o hamburger?
• Progettare il menu per mobile, accessibilità e uso reale
• Un menu chiaro nasce da un progetto chiaro
• Domande frequenti

Partire dall’architettura e non dalla grafica

Prima di scegliere colori, font o animazioni, serve mettere ordine nei contenuti. Il menu è infatti la parte visibile di un’architettura dell’informazione più ampia: traduce la struttura del sito in poche scelte comprensibili. Per questo la progettazione dovrebbe iniziare dalle domande degli utenti e dagli obiettivi del sito, non dall’elenco delle pagine che l’azienda vorrebbe mostrare.

Metodi di ricerca come card sorting e tree testing nascono proprio per capire come le persone organizzano mentalmente le informazioni e quanto facilmente riescono a ritrovarle.

Un metodo pratico è partire da tre passaggi:

• individuare le attività più importanti che le persone devono riuscire a compiere;
• raggruppare pagine e contenuti secondo una logica riconoscibile per il pubblico;
• stabilire quali sezioni meritano il primo livello e quali possono diventare sottopagine.

Qui è utile evitare due automatismi: il primo è inserire nel menu ogni pagina esistente (più scelte non significano necessariamente più facilità), il secondo è inseguire la famosa “regola dei tre clic” (secondo cui un utente dovrebbe riuscire a trovare qualsiasi informazione all’interno di un sito web con al massimo tre clic a partire dalla homepage).

Questo perché la ricerca UX non ha trovato prove di una soglia universale oltre la quale gli utenti abbandonano; conta di più che ogni passaggio sia chiaro e faccia capire di essere sulla strada giusta. Un’architettura troppo larga, creata soltanto per ridurre il numero di clic, può anzi costringere le persone a esaminare troppe alternative contemporaneamente. Da questa struttura nasce quindi il vero lavoro di sintesi: dare un nome alle destinazioni.

Scegliere voci del menu che si capiscano al primo sguardo

Una voce di menu funziona quando anticipa con precisione ciò che troverai dopo il clic. Nel linguaggio dello user experience design si parla di information scent: le persone valutano un link attraverso gli indizi che offre e tendono a scegliere quello che appare più vicino al loro obiettivo. Per questo, etichette descrittive e familiari sono più utili di formule vaghe, slogan o parole comprensibili soltanto a chi lavora dentro l’azienda.

Immagina, per esempio, il sito di un’azienda B2B. Una voce come “Le nostre competenze” può funzionare se conduce davvero a una panoramica comprensibile dei servizi; una formula come “Scopri il nostro mondo” dice molto meno su ciò che accadrà dopo il clic (sì, vale la stessa cosa per le CTA). Le indicazioni UX più recenti raccomandano infatti termini specifici, familiari e facilmente distinguibili, evitando gergo interno e formule troppo astratte.

Meglio quindi usare parole riconoscibili e coerenti in tutto il sito. Anche la brevità aiuta, ma non deve diventare un’ossessione: una voce di due parole molto chiara è preferibile a una parola sola ambigua.

La scelta delle etichette ha inoltre un riflesso tecnico. Google raccomanda collegamenti realmente scansionabili e anchor text descrittivi, perché aiutano sia le persone sia il motore di ricerca a comprendere la destinazione dei link. Questo non significa che sia sufficiente “ottimizzare il menu” per posizionarsi, ma che una struttura di collegamenti comprensibile favorisce anche la scoperta e la contestualizzazione delle pagine.

È importante ricordarsi, inoltre, che non esiste neppure un numero perfetto di voci valido per ogni sito. Un sito istituzionale con poche pagine e un e-commerce con migliaia di prodotti hanno esigenze diverse, quindi certe regole rigide rischiano di diventare fuorvianti. La priorità è mantenere il primo livello leggibile, raggruppare le opzioni correlate e non costringere l’utente a confrontare troppe alternative tutte insieme.

Menu sito web orizzontale, dropdown, mega menu o hamburger?

Quando i contenuti aumentano, la scelta del tipo di menu diventa ancora più importante. Nel web design, infatti, la forma del menu dovrebbe seguire la complessità dei contenuti e considerare la tipologia principale di dispositivo su cui il sito web verrà consultato. Sui siti aziendali con poche sezioni, una navigazione orizzontale visibile nell’header sfrutta un modello che gli utenti già si aspettano di trovare.

Nei progetti più articolati possono servire sottomenu o, quando livelli e categorie diventano numerosi, dei mega menu capaci di mostrare più gruppi di opzioni contemporaneamente e rendere più leggibile la gerarchia. In sostanza:

• menu orizzontale: adatto a strutture semplici e poche categorie principali;
• dropdown o mega menu: utili per organizzare categorie e sottocategorie, evitando però catene di livelli difficili da gestire;
• menu hamburger: sensato soprattutto sugli schermi piccoli, dove lo spazio è limitato.

Su mobile, l’icona hamburger è oggi molto più riconoscibile rispetto a dieci anni fa, ma nascondere la navigazione aggiunge comunque un passaggio prima di poter vedere le opzioni. Per questo motivo Nielsen Norman Group (importante società americana di ricerca e progettazione UX) continua a consigliare di non nascondere il menu quando lo spazio consente di mostrarlo; su desktop, in particolare, una navigazione ben visibile offre anche una panoramica immediata di ciò che il sito mette a disposizione. Se poi il progetto ha sezioni profonde, breadcrumb e navigazioni locali possono aiutare a capire in quale area ci si trova e a raggiungere contenuti vicini.

Progettare il menu per mobile, accessibilità e uso reale

Un menu efficace deve funzionare con tutto: mouse, touchscreen e tastiera. Le indicazioni del W3C raccomandano una struttura semanticamente riconoscibile, la piena operabilità da tastiera e indicatori di focus visibili per capire quale elemento è attivo. WCAG 2.2 stabilisce inoltre, per il criterio AA relativo alla dimensione dei target, una soglia di almeno 24 × 24 CSS pixel, pur prevedendo alcune eccezioni legate alla spaziatura e al contesto. Forse sono dettagli eccessivamente tecnici, ma producono risultati molto concreti e ci fanno capire una cosa importante: è fondamentale rendere i comandi più facili da individuare e attivare anche per persone con differenti modalità di interazione.

Anche la coerenza è fondamentale. Il W3C raccomanda infatti che la struttura rimanga coerente tra diverse dimensioni dello schermo: alcune voci possono essere raccolte in sottomenu, ma ordine, formulazione e destinazione degli elementi mostrati dovrebbero restare consistenti. È utile anche indicare chiaramente la pagina corrente e fare in modo che eventuali contenuti aperti con hover o focus non spariscano in modo imprevedibile.

Un menu chiaro nasce da un progetto chiaro

Hai la sensazione che il tuo sito costringa le persone a cercare troppo? In Ikonos uniamo user experience design, web design e sviluppo siti web per costruire percorsi di navigazione semplici, coerenti con i tuoi contenuti e gli obiettivi del tuo business. Siamo una web agency di Bergamo e, grazie alla nostra esperienza, progettiamo ogni interazione pensando davvero a chi userà il sito.

Affidati alla nostra esperienza e progettiamo insieme anche il menu del tuo sito web.

Domande frequenti