Comment réussir son arborescence de site web ? Créer un menu efficace

par Août 20, 2020Ergonomie0 commentaires

Lorsque l’on refond ou crée le site internet de son entreprise, la question de l’arborescence se pose rapidement. Que faut-il y mettre ? Quel équilibre à trouver entre offrir une présentation complète dès le menu et ne pas noyer l’internaute sous les informations ? Quelles sont les grandes règles à respecter ? Autant de questions auxquelles il est parfois complexe de répondre et sur lesquelles nous allons nous pencher en vous donnant tous nos conseils pour créer une arborescence efficace pour des rubriques et un menu de site web parfaitement clairs.

Vous trouverez de nombreux articles sur la création de l’arborescence évoquant des problématiques SEO ayant pour but de vous aider à améliorer votre référencement naturel. Ce n’est cependant pas le rôle d’une arborescence qui n’est pas la même chose que l’architecture de votre site. Nous avons dédié un article à la question : quelles différences entre architecture et arborescence de site web ?

Pour vous en faire un rapide résumé, l’architecture de site web aura pour rôle la définition des adresses web, des URLs, de votre vite internet. La démarche est pûrement SEO et a pour but de vous aider à organiser le maillage interne de vos pages.

L’arborescence, de son côté, ne concerne que la présentation de votre contenu pour les internautes. Elle se matérialise par un ou plusieurs menu de navigation ainsi que les rubriques liées et ne concerne pas le référencement mais les enjeux d’UX design.

Exemple architecture

Pourquoi l’arborescence d’un site est cruciale ?

Pour réussir à réaliser une excellente arborescence, il faut avant toute chose bien comprendre son rôle et son importance. Vous saurez ainsi quels critères elle doit remplir et évaluer vos ébauches d’arborescence pour mieux les corriger par la suite.

La compréhension de votre activité

Ce rôle n’est quasiment jamais évoqué dans le cadre des enjeux liés à l’arborescence mais il est pourtant crucial selon nous. Qui ne s’est pas déjà retrouvé sur le site d’une entreprise dont-on ne comprend rien à l’activité ? C’est un grand classique. Si cela peut se résoudre à travers une meilleure hiérarchisation de l’information sur la page, des choix judicieux de contenu ou encore l’utilisation d’images ou de schéma explicatif c’est également l’arborescence qui va jouer un rôle majeur. Ce problème est souvent présent dans des sites où le menu utilise des termes trop génériques ou des termes seulement connus en interne. Or, un menu doit au premier coup d’oeil ou de survol de souris vous permettre de comprendre le périmètre d’action d’une société. 

Description de l'activité via l'arborescence de site web

Rendre accessibles les informations recherchées

Sauf parti pris atypique se justifiant dans des cas bien précis, la navigation sur votre site n’est pas censé être une expérience se vivant comme une brocante où l’on cherche avec un espoir un peu vain ce pourquoi on est venu. Le but de votre arborescence est alors de rendre facilement accessibles toutes les pages que l’internaute est susceptible de chercher. Facile à dire, bien moins facile à faire dans le cas de sites riches ! Les rubriques doivent alors être explicites sur les sous-rubriques qu’elles pourront contenir.

Menu Site Adidas

Mettre en avant vos pages stratégiques

Au-delà de donner accès aux internautes à ce qu’ils ont tendance à rechercher spontanément, votre menu et votre arborescence peuvent être un excellent moyen de pousser une page que vous souhaitez faire mettre en avant. La page contact est un exemple très classique mais on peut également penser aux pages corporates ou encore aux pages nouveautés/promotions pour un e-commerce. 

Mise en avant via menu

Ne PAS mettre en avant certaines pages

A contrario, la logique inverse est parfaitement applicable. Une bonne arborescence c’est aussi un menu qui ne montre pas certaines pages. Vous allez par exemple pouvoir faire une architecture avec énormément de pages géolocalisées, pour autant avez vous envie que votre menu de franchise soit pollué par 80 pages “restaurant + ville” ? Forcément, non ! A contrario, c’est là que l’aspect rubriquage d’une arborescence sera particulièrement intéressante et devra être pensée de manière spécifique.

Une méthodologie efficace pour créer son arborescence

Maintenant que vous avez en tête le rôle de votre arborescence et ce qui doit ressortir de cette dernière, reste à voir comment réussir sa construction. Il s’agit avant tout d’appliquer une méthodologie évitant d’opter pour une approche trop subjective afin de rationnaliser le plus possible les choix adoptés. 

Une arborescence ne peut être le fait d’une seule personne

Le cas classique est de confier la création de l’arborescence au chargé de marketing, de communication, de maintenance du site web par que l’on estime que cela relève de son domaine. Il arrive également dans d’autres cas que ça soit directement le chef d’entreprise qui prend cette décision car elle est jugée importante. Les deux approches sont à éviter. Une aborescence doit être proche des besoins de vos cibles et être compréhensible par tous. Or, une vision unique et quelqu’un du métier est souvent le pire moyen d’y parvenir. 

