L’hamburger button è l’icona più importante presente all’interno delle interfacce utente.

Generalmente lo troviamo collocato in alto a destra ed è composto da tre linee: pane, hamburger-formaggio (soia-tofu per i vegani) e di nuovo pane. Ecco servito l’hamburger menu.

A parte gli scherzi, non è quello che pensi… ma questo:

hamburger icon web site

Ma che cos’è?

L’hamburger button è composto da tre linee orizzontali e si posiziona generalmente in alto a destra. È una sorta di contenitore che ha lo scopo di raggruppare tutte le funzioni extra del sito o di un’app, che andrebbero a creare disordine nella la UI (user interface) della homepage o di una schermata principale.

Secondo gli UX-designer non dovremmo trovarci dentro il cacciavite o le chiavi della nostra macchina, bensì il MENU. La parte fondamentale per la navigazione di un sito o di un’app.

Molti di questi ritengono che quest’icona abbia raggiunto uno status universale e che gli utenti riescano a capire cosa rappresenta senza altre indicazioni aggiuntive.

Ma fermiamoci un secondo ad analizzarla come se non fossimo un utente esperto e immaginiamo di guardarla per la prima volta. Identificarne il significato e capire cosa rappresenta in realtà è abbastanza complesso.

Già il fatto che si chiami “hamburger” button non rappresenta visivamente un menu di navigazione nascosta.

Pensate:

l’icona di ricerca si rappresenta come una lente di ingrandimento, la “Home” è una casa, più chiaro di così..! Queste icone visivamente sono molto, intuitive, e l’azione che si va a svolgere cliccandole o tappandole, è molto chiara. Infatti, trovare un’alternativa a queste è un compito molto complesso, se non usando parole come CERCA o HOME.

Nel caso del nostro hamburger se l’utente non sa cosa rappresenta,  lo stiamo lasciando al caso: deve cliccare per scoprirne il contenuto.

A differenza delle icone sopracitate, gli UX-designer si sono abbastanza sbizzarriti per rappresentare il menu: la griglia di quadratini, la freccia in giù, tre puntini verticali, il più e quant’altro…

Google addirittura cambia l’usability da display a mobile:

visualizzazione hamburger menù

Perché? Semplice: su mobile la visualizzazione dei contenuti è ad elenco, mentre sul desktop il menu è una griglia.
Semanticamente questa azione è corretta, ma vogliamo davvero che l’utente impari diverse icone a seconda di come verrà visualizzato il menu NASCOSTO? È un controsenso.

Concludendo:

riteniamo che l’icona NON abbia raggiunto uno status universale di comprensione, come noi progettisti pensiamo.
Possiamo comunque agevolare gli utenti nella comprensione…ma in che modo?

  • aggiungendo un’etichetta all’icona con scritto MENU
  • dando all’icona un aspetto di pulsante
  • utilizzando solo la parola menu con aspetto di un pulsante
  • dando un’area sufficiente in modo che non si perda tra gli altri elementi dell’header.

Exis Web ha recentemente condotto due studi per mettere alla prova l’icona più performanti e analizzando i tassi di conversione delle due diverse icone.

And the winner is…

Hamburger icon + menu + effetto pulsante, oppure parola menu + effetto pulsante.

Insomma, la parola menu chiarisce il contenuto e l’utente sa cosa sta andando a cliccare. Esteticamente sarà meno bella, ma l’estetica, soprattutto su mobile, va messa in secondo piano rispetto all’usabilità.

Ora ho fame.

hamburger e patatine