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

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 purement 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.

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.

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é.

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.

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. 

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.

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. 

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. 

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.

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. 

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.

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 :

En excellent 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.

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 :

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.

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.

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 panel de service relativement réduit, c’est cependant tout de suite plus compliqué lorsque l’offre est riche.

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. 

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 :

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  :

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 : 

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é :

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 !

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.