Architecture de l’information : Comment mettre de l’ordre dans vos menus ?

article-architecture-info-CS

Les menus sont essentiels. Ils sont le point d’ancrage, la bouée, le repère toujours accessible de celui qui se perd dans les méandres des répertoires, contenus et sous-répertoires de votre plateforme. Ils permettent de trier, de choisir, de découvrir, puis de revenir. Ils sont à la fois le filet et l’endroit duquel vos utilisateurs se lancent pour entrer dans le cœur de votre contenu. Il est donc indispensable de prendre le temps de bien les concevoir. L’architecture de l’information est la discipline dédiée à cela.

Qui n’a pas connu les onglets incompréhensibles, les sous-menus de sous-menus et la frustration de perdre du temps en cherchant en vain ce que vous pensiez trouver avec facilité ? Ne pas prendre le temps de réfléchir à l’architecture de ses menus, c’est ne pas prendre le temps de réfléchir à la structure de l’information dans la solution que l’on propose. C’est donc mettre de côté la notion pourtant essentielle de parcours client et faire le choix de privilégier votre confort de conception sur le confort de l’utilisateur. C’est, en quelques mots, prendre le risque de proposer une mauvaise expérience utilisateur, perdre des leads, des conversions en ne poussant pas à son maximum la démarche qui vous a poussé à créer le service que vous proposez.

Est-ce que ce risque vaut la peine d’être pris ? C’est à vous d’en décider. Si toutefois la création de menus structurés et pertinents vous intéresse, retrouvez dans cet articles quelques conseils pour des menus conçus de façon optimale, en respectant les règles de l’architecture de l’information.

I. Restez compréhensible

Faire en sorte que vos menus soient compréhensibles va de soi mais dans les faits, les choses sont souvent plus compliquées. Ce qui est limpide pour vous ne l’est pas forcément pour vos utilisateurs qui ne connaissent pas vos produits et/ou services aussi bien que vous. Il est donc important d’être le plus clair et le plus neutre possible dans vos menus.

a. Des intitulés évidents

Quelque soit le niveau de maturité de vos utilisateurs par rapport à votre produit, il est rare qu’ils s’approchent même un peu de la connaissance que vous en avez. Imaginez un instant que vous alliez sur le site d’une marque d’aspirateur pour y trouver/benchmarker un aspirateur sans sac. Jusqu’ici tout va bien. En déroulant l’onglet aspirateur, vous ne voyez que des noms de références. Comment savoir si le Hoover 3000, le Super Duster 12 ou le Scorpion Aspiro correspondent bien à votre recherche ? Il faudra vérifier une par une les références. Imaginez maintenant qu’au lieu d’aspirateur (puisque c’est le produit proposé), vous ayez 2 entrées “aspirateur classique” et “aspirateur sans sac”. La recherche serait plus facile et la frustration moindre1. Vous auriez d’autant plus d’acheter en trouvant facilement ce que vous cherchez.

La compréhension immédiate de ce que l’on cherche permet de le trouver sans avoir à creuser. Mettez-vous à la place de l’utilisateur et facilitez-lui la recherche. Des intitulés évidents sont la voie privilégiée vers une conversion accrue, en proposant une bonne architecture de l’information.

Exemple de menu avec des intitulés évidents

Un visuel inspirant tiré de chez Netguru

b. Soyez concis (pas plus du 3ème niveau)

Outre que la navigation entre les catégories en devient périlleuse (qui n’a pas connu le menu qui se ferme lorsque l’on tente d’accéder à la sous-sous-sous-catégorie ?), Il n’est pas réellement nécessaire d’aller aussi au delà du 3ème niveau dans la conception de vos menus. Si l’on reprend le cas des aspirateurs : avec ou sans sac pourrait être la sous-catégorie. Sans sac à rotor ou à suction une sous-sous catégorie. Les précisions en sus (à désinfection thermique par exemple) devraient figurer dans votre fiche produit et/ou dans votre moteur de tri dans la mesure où elles n’auraient plus pour effet que de perturber les clients potentiels2.

