Hamburger Icon — Per alcuni sarà un argomento trito e ritrito, specie per i più vicini al settore UI e UX, ma voglio comunque dirti la mia (e non solo).

Premessa per Newbie – Cos’è l’hamburger icon?

L’hamburger icon ormai è dappertutto. Stiamo parlando di quell’icona rappresentata generalmente da tre linee orizzontali, una sotto l’altra, che cliccandola ci mostra le voci di menu inizialmente nascoste (solitamente nascoste per questione di spazio). Ormai è presente in tantissime app e in altrettanti siti, specie quando li visualizzi da mobile. La prima domanda da porsi è perché.

Perché si usa?

Questa icona assolve alla necessità di ottimizzare gli spazi dedicando alla navigazione un contenitore che verrà mostrato solo su richiesta, appunto solo dopo che l’utente avrà cliccato l’icona in questione. Questo ci permette di non sacrificare voci di menu e, allo stesso tempo, mantenere la nostra interfaccia piuttosto semplice e pulita.

L’origine dell’hamburger icon

Sembra che il primo ad utilizzare l’hamburger icon sia stato Norm Cox nel disegnare un’interfaccia per Xerox Star. All’epoca non divenne così usata, fu poi rispolverata da Apple su iOS quando la propose all’interno dell’app per registrare l’audio. Nel tempo è spopolata anche grazie alla massiccia diffusione degli smartphone fino a diventare la soluzione più semplice e quasi scontata per organizzare delle voci di menu.

Perché non dovremmo usarla?

In giro sul web c’è chi sta quasi demonizzando quest’icona. Ma cosa ci ha fatto di male? La risposta è molto semplice: nulla, ma basterebbe utilizzarla con moderazione nella progettazione delle nostre interfacce.

In breve alcuni evidenti svantaggi:

• Richiede più click per raggiungere la voce di menu desiderata
• A colpo d’occhio l’utente non sa quali siano le sezioni del sito/app
• Ma soprattutto, non tutti sanno a cosa serve!

Molto interessante l’articolo pubblicato su Nielsen Norman Group (se pur datato rimane comunque molto attuale), dove vengono messi in chiaro alcuni numeri a seguito di test di usabilità.

Tutti la conoscono?

La risposta breve è “No”.

La risposta lunga: quando disegniamo interfacce dobbiamo ricordarci che progettiamo per l’utente, o meglio per una varietà di utenti. Tra questi ci saranno indubbiamente quelli meno avvezzi alla tecnologia per i quali non sarà così scontato che dietro quell’icona sia nascosto un menu di navigazione.

Purtroppo si è diffusa anche la pratica di utilizzare questa soluzione per i siti anche quando li navighiamo da desktop. Una fetta dei nostri utenti sarà composta da chi non utilizza smartphone, o comunque da chi non è molto pratico con device mobili, app e simili, che non riconoscerà nell’hamburger icon un’icona dedicata alla navigazione (qualche designer ha ovviato a questo problema affiancandoci un’etichetta “Menu”).

Ma quando parliamo di un sito desktop è proprio la soluzione giusta? Forse no. Con tutto lo spazio a disposizione, se questa risulta la soluzione migliore, allora forse dovremmo fare qualche passo indietro e capire cosa abbiamo sbagliato.

Ok, ma quali sono le alternative all’hamburger icon?

Mentre su desktop personalmente l’abolirei, la situazione cambia su mobile. La prima domanda da farci è “L’hamburger icon è davvero l’unica soluzione?”.

Iniziamo a pensare a delle valide alternative. Se le nostre voci di menu non sono molte potremmo pensare di utilizzare una bottom navigation posizionata quindi in fondo alla schermata. Se le voci di menu sono più di 5, potremmo pensare di usare la bottom navigation per le principali e optare per un’hamburger icon (o qualcosa di simile) per quelle meno importanti. Questa soluzione, se ci fai caso, è utilizzata in parecchie applicazioni.

N.B.: Stiamo attenti quando usiamo soluzioni simili: spesso le sole icone non saranno abbastanza esplicite e sarà bene chiarire dove portano aggiungendoci delle etichette, del testo che renda inequivocabile la navigazione.

Menu con Orizzontal Scroll

Se le voci di menu sono tante o se la bottom navigation ci sembra un approccio “troppo app”, potrebbe essere una buona soluzione disporre le voci di menu in alto, una affianco all’altra, dentro un contenitore scrollabile orizzontalmente. Molto interessante la soluzione adottata da Medium: menu disposto in orizzontale con delle frecce per sfogliare le voci.

In conclusione

Non dico di non utilizzare mai l’hamburger icon, ma semplicemente usiamola responsabilmente. A volte la usiamo solo perché risulta la via più facile e veloce, ma prima dovremmo valutare sempre se è la soluzione giusta e vagliare le possibili alternative.