Agence web » Actualités du digital » Qu’est-ce qu’un bouton de menu Hamburger?

Qu’est-ce qu’un bouton de menu Hamburger?

bouton humber et emoji

Menu Hamburger – ou Icône Hamburger – est un terme couramment utilisé pour parler d’applications. Cela peut vous donner faim, mais cela n’a rien à voir avec la nourriture. D’où vient ce nom idiot et que fait le menu?

L’histoire de l’icône du hamburger

L’icône Hamburger – menu, symbole, bouton, etc. – existe depuis 1981. Elle a été créée par Norm Cox, le responsable graphique du Xerox Star, le premier ordinateur personnel commercial.

Norm a conçu le symbole comme un conteneur pour les choix de menu. Les lignes horizontales sont une représentation abstraite d’une liste verticale. Vous pouvez voir les boutons du menu hamburger en action sur le Xerox Star dans la vidéo ci-dessous à 21h15.

Le symbole se voulait très simple, en partie en raison des contraintes de conception de l’époque. Il ne pouvait faire que 16 × 16 pixels environ, il devait donc être distinct et facilement visible. Trois lignes audacieuses ont atteint cet objectif.

Ce n’est que lorsque les smartphones et les applications mobiles sont apparus que l’icône du hamburger a explosé dans la conscience dominante. L’espace d’écran limité signifie que les options doivent être cachées dans les menus, et l’icône de hamburger est devenue un choix populaire pour le signifier.

L’histoire de l’icône du hamburger dans les applications mobiles est un peu plus trouble. Il a peut-être été utilisé pour la première fois par une application Twitter appelée «Tweetie» en 2008. Peu de temps après, il a commencé à apparaître dans le système d’exploitation iOS d’Apple pour l’iPhone, ce qui a probablement conduit à sa popularité dans la conception d’applications mobiles.

À quoi sert l’icône du hamburger?

Comme mentionné précédemment, le but initial de l’icône de hamburger était d’agir comme un menu contenant des listes d’options. C’est de là que vient le design. Les menus incluent généralement des options dans une liste verticale, d’où les trois lignes empilées les unes sur les autres.

C’est toujours à cela que sert l’icône de hamburger aujourd’hui, mais son objectif s’est étendu dans les applications mobiles. Il est maintenant couramment utilisé pour les menus qui glissent sur le côté de l’écran. (Ce type de menu est parfois appelé menu «barre latérale».)

Voici un exemple de l’icône de hamburger utilisée dans l’application Gmail pour Android. Appuyez sur l’icône pour ouvrir un menu de ce côté de l’écran.

menu hamburger dans gmail

L’icône hamburger se trouve également dans le menu Démarrer de Windows 10. Passer la souris sur l’icône ou cliquer dessus développe les raccourcis pour les paramètres, l’alimentation et d’autres options utilisateur.

icône de hamburger dans le menu de démarrage

L’icône du hamburger est simplement un symbole qui a fini par signifier «menu». Une fois que vous commencez à le chercher, vous le verrez partout.

Pourquoi s’appelle-t-il un menu «Hamburger»?

icône de hamburger et hamburger

Grâce à la recherche du designer Geoff Alday, l’histoire de l’icône du hamburger est assez étoffée. Cependant, nous ne savons pas vraiment pourquoi ni quand il a pris le surnom de «hamburger».

Tout le monde semble d’accord pour dire que le surnom vient des trois lignes qui ressemblent un peu à un petit pain supérieur, une galette de hamburger et un petit pain inférieur. Mais qui a été la première personne à établir ce lien? Nous ne sommes pas sûrs. Norm Cox mentionne seulement en plaisantant en l’appelant un «évent» pour la fenêtre.

Les humains ne voient que la nourriture dans beaucoup de choses, apparemment.

L’affaire contre le menu des hamburgers

Tout le monde n’est pas fan de l’icône omniprésente du hamburger. Ces dernières années, les concepteurs d’applications ont commencé à s’en éloigner.

L’icône du hamburger a été conçue (avec des restrictions strictes en place) pour être super simple. Cette simplicité peut parfois être un inconvénient. Ce n’est pas très descriptif et peut facilement être négligé si vous ne le connaissez pas.

Les barres de navigation sont devenues un moyen plus populaire d’organiser les éléments de menu. Plutôt que de tout ranger derrière un bouton non descriptif, plusieurs icônes peuvent être disposées sur une barre avec du texte. C’est beaucoup plus facile à comprendre pour quelqu’un.

barre de navigation google maps
Barre de navigation dans Google Maps

Une barre de navigation ne fonctionne pas pour chaque application, cependant, il est toujours courant de voir l’icône de hamburger. Ce qui est devenu encore plus populaire, c’est l’utilisation de trois points comme icône de menu, comme indiqué ci-dessous dans Chrome pour Android.

(Sous le bouton, vous pouvez voir une icône de menu hamburger sur le site Web mobile de How-To Geek. Les sites Web utilisent souvent cette conception aussi!)

icône de menu à trois points


Cela fait beaucoup parler de hamburgers et de conception de logiciels. Tout ce que vous devez savoir, c’est qu’un menu hamburger est généralement composé de trois lignes horizontales dans une pile verticale. Soyez également à l’affût de trois points. Utilisez ces boutons lorsque vous recherchez des menus et plus d’options. Maintenant, passez la moutarde, s’il vous plaît.

★★★★★