Un menu précis est une bonne chose, mais un menu concis aura souvent l’avantage de permettre à vos utilisateurs d’entrer rapidement dans un certain niveau de profondeur sur votre site sans non plus le cloisonner outre mesure.

c. Balisez la navigation

Vous menus sont clairs et concis, mais vous trouvez qu’il est difficile de naviguer d’avant en arrière dans les différentes catégories. Il existe de nombreuses autres possibilités pour permettre à vos utilisateurs de ne pas trop s’égarer au cours de la navigation3.

Vous pourriez par exemple utiliser les breadcrumbs, ou fil d’Ariane en français, qui permettront à l’utilisateur de repérer toujours la catégorie dans laquelle il se situe, pour les cas où il serait perdu mais également où il voudrait y revenir et plonger plus avant dans ses recherches.

Exemple d'un Fil d'Ariane ou breadcrumbs

source : Marketingland

Pour les sites e-commerce, des carrousels proposant des produits similaires sont un bon moyen de faire découvrir votre catalogue à un utilisateur tout en gardant un niveau de granularité constant au fil de la navigation.

Il existe pour cela autant de moyens que votre imagination pourra en créer ! Gardez à l’esprit toutefois que baliser la navigation de vos utilisateurs, c’est s’assurer une rétention maximale sur votre site le temps qu’ils trouvent ce qu’ils cherchent et donc projettent une intention d’achat4.

II. Misez sur l’interaction

Plus la navigation sur votre plateforme, et a fortiori les menus, permettront aux utilisateurs d’interagir avec elle, plus ils prendront le temps de trouver ce qu’ils cherchent. Le but n’étant pas bien sûr de mettre en place un site guirlande (vous vous rappellerez peut-être notre article à ce sujet), mais bien d’assurer que chaque utilisateur ait envie de continuer à fouiller votre site pour y trouver la perle qu’il pensait dénicher, avec une architecture de l’information optimale.

a. Facilitez la manipulation

On l’a dit, il s’agit d’être clair et concis dans les intitulés. C’est également la même logique qui préside quand il faut faciliter la navigation. Pour éviter de surcharger vos utilisateurs d’information et de faire en sorte qu’ils trouvent pas à pas ce qu’ils cherchent, il existe certaines conventions qui facilitent le processus.

Les dropdowns menus, ou menus déroulants, sont parfaitement adaptés à ce titre. Ils ne divulguent le niveau d’information suivant qu’une fois que l’utilisateur en fait explicitement la “demande”. Ainsi, dans le cas de nos aspirateurs, il saura dans un premier temps qu’il existe des aspirateurs classiques, sans sac ou des accessoires par exemple. Ce n’est qu’en interagissant avec l’un des intitulés qu’il plongera plus avant dans sa recherche. Cela permet en tout simplicité de ne pas surcharger vos utilisateurs d’informations, tout en les guidant efficacement vers l’objet de leur recherche.

De la même façon, dans la mesure ou une partie non négligeable de ces derniers risquent d’utiliser leur mobile pour accéder à votre site, il est indispensable de penser en amont à la mise en place d’une version responsive de votre menu (menu hamburger ou même simplement la mention “menu” bien visible5) permettant à vos utilisateurs de naviguer facilement quelque soit la plateforme.

b. Utilisez des repères simples : les icônes, les couleurs et les contrastes

Quelque soit la situation, il est plus facile de naviguer quand on a des repères. Cela vaut également bien entendu pour les plateformes digitales6.

Il existe de nombreuses conventions d’architecture de l’information pour le Web et les App. Inspirez-vous en ! Il est bien plus facile par exemple de symboliser l’endroit de la connexion par une icône de personne. C’en est de même pour le panier (icône de panier) et la recherche (icône de loupe). Il existe d’ailleurs de nombreuses banques d’icônes gratuites que vous pouvez utiliser (la plus connue ici). Pensez par contre, dans la mesure du possible, à accompagner l’icône de texte, qui facilite la compréhension pour les utilisateurs.

