1 Commento

Se c'è troppo ripieno

Un menu Hamburger Button, per favore

di

thumbnail

21

gen

2015

Tre linee che, con una frazione di quelle che impiega l’i-Ching, predicono misfatti di interfaccia utente e user experience.

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:

hamburger.png

No, scherzavo, è questo:

menu-alt-512.png

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?):

hamburgertest1.gif

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:

hambutton_Google.jpg

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:

iOS_Facebook.jpg           Android_Facebook.jpg

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.

Screenshot_2014-12-14-16-34-00.png

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.




Val Pin (@v_alpin) lavora da diversi anni nel campo dello UX Design. Ha iniziato nel campo dell’e-learning e negli ultimi anni si sta dedicando alla progettazione di ambienti per business platform, buttando sempre un occhio al mobile entertainment per il quale ha lavorato diversi anni come UX Designer. HCI e smart device sono la sua estensione cibernetica. Il suo obiettivo è sempre lo stesso: trovare soluzioni creative da applicare allo UX Design. Per questo il genere sci-fi è la sua fonte di ispirazione. Ha però un grosso difetto: accumula carta per creare prototipi e modellini per qualsiasi cosa.

Letto 5.592 volte | Tag: , , , , , , , , , , , , , ,

Un commento

  1. Come fare una app: dal flowchart al wireframe | Apogeonline

    [...] queste soluzioni contemplano la possibilità di usare anche l’hamburger button, un valido compromesso tra le diverse proposte suggerite dai tre sistemi operativi; suggerisco di [...]

Lascia il tuo commento