L’hamburger menu è il diavolo della UX?

Sì, sempre lui, uno degli oggetti più ambigui della User Experience! Oggi vi parlo di lui o meglio delle sue alternative utilizzate sul web.

È da ormai parecchio tempo che viene messo in discussione come soluzione per la gestione dei contenuti da mobile. Più volte è stato definito come inefficiente e poco interpretabile.
Fortunatamente una delle caratteristiche dei trend digital è che si evolvono velocemente, proponendo sempre nuove soluzioni a problemi come questo.
Una cosa è certa: nessuna delle idee qui in basso può essere intesa come “la soluzione definitiva” poiché il contenuto e il contesto determinano la loro riuscita.


1. LE TAB

Con un numero limitato di sezioni sul nostro sito o app, una buona soluzione è quella delle tab, che permette di capire chiaramente le diverse sezioni e muoversi agevolmente tra esse.

Sembrano essere la via più semplici ma bisogna fare alcune considerazioni:

  • non funzionano al meglio con più di 5 sezioni
  • una delle tab dovrebbe sempre essere evidenziata e ben visibile
  • la prima tab dovrebbe essere la home, le altre dovrebbero essere correlate a contenuti secondarie, secondo la gerarchia di navigazione
  • possono esser posizionate sia in alto che in basso in base alle esigenze e al contesto
  • le icone, senza testo, funzionano solo per azioni comuni con iconografie ben consolidate nell’immaginario dell’utente medio

Esempi: LinkedIn e Google Photos

Tab con sole icone per Linkedin e tab con foto+testo per Google Photos

 


2. TAB CON L’OPZIONE “MORE”

Una soluzione, quando abbiamo più di 5 sezioni da mostrare, è quella del tasto “more” che presuppone altro contenuto da visualizzare rispetto a quello già visibile.

 

Questo tasto può condurre a una pagina esterna, o aprire un menu a tendina contenente le restanti sezioni (come nell’immagine qui sotto).

Si potrebbe dire che il tasto “more” non sia tanto diverso dall’hamburger, poiché non ci fornisce alcuna informazione sul contenuto nascosto. Va comunque detto che, se abbiamo lavorato bene, la maggior parte dei contenuti ricercati dall’utente sono già presenti nelle tab visibili.

Esempio: Facebook

News feed, friend requests, notification, and search is always available in the header, all the remaining functionality is available from the ‘more’ menu on Facebook


3. MENU CON NUMERO VARIABILE DI TAB

Una versione più sofisticata del menu con tasto “more” è quella che adatta alla grandezza dello schermo il numero delle sezioni da mostrare. Più l’orizzontale è grande, quindi più spazio abbiamo, maggiori sono le voci che compaiono.
La flessibilità di questa soluzione offre un’esperienza utente di qualità maggiore, in grado di adattarsi automaticamente al dispositivo utilizzato dall’utente.

Esempio: BBC

Il menu principale del sito della BBC mostra il maggior numero possibile di sezioni in relazione alla larghezza dello schermo.


4. NAVIGAZIONE ORIZZONTALE

Se abbiamo un elevato numero di elementi che non si differenzia tra loro per importanza, un menu nascosto con tasto “more” potrebbe non essere efficiente.
È questo il caso della navigazione orizzontale che inserisce tutte le voci sullo stesso piano e non presenta sottomenu nascosti.

Certo, le prima voci restano sempre ben visibili, le ultime rimangono più nascoste.
È altrettanto vero, però, che questa navigazione orizzontale è un ragionevole compromesso. Lo scroll orizzontale è infatti una gesture a cui siamo tutti abituati ormai e l’utente la interpreta bene quando se la ritrova davanti. Nella maggior parte dei casi, per aiutarlo a comprendere che c’è un to be continued, è sufficiente sfumare l’ultima voce del menù, o non renderla completamente visibile. In questo modo gli si suggerisce che c’è altro da scoprire!

Esempi: Medium and Google

The main categories can be scrolled at smaller screen sizes on Medium.com

Categorie della pagina di ricerca di Google


5. MENU A TENDINA

Una pratica non comune, ma interessante, è quella dei menu a tendina. Utile soprattutto quando il contenuto di una pagina non è essenziale e può essere traslato verticalmente al click sulla macro-categoria.

Il menu a tendina ha due valenze:

  1. indicare la pagina in cui ci troviamo;
  2. suggerire, attraverso la freccia, che ci sono altre voci in cui addentrarsi.

Esempi: Barnes & Noble and Duolingo

 

CONCLUSIONE

Non c’è una soluzione adatta a tutto, soprattutto per il mobile. Tutto dipende dal prodotto, il contesto e l’utente per cui, in alcune situazioni, anche l’hamburger menu può essere una soluzione valida.
Quello che va bene in un sito o su un’app che vediamo può non soddisfare le esigenze di un altro sito o un’altra app.
Ciò che è certo è che le fondamenta di una buona navigazione risiedono nell’architettura generale del prodotto, nelle priorità e nei testi basandosi sulle necessità degli utenti.

Fonte: Zoltan Kollin su Medium