Copy
# 039 — 21/10/19 • Vai alla versione web

Stai leggendo un numero di Dispenser.Design, una newsletter domenicale su design, tipografia, web e dintorni.

Per riceverla iscriviti qui.


Settimana scorsa sono stato al Digital Design Days a Milano. In uno dei talk dell’evento Peter Smart, Head of Product dell’agenzia Fantasy, ha mostrato una slide che diceva: «Show us a hamburger menu and you are fired».

Qualcuno (ciao Mirko) mi ha poi fatto notare che in realtà il sito di Fantasy, anche nella versione desktop è hamburger menu fornito. Quindi hamburger sì o hamburger no?

L’hamburger menu continua ad essere argomento di discussione tra i designer, ed è il tema di questo numero. Vi anticipo la risposta, se non avete tempo: hamburger ni.


Un saluto ai nuovi iscritti. L’ultimo numero di questa newsletter è stato condiviso più del solito e quando succede in genere aumentano gli iscritti. (L’ultimo numero era quello sugli “stati del design”). È probabile che quindi oggi più di qualcuno si stia chiedendo perché sta leggendo questa email. Se è così volvevo dirvi: vi capisco. Capita anche a me di iscrivermi a newsletter, dopo aver esagerato con la caffeina, senza ricordare quando e perché è successo. Mi capita anche di iscrivermi a newsletter per scoprire di essere già iscritto.

In ogni caso, volevo rassicurarvi e fare un riepilogo su cosa aspettarsi. Questo è un posto tranquillo e discreto. Si parla di design di interfacce e dintorni; non c’è una frequenza fissa; all’inizio la newsletter era settimanale, al momento ne arrivano due al mese, tra la domenica e il lunedì. C’è anche un archivio dove poter leggere i vecchi numeri, all’occorrenza.

È possibile inviare un saluto, un feedback o quello che volete all’indirizzo email@dispenser.design, su Twitter o su Facebook.

Hamburger Menu


Con hamburger menu si intende quel simbolo con tre linee orizzontali, presente in siti e app (sia desktop che mobile). Al click (o al tap) di quel simbolo appaiono gli elementi di navigazione. Con l’avvento delle app (e degli smartphone) l’hamburger menu è diventato sempre più utilizzato. Soprattutto sugli smartphone, con il poco spazio a disposizione, è sembrato subito la soluzione ideale. Una soluzione comoda e facile da implementare.

L’hamburger menu è diventato così popolare — e argomento di infinite discussioni tra i designer — che a un certo punto qualcuno ha cominciato anche a chiedersi l’origine. Il designer Geoff Alday ha fatto qualche ricerca e ha trovato il “creatore”, Norm Cox. Come il mouse, le scrollbar e molto altro a cui siamo abituati quando interagiamo con uno schermo, l’hamburger menu è nato nei laboratori della Xerox, È stato utilizzato per la prima volta da Cox in una delle prime workstation a interfaccia grafica, lo Star di Xerox. L’esigenza che avevano avuto al tempo era quello di creare un simbolo “contenitore” per mostrare un menu contestuale, come si fece poi con il tasto destro del mouse.

In un’intervista di qualche tempo fa Norm Cox si è mostrato molto sorpreso dall’interesse per quel simbolo. Non pensa di essere neanche il “creatore”. Probabilmente qualche UI designer si sarà ritrovato con lo stesso problema che ha avuto lui alla Xerox, risolvendolo con un’icona di tre righe per rappresentare un menu, senza aver idea di quello che era successo nel 1981 allo Xerox PARC.

Chi è favore dell’hamburger menu parla di una riduzione di complessità, con più spazio per altre informazioni. L’icona è ormai diventata una convenzione e la maggior parte degli utenti la riconosce e sa come funziona.

C’è da dire però che di solito una navigazione nascosta in un hamburger menu è meno utilizzata di altre forme di navigazione. Una ricerca di Nielsen Norman Group ha evidenziato come sia su desktop che su mobile è molto più probabile che le persone utilizzino la navigazione quando è visibile, in parte o completamente.

