L'icona del menu a 3 righe: cos'è un menu hamburger?

Pubblicato: 2023-08-01

E se ti dicessi che i siti web e gli smartphone contengono hamburger? Probabilmente penseresti che l'ho perso completamente dopo aver smesso di prendere le medicine. Ma è assolutamente vero, non ti prendo in giro.

Quando apri un'app sul tuo smartphone o su alcuni siti Web oggi, potresti guardare un hamburger, ovvero un'icona del menu di un hamburger.

Qual è il menu dell'hamburger?

Il menu dell'hamburger (che non viene fornito con un contorno di patatine fritte) sono le tre linee orizzontali che vedi ora nella parte superiore di molte schermate, all'estrema sinistra o all'estrema destra.

È un'icona, in realtà.

Toccando, toccando o facendo clic sull'icona, si apre un menu laterale con una selezione di opzioni o pagine aggiuntive.

Alcuni sviluppatori adorano l'icona del menu a 3 righe dell'hamburger perché consente loro di inserire più funzionalità nelle loro app o nella navigazione. La piccola icona occupa una quantità minima di spazio sullo schermo. Conferisce all'app o al sito un aspetto pulito e minimalista.

È abbastanza facile per l'utente dell'app o il visitatore del sito Web premere il pulsante per far scorrere il menu dentro e fuori.

O così potresti pensare.

Tuttavia, altri sviluppatori e alcuni utenti detestano assolutamente l'icona del menu dell'hamburger o semplicemente ne sono perplessi. Perché? Perché non è ovvio per tutti gli utenti che le tre linee siano in realtà un'icona di menu e non dice agli utenti cosa c'è dentro.

Icona del menu a 3 righe menu hamburger

Chi ha "inventato" l'icona del menu dell'hamburger?

Il visionario dietro l'onnipresente icona del menu dell'hamburger è un pioniere creativo di nome Norm Cox. Ha creato l'ormai onnipresente icona del menu dell'hamburger, un simbolo universale che aveva originariamente progettato per Xerox Star, la prima interfaccia utente grafica al mondo, più di trent'anni fa.

Tuttavia, dopo il suo concepimento, l'immagine iconica sembrò scivolare in un periodo di relativa oscurità.

La rinascita dell'icona può essere fatta risalire all'ascesa dei dispositivi mobili. È stato durante quest'era, nel 2008, che l'icona a tre linee ha iniziato a riapparire, apparendo per la prima volta nell'app di Twitter, Tweetie.

L'anno successivo, l'icona ha trovato una nuova casa nell'interfaccia dell'app Voice Memos per iPhone 3GS.

In un'intervista con Small Business Trends, Cox ha condiviso la sua perplessità per la rinascita della sua creazione, affermando: “Devo ridacchiare per tutta l'attenzione che il piccolo simbolo dell'hamburger sta ricevendo ultimamente. Fino a circa nove mesi fa, non pensavo al 'gocciolamento nel secchio della mia carriera di designer' da oltre 30 anni!

Durante il brainstorming del simbolo, sono state contemplate alcune alternative:

  • Una freccia rivolta verso il basso a forma di triangolo, che indica la direzione in cui apparirà il menu risultante. Questo, tuttavia, è stato rifiutato perché troppo spesso interpretato come un indicatore.
  • Anche l'asterisco (*) o il simbolo più (+) sono stati presi in considerazione, ma alla fine sono stati scartati a causa della loro natura astratta.

Alla fine, Cox ha affermato che l'immagine dell'hamburger a tre righe ha raggiunto il perfetto equilibrio: “Questo simbolo era visivamente semplice, facilmente spiegabile e funzionalmente memorabile. Tre righe erano il numero perfetto.

L'icona dell'hamburger, un elemento di design semplice ma potente, ha così consolidato il suo posto nel mondo del design dell'interfaccia utente, testimoniando il fascino senza tempo della semplicità.

Icona del menu a 3 righe menu hamburger

Quali siti Web o app utilizzano questa famigerata icona del menu Hamburger?

Alcuni dei nomi di spicco che utilizzano l'icona dell'hamburger nelle loro app includono Gmail, Facebook, Reeder, Twitter e Starbucks.

E ora anche siti Web e browser hanno adottato l'icona del menu a 3 righe. I browser Chrome e Firefox ne sono un esempio, utilizzando il menu nell'angolo in alto a destra. Il menu hamburger nasconde tutte le opzioni, le impostazioni e le estensioni. E l'icona diventa arancione quando qualcosa nel browser deve essere corretto o aggiornato.

