L’évolution du positionnement des menus web

Retour d’expérience d’un architecte de l’information

Ce que leur déplacement raconte de notre rapport à l’information.

Le menu n’a jamais été un simple élément graphique. Son positionnement, sa forme, sa visibilité racontent comment le web pense l’accès à l’information à une époque donnée.

En 30 ans, le menu est passé de fondation structurelle à élément dissimulable, parfois au prix de la navigabilité. Cette évolution n’est pas anodine. Elle révèle un glissement profond : du web comme espace documentaire au web comme surface de marque.

Décryptage d’une transformation qui dit beaucoup sur nos choix.

Le menu comme fondation du web (1995-2010)

L’ère de la navigation explicite

Durant les 15 premières années du web grand public, le menu était une évidence structurelle.

Caractéristiques dominantes :

• Menu horizontal en haut de page
• Navigation toujours visible, persistante
• Libellés textuels explicites
• Organisation hiérarchique claire (sections/sous-sections)

Logique sous-jacente : Cette période hérite directement du logiciel de bureau et de l’imprimé structuré. Le menu incarne l’idée que « je montre la structure pour que l’utilisateur choisisse ».

Le web de cette époque est documentaire, rationnel. On cherche l’information comme on consulte une bibliothèque : en comprenant d’abord comment elle est organisée.

Exemple type : Sites institutionnels, portails d’actualité, sites éditoriaux. Le menu est le sommaire permanent du site.

Ce que cela révélait

Cette approche traduisait une conception claire du rôle du web : faciliter l’accès à l’information par la transparence structurelle.

L’utilisateur devait comprendre où il se trouvait et où il pouvait aller. Le menu était un outil cognitif avant d’être un objet graphique.

La rupture mobile : quand l’écran impose la dissimulation (2010-2015)

L’arrivée du hamburger

L’explosion de la navigation mobile a tout changé. Face à des écrans de 320px de large, le menu horizontal devenait impraticable.

Contraintes techniques nouvelles :

• Espace vertical limité
• Priorité absolue au contenu
• Navigation tactile (doigts, pas curseur)
• Temps de chargement réduits

Solution dominante : Le menu hamburger (☰), icône repliable cachant la navigation.

Glissement fondamental

Ce changement n’était pas qu’une adaptation technique. Il a transformé la philosophie de navigation :

Avant (desktop) : Structure visible, l’utilisateur navigue consciemment
Après (mobile) : Structure implicite, l’utilisateur doit chercher la navigation

Le menu passe de révélateur d’architecture à obstacle potentiel. On privilégie le contenu immédiat au détriment de la compréhension globale.

Première conséquence

Cette décision, prise pour des raisons techniques légitimes, a normalisé l’idée que la navigation peut être cachée sans conséquence.

C’était une adaptation mobile. Cela est devenu une tendance généralisée, y compris sur desktop où l’argument de l’espace ne tient plus.

Le menu centré/minimaliste : l’ère du branding (2015-2020)

Le menu comme objet de design

Parallèlement à la contrainte mobile, une nouvelle tendance émerge sur desktop : le menu centré, épuré, réduit à l’essentiel.

Caractéristiques :

• Logo centré, dominant
• Navigation réduite à 3-5 items maximum
• Menus flottants, transparents, qui disparaissent au scroll
• Typographies spectaculaires

Contexte : Sites vitrines, portfolios, agences créatives, marques lifestyle.

Ce que cela change

Le menu devient un élément marketing avant d’être un outil de navigation. La structure du site passe au second plan derrière l’identité visuelle.

Glissement cognitif : On ne montre plus comment le site est organisé. On montre comment la marque veut être perçue.

Cette approche peut fonctionner pour :

• Sites très simples (5-10 pages maximum)
• Sites orientés conversion (landing pages)
• Sites où l’exploration n’est pas l’objectif

Mais elle devient un frein cognitif majeur sur des sites riches en contenu ou à vocation informationnelle.

Exemple concret : le portfolio d’agence

J’ai audité en 2023 un site d’agence de design. Menu centré, 4 items : « Studio / Projets / Process / Contact ».

Problème : L’agence avait 40 projets, répartis sur 6 secteurs d’activité, mais aucun moyen de filtrer ou de naviguer par thématique sans passer par la page « Projets » puis scroller.

Leur taux de rebond sur la page Projets : 68%. Les utilisateurs ne trouvaient pas leur secteur et partaient.

Solution appliquée : Menu déroulant « Projets » avec sous-catégories par secteur. Taux de rebond ramené à 34% en 3 mois.

Le branding ne doit jamais primer sur l’utilisabilité.

