Menu Mobile: Hamburger, Tab Bar e Pattern UX

Su mobile, il menu non è un dettaglio: è il volante. Lo schermo è piccolo, il pollice fa quasi tutto e l’utente decide in un istante se la tua app o il tuo sito sono “facili” o “faticosi”. Scegliere il pattern di navigazione giusto significa decidere quanto velocemente le persone trovano ciò che cercano — e quindi convertono. In questa guida da addetti ai lavori mettiamo in fila gli 8 pattern di menu mobile più usati, con pro, contro e criteri per scegliere. Wireframe inclusi.

Prima regola: la zona del pollice

Su uno smartphone tenuto con una mano, esiste una fascia comoda — la parte bassa dello schermo — e una scomoda, in alto. È la thumb zone. Tutta la teoria della navigazione mobile ruota intorno a questo: gli elementi che si toccano spesso vanno dove il pollice arriva senza sforzo. Ed è il motivo per cui, negli ultimi anni, la barra in basso ha vinto su tanti menu in alto.

«Su mobile non progetti un menu: progetti la strada più corta tra il dito dell’utente e ciò che sta cercando. Ogni tocco in più è un cliente in meno.»

Il catalogo: 8 pattern di menu mobile

Ecco i modelli che ricorrono in quasi ogni app e sito mobile. Nessuno è “il migliore” in assoluto: ognuno risolve un problema diverso.

I quattro grandi: pro e contro

1. Hamburger / Drawer laterale

L’icona a tre righe (☰) che apre un cassetto laterale. È il pattern più famoso… e il più discusso.

• Pro: nasconde una navigazione lunga, libera spazio, ordine visivo. Perfetto per voci secondarie (impostazioni, profilo, pagine “istituzionali”).
• Contro: “occhio non vede, dito non tocca”. Ciò che è nel cassetto viene usato molto meno: scoperta ed engagement calano. Da evitare per le destinazioni principali.

2. Bottom Tab Bar (barra in basso)

Da 3 a 5 voci sempre visibili in fondo allo schermo. Lo standard di Instagram, YouTube e compagnia.

• Pro: in piena thumb zone, sempre visibile, mostra dove sei. Massima scopribilità per le sezioni che contano.
• Contro: regge poche voci (oltre 5 diventa caos). Non adatta a strutture profonde o a tantissime categorie.

3. Griglia / Launchpad

Una griglia di icone, stile cruscotto. Tipica di home bancarie, gestionali, portali con tante funzioni di pari livello.

• Pro: mostra molte opzioni a colpo d’occhio, ognuna con icona ed etichetta. Ottimo come “hub” di partenza.
• Contro: è una destinazione, non una navigazione costante: per saltare tra sezioni devi tornare alla griglia. Le icone senza etichetta confondono.

4. Sidebar / Rail persistente

Una barra laterale sempre presente (spesso solo icone, la “rail”). Brilla su schermi larghi e tablet, meno su telefoni stretti.

• Pro: navigazione sempre a vista senza coprire i contenuti, scala bene verso il desktop.
• Contro: su mobile mangia larghezza preziosa; va compattata a icone con cura per l’accessibilità.

Le varianti utili

Overlay a schermo intero: il menu copre tutta la pagina, voci grandi e ariose. Immersivo e molto leggibile, perfetto per siti editoriali o portfolio; ti “stacca” però dal contenuto. Tab in alto: ottime per spostarsi tra viste correlate (es. “Per te / Seguiti”), meno comode per la navigazione primaria perché lontane dal pollice. Lista verticale: il classico delle impostazioni e dei profili — righe con icona, etichetta e freccia. Search-first: la ricerca in cima quando il catalogo è enorme (e-commerce, marketplace), con scorciatoie sotto.

Hamburger: sì o no?

La domanda che divide. La risposta onesta è: dipende da cosa ci metti dentro. Se nascondi le tue sezioni più importanti dietro l’hamburger, ne paghi il prezzo in click e conversioni. Se lo usi per ciò che è davvero secondario, è uno strumento eccellente. La regola pratica: le 3-5 destinazioni più importanti vanno in una tab bar visibile; tutto il resto può stare nel cassetto.

Come scegliere il pattern giusto

