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:
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:
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.