Skip to main content
Tips & tricks

Icone menu: impariamo a riconoscerle

By 8 Giugno 2020Dicembre 24th, 2020No Comments

Di icone menu ce ne sono tante, ma non tutte hanno la stessa funzione.
Hamburger, kebab, bento…
In primis, perché i loro nomi fanno riferimento al cibo?
Tutto nasce dall’icona capostipite, l’Hamburger menu, creata dal designer Norm Cox più di 30 anni fa per l’interfaccia Xerox Star.
Progettata per essere semplice e funzionale, doveva ricordare un menu contestuale e mimare l’aspetto dell’elenco delle voci nascoste.

Con il passare del tempo sono state create tante altre icone menu, impariamo a conoscerle un po’ meglio.

Icone menu hamburger


Hamburger icon

La più utilizzata nelle interfacce mobile per siti responsive ed applicazioni (nel caso in cui ci fossero più di 4/5 voci, come alternativa alla Tab Bar).
Sconsigliata nelle visualizzazioni desktop.

Icone menu


Kebab icon

Nata dal Material Design di Google.
Utilizzata per aprire controlli specifici e piccoli inline menu.
Si trova convenzionalmente in alto a destra.
Con ketchup, ma senza cipolla.

Icone menu bento


Bento icon

Apre una serie di app o strumenti correlati al prodotto in utilizzo.
L’esempio più lampante è Google, che con questa icona apre la carrellata di altri servizi (Drive, Maps, Play, Meet…).

Icone menu meatball


Meatballs icon

Questa icona ha la stessa funzione della versione Kebab, ovvero mostrare componenti correlate.
La sua composizione grafica orizzontale la rende molto pratica da usare all’interno di elenchi e tabelle.

Icone menu doner


Döner icon

La soluzione “ad imbuto” più nota ed utilizzata per presentare del filtri.
Spesso accoppiata a funzioni avanzate quali “Filtra per” o a filtri globali.

Icone menu veggie


Veggie Burger icon

Può sembrare una presa per il culo per concludere il post, ma vi assicuro che esiste.
Versione alternativa al classico Hamburger Menu, la funzione è la stessa, lo stile è più minimal.
Non molto diffusa, è più facile trovarla in UI più sperimentali/artistiche.