Tout comme la loupe pour une barre de recherche ou un rouage pour les paramètres, le burger est aujourd'hui un symbole reconnu pour représenter la navigation d'un site web.
Un menu burger se présente généralement sous la forme de trois barres horizontales parallèles, derrière lesquelles se cache la totalité des items et sous-items du menu. Il permet, notamment sur mobile, de gagner de la place.
Mais d'où vient le menu burger ?
L'apparition d'un bouton burger est due à Norm Cox qu'il imagina en 1981 pour le Xerox Star, l'un des premiers ordinateurs personnalisés conçus pour le travail de bureau. Tombée dans l'oubli, cette icône reviendra sur mobile au sein de l'application Voice Memos sur iOS 3.0 en 2009, puis sera popularisée par Facebook en 2010.
Dès lors, le burger sera critiqué par les uns, acclamé par les autres, et fera l'objet de nombreux articles tout en continuant sa conquête du monde de l'internet (ahem).
Le menu burger, une fausse bonne idée ?
L'utilisation d'une icône « burger » est depuis longtemps dans le collimateur des experts UX. Et pour cause : si certaines icônes comme les play / pause ont été intégrées dans le langage commun, c'est grâce à des années d'utilisation dans notre quotidien, sur le web mais pas seulement : on les retrouve également sur les lecteurs Cds, DVDs, les radios, les manettes de télévision... Bref, dans notre vie de tous les jours. L'apprentissage de ces icônes s'est donc fait naturellement et il est désormais possible de les utiliser sans le moindre label.
Le menu burger, lui, est plus particulier : son usage est quasi exclusivement réservé au web et de nombreuses études prouvent que, même si la majorité des utilisatrices et utilisateurs en connaît le sens, il reste encore flou pour une partie d'entre eux.
Alors, est-ce une bonne idée d'utiliser un menu burger en 2022 ?
Les avantages et inconvénients du menu burger
Jetons d'abord un coup d'oeil aux bons et mauvais côtés d'un tel menu :
Avantages
- Permet de gagner de la place pour le reste du contenu
- Symbole reconnu par une majorité de personnes
- Moins d'éléments visuels = moins de charge cognitive
Inconvénients
- Cache l'information
- Toujours pas reconnu par certaines personnes
- Nécessite un clic supplémentaire pour accéder à la navigation
S'il permet effectivement de pallier au problème de place sur mobile, le menu burger cache également une partie de l'information nécessaire à la bonne utilisation d'un site.
Les bonnes questions à se poser
Prenons le problème à l'envers : pourquoi n'utilisions-nous pas de menu burger lorsque la navigation se faisait exclusivement sur desktop ?
- Pour avoir un accès direct à l'information
- Pour présenter au visiteur les différents chemins de navigation afin qu'ils ne manque rien d'important
- Pour que l'on puisse comprendre la structure du site et où on se trouve à l'intérieur de celle-ci
Un menu sert à la fois à la navigation et à la compréhension d'un site web. Le masquer, c'est donc ajouter une difficulté supplémentaire à la bonne prise en main de votre site.
Pour vous aider à prendre la bonne décision concernant votre projet, nous vous conseillons alors de vous poser ces quelques questions :
- Le visiteur sera-t-il capable de trouver l'information qu'il cherche dans le contenu de vos pages, et notamment de votre page d'accueil ?
- Existe-t-il d'autres chemins d'accès disséminés dans votre site (maillage interne, fil d’ariane, plan du site…) ?
- Avez-vous mis en place des boutons CTAs (Call To Action) suffisamment attractifs pour les orienter dans leur visite ?
- Vos pages présentent-elles un cheminement logique, compréhensif et facile à suivre ?
Si oui, alors l'utilisation d'un menu burger est toute indiquée !
Afin de mettre toutes les chances de votre côté, assurez-vous également que votre menu burger ressemble bien à un bouton, et pour permettre à toutes les personnes de comprendre ce qui se cache derrière, n'hésitez pas à ajouter un label juste à côté.
Les alternatives au menu burger
À l'inverse, si votre navigation interne repose uniquement sur votre menu (ce qui n’est pas très conseillé), il serait plus sage de ne pas cacher son contenu.
Voici quelques idées alternatives au menu burger pour mobile :
- Tabs (onglets)
- Icônes (assurez-vous qu'elles soient compréhensibles par tous.te.s)
- « More » / « Plus »
- Scroll horizontal
- Dropdown
- Mise en place d'un menu principal + d'un menu burger pour la navigation secondaire
Bon, mais alors, burger ou pas burger ?
En conclusion, il n'y a pas de solution universelle. Tout dépend de votre projet, des contraintes, du contenu des pages internes et de leur structure... A vous d'analyser votre site web et de choisir la meilleure solution. Comme dans tout projet, c'est l'articulation entre votre cible et vos objectifs qui vous dictera la bonne marche à suivre.
Soyez à l'écoute des besoins de vos utilisatrices et utilisateurs et ils vous le rendront bien !
Commentaires
Merci pour ce sujet.
Par contre je ne vois aucune source qui justifie d'une évolution pour 2022. Est-ce un constat uniquement personnel ?
Quand on dit "de nombreuses études" dans un article, il convient de citer ses sources pour éviter l'effet Fake news. Surtout si elles sont nombreuses elles devraient être facile à partager. ?
Voici une étude/article de 2016, mais je nuancerais les stats qui ont évoluées dans le sens de la reconnaissance.
https://www.nngroup.com/articles/hamburger-menus/
Les alternatives comme le menu explicite en pieds d'écran ont leurs défauts comme une limite de places mais sont également parfois mal compris par les utilisateurs et utilisatrices car amène la confusion entre web et application, même si la découvrabilité est en général meilleure.
Bonne journée ?
Bonjour,
La plupart des apps ou versions mobiles utilisent encore le menu burger en 2022. Souvent l'icone est adaptée (on ne retrouve pas toujours les 3 barres horizontales empilées). Amha c'est bien l'emplacement, plus que le symbole même du menu burger, qui est aujourd'hui attendu par l'utilisateur non ?
Bonjour,
si l'auteur de l'article devait donner toutes les sources sur le menu burger, la liste serait longue. L'article est relativement neutre. Voici un lien critique, pas des moindres :
https://www.malabardesign.fr/de-lutilisation-du-hamburger/ où on apprend que Facebook l'a abandonné (je n'ai pas vérifié, je n'y suis pas).
Pour ma part, en desktop, c'est non, sans ambiguïté. Pour les mobiles, j'ai un site avec un menu en Scroll horizontal en haut de page. Un autre site avec une barre située en bas d'écran, un menu burger au milieu et deux icônes de chaque côté pour les contacts mail et tél. La barre apparaît quand on remonte sur la page, comme les menus des applications, et plus rien n'est installé sur le haut de la page, si ce n'est le titre.
La discussion reste ouverte mais il est certain que les "tendances graphiques" ou les "partis pris" ne sont pas des arguments pertinents pour se faire une idée rationnelle.
@Geoffrey C. : Bonjour Geoffrey :)
L’article ne fait pas état d’une évolution mais permettait de faire le point sur l’utilisation du menu burger, ses limites et ses alternatives.
Concernant les sources, celle citée est en effet très appropriée et faisait partie de nos références ; d'autres sources ont également été ajoutées en bas de l'article.
Bonne journée