Time.com è un esempio di un importante sito Web che utilizza il menu dell'hamburger, in questo caso nell'angolo in alto a sinistra. Quando si fa clic sull'icona del menu a 3 righe, viene visualizzata una diapositiva che mostra ulteriori collegamenti ai contenuti.

tempo hamburger png

Alcuni esperti sottolineano che le funzioni nel menu dell'hamburger sono poco utilizzate.

Prima di tutto, molte persone devono ancora capire che le 3 linee orizzontali sono in realtà un'icona di menu e non semplicemente un'immagine.

In secondo luogo, l'icona dell'hamburger rende le informazioni nel menu nascosto "lontane dagli occhi, lontano dalla mente". A meno che non facciano effettivamente clic o tocchino l'icona del menu a 3 righe, non vedranno le scelte lì.

In effetti, nel caso di Time.com, è stato necessario aggiungere la parola "menu" sotto l'icona per rendere più evidente il simbolo.

Dipende meno dal menu dell'hamburger

Vari sviluppatori hanno espresso il loro disappunto per l'icona dell'hamburger e le sue carenze.

Alcuni si rifiutano di usare l'icona, nonostante la sua tendenza.

Ma l'azienda di più alto profilo che ha apportato un cambiamento è Facebook. Per essere assolutamente chiari, Facebook non ha mai dichiarato pubblicamente di volerne eliminare totalmente. Ma Facebook sta mettendo in evidenza alcune delle funzionalità mobili che in precedenza erano nascoste dietro l'icona dell'hamburger.

Ora sono visualizzati in una barra orizzontale nella parte inferiore dello schermo, chiamata barra delle schede.

La barra delle schede in basso occupa un po' più spazio sullo schermo, ma rende alcune funzioni più evidenti.

Abbiamo parlato con Mrinal Desai, CEO e co-fondatore di Addappt. Era anche dietro Crossloop, un'app di tecnologia remota in crowdsourcing, che alla fine è stata venduta ad AVG Anti-Virus.

"Il menu dell'hamburger non è proprio per le impostazioni", ha detto Desai, parlando con Small Business Trends. “È quasi come un 'altro' o si può anche pensare ad esso come un'alternativa alla 'barra delle schede'. È raro vedere entrambi, ma noi di Addappt l'abbiamo esplorato con un prototipo, ma alla fine abbiamo scelto di seguire il percorso della "barra delle schede".

“Queste decisioni spesso dipendono dall'obiettivo dell'app. L'icona dell'hamburger tende a relegare le funzioni mentre la barra delle schede le rende più evidenti", ha aggiunto Desai.

menù icona hamburger

Il creatore dell'icona dell'hamburger ottiene l'ultima parola

Quindi dovresti usare un'icona di menu hamburger nel tuo sito Web, tema mobile o app?

Lo sviluppatore originale dell'icona dovrebbe avere l'ultima parola, pensiamo.

"La longevità del simbolo (dagli anni '80) è una testimonianza della sua semplicità, utilità, apprendibilità e memorabilità", ha detto Cox, quando gli è stato chiesto delle chiamate per uccidere l'icona dell'hamburger.

"Cercare di 'uccidere' o 'abolire' uno strumento o un widget dell'interfaccia utente basato su un uso o un'implementazione inadeguati è sia un po' miope che eccessivamente reattivo."

Questa tabella suddivide la storia e l'uso dell'icona in epoche diverse, dalla sua creazione alla sua reintroduzione e all'attuale utilizzo diffuso, evidenziando come la sua ricezione e applicazione sono cambiate nel tempo:

Era Icona introdotta Prime applicazioni Accoglienza utenti Applicazioni moderne Accoglienza attuale
anni '80 Menu Hamburger di Norm Cox per Xerox Star Utilizzato nella prima interfaccia utente grafica al mondo Per lo più sconosciuto al grande pubblico - -
anni 2000 Reintroduzione con l'ascesa dei dispositivi mobili App Twitter (Tweetie), app Memo vocali per iPhone 3GS Misto; alcuni lo trovavano intuitivo, altri confuso - -
Anni 2010 e oltre Ampia adozione Gmail, Facebook, Reeder, Twitter, app Starbucks; browser Chrome e Firefox; siti web come Time.com Il dibattito sulla sua efficacia continua Utilizzo esteso in varie app e siti web Alcuni ne amano la semplicità e la compattezza, altri lo criticano perché nasconde funzioni importanti

Hamburger, foto icona rossa tramite Shutterstock