Interroger ses clients et prospects, directement ou non

Le meilleur moyen d’avoir des bases claires est de partir sur le retour que peuvent vous faire vos cibles. Pour cela, vous pouvez interroger vos clients mais attention : ils ne sont pas forcément représentatifs. Elargir cela à vos prospects peut être une bonne chose en leur demandant ce qu’ils cherchaient sur votre site, comment ils l’ont trouvé, les difficultés qu’ils ont connu.

Bien évidemment, procéder à cet “interrogatoire” n’est pas simple. Une solution intermédiaire est de prendre les retours auprès des personnes qui, dans votre société, sont le plus au contact de vos prospects. Ce sont généralement les commerciaux, les chargés du SAV ou encore de la réception au sens large. Des retours pertinents, ces femmes et hommes en entendent chaque jour et c’est une matière à exploiter.

Interroger ses commerciaux

S’inspirer du meilleur et du pire de la concurrence

Lorsque vous avez des concurrents directs, l’observation de leur site est extrêmement intéressante puisque vous pouvez noter ce qu’ils font de bien et ce qui vous déplaît. Vous pouvez également faire faire l’exercice à vos commerciaux. L’idée n’est bien évidemment pas de faire un copier/coller de ce que propose la concurrence mais plutôt apprendre de leurs réussites et échecs. Surtout : avoir un oeil sur comment on peut parler de votre activité tout en ayant moins d’attachement et plus de recul que si vous opériez l’exercice sur votre propre site internet. 

Rien ne vaut le test et la mise en pratique réelle

Trouver l’aborescence parfaite du premier coup est une chose complexe, même en respectant toutes les étapes conseillées lors du processus de création. A l’usage, sur un plus grand nombre d’internautes et par une typologie de visiteurs différents, de nombreuses remarques et suggestions pourront apparaître. Il ne faut donc pas penser son aborescence, et plus particulièrement votre menu, comme quelque chose de figé. Sans même parler de l’évolution de votre activité, vous pourrez être amené à opérer des modifications pour des raisons d’optimisations.

Modifier et améliorer son arborescence

Les grandes erreurs à éviter pour votre menu

Même si chaque site répond à des logiques propres et sur-mesure il y a tout de même certaines choses à éviter dans tous les cas. On évitera par exemple :

  • L’absence totale d’accès à une page contact dans le cas d’un site devant collecter des leads
  • L’utilisation exclusive de termes non compréhensibles en dehors de votre société. Bref : évitez le jargonnage interne.
  • Un menu avec trop d’entrées de premier niveau. Dans ces cas là, prévoyez un système de double ou de mega-menu.
  • Une police de texte trop petite pour votre menu (attention à l’accessibilité).
  • L’absence d’un logo cliquable ramenant à la homepage.
  • Ne pas distinguer la partie de menu active sur laquelle l’internaute se trouve.
  • Opter pour un burger menu sur desktop et pas seulement sur smartphone.
  • Proposer un moteur de recherche non performant !
  • Offrir un menu mobile trop riche et entièrement déroulé.

En excellents exemple de menu que vous pouvez suivre, nous vous recommandons celui de Decathlon pour sa version desktop et surtout mobile. On peut naviguer directement dans le menu et il est d’une richesse incroyable tout en étant très simple d’accès.

Exemple Menu Efficace

Les grandes erreurs à éviter dans sa catégorisation

Du côté des pages catégories, il existe également des choix qui sont généralement faits et qui pour autant sont quasiment systématiquement à proscrire. En voici quelques-uns :

  • “Cacher” en sous-catégories des pages pourtant très recherchées sur le site.
  • Tout mettre au même niveau, sans profondeur ou catégorisation. 
  • Ne pas avoir de catégories assez précises, et donc une idée de ce qu’il y a derrière.
  • N’inclure aucune option de navigation entre sous-catégories.

Le travail de catégorisation est ensuite encore plus à faire au cas par cas car les ramifications de services et de produits dépendent énormément de la nature de votre activité. C’est du cas par cas où même votre position pourra avoir un impact majeur.

Le mega-menu est-il une solution intéressante ? 

Devenu un incontournable sur de très nombreux site, notamment les grandes marketplace avec des centaines de milliers de références produits, le mega-menu pose encore question. Parfois contesté en SEO pour sa tendance à casser les cocons sémantiques, il offre cependant une option UX extrêmement intéressante qui est à prendre en considération.

Un mega-menu pour répondre aux problématiques

Lors de l’évocation des points cruciaux pour une arborescence, nous évoquions le fait de rendre accessibles les informations recherchées et le fait de mettre en avant vos pages stratégiques. C’est très simple pour certaines sociétés ayant un pannel de service relativement réduit, c’est cependant tout de suite plus compliqué lorsque l’offre est riche. Un exemple d’application de mega menu avec le centre de formation Academial :

Exemple de mega menu réussi