Non si sceglie a gusto, ma in base alla tua struttura. Tre domande:

• Quante sezioni primarie hai? Fino a 5 e di pari peso, tab bar. Tante e gerarchiche, hamburger o griglia come hub.
• Quanto sono usate? Le funzioni ad alta frequenza vanno sempre a vista, in thumb zone; quelle rare possono nascondersi.
• Che prodotto è? App di consumo → tab bar. Gestionale ricco → griglia o rail. Sito editoriale/brand → overlay a schermo intero. Catalogo enorme → search-first.

Best practice UX (qualunque pattern)

• Aree tap generose: almeno 44-48px per ogni elemento toccabile, con spazio attorno.
• Icone con etichetta: l’icona da sola è ambigua. Una parolina sotto raddoppia la chiarezza.
• Stato attivo evidente: l’utente deve sempre sapere “dove sono”.
• Massimo 5 voci nella tab bar: oltre, accorpa o sposta nel “Altro”.
• Accessibilità: contrasto adeguato, etichette per i lettori di schermo, focus visibile. Non è un optional.
• Coerenza: un solo sistema di navigazione principale, non tre mescolati.

Gli errori UX più comuni (e come costano clienti)

La maggior parte dei menu mobili che non funzionano non è “brutta”: è piena di piccoli attriti che, sommati, fanno scappare le persone. Ecco quelli che vediamo più spesso quando ci arriva un sito da rimettere in piedi.

• Tutto dentro l’hamburger. Il classico: la home ha un menu ☰ pulitissimo… che nasconde anche “Contatti”, “Preventivo” e “Chiama ora”. Se la voce che porta soldi è a due tocchi di distanza, hai già perso metà delle persone frettolose.
• Target troppo piccoli e appiccicati. Voci alte 30px, incollate una all’altra: il pollice sbaglia bersaglio, l’utente tocca due volte, si innervosisce. Su mobile lo spazio vuoto non è spreco, è precisione.
• Icone senza etichetta. Un’icona “a cuore” è preferiti, salvati o mi piace? Se l’utente deve indovinare, l’hai già rallentato. L’etichetta sotto l’icona non è ridondanza: è chiarezza.
• Nessuno stato attivo. Se dopo aver toccato una voce non cambia nulla nell’aspetto del menu, la persona non sa dove si trova e perde il filo della navigazione.
• Menu che copre il pulsante di chiusura. Overlay a tutto schermo senza una “X” grande e ben visibile in alto: l’utente si sente in trappola e chiude… la scheda del browser.
• Tre sistemi di navigazione insieme. Hamburger in alto, tab bar in basso e una griglia in mezzo, tutti con voci diverse. Il risultato è che l’utente non capisce quale sia “il” menu.

Nessuno di questi errori è drammatico da solo. Il problema è l’effetto cumulativo: ogni micro-esitazione è una piccola fuga di attenzione, e su mobile l’attenzione è la valuta più scarsa che hai.

Quanto pesa il menu sulle conversioni

Facciamo un esempio concreto. Immagina un sito di servizi locali — poniamo, un’officina o uno studio professionale a Imola — con 1.000 visite al mese da smartphone. La voce che porta valore è “Prenota” o “Contatti”.

• Scenario A — “Contatti” nell’hamburger: per chiamarti l’utente deve toccare l’icona ☰, leggere l’elenco, trovare la voce giusta e toccarla. Tre passaggi, ognuno con una quota di abbandono. In pratica, tanti visitatori non ci arrivano nemmeno.
• Scenario B — “Contatti” nella tab bar in basso: la voce è sempre a vista, in zona pollice, a un solo tocco. Il percorso è corto, l’azione è ovvia, e chi è interessato converte molto più spesso.

Non serve un test di laboratorio per capire quale dei due porta più telefonate: è la differenza tra “far cercare” e “far trovare”. Ecco perché il posizionamento delle voci non è un dettaglio estetico ma una leva di fatturato. Quando ridisegniamo la navigazione di un sito, la prima domanda non è “com’è bello”, ma “qual è l’azione che vale, e quanto è vicina al pollice?”.

Accessibilità: il menu che funziona per tutti

