Un menu Hamburger Button, per favore

Nella storia dell’interfaccia utente esiste un pulsante che più di altri oggi ricopre un ruolo importante, che altri pulsanti non possono permettersi e un potere che gli altri, costretti a convivere nella stessa interfaccia utente, invidiano.

Questo pulsante è il menu button, noto oggi anche con il nome di hamburger button, nato nel 1981 per mano dell’interaction & user experience designer Norm Cox per Xerox Star.

Che fattezze ha?

Molti forse non lo sanno ma si ungono lo dita, lo toccano o cliccano tutti i giorni e non sanno mai cosa spunterà fuori. L’hamburger button è lui:

No, scherzavo, è questo:

Tre linee orizzontali che avrete visto diverse volte nei browser web e nelle app installate nei vostri smartphone e tablet. Di solito si posiziona in alto a destra ma nessuno gli impedisce di occupare altri spazi, in alto a sinistra, in basso a destra o in basso a sinistra.

A che cosa serve e come viene usato?

Dovrebbe avere lo scopo di elencare e ospitare le funzioni extra del sito o dell’app mobile. Molto spesso però è delegato a ospitare tutte le sezioni che, soprattutto negli smartphone, non è possibile disporre nella UI (user interface) della home o schermata principale.

È quindi diventato una specie di cassetto virtuale delle cianfrusaglie. Un po’ come il cassetto della casa della nonna dove dentro si trovano le foto di quando si era bambini ma anche un tagliacarte, una forchetta, una biro, le chiavi della vecchia auto, un pacchetto di caramelle, un cacciavite e un pollo di gomma.

Eric Mobley, nel suo articolo The Ambiguous Hamburger Icon: Is The Icon Mystery Meat To Users? (febbraio 2014), introduce il problema della rappresentazione del pulsante. Come dimostrato dai dati raccolti durante diverse sessioni di testing (AB Test) dove venivano mostrate le diverse e possibili alternative, come le seguenti (tratte da “Mobile Menu AB Tested: Hamburger Not the Best Choice?):

La difficoltà maggiore degli utenti è capire il vero significato di questo pulsante. Quando però è accompagnato da una etichetta, per esempio menu, diventa più intuitivo e semplice scoprirne il significato e quello che ci si dovrebbe aspettare di trovare al suo interno.

Probabilmente la difficoltà dell’interpretazione dell’icona con le tre linee avviene anche perché diverse interfacce utilizzano un’altra icona del tutto diversa per rimandare a contenuti “altri”. Ad esempio, Google, utilizza una icona composta da una piccola griglia o scacchiera di nove quadratini:

per accompagnare l’utente all’accesso delle Google Apps. Ma questa è forse più esplicita perché riprende graficamente la disposizione delle icone delle app installate in un device (smartphone o PC.

Nel mondo mobile oggi l’hamburger button prende sempre più piede e troppo spesso convive nella stessa schermata con altre diverse declinazioni. Ad esempio, la versione di Facebook iOS7 e Android:

Si vedono ben due hamburger button, uno in alto a destra accompagnato dalla classica sagoma dell’omino dalla quale l’utente potrebbe intendere l’elenco delle impostazioni del proprio profilo, e un altro in basso a destra accompagnato dall’etichetta More nel caso iOS, o subito sotto il primo nel caso Android. La verità è che il primo manda alla lista amici in chat, e il secondo rimanda alla lista di altri hamburger button, come le matrioske! Ed ecco crearsi il caos.

Quali soluzioni esistono a questo marasma?

Forse una prima soluzione sarebbe dare un significato più chiaro all’icona considerando una delle euristiche di Nielsen riconoscimento anziché ricordo e provare a impegnarci a disegnare una icona che possa facilmente comunicare cosa conterrà o dove rimanderà. Così come l’icona con la casetta rimanda alla home, l’icona con il balloon (nuvoletta) probabilmente rimanderà a una sezione chat o messaggi… forse una icona con tre linee rimanderà ancora alla cassettiera della nonna. In quel caso non c’è da stupirsi se all’interno ci troviamo anche la dentiera.