Il menu hamburger — le tre linee sovrapposte nell’angolo dello schermo — risale agli albori del web mobile. All’epoca gli schermi erano piccoli, le connessioni lente e le opzioni di design poche. Nascondere tutto dietro una piccola icona era un modo ragionevole di risparmiare spazio. Non era sbagliato. Ma usarlo per ogni situazione è dove le cose si guastano.
Se gestisci un negozio con più di dieci categorie, la navigazione mobile è spesso una silenziosa fonte di mancati ricavi che in pochi notano. I clienti arrivano da telefono, vogliono curiosare, ma il percorso verso le tue categorie sta dietro a un’icona che devono toccare per aprire. Questo articolo esamina perché il menu hamburger perde colpi nell’ecommerce mobile, e quali alternative più pratiche esistano: la Tab Bar, la zona del pollice e come combinare diversi tipi di menu per adattarli al modo in cui le persone tengono davvero il telefono.
- Il menu hamburger nasconde i percorsi più importanti.
- La thumb zone spinge la navigazione chiave verso il basso.
- Tab Bar più Slide Menu è spesso la configurazione mobile più pratica.
Il vero problema del menu hamburger nell’ecommerce mobile
Il problema più grande non è che il menu hamburger sia brutto da vedere — è che nasconde la tua navigazione. I clienti devono toccarlo prima di sapere cosa c’è dentro. Sembra un gesto da poco, ma moltiplicato per migliaia di visite crea un divario reale tra “vedere le tue categorie” e “non vederle”.
Il Nielsen Norman Group l’ha misurato. In uno studio su 179 utenti distribuiti su sei siti web, ha rilevato che nascondere la navigazione principale dimezzava quasi la probabilità che le persone la notassero e la usassero, allungando inoltre i tempi di completamento delle attività e aumentando la percezione di difficoltà dell’esperienza. Il risultato valeva sia su telefono sia su desktop.
Un altro dettaglio da considerare: l’icona a tre linee è familiare alla maggior parte delle persone oggi, ma secondo NN/g non è comunque ovvia per tutti, soprattutto per gli utenti meno esperti di tecnologia. Se i tuoi clienti non sono tutti giovani, vale la pena tenerlo a mente.
Nell’ecommerce, il costo di un passaggio in più è più alto di quanto si pensi. Il tasso medio di abbandono del carrello si aggira intorno al 70% — il Baymard Institute lo colloca al 70,22% sulla base di 50 studi. Gran parte di questo avviene al checkout, ma anche il percorso che porta fino lì gioca la sua parte. Ogni piccolo ostacolo lungo la strada fa perdere qualche cliente in più. Un menu nascosto è uno degli ostacoli più facili da rimuovere.
Questo non significa che l’hamburger sia sempre una cattiva scelta. Per un semplice blog o una landing page con pochi link, va ancora benissimo. Il problema è che un negozio ecommerce è raramente così semplice.
ApprofondimentoLeggi la guida completa → Il vero problema del menu hamburger nell'ecommerce mobile
Zona del pollice — capire come le persone tengono il telefono
Per sapere dove mettere il menu, bisogna prima capire come le persone tengono il telefono. Il concetto di zona del pollice viene dall’esperto di interfacce Steven Hoober, che l’ha proposto dopo aver osservato più di 1.300 interazioni in contesti reali.
La scoperta di fondo è semplice: la maggior parte delle azioni su un telefono si compie con il pollice. Hoober ha registrato che circa la metà delle persone teneva il telefono con una mano sola e lasciava al pollice tutto il compito di toccare. E il pollice ha limiti fisici — raggiunge alcuni punti con facilità, deve allungarsi per altri e a fatica ne raggiunge alcuni senza cambiare presa.
Di solito le persone dividono lo schermo in tre zone:
- Facile da raggiungere: la parte bassa e il centro dello schermo, dove il pollice riposa naturalmente. È qui che vanno collocate le azioni importanti.
- Da raggiungere con uno sforzo: i lati verso il centro dello schermo, raggiungibili ma con un po’ di fatica.
- Difficile da raggiungere: gli angoli in alto, che di solito richiedono di cambiare mano o di usare due mani.
Ora guarda di nuovo il menu hamburger: sta proprio nell’angolo in alto — il punto più difficile da raggiungere. Significa che l’elemento di navigazione più importante in assoluto è posizionato dove il pollice fa più fatica ad arrivare. Più grande è lo schermo del telefono, più quella distanza diventa evidente.
È questa la ragione di fondo per spostare il menu in basso. Non perché il basso sia “più bello”, ma perché il basso rientra nella portata naturale del pollice. Una volta capito questo punto, le scelte di design che ne derivano sono molto più facili da spiegare.
ApprofondimentoLeggi la guida completa → Zona del pollice — capire come le persone tengono il telefono
Tab Bar — l’alternativa principale
Una Tab Bar è una barra di navigazione fissa nella parte bassa dello schermo, con alcune icone sempre visibili. Se usi un’app bancaria, un’app per chiamare un taxi o un social network, la conosci già. Home, ricerca, carrello, account — ciascuno ha il suo spazio, sempre visibile, sempre a portata di pollice.
La forza della Tab Bar si riduce a due idee: è già visibile ed è a portata. I clienti non devono toccarla per aprirla per sapere cosa c’è. I percorsi principali sono disposti proprio davanti a loro. E poiché sta in basso, finisce esattamente nella parte facile da raggiungere della zona del pollice.
Una regola pratica da ricordare: la Tab Bar funziona meglio con 3-5 elementi. Lo raccomandano sia il Material Design di Google sia le Human Interface Guidelines di Apple. Oltre i cinque elementi, le aree di tocco stanno troppo vicine e il pollice colpisce facilmente quella sbagliata. Quattro elementi sono spesso il punto di equilibrio più comodo per la maggior parte dei negozi.
Un rapido confronto tra i due approcci:
| Menu hamburger | Tab Bar | |
|---|---|---|
| Visibilità | Nascosto fino al tocco | Sempre visibile |
| Posizione sullo schermo | Angolo in alto (difficile da raggiungere) | Basso (facile da raggiungere) |
| Numero di opzioni adatte | Molte, in elenco | 3-5 percorsi principali |
| Più adatto per | Elementi secondari, usati di rado | I percorsi più importanti |
Una cosa a cui fare attenzione quando si passa a una Tab Bar: non lasciare che rallenti la pagina o sposti il layout. Google fissa soglie piuttosto chiare per i Core Web Vitals — LCP sotto i 2,5 secondi, INP sotto i 200 millisecondi, CLS sotto 0,1. Una barra fissa in basso, se aggiunta con poca cura, può causare spostamenti del layout (incidendo sul CLS) o appesantire la pagina. Quindi, nello scegliere uno strumento, prediligi quello che si preoccupa della velocità di caricamento.
È anche qui che Navi+ dà una mano: costruisce una Tab Bar con il drag-and-drop, senza codice, configurabile separatamente per il mobile, e progettata in modo da non far calare i tuoi punteggi Core Web Vitals.
ApprofondimentoLeggi la guida completa → Tab Bar — l'alternativa principale
Combinare Tab Bar + Slide Menu
A questo punto potresti chiederti: se una Tab Bar contiene solo 3-5 elementi, dove finiscono le decine di altre categorie? È un fraintendimento comune. La Tab Bar non sostituisce l’intera navigazione — gestisce soltanto i percorsi più importanti.
L’approccio pratico è combinare diversi tipi di menu, ciascuno con un suo compito:
- La Tab Bar contiene i 3-5 percorsi chiave: home, categorie, ricerca, carrello, account.
- Lo Slide Menu (l’hamburger espanso, in sostanza) contiene il resto — l’elenco completo delle categorie, le pagine delle policy, i contatti. Questi elementi contano, ma non servono ogni volta.
- Il FAB (floating action button) è per un’unica azione in primo piano, se il tuo negozio ne ha bisogno, come la chat di supporto o un’aggiunta rapida al carrello.
Vista così, l’hamburger non viene cancellato — gli viene dato il ruolo giusto. Il suo compito è contenere le informazioni secondarie, non reggere l’intera navigazione. I percorsi principali scendono nella Tab Bar, dove il pollice li raggiunge facilmente e l’occhio li vede subito.
La parte complicata di questa combinazione è dover configurare mobile e desktop separatamente. Su desktop, un Mega Menu distribuito su più colonne ha ancora senso, perché il cursore del mouse non ha una “zona difficile da raggiungere”. Ma su mobile, quello stesso menu diventa opprimente. Due ambienti, due logiche diverse.
Navi+ può realizzare tutti questi tipi di menu in un unico posto — Tab Bar, Slide Menu, Mega Menu, FAB, Grid Menu — e ti permette di configurare mobile e desktop separatamente. I menu restano inoltre al loro posto quando cambi tema, così non devi ricostruire tutto da zero ogni volta che cambi interfaccia.
ApprofondimentoLeggi la guida completa → Combinare Tab Bar + Slide Menu (e il ruolo del FAB)
Da dove cominciare
Se devi scegliere una sola cosa da fare per prima, apri il tuo negozio sul tuo telefono e prova a portare a termine un acquisto con una mano sola. Tieni il telefono normalmente, non cambiare mano. Nota quanto deve allungarsi il pollice per entrare in una categoria.
Alcune domande per metterti alla prova:
- Il percorso più importante è già visibile, oppure devi toccare per aprirlo prima di poterlo vedere?
- Quanti tocchi servono a un cliente per raggiungere la categoria che vuole?
- I pulsanti più usati sono a comoda portata del pollice?
- Il menu rallenta la pagina o ne sposta il layout mentre si carica?
Test a una manoApri lo store sul telefono e simula un acquisto senza cambiare mano.
Non devi rifare tutto in una volta. Di solito, basta spostare in basso i 3-5 percorsi principali in una Tab Bar e raccogliere il resto in uno Slide Menu per sentire la differenza. È il tipo di cambiamento che richiede poco sforzo ma tocca direttamente l’esperienza quotidiana dei tuoi clienti mobile.
Il menu hamburger non è il nemico. Ha ancora un posto per gli elementi secondari, usati di rado. Ma in un negozio mobile-first come quelli di oggi, lasciargli reggere l’intera navigazione non è più la scelta predefinita migliore. Spostare i percorsi importanti dall’hamburger a una Tab Bar è uno dei miglioramenti più economici e più utili che puoi apportare al tuo negozio.
Esplora gli argomenti
Questa guida rimanda ad articoli mirati — approfondisci ogni tema.