Un menu extrêmement clair

Apple, toujours simple et efficace

N’hésitez pas également à jouer des couleurs et des contrastes pour séparer les différentes catégories ou indiquer à l’utilisateur où il se trouve dans la navigation. On se répète mais une navigation simplifiée, intuitive, permettra à votre utilisateur de trouver facilement ce qu’il souhaite et, par conséquent, d’être en disposition d’accorder toute l’attention nécessaire à votre produit/service.

c. Et pourquoi pas un sous-menu contextuel ?

Vous comprenez la nécessité de simplifier votre menu, certes. Mais, voilà. Vous proposez sur votre plateforme tellement de références qu’il vous est difficile de tout synthétiser en 3 niveaux… Il existe une solution ! Pourquoi n’utiliseriez vous pas un menu contextuel, c’est-à-dire un menu qui s’affiche uniquement lorsqu’un ou plusieurs sous-niveaux ont été déjà choisis ?

Le menu contextuel7 présente l’avantage indéniable de rajouter une couche d’information supplémentaire pour aider vos utilisateurs dans leur choix mais uniquement lorsque ceux-ci se sont déjà engagé de façon poussée dans la navigation. Pas de risque de surcharge donc. Uniquement de l’info en plus lorsque c’est nécessaire.

Un menu contextuel bien conçu

Un bel exemple sur le site de Porsche !

d. La mise à jour au fil de la navigation

Si vous êtes dans le cas dont nous venons de parler et qu’il vous est difficile de tout réduire à trois sous niveaux, il existe d’autres moyens d’alléger vos menus. La mise en place d’un menu dynamique par exemple, quoiqu’un peu plus compliquée techniquement à concevoir et à mettre en place, est un excellent moyen pour baliser le chemin de vos utilisateurs.

En adaptant le menu à l’étape de navigation où il se trouve, vous permettez à la fois à l’utilisateur de plonger dans les méandres de vos fiches produit, tout en le laissant à l’écoute, le cas échéant, des autres variantes que propose votre plateforme8. C’est un moyen très efficace de mettre en place une navigation en entonnoir bien balisée, de façon légère et dynamique.

Un menu bel exemple de menu dynamique

Source : https://blog.kameleoon.com/fr/astuces-ux-menu/

e. Jouez sur l’immersion – Les méga menus

Si toutefois aucune des solutions proposées ne devaient vous convenir, il en existe une autre. Plutôt que de proposer des menus déroulants à rallonge, vous pourriez privilégiez l’utilisation d’un méga menu, déjà plébiscitée par plusieurs acteurs proposant de très nombreuses référencessup>9.

Un méga menu bien pensé

Un bel exemple de méga menu en image sur le site de Moleskine

Dans le cas où vous feriez le choix d’utiliser un tel menu, faites bien attention toutefois à minutieusement catégoriser les différentes typologies de produits que vous proposez au risque d’apporter un niveau supplémentaire de confusion. Gardez d’ailleurs en tête que vous pouvez proposer plusieurs types de menu au fil de la navigation (sans partir dans le feu d’artifice bien entendu) en fonction de ce qui vous paraîtra le plus adapté au moment du parcours à laquelle votre page correspond.

III. Privilégiez la simplicité

On a souvent envie d’en faire plus. De rajouter l’effet qui va bien, la feature originale que tout le monde pourra remarquer et qui vous différenciera. L’intention est louable, certes, mais, souvent, le résultat l’est un peu moins. C’est une bonne démarche de rajouter systématiquement l’extra mile à votre travail, mais vous devriez toujours le faire en considération d’un autre principe : restez simple. Cela vaut non seulement pour les menus mais pour toute démarche UX que vous entreprendrez !

a. Un menu toujours discernable

