{"id":11242,"date":"2019-05-27T10:30:00","date_gmt":"2019-05-27T08:30:00","guid":{"rendered":"https:\/\/graphiste.com\/blog\/?p=11242"},"modified":"2025-08-20T17:17:18","modified_gmt":"2025-08-20T15:17:18","slug":"alternative-menu-hamburger","status":"publish","type":"post","link":"https:\/\/graphiste.com\/blog\/alternative-menu-hamburger\/","title":{"rendered":"Navigation sur mobile : 4 alternatives au menu hamburger"},"content":{"rendered":"

Le menu hamburger a longtemps \u00e9t\u00e9 une solution efficace pour r\u00e9duire la taille du menu sur les interfaces mobiles. Mais plusieurs \u00e9tudes ont fini par d\u00e9montrer qu’un menu “cach\u00e9” d\u00e9gradait l’exp\u00e9rience utilisateur et compliquait parfois le chemin de navigation<\/a>.<\/p>\n

C’est ainsi que de plus en plus d’applications et sites mobiles exp\u00e9rimentent d’autres dispositions pour leur menu principal. Voyons les alternatives possibles au menu hamburger<\/a>.<\/p>\n

1. La Tab Bar<\/h2>\n

La barre d’onglets (tab bar<\/em> en anglais), vous la voyez tous les jours sur de nombreuses applications mobiles, notamment sur Facebook et Instagram.<\/p>\n

Cet agencement est id\u00e9al si vous avez un nombre limit\u00e9 de sections dans votre menu. Au-del\u00e0 de 5 sections, il est conseill\u00e9 de faire appara\u00eetre les 4 onglets les plus importants, puis de faire appara\u00eetre tout \u00e0 droite une section “Plus”. En cliquant dessus, un menu d\u00e9roulant pourra afficher d’autres options \u00e0 l’utilisateur.<\/p>\n

Selon la taille de l’interface mobile, votre menu peut afficher textuellement les onglets, ou se doter d’ic\u00f4nes. Attention toutefois, ces derniers doivent \u00eatre clairs et compris de tous. Votre utilisateur doit savoir imm\u00e9diatement quelle action il va r\u00e9aliser s’il clique dessus.<\/p>\n

Autre petite r\u00e8gle \u00e0 respecter : un onglet doit toujours \u00eatre actif automatiquement et cela doit \u00eatre visible. Sur Facebook par exemple, c’est le flux d’actualit\u00e9 qui s’affiche lorsque vous ouvrez l’application. Son ic\u00f4ne est en couleur, tandis que les autres sont en gris.<\/p>\n

\"Tab<\/p>\n

Enfin, sachez que vous avez le choix quant \u00e0 la position de votre tab bar. Si certains trouvent plus logique de garder une position en haut de l’\u00e9cran, d’autres privil\u00e9gient une barre d’onglets en bas car elle est plus accessible avec le pouce sur mobile.<\/p>\n

2. Le menu r\u00e9tractable<\/h2>\n

Le menu r\u00e9tractable est une sorte de seconde version de la tab bar avec la section “Plus”.<\/p>\n

Cette disposition consiste \u00e0 afficher autant que possible le menu sous forme textuelle et \u00e0 placer le reste dans un menu d\u00e9roulant “Plus”.<\/p>\n

Ce menu s’adapte donc directement \u00e0 la largeur de l’\u00e9cran de l’utilisateur, et plus ce dernier r\u00e9tr\u00e9cit, moins de sections apparaissent dans la barre de navigation.<\/p>\n

\"Menu<\/a><\/p>\n

Vous vous dites certainement que cette derni\u00e8re section o\u00f9 est rang\u00e9 tout ce qui ne peut plus appara\u00eetre \u00e0 l’\u00e9cran n’est pas mieux que le menu hamburger. Ce point de vue est compr\u00e9hensible, mais le menu r\u00e9tractable est une bonne alternative si les items qui restent afficher sont les plus importants. Veillez donc \u00e0 les choisir avec soin.<\/p>\n

\u00c0 lire aussi : Comment proposer la meilleure navigation sur votre site web ?<\/a><\/p><\/blockquote>\n

3. Le menu horizontal<\/h2>\n

Si votre menu contient un nombre important de sections et que vous n’arrivez pas \u00e0 les prioriser, les alternatives pr\u00e9c\u00e9dentes ne vous ont sans doute pas convaincues.<\/p>\n

Le menu horizontal est donc LA solution. L’id\u00e9e est de placer toutes vos sections sous forme textuelle et de permettre \u00e0 l’utilisateur de scroller de fa\u00e7on horizontale pour d\u00e9couvrir la suite de votre menu principal.<\/p>\n

Attention : Avec ce type de navigation sur mobile, le risque est que l’utilisateur ne comprenne pas que d’autres sections sont accessibles.<\/p><\/blockquote>\n

Pour faire comprendre qu’il est possible de scroller, deux solutions :<\/p>\n