Hamburger à droite, logo à gauche : l’inversion silencieuse

Une tendance récente et problématique

Depuis 2020, j’observe une nouvelle mode : le menu hamburger positionné à droite, le logo à gauche.

Ce qui était une norme mobile (hamburger en haut à gauche ou à droite selon les systèmes) devient un choix graphique sur desktop, souvent sans justification fonctionnelle.

Conséquences constatées :

• Utilisateurs qui cliquent sur le logo en pensant qu’il ouvrira le menu
• Navigation moins découvrable (zone de clic moins prioritaire à droite)
• Perte de cohérence avec les conventions établies

Ce qui a changé : ce ne sont pas les utilisateurs

Analyse clé : ce n’est pas l’utilisateur qui a évolué et demandé cette inversion.

Ce qui a pris le pouvoir :

• Les frameworks (certains thèmes WordPress, templates Webflow)
• Les tendances design (Dribbble, Awwwards)
• Le mimétisme entre designers

L’argument avancé : « C’est plus moderne, plus épuré. »

La réalité mesurée : C’est souvent moins performant en termes de découvrabilité et de compréhension immédiate.

Autre symptôme : la disparition des libellés textuels

J’observe aussi la généralisation d’icônes seules, sans texte :

• Icône de recherche sans le mot « Rechercher »
• Icône de panier sans indication
• Icône de menu (hamburger) sans « Menu »

Problème : Les icônes seules sont ambiguës. Le hamburger est devenu une convention, mais il reste moins explicite qu’un bouton « Menu ».

Pour les utilisateurs peu familiers du web, les seniors, les personnes en situation de handicap cognitif : c’est un obstacle réel.

Ce que disent vraiment les standards UX

Face à ces tendances, que recommandent les références en ergonomie et accessibilité ?

Nielsen Norman Group

Les études de Nielsen Norman montrent systématiquement que :

• Navigation visible = meilleure découvrabilité (taux de succès +30% sur tâches de navigation)
• Libellés textuels > icônes seules (reconnaissance instantanée vs. interprétation)
• Cohérence > originalité (les utilisateurs s’appuient sur des patterns connus)

Critères de Bastien & Scapin

Les critères ergonomiques classiques (Bastien & Scapin, référence francophone) insistent sur :

• Guidage : l’interface doit indiquer clairement les actions possibles
• Homogénéité/Cohérence : les choix de conception doivent être constants
• Compatibilité : respecter les habitudes des utilisateurs

Un menu hamburger sur desktop, dans un site riche, viole ces trois critères.

WCAG et accessibilité

Les critères d’accessibilité (WCAG) rappellent :

• Navigation cohérente (critère 3.2.3)
• Identification claire des liens et boutons (critère 2.4.4)
• Possibilité de naviguer au clavier (critère 2.1.1)

Un menu dissimulé derrière une icône sans texte pose des problèmes d’accessibilité, notamment pour les utilisateurs de lecteurs d’écran.

Tests utilisateurs récurrents

Dans mes propres tests utilisateurs (50+ sessions depuis 2020), je constate :

• 80% des utilisateurs cherchent d’abord le menu en haut à gauche ou en haut horizontal
• 65% ne cliquent pas spontanément sur un hamburger en version desktop (ils scrollent ou utilisent la recherche)
• 90% préfèrent des libellés textuels clairs aux icônes seules

Conclusion : Les tendances graphiques s’éloignent des comportements réels mesurés.

Architecturer plutôt que déplacer

Le vrai problème n’est pas « où »

Je passe beaucoup de temps avec mes clients à déconstruire cette question : « Où doit être mon menu ? »

Ma réponse systématique : Cette question arrive trop tard.

Un bon menu n’est pas « bien placé ». Il est :

• Cohérent avec l’arborescence du site (il reflète la structure informationnelle)
• Aligné avec les intentions de recherche (il guide vers ce que les utilisateurs cherchent réellement)
• Stable dans le temps (il ne change pas de place ou de forme selon les pages)
• Compréhensible sans apprentissage (un utilisateur qui arrive pour la première fois doit comprendre immédiatement)

Ce qu’on fait porter au menu

Le problème n’est pas où est le menu. Le problème est ce qu’on lui fait porter.

Symptômes classiques :

• Menu avec 12 items au même niveau (absence de hiérarchie)
• Libellés vagues (« Solutions », « Offres », « Services » sur 3 sites différents sans distinction)
• Navigation qui ne reflète pas l’usage réel (structure pensée en interne, pas côté utilisateur)
• Rubriques créées pour des raisons politiques internes, pas informationnelles