Votre menu principal doit être accessible en permanence, à chaque instant de la navigation, quelque soit la plateforme ou l’appareil. C’est le pivot indispensable de votre site et le point de repère de vos utilisateurs.

Que vous soyez sur desktop, sur tablet ou sur mobile, que ce soit une app ou votre site en responsive, ne cachez jamais votre menu, même pendant le scroll. Vous risqueriez de perdre nombre d’utilisateurs qui, arrivés au bout d’une page qui ne répond pas à leur recherche, ne parviennent pas à retourner dans la navigation facilement et quittent la plateforme.

b. Une barre de recherche disponible en permanence

Aux côtés du menu, pensez également à prévoir une barre de recherche (qui peut être réduite à une icône en responsive évidemment) en permanence accessible. Les raisons sont exactement les mêmes que pour le menu10, aussi il n’y a pas lieu de s’étendre. Mais cela méritait toutefois d’être bien précisé !

c. Le “fat footer” pour aller plus en profondeur

Enfin, s’il ne s’agit pas tout à fait d’un menu tel qu’on les conçoit habituellement, le footer présente pourtant des caractéristiques communes avec ce dernier : il liste des liens permettant d’aller directement à des endroits précis de votre site ! Pourquoi donc ne pas faire en sorte d’en tirer le maximum en mettant en place un fat footer ?

En plus des traditionnels CGV, CGU et autres liens vers les réseaux sociaux, vous pourriez ajouter une barre de recherche, des liens vers des services annexes que vous proposez, une page vers un chat, un lien vers vos meilleures ventes ou vos promotions. Le fat footer est un bon moyen de conserver les utilisateurs sur votre plateforme lorsqu’ils ont atteint le bas d’une page. Pensez à ce qui est vraiment essentiel et laisser votre imagination faire le reste, il peut y avoir toute la place que vous souhaitez (avec retenue tout de même !) dans votre footer.

Un exemple de fat footer

Le fat footer d’Hubspot

Nos conseils vous ont plu ? Vous pouvez retrouver tous nos articles en suivant ce lien ! Si vous souhaitez aller plus avant dans votre démarche UX, notre équipe est à votre disposition pour vous accompagner, quelque soit votre demande.


1. Comme le dit bien en conclusion le NGG dans son article : “websites with poor labels cause users to make choices that don’t match their goals, which often leads to errors. No matter how tempting cool names may seem, stay away from them: they suck.” Ref. : https://www.nngroup.com/articles/category-names-suck/

2. Jusqu’à 94% des utilisateurs partent de votre site parce qu’il est mal conçu et cela est notamment lié à la structure de votre navigation selon cette étude (cf. 6.) : https://blog.hubspot.com/marketing/why-people-leave-your-website

3. À titre d’exemple, le Routard.com a réduit de façon substantielle son taux de rebond et son taux de sortie en guidant les utilisateurs dans leurs recherches : https://pages.kameleoon.com/fr/ab-testing-routard-homepage

4. À ce titre : https://www.netguru.com/blog/make-them-stay-till-they-pay-10-tips-for-keeping-your-users-engaged-on-your-website

5. Ce qui pourrait être plus efficace comme le suggère cet article : https://www.nngroup.com/articles/hamburger-menus/

6. Presque 40% des utilisateurs trouvent plus rapidement et plus efficacement ce qu’ils cherchent avec des repères visuels : https://www.nngroup.com/articles/visual-indicators-differentiators/

7. Sur les menus contextuels : https://www.nngroup.com/articles/contextual-menus/ (à appliquer dans le cas d’une recherche sur site attention !)

8. Sur l’impact négatif d’intitulés en trop dans votre menu : https://www.netguru.com/blog/10-ux-tips-to-improve-website-navigation

9. Comme l’indique cet article : https://www.nngroup.com/articles/mega-menus-work-well

10. 30% des visiteurs utilisent la barre de recherche et ils convertissent 5 à 6x plus : https://conversionxl.com/blog/convert-visitors-improving-internal-site-search/