Popularisé avec l’émergence des sites mobiles, le menu burger alimente également de nombreux sites desktop. Sur ces derniers, la raison de son utilisation ne se fait pas pour des raisons ergonomiques, mais pour des critères purement esthétiques. Et c’est là que le bas blesse…
Qu’est-ce qu’un menu burger ?
Le menu burger (ou hamburger), c’est cette petite icône, matérialisée par trois traits horizontaux, qui affiche le menu d’un site internet, au clic :
Les raisons de notre goût pour les (menus) burgers
Sur un écran de smartphone, où chaque pixel est compté, remplacer un menu contenant de nombreux éléments par cette petite icône est la solution rêvée des webdesigners pour gagner un précieux espace : le menu burger est facilement identifiable malgré sa petite taille, et accessible sans difficulté pour un clic « au doigt ».
La tendance étant plus que jamais aux designs épurés (ou flat design), la tentation de remettre le couvert pour un menu burger sur les écrans plus larges (ordinateurs, voire tablettes) est grande.
Y a-t-il un risque de perturber le bon transit de votre site ?
Pourquoi le menu burger n’est pas (toujours) la meilleure solution ?
Un engagement plus faible
« Ce qui n’est pas vu n’est pas connu ».
Le principal soucis que pose le menu burger est qu’il ne donne aucune information sur ce qu’il contient. L’internaute n’a donc aucune « tentation » à cliquer sur tel ou tel élément qui lui semblerait intéressant. La perte de trafic est conséquente. Pour poursuivre l’analogie culinaire : c’est souvent en consultant le menu d’un restaurant que nos sens commencent à s’éveiller.
Un clic supplémentaire
Vous forcez vos visiteurs à systématiquement faire au moins un clic supplémentaire pour afficher le menu, éventuellement déployer un sous-menu puis cliquer à nouveau sur la page souhaitée… Au bout de quelques pages consultées, vous imaginez bien que vos visiteurs vont vite se lasser et rendre leur tablier.
Un emplacement pas toujours facile d’accès
Enfin – mais ce n’est pas propre au menu burger – l’emplacement choisi pour son affichage n’est pas toujours idéal. De moins de 4 pouces en moyenne en 2012, les écrans des smartphones actuels tournent actuellement autours de 5 pouces (≈ 12,7 cm de diagonale). Il devient donc difficile voire impossible d’accéder d’une seule main aux éléments placés en haut de l’écran :
Aperçu de la difficulté d’accès aux différentes zones de l’écran d’un téléphone portable (de taille standard, pour un droitier)
C’est pourquoi de plus en plus de sites optent pour un menu placé… en bas de l’écran. Cela peut être déstabilisant au début, car ce n’est pas habituel, mais la navigation s’en trouve nettement facilitée !
Quelles-sont les alternatives ?
Un menu burger, mais uniquement pour les pages secondaires
Votre contenu principal ne devrait pas être caché ! Si vous optez pour le menu burger, placez des accès directs vers vos contenus les plus importants (boutons, encarts mis en exergue…). Les pages secondaires peuvent être placées dans le menu burger, à la manière du site mobile d’Uber, qui laisse la part belle à sa fonction première : trouver un conducteur. Les pages annexes prennent place dans le menu burger.
La tab bar (barre d’onglets)
Très efficace lorsqu’il y a peu d’éléments à afficher, le menu tab permet de conserver une esthétique épurée tout en donnant un aperçu (complet ou non) des rubriques principales de votre site. Accompagnée d’icônes, elle met en avant vos contenus principaux. Cette solution est idéale lorsque le site comporte peu de sections : les 4 principales seront affichées en permanence, les suivantes prendront place dans un 5e éléments intitulé « Plus », fonctionnant comme un menu burger.
Le menu horizontal
Tirant profit du défilement latéral intuitif sur mobile (le fameux swipe, avec le pouce), le menu horizontal permet d’afficher dans une zone relativement restreinte un nombre plus important d’éléments.
Attention toutefois à bien donner une indication visuelle de la présence d’autres éléments accessibles, pour que les internautes pensent à faire défiler le menu.
L’addition s’il vous plaît !
Pour résumer, le menu burger se prête tout à fait à une utilisation sur mobile, si on respecte quelques règles simples :
- Un emplacement accessible
- Une arborescence simplifiée, pour éviter la multiplication des clics
- Un accès rapide aux contenus principaux, via des accès directs
Sur écrans plus larges, le menu burger est à éviter, à moins d’y afficher des pages secondaires ou d’avoir des accès directs vers les contenus les plus importants du site. Dans le cas d’un site ayant beaucoup de contenu, on basculera alors sur un… mega-menu* !
Mais avant d’aborder cet autre sujet, digérons déjà notre menu burger.
* Type de menu déployant un panneau, souvent en pleine largeur, qui permet d’afficher simultanément plusieurs niveaux de sous-menus, de manière claire et hiérarchisée.
