Au-delà de son appellation culinaire, ce symbole répond à un besoin précis : celui de gagner de la place sur des écrans de plus en plus petits tout en conservant une arborescence complexe. Mais attention, car derrière cette simplicité apparente se cachent des pièges d'utilisabilité qui pourraient bien vous faire perdre des utilisateurs si vous l'utilisez à tort et à travers. On va décortiquer ensemble pourquoi ces trois petites barres ont conquis le monde, comment elles fonctionnent techniquement et surtout, pourquoi certains designers aimeraient bien les voir disparaître pour de bon.
L'origine historique du menu hamburger : un héritage de 1981
On a souvent tendance à croire que le menu hamburger est une invention récente, née avec l'iPhone ou l'avènement du web mobile. Le truc c'est que la réalité est bien plus ancienne et nous ramène aux balbutiements de l'informatique personnelle. C'est en 1981 que Norm Cox, un designer travaillant sur l'interface du Xerox Star, a dessiné ces trois lignes pour la première fois. À l'époque, l'objectif était limpide : créer un symbole graphique qui évoque une liste d'objets ou un menu textuel, tout en restant extrêmement simple à afficher avec les limitations techniques des écrans de l'époque qui ne brillaient pas par leur résolution.
Norm Cox et la naissance d'un standard
Norm Cox ne cherchait pas à révolutionner le monde, il voulait juste une icône fonctionnelle. Il a conçu ce bouton pour qu'il ressemble à une liste de choix, un peu comme une feuille de papier sur laquelle on aurait griffonné des lignes. C'est fou de se dire qu'un dessin réalisé il y a plus de 40 ans sur une machine qui coûtait 16 000 dollars est aujourd'hui cliqué des milliards de fois par jour sur des appareils qui tiennent dans la poche. Xerox Star n'a pas été un immense succès commercial, loin de là, mais son héritage visuel a survécu à travers les décennies pour resurgir avec une force incroyable lors de l'explosion des smartphones dans les années 2010.
La traversée du désert et la résurrection mobile
Pendant près de vingt ans, le menu hamburger a quasiment disparu des radars. Les interfaces de bureau, comme Windows ou Mac OS, privilégiaient les barres de menu textuelles (Fichier, Édition, Affichage) car l'espace ne manquait pas sur les moniteurs cathodiques. Mais là où ça coince, c'est quand les écrans ont commencé à rétrécir. Avec l'arrivée du design adaptatif, ou responsive design, les concepteurs de sites web se sont retrouvés face à un casse-tête : comment faire tenir dix rubriques de navigation sur une largeur de 320 pixels ? C'est là que Facebook, puis d'autres géants du web, ont déterré l'icône de Norm Cox pour en faire le standard que nous connaissons tous.
La famille des icônes de navigation : hamburger, kebab et bento
Si le hamburger est le roi incontesté de la navigation cachée, il n'est pas seul sur le plateau. Les designers ont développé tout un lexique culinaire pour désigner les différentes variantes de boutons de menu. On n'y pense pas assez, mais chaque variation a une fonction sémantique différente. Par exemple, avez-vous déjà remarqué ces trois petits points verticaux ? C'est le menu kebab. Et les trois points horizontaux ? Le menu meatball. Ces noms peuvent prêter à sourire, mais ils permettent aux équipes de développement de se comprendre instantanément sans avoir à faire de longs schémas.
Le menu Kebab et le menu Meatball
Le menu kebab, avec ses trois points alignés verticalement, est omniprésent dans l'écosystème Android de Google. Il sert généralement à ouvrir un menu contextuel lié à un élément spécifique plutôt qu'à la navigation globale du site. À l'inverse, le menu meatball (horizontal) est souvent utilisé pour indiquer "plus d'actions" ou des options secondaires. Reste que la confusion est fréquente pour l'utilisateur lambda qui ne fait pas forcément la distinction entre ces subtilités graphiques. On est loin du compte si l'on pense que n'importe quelle icône fera l'affaire pour guider un internaute perdu.
Le menu Bento et le menu Doner
Moins connu mais tout aussi utile, le menu bento se compose de neuf petits carrés formant une grille. Il symbolise généralement un accès à une suite d'applications ou à un tableau de bord, comme on le voit en haut à droite sur les services de Google ou Microsoft 365. Enfin, le menu doner, qui ressemble à un entonnoir avec trois lignes de longueurs différentes, est le symbole standard pour le filtrage des données. Autant le dire clairement : si vous utilisez un hamburger là où un bento serait plus approprié, vous risquez de créer une friction inutile dans le parcours de votre visiteur.
Pourquoi les experts en UX détestent parfois le menu hamburger
Je reste convaincu que le menu hamburger est souvent une solution de facilité pour les designers qui ne veulent pas faire l'effort de hiérarchiser leur contenu. C'est ce qu'on appelle dans le milieu le "tiroir à bazar". On y fourre tout ce qui ne rentre pas ailleurs, en espérant que l'utilisateur fera l'effort de cliquer pour découvrir ce qui s'y cache. Or, le problème majeur réside dans un principe fondamental de l'ergonomie : ce qui n'est pas visible n'existe pas. Les tests utilisateurs montrent de façon récurrente que cacher la navigation derrière une icône réduit drastiquement le taux d'engagement sur les pages profondes d'un site.
Le coût cognitif de la navigation cachée
Cliquer sur un menu hamburger demande un effort supplémentaire. Ce n'est pas seulement un mouvement physique du pouce, c'est aussi une charge mentale. L'utilisateur doit d'abord identifier l'icône (ce qui prend environ 200 millisecondes), décider de cliquer, attendre l'animation d'ouverture, puis scanner visuellement la liste qui apparaît. Dans un monde où l'attention humaine est plus courte que celle d'un poisson rouge, chaque étape est une occasion de perdre votre visiteur. Des études ont prouvé que le remplacement d'un menu hamburger par une barre d'onglets visible en bas de l'écran peut augmenter les revenus d'une application mobile de plus de 15 % simplement en rendant les sections clés plus accessibles.
La loi de Hick appliquée aux interfaces
La loi de Hick stipule que le temps nécessaire pour prendre une décision augmente avec le nombre et la complexité des choix. En regroupant toutes les options dans un seul menu caché, on crée souvent une liste interminable qui paralyse l'utilisateur. Imaginez-vous entrer dans un restaurant où la carte n'est pas affichée, et où vous devez demander au serveur de vous lire les 50 plats disponibles. C'est exactement ce que vous infligez à vos internautes avec un menu hamburger mal géré. Et c'est précisément là que le bât blesse : la simplicité visuelle de l'icône masque une complexité d'utilisation qui peut s'avérer contre-productive.
Anatomie technique : comment coder un menu hamburger efficace
Si vous décidez d'implémenter ces trois barres, autant le faire proprement. Techniquement, il existe des dizaines de façons de créer ce bouton, du simple caractère Unicode à l'élément SVG complexe animé par JavaScript. Le choix de la technologie n'est pas anodin, car il impacte directement l'accessibilité de votre site pour les personnes malvoyantes utilisant des lecteurs d'écran. Un bon menu hamburger ne doit pas seulement être joli, il doit être sémantiquement correct. Le truc, c'est de ne pas oublier les attributs ARIA qui permettent de signaler aux outils d'assistance que ce bouton contrôle l'affichage d'un menu.
HTML et sémantique : plus que de simples lignes
Pour un développeur, la tentation est grande d'utiliser une simple balise div avec trois lignes à l'intérieur. Sauf que pour un moteur de recherche ou un logiciel d'accessibilité, une div ne veut rien dire. Il faut utiliser une balise button avec un label explicite. Est-ce que vous saviez que 70 % des menus hamburger sur le web ne sont pas accessibles au clavier ? C'est une statistique qui fait mal. Pour corriger cela, il suffit d'ajouter un aria-expanded="false" qui passera à "true" lors du clic. Cela semble être un détail technique, mais pour un utilisateur aveugle, c'est la différence entre pouvoir naviguer sur votre site ou rester bloqué à l'entrée.
Le rôle du CSS dans l'animation
L'animation du passage des trois barres à une croix (pour fermer le menu) est devenue un standard esthétique. On utilise généralement des transformations CSS pour faire pivoter la barre du haut et celle du bas tout en faisant disparaître celle du milieu. Cette transition visuelle n'est pas qu'un gadget : elle confirme à l'utilisateur que son action a été prise en compte. Une transition fluide de 300 millisecondes est idéale. Trop rapide, elle paraît brutale ; trop lente, elle donne une impression de lourdeur au site. C'est un équilibre délicat à trouver, un peu comme le dosage du sel dans une recette.
JavaScript : gérer l'état sans casser l'expérience
Le JavaScript intervient pour basculer les classes CSS et gérer ce qu'on appelle le "focus trap". Quand le menu est ouvert sur mobile, il est primordial que l'utilisateur ne puisse pas faire défiler le reste de la page en arrière-plan. C'est une erreur classique : on ouvre le menu, on essaie de scroller dans la liste, mais c'est le contenu du site qui bouge derrière. Bloquer le défilement du corps de la page (body) est une étape indispensable pour une expérience utilisateur digne de ce nom. Rien n'est plus frustrant qu'une interface qui semble se désarticuler sous vos doigts.
Les alternatives au menu hamburger : quand faut-il changer ?
Honnêtement, le menu hamburger est parfois une béquille pour les sites qui ont trop de rubriques. Si vous avez moins de cinq sections principales, pourquoi les cacher ? La tendance actuelle, portée par les géants comme Instagram ou Spotify, est au retour de la "Tab Bar" ou barre d'onglets située au bas de l'écran. Cette zone est beaucoup plus facile d'accès pour le pouce, surtout sur les téléphones géants qui sont devenus la norme. On appelle cela la "zone de confort du pouce", et le coin supérieur gauche (où se trouve souvent le hamburger) est justement la zone la plus difficile à atteindre sans utiliser ses deux mains.
La barre d'onglets : le choix de l'efficacité
La barre d'onglets offre une visibilité immédiate sur les fonctionnalités clés. Elle permet aussi de passer d'une section à l'autre en un seul clic, contre deux pour le menu hamburger. Pour une application de commerce en ligne, par exemple, avoir les icônes "Recherche", "Panier" et "Compte" toujours visibles peut augmenter le taux de conversion de manière significative. À ceci près que cette solution ne permet pas d'afficher beaucoup d'éléments. Si votre site est une encyclopédie ou un portail d'actualités complexe, vous aurez toujours besoin d'un menu secondaire caché quelque part.
Le menu "Priorité Plus"
Une alternative élégante est le menu "Priorité Plus". Le concept est simple : on affiche autant de liens que possible selon la largeur de l'écran, et ceux qui ne rentrent pas sont regroupés sous un bouton "Plus" (qui peut être un hamburger ou un menu meatball). C'est un excellent compromis entre visibilité et flexibilité. Cela permet aux utilisateurs sur tablette de voir plus d'options que ceux sur smartphone, tout en gardant une structure cohérente. Du coup, on évite l'aspect "tout ou rien" du menu caché intégral, ce qui est bien plus respectueux de la psychologie de l'internaute.
Questions fréquentes sur le bouton aux trois barres
Pourquoi l'appelle-t-on menu hamburger ?
Comme expliqué précédemment, son nom provient de sa forme visuelle. Les deux barres extérieures représentent le pain, et la barre centrale représente la viande. C'est un terme mnémonique utilisé par les designers pour simplifier la communication technique, au même titre que le menu kebab ou bento.
Où doit-on placer le menu hamburger sur l'écran ?
Traditionnellement, il se place en haut à gauche sur Android et souvent en haut à droite sur iOS ou sur les sites web. Cependant, avec l'agrandissement de la taille des écrans, certains designers commencent à le placer en bas de l'écran pour faciliter l'accès avec le pouce. Il n'y a pas de règle absolue, mais la cohérence avec les habitudes des utilisateurs de la plateforme visée est primordiale.
Est-ce que le menu hamburger est mauvais pour le SEO ?
Pas directement. Les robots de Google sont parfaitement capables de "cliquer" virtuellement sur ces menus pour explorer les liens qu'ils contiennent. Cependant, si le menu est mal codé en JavaScript et que les liens ne sont pas présents dans le code source HTML initial, cela peut poser problème. De plus, une mauvaise expérience utilisateur (UX) peut indirectement nuire à votre référencement via des signaux négatifs comme un taux de rebond élevé.
Peut-on remplacer les barres par le mot "Menu" ?
C'est même souvent recommandé ! Des tests A/B ont montré que remplacer l'icône par le mot "MENU", ou ajouter le mot à côté de l'icône, augmente considérablement le nombre de clics, en particulier chez les populations moins familières avec les codes du web moderne. Parfois, la clarté bat la tendance esthétique à plate couture.
Verdict : l'avenir des trois barres sur nos écrans
Alors, faut-il enterrer le menu hamburger ? Je trouve ça surestimé de vouloir à tout prix le supprimer. Il reste un outil incroyablement pratique pour nettoyer une interface et se concentrer sur le contenu principal. Le problème, ce n'est pas l'outil, c'est la façon dont on s'en sert. Un bon designer utilisera le hamburger pour les fonctions secondaires (Paramètres, Aide, Mentions légales) tout en laissant les actions principales à portée de main. On est loin de la fin de cette icône ; elle va simplement continuer à évoluer, peut-être en changeant de forme ou de position, mais son rôle de gardien de l'espace restera notoire.
L'essentiel est de se rappeler que chaque pixel sur un écran mobile coûte cher. Si vous décidez de cacher votre navigation derrière trois petites barres, assurez-vous que ce qui reste visible est suffisamment captivant pour que l'utilisateur ait envie d'aller voir plus loin. Le menu hamburger n'est pas une baguette magique qui règle les problèmes de structure de contenu, c'est juste une porte. Et comme pour toute porte, il faut que les gens aient une bonne raison de vouloir l'ouvrir. Soit dit en passant, la prochaine fois que vous commanderez un vrai burger, vous ne pourrez probablement pas vous empêcher de penser à votre site web préféré. C'est ça, la puissance d'un design réussi.