Un menu mobile accessibile non serve solo a chi ha una disabilità: è più usabile per tutti, in ogni condizione — sotto il sole, con una mano occupata, di corsa. E in Italia l’accessibilità digitale sta diventando anche un requisito normativo per un numero crescente di siti. Vale la pena farla bene fin dall’inizio.

• Contrasto sufficiente: testo ed etichette devono staccarsi dallo sfondo (rapporto minimo consigliato 4,5:1 per il testo normale). Grigio chiaro su bianco è elegante ma illeggibile fuori casa.
• Etichette per i lettori di schermo: ogni pulsante-icona ha bisogno di un testo alternativo che ne dica la funzione. Un’icona “hamburger” senza etichetta, per chi usa uno screen reader, è un pulsante muto.
• Focus visibile: chi naviga da tastiera o con tecnologie assistive deve vedere chiaramente su quale voce si trova.
• Aree tap generose: i 44-48px minimi non sono un capriccio, sono la soglia sotto la quale toccare diventa una lotteria — soprattutto per chi ha meno precisione nel movimento.
• Ordine logico: le voci devono seguire una sequenza sensata anche quando lette una dopo l’altra, non solo quando viste a colpo d’occhio.

La buona notizia: quasi tutto ciò che rende un menu accessibile lo rende anche più chiaro e più rapido per l’utente medio. Accessibilità e conversioni, qui, tirano dalla stessa parte.

Una checklist pratica prima di pubblicare

Prima di mandare online la navigazione mobile del tuo sito, passa in rassegna questi punti. Se rispondi “sì” a tutti, sei a cavallo.

• Le mie 3-5 sezioni più importanti sono visibili senza aprire nessun menu?
• L’azione che porta clienti (chiamare, prenotare, scrivere) è a un solo tocco, in zona pollice?
• Ogni voce ha un’area toccabile di almeno 44px e spazio attorno?
• Le icone hanno un’etichetta di testo?
• Si capisce sempre “dove sono” grazie a uno stato attivo evidente?
• Il menu si chiude in modo ovvio, con una “X” grande e raggiungibile?
• C’è un solo sistema di navigazione principale, non tre mescolati?
• Ho provato tutto con una mano sola, come fa davvero la maggior parte delle persone?

Come portare la navigazione mobile del tuo sito al livello giusto

Ricapitoliamo il metodo, così puoi metterlo in pratica subito: individua le 3-5 destinazioni che valgono davvero e mettile a vista, in zona pollice; sposta nel cassetto solo ciò che è secondario; cura target, etichette, stato attivo e accessibilità; e usa un solo sistema di navigazione coerente. Non è questione di mode, ma di pollici, gerarchie e abitudini reali delle persone. (Curiosità: lo stesso principio — guidare la scelta riducendo il rumore — vale anche fuori dal digitale, come ti raccontiamo nella guida al menu engineering per i ristoranti.)

Noi progettiamo siti e curiamo i servizi di design e sviluppo con un approccio mobile-first, dove la navigazione è pensata prima di tutto per il telefono. Se vuoi un sito veloce, chiaro e fatto per convertire da mobile, scrivici: guardiamo insieme la tua navigazione e ti diciamo, alla mano, cosa cambieremmo. E zò.

Domande frequenti

Qual è il miglior menu di navigazione per mobile?

Non esiste un vincitore assoluto. Per le 3-5 sezioni principali la bottom tab bar è la più efficace perché sempre visibile e in zona pollice; per le voci secondarie va benissimo l’hamburger menu. La scelta dipende da quante sezioni hai e da quanto vengono usate.

L’hamburger menu è ancora valido nel 2026?

Sì, ma per ciò che è secondario. Nasconde la navigazione, quindi riduce scoperta ed engagement: tieni fuori dal cassetto le destinazioni più importanti e usalo per profilo, impostazioni e pagine di servizio.

Perché tanti menu mobili stanno in basso?

Per la “thumb zone”: la parte bassa dello schermo è quella che il pollice raggiunge senza sforzo con una mano sola. Mettere lì la navigazione la rende più comoda e più usata.

Quante voci può avere una tab bar?

Idealmente da 3 a 5. Oltre, gli elementi diventano piccoli e poco toccabili: meglio accorpare le voci o spostarle in una sezione “Altro”.