Quando navighiamo un sito o un’app non abbiamo nessun senso delle proporzioni, della direzione e della posizione. Una navigazione ben progettata dovrebbe mostrare dove siamo e dove possiamo andare, aiutandoci a trovare cosa stiamo cercando. L’hamburger menu svolge male entrambi i compiti. Steve Krug in Don't make me think ricorda anche gli altri compiti che svolge la navigazione:

  • Ci dice cosa c’è
  • Ci dice come usare il sito (o l’app)
  • Ci da fiducia nelle persone che l’hanno progettato

In ogni momento che trascorriamo su un sito, il ritornello che abbiamo in testa è “Questi tizi sanno quello che fanno?” È uno dei principali fattori che usiamo per decidere se tirarcene fuori o se farvi ritorno. Una navigazione chiara e ben concepita è una delle migliori opportunità che un sito ha per creare una buona impressione.1

Luke Wroblewski, product director di Google, mostra come un menu a vista, e non nascosto, viene utilizzato molto più spesso e aumenta le interazioni degli utenti. Spotify su iOS lo ha abbandonato da tempo.

Chiaramente non sempre è possibile avere un menu a vista, dipende dal numero di schermate e sezioni presenti sul sito. Su mobile poi la cosa diventa ancora più complicata. Lo ricerca di Nielsen Norman Group ha anche evidenziato che su mobile le navigazioni nascoste vengono usate meno di quelle a vista, ma comunque sono più utilizzate che su desktop. Quando i link di livello superiore sono più di 4, il consiglio di Nielsen Norman Group è proprio quello di usare l’hamburger menu, perché l’usabilità di questo tipo di menu è molto migliore delle alternative. Quindi hamburger menu sì, ma supportato da sezioni che permettano all’utente di muoversi e raggiungere altri contenuti senza dover cliccare continuamente su quelle tre linee.

L’hamburger menu è allo stesso tempo utile e scomodo. Quando la navigazione è sempre visibile offre agli utenti un rapido accesso alle varie pagine disponibili e dà una visione d’insieme dei contenuti. Quando la navigazione è nascosta, Nielsen Norman Group parla di un “costo di interazione più elevato per ottenere le stesse informazioni”. L’utente deve deve pensare alla navigazione, quindi individuarla e poi aprirla per visualizzarla.

Il consiglio che alla fine pare emergere sull’uso dell’hamburger menu per la navigazione è, come spesso succede, legato al buon senso. È lo stesso che si potrebbe dare sul consumo di hamburger veri. Sì, ma ogni tanto, senza esagerare.

  1. Steve Krug, Don’t make me think, Tecniche Nuove, 2014 ↩︎

Per approfondire

 


Immagine tratta da un video dimostrativo dello Xerox Star.

In un altro video dimostrativo del 1990 sono raccolti tutti i widget progettati fino ad allora (checkbox, form, bottoni, icone, input, scrollbar, testo selezionato, ecc.)

Al minuto 21:15 è possibile vedere in azione anche l’hamburger menu dello Xerox Star realizzato nel 1981. (Qui la gif della sequenza video.)
 

Virge

 

Virge è una rivista di viaggio dedicata al Giappone. Una guida di 372 pagine, che non è una guida, come dicono i creatori: «non ricca di informazioni, ma che arricchisce l’esperienza di viaggio».

Productiondesign.tips →

 

Una raccolta di articoli, tool, approcci ed esempi relativi al design di prodotti e servizi digitali.

UX Framework →

 

Una raccolta di metodologie, framework e attività per la ricerca, la sintesi e l’ideazione di progetti di design.

Figma 

 

Figma ha dato una rinfrescata al suo design brand. Nuovo font, nuova grafica e nuovo sito.


Fivo Sans di Alex Slobzheninov →


Fivo Sans è un carattere tipografico ispirato dal design della Scuola Svizzera, realizzato da Alex Slobzheninov. È semplice, neutro e chiaro, adatto sia ai testi lunghi che ai titoli. È disponibile in 7 pesi, con il corrispettivo corsivo, ed è gratuito. Si può scaricare dalla pagina Behance di Slobzheninov.

C’è anche una versione display, sempre gratis.

Ricevi questa email perché sei iscritto alla newsletter Dispenser.
Se non vuoi ricevere più questa newsletter puoi cancellarti da qui.

Newsletter curata da Ciro Esposito — tra Bologna, Milano e Catania


Email Marketing Powered by Mailchimp