Hamburger Menu: to use it or not to use it?

È uno degli elementi più utilizzati nel design dei siti web mobile, dove lo spazio limitato degli schermi costringe i designer a snellire l’interfaccia riposizionando una parte delle funzioni e dei contenuti. Parliamo dell’hamburger menu, che a detta degli esperti di usabilità può rivelarsi indigesto per molti utenti.

Il motivo principale è evidente ed è costituito dalla stessa ragione per cui viene utilizzato: serve a incorporare le voci del menu liberando spazio sulla pagina, ma spesso può spiazzare l’utente. Malgrado ciò, l’utilizzo dell’hamburger menu presenta alcuni vantaggi e resta molto diffuso. Quali sono allora i problemi di usabilità da tenere in mente quando si sceglie di adottarlo? Esaminiamoli in breve.

L’hamburger menu relega le voci dell’architettura di navigazione all’interno di un “cassetto a scomparsa”, il navigation drawer: le funzionalità offerte dal sito o dalla app vengono a prima vista nascoste. Per giungere a destinazione si è quindi costretti a un passaggio in più rispetto alla instant navigation offerta dalla tab bar, con un evidente effetto negativo sulla fluidità dell’esperienza utente. Il fatto che la struttura del menu non sia immediatamente visibile può creare spaesamento nell’utente.

Un A/B test realizzato mettendo a confronto le versioni dello stesso sito web che in due differenti momenti ha adottato una tab bar e un hamburger menu ha mostrato un decremento nel tasso di utilizzo del menu. Questo comportamento è probabilmente riconducibile al fatto che le persone sono portate a ignorare le opzioni non immediatamente visibili, soprattutto quando si naviga nell’interfaccia senza un obiettivo preciso ma cercando di esplorare e di conoscere i contenuti e le funzioni disponibili.

Uno degli aspetti più problematici dell’hamburger menu è legato all’icona che lo rappresenta. Non si può dire che l’immagine delle tre linee orizzontali, seppur sia già diventata standard, sia universalmente riconosciuta dagli utenti, anche a causa del suo utilizzo scorretto in alcuni contesti di interazione. Per molte persone, come sottolineano diversi esperti di usabilità, l’icona a forma di hamburger non è immediatamente riconoscibile e rappresenta un ostacolo per l’accesso alle funzioni del menu.

Questo problema è dimostrato da alcuni split test compiuti confrontando l’efficacia di diverse versioni dell’icona dell’hamburger menu. Tali test hanno evidenziato che l’icona accompagnata dall’etichetta “menu” garantisce un tasso d’interazione maggiore rispetto alla semplice icona con le tre linee orizzontali. Un’ulteriore strategia di rafforzamento della riconoscibilità dell’hamburger menu è quella adottata dal Time e da altri siti web, che utilizzano il testo alternativo per le immagini o un piccolo pop-up per spiegare all’utente cosa rappresenti quell’icona così poco esplicativa.

Il menu contenuto nel navigation drawer presenta problemi di usabilità legati al suo stesso funzionamento: quando viene selezionato si espande e va ad occupare lo spazio della pagina destinato al flusso principale dei contenuti. Nella struttura di molte app e siti web questo meccanismo crea seri problemi, perché – oltre ad interrompere la fluidità di una navigazione che in genere si svolge principalmente in verticale attraverso lo scrolling – toglie dalla vista dell’utente molte funzionalità fondamentali nonché il flusso dei contenuti. Questo meccanismo può creare intoppi al percorso di navigazione e ricerca. Lo stesso si può dire per quelle interfacce che integrano sia una tab bar con le opzioni di scelta più importanti sia l’hamburger menu, dove in genere vengono relegate le funzioni secondarie e l’elenco delle sezioni.

Oltre a costituire un pattern di UX design ormai consolidato, l’“hamburger” ha una sua indubbia utilità. Il motivo è evidente: in app che abbondano di funzioni e sezioni consente di semplificare la UI e offre un layout più chiaro dell’interfaccia e del menu di navigazione. Un altro vantaggio si presenta nelle app e nei siti dotate di un news feed o di un flusso dei contenuti molto corposo. L’utente, infatti, potrebbe dover scrollare la pagina a lungo prima di raggiungere l’argomento a cui è interessato. Il menu laterale offre invece una scorciatoia per raggiungere la sezione desiderata senza fatica e in poco tempo.

Malgrado il giudizio di molti esperti, l’hamburger menu resta un pattern consolidato nel responsive design. Il consiglio, allora, è quello di limitarne gli impatti negativi dovuti alle criticità di cui abbiamo parlato. Innanzitutto si può migliorare la riconoscibilità dell’icona che lo identifica accompagnandola con l’etichetta “menu”. In secondo luogo è consigliabile realizzare un navigation drawer che non occupi completamente la schermata del dispositivo e che mantenga visibile una parte della pagina principale della app o del sito web. Questi piccoli accorgimenti possono consentire una maggiore efficacia dell’hamburger menu e migliorare la user experience generale.