Ce site rencontre une problématique majeure : celle d’une offre de formations extrêmement riche (+ de 40) à laquelle il faut ajouter des formations spécifiques aux outils, une offre sur-mesure et la possibilité de réaliser des coaching. L’internaute recherche le plus souvent une formation très précise, par exemple une formation Facebook, or cette dernière est dans l’architecture une sous-sous catégorie de formations et de formations réseaux sociaux. Avec un mega menu, on a la possibilité de la rendre accessible de façon simple et rangée à un endroit logique.

Petit détail qui a son importance, vous pouvez constater à droite du mega-menu d’Academial un petit encart avec image d’illustration, descriptif et CTA pour télécharger les fiches formations liées aux formations réseaux sociaux sur cette capture. Cela montre une autre utilité du mega-menu : pousser autre chose que de simples entrées vers des pages. 

Le mega-menu n’est pas une solution miracle

Pour autant, il faut faire attention à ne pas attendre l’impossible du mega menu. On vous donnait l’exemple d’Academial qui, toutes pages pertinentes, souhaite pousser environ 50 items dans son menu. Certains sites font cependant face à des problématiques bien plus importantes. On pense notamment au site de la Fnac qui propose des références dans des catégories de produits incroyablement variées. Résultat, un mega-menu aux entrées très hétéroclites :

Mega Menu Marketplace

Au survol, chaque catégorie se déploie pour offrir un pannel d’entrée de menu encore plus riche mais cette fois catégorisée de manière spécifique pour l’univers sélectionné. Par exemple, dans l’univers jeux vidéos et consoles on retrouve une entrée généraliste, une par consoles, par jeux, par accessoires et ainsi de suite.

La répartition est assez logique même si du côté d’UpByWeb on a du mal à comprendre le choix de mettre en avant une première catégorie “jeux vidéo, consoles” pour ensuite mettre une catégorie “consoles” et “jeux” par la suite. Mais soit, cela reste clair et on vous montre l’exemple  :

Mega Menu Marketplat déployé

Là où les choses deviennent ridiculement complexes, c’est qu’une fois à l’intérieur de la partie “jeux vidéo” du site de la Fnac vous avez le droit à un menu sur la gauche encore plus riche et dédié à cet univers. C’est simple : la colonne est tellement longue et importante, puisqu’elle est riche et entièrement déployée par défaut, que nous avons dû vous la proposer sous forme de 3 colonnes : 

Sous Mega Menu Fnac

Encore une fois tout n’est pas parfait, le menu entièrement déplié par exemple semble davantage dicté par des contraintes SEO qu’UX. Sa richesse l’empêche d’être pertinent : à trop proposer, on ne s’y retrouve plus. Est-ce la faute du travail sur l’ergonomie du site de la Fnac ? Non, c’est simplement que face à une telle richesse d’offre le mega menu ne peut suffir pour être une solution efficace. On constate alors clairement ses limites, si il permet de proposer plus tout en triant de manière efficace, le mega menu n’a pas non plus vocation à offrir une option fiable pour donner accès à tous vos catalogues. On notera d’ailleurs que les marketplaces face à ces problématiques, la Fnac également, optent pour la solution du moteur de recherche bien plus pratique et adapté :

Barre de recherche menu

Attention cependant, comme précisé dans les erreurs courantes, rien de pire qu’un champ de recherche non performant. Il génère de la frustration !

Bref : mettre l’utilisateur au coeur de la réflexion

Si il n’y avait qu’une chose à retenir ce cet article c’est le fait de mettre l’utilisateur au coeur de votre processus de création d’arborescence. Si la phrase peut sembler bateau, elle n’est pourtant jamais appliquée et se manifeste par des exigences concrètes. Interroger et faire tester votre menu par ses futurs utilisateurs, et pas seulement par les cadres de votre entreprise par exemple. Accepter que le menu ne ressemblera pas forcément à votre vision mais aux attentes des internautes est également un point qui est généralement très difficile à faire accepter. Il faut également se dire que le travail est au final permanent et évolutif. 

Besoin d'un accompagnement UX ?

Notre agence peut vous accompagner et driver vos réflexions en matière d’UX design et d’ergonomie. Rendre la navigation 

0 commentaires

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Nos derniers articles sur l’ergonomie web

L’affordance en ergonomie web : Une base de l’UX expliquée

L’affordance en ergonomie web : Une base de l’UX expliquée

Lorsque l'on travaille dans des domaines où l'expérience utilisateur est importante, on se retrouve rapidement confronté à la notion d'affordance. Cela peut être dans le design au sens large mais également dans des applications plus précises telles que le game design...

Améliorer ses taux de conversion web avec 8 méthodes concrètes

Améliorer ses taux de conversion web avec 8 méthodes concrètes

De nombreuses entreprises souhaitent augmenter les taux de conversion de leur site web. C'est une démarche tout à fait logique, saine et bien plus R.O.Iste qu'une quête de trafic parfois bien vaine de sens. Dans certains cas, le taux de conversion est même un enjeu...

D'autres Articles ?

Retrouvez l’ensemble des articles rédigés par nos consultants. Vous trouverez surement les réponses à vos questions

Share This