Dans ces cas : Déplacer le menu ou le cacher ne résout rien. Il faut d’abord repenser l’architecture de l’information.

Exemple : refonte d’un site institutionnel

Contexte : Organisme public, 15 services, 200 pages.

Problème initial : Menu avec 15 items (un par service), impossible à gérer. Proposition graphique : hamburger + recherche.

Mon diagnostic : Le problème n’est pas le menu. C’est l’arborescence qui reflète l’organigramme interne, pas les besoins utilisateurs.

Solution appliquée :

• Analyse des intentions de recherche (logs, enquêtes)
• Regroupement par « missions » plutôt que par « services »
• Menu restructuré en 5 grandes entrées thématiques
• Navigation secondaire dans les pages

Résultat : Menu horizontal classique, 5 items, arborescence claire. Navigation mesurée comme « facile » par 89% des utilisateurs testés (vs. 34% avant).

Recommandations claires (sans dogme)

Il n’existe pas de « bon positionnement de menu universel ». Tout dépend du contexte.

Sites documentaires, éditoriaux, riches en contenu

Recommandation : Navigation visible, hiérarchisée, persistante.

Pourquoi : L’utilisateur a besoin de comprendre l’organisation globale pour explorer efficacement. Cacher la navigation, c’est ralentir l’accès à l’information.

Exemples types : Médias, sites institutionnels, plateformes éducatives, intranets, bases de connaissances.

Sites institutionnels, publics, accessibilité prioritaire

Recommandation : Priorité absolue à la lisibilité et à la conformité WCAG.

Pourquoi : Ces sites s’adressent à tous les publics, y compris les moins familiers du web. La navigation doit être explicite, textuelle, stable.

Exemples types : Administrations, collectivités, services publics, associations.

Sites vitrines, portfolios, sites de marque

Recommandation : Navigation minimaliste acceptable si l’arborescence est simple (moins de 10 pages).

Pourquoi : L’objectif n’est pas l’exploration mais la conversion ou la mémorisation de marque. Un menu réduit peut soutenir cet objectif.

Attention : Dès que le site dépasse 15-20 pages, prévoir une navigation secondaire ou une recherche performante.

Mobile : compromis, pas effacement total

Recommandation : hamburger acceptable sur mobile, mais avec des garde-fous.

Garde-fous :

• Libellé « Menu » à côté de l’icône
• Navigation secondaire visible si le site est riche
• Recherche accessible facilement
• Fil d’Ariane sur les pages internes

Pourquoi : le mobile impose des contraintes réelles. Mais cacher la navigation ne doit pas signifier la rendre introuvable.

Règle d’or

Ne jamais déplacer un menu pour « faire moderne ».

Déplacer un menu parce que :

• Les tests utilisateurs montrent qu’il sera mieux découvert ailleurs
• L’architecture du site justifie un positionnement différent
• Le contexte d’usage impose une adaptation (ex : application métier)

Ce que cette évolution révèle

L’histoire du menu web raconte trois glissements majeurs :

1. Du documentaire au marketing
Le web est passé d’espace structuré d’information à surface de marque. Le menu a suivi.

2. De l’utilisateur au designer
Les choix de navigation sont de plus en plus guidés par l’esthétique et les tendances, moins par les comportements mesurés.

3. De la structure au contenu
On privilégie l’affichage immédiat du contenu au détriment de la compréhension de l’architecture globale.

Ces glissements ne sont pas « mauvais » en soi. Mais ils doivent être conscients, mesurés, justifiés.

En résumé : le menu comme révélateur de nos choix d’architectes

Le menu n’est jamais neutre. Sa position, sa forme, sa visibilité incarnent une philosophie de l’accès à l’information.

Ce qu’il faut retenir :

• Les tendances graphiques ne doivent jamais primer sur l’usage réel
• Un menu doit d’abord servir l’architecture, pas la mode
• Navigation visible = découvrabilité supérieure (études constantes depuis 30 ans)
• Avant de déplacer un menu, questionner l’arborescence qu’il représente

Mon rôle d’architecte de l’information : refuser les tendances quand elles nuisent à la navigabilité. Documenter les choix. Mesurer les impacts.

Le menu raconte comment nous pensons l’accès au savoir. Autant le faire avec rigueur.

Stéphane Arrami
Architecte de l’information
Penser la structure avant la surface

Concepts clés

1. La Loi de Jakob : le poids des conventions

Les utilisateurs passent la majeure partie de leur temps sur d’autres sites que le vôtre. Ils attendent que votre menu fonctionne comme ceux qu’ils connaissent déjà.

• Le principe d’apprentissage : en déplaçant le menu ou en utilisant des icônes atypiques, vous forcez l’utilisateur à un effort cognitif supplémentaire (apprentissage) avant même qu’il ne puisse accéder à l’information.
• Le coût d’interaction : chaque seconde passée à chercher le menu est une seconde de perdue pour la consommation du contenu. Si ce coût est trop élevé, l’utilisateur quitte le site (rebond).
• En résumé : l’innovation graphique sur le menu est souvent une fausse bonne idée ; la familiarité est le moteur principal de la satisfaction utilisateur.

2. Le ratio de découvrabilité (signifiers vs affordance)

Un menu doit non seulement exister, mais il doit « crier » sa fonction. C’est la différence entre ce qu’un objet peut faire et l’indice qui montre comment le faire.

• La perte du signal : le menu hamburger sur desktop est un « faible signal ». Sans le libellé textuel « Menu », l’icône ☰ possède une découvrabilité bien inférieure à une barre de navigation horizontale qui expose directement les thématiques.
• L’effet de tunnel : cacher le menu réduit la navigation à une action réactive (je cherche si j’en ai besoin) plutôt que proactive (je découvre ce que le site propose en un coup d’œil).
• En résumé : plus vous dissimulez la structure, plus vous limitez l’exploration spontanée de votre site par l’internaute.

3. La charge cognitive et le tri par l’utilisateur

L’architecture d’un menu ne doit pas refléter l’organigramme d’une entreprise, mais la structure mentale de l’utilisateur (Information Foraging).

• L’odeur de l’information (Information Scent) : l’utilisateur « renifle » les liens. Si les libellés sont vagues (« Nos solutions »), l’odeur est faible. Si les libellés sont précis (« Assurance Habitation »), l’odeur est forte et guide l’utilisateur sans hésitation.
• La Loi de Hick : plus vous proposez d’options au même niveau dans un menu, plus le temps de décision augmente de façon logarithmique. Un menu surchargé paralyse l’action.
• En résumé : un bon menu est un filtre qui réduit la complexité du site pour ne présenter que des chemins de décision clairs.

4. La hiérarchie visuelle et les zones de Balayage (F-Pattern)

Le positionnement du menu n’est pas qu’une question d’esthétique, il suit la physiologie de la lecture sur écran.

• Le balayage en F et en Z : sur desktop, l’œil humain scanne prioritairement le haut et la gauche de l’écran. Placer le menu à droite ou le cacher revient à le placer dans une « zone aveugle » lors de la première seconde de visite.
• La priorité au logo : Le logo à gauche sert de point d’ancrage et de bouton de secours (« Home »). Inverser les codes (logo au centre ou à droite) perturbe ce réflexe de survie navigationnelle.
• En résumé : Le menu horizontal classique respecte le mouvement naturel de l’œil, garantissant que la structure du site est la première information traitée par le cerveau.

Cas d’étude : L’esthétique immersive ou le menu comme « objet de design »

Dans le secteur du luxe et de la mode, le menu subit une mutation radicale : il s’efface devant l’émotion visuelle. Le choix du « tout-hamburger », même sur desktop, répond à une stratégie de branding immersif.

• Le menu comme silence visuel : en dissimulant la navigation derrière une icône minimaliste, on laisse toute la place à la photographie et à l’univers de la marque. Le site devient une vitrine de prestige plutôt qu’un catalogue documentaire.
• L’expérience du dévoilement : l’ouverture du menu en plein écran transforme la navigation en un événement graphique. La structure ne s’affiche que lorsque l’utilisateur décide activement d’explorer, scénarisant ainsi l’accès à l’information.
• Le risque de la charge cognitive : ce modèle présente un défi ergonomique réel. Une fois le menu ouvert, la multiplication des références (comme une liste exhaustive de modèles) peut atteindre les limites de la Loi de Hick, où l’abondance de choix finit par ralentir la décision.

Cette approche illustre parfaitement le glissement observé : on ne cherche plus à montrer comment le site est organisé pour faciliter la recherche, on priorise l’identité de marque. C’est un pari sur l’engagement émotionnel du visiteur au détriment de l’efficacité immédiate de navigation.

Ce type de site est aujourd’hui conçu comme un catalogue papier que l’on aurait tenté de transposer tel quel sur le web. On y a privilégié la surface (le branding) au détriment de la structure (l’accès à l’information).

Pour un architecte de l’information, c’est l’exemple type du site à fort taux de rebond : l’effort cognitif demandé pour simplement naviguer finit par l’emporter sur le plaisir de regarder les photos.