Concevoir une arborescence de site web : notre méthode en 6 étapes

Arborescence, menus de navigation : petit tour des définitions

Souvent confondue avec les menus de navigation, l’arborescence d’un site est pourtant un concept bien spécifique. Faire une arborescence consiste à lister de manière exhaustive les futures pages d’un site, à les classer par niveau de profondeur selon des thématiques communes, et en définir les titres et les URLs.

Les menus de navigation sont créés uniquement une fois l’arborescence définie. Il s’agit de l’organisation (et du design) des différents menus qui seront utilisables sur le site, tels que le menu principal ou le footer (pied de page), par exemple.

Un menu est censé refléter l’arborescence d’un site mais il ne lui est pas nécessairement fidèle. Selon le niveau de profondeur d’un site, un menu ne pourra pas proposer de manière exhaustive l’accès à toutes les pages du site.

Concevoir une arborescence de site en 6 étapes

Il y a une bonne et une mauvaise nouvelle. La mauvaise : il n’y a pas une méthode unique et infaillible à appliquer pour concevoir une arborescence. La bonne : selon la taille du site, ce peut être une étape particulièrement simple.

Sans surprise, la complexité d’une activité (et donc la diversité des sujets qui seront abordés sur le site) influence la complexité de la création d’une arborescence. La typologie de projet également : s’il s’agit d’une refonte (une première arborescence existe alors déjà) ou d’une création de site.

Première étape : l’immersion

La conception d’une arborescence ne peut pas débuter sans une immersion dans le projet du client. Il est nécessaire de découvrir ce que le client souhaite dire sur son site, les messages qu’il a envie de faire passer ou ce qu’il veut valoriser en priorité.

Pour s’immerger, il est important de lire le maximum de documentations qui appartiennent aux clients, pour bien connaître leur activité, leurs produits/services… Nous prenons toujours le temps de laisser la parole à l’équipe client pour qu’elle se présente avec ses mots et son approche.

Seconde étape : faire un état des lieux de l’existant

S’il s’agit d’une refonte : il est intéressant de repartir de la précédente arborescence pour questionner ce qui est pertinent, cohérent avec les objectifs du client et ce qui peut être retiré ou ajouté. Il est alors impératif de faire un état des lieux de toutes les pages existantes. Plus un site est ancien, plus il y a des surprises : des pages solitaires, des articles qui datent des débuts d’Internet… Pour obtenir une liste exhaustive des URLs existantes, nous utilisons l’outil Screaming Frog, qui “crawle”, ou “explore” en français, l’intégralité du site existant.

À savoir que nous essayons autant que possible de ne pas changer toute l’arborescence existante, si celle-ci fonctionne. En effet, trop de changements de pages/URLs impliquent des redirections, ce qui peut pénaliser le score SEO. Moins il y a de redirections, mieux c’est.

En complément, nous réalisons, lorsque c’est possible, une analyse des statistiques du site existant. Cela nous aide à repérer les pages les plus consultées, donc les pages les plus importantes pour les utilisateurs, et également celles qui ne le sont pas du tout et qui s’avèrent donc moins utiles.

Troisième étape : exploration des besoins utilisateurs

C’est à cette étape que notre positionnement UX en tant qu’agence intervient.

Une arborescence quadrille la future architecture de l’information d’un site. C’est-à-dire qu’elle détermine en partie le parcours utilisateurs : si la cible A souhaite obtenir l’information B, elle va devoir se projeter dans les pages qui l’y mèneront. C’est pour cela que la réflexion autour de l’arborescence doit prendre en compte les besoins des utilisateurs.

Pour cela, nous pouvons utiliser diverses méthodes d’exploration des besoins utilisateurs. Ce peut être des questionnaires, de l’observation usagers, des entretiens utilisateurs ou encore des focus groups. Selon ce que l’on recherche, ces méthodes sont utiles pour recueillir des informations précieuses sur la typologie d’informations recherchées sur un site, sur les attentes concernant la future interface, sur les points de friction déjà rencontrés au sein du parcours sur le site existant, le vocabulaire employé, etc.

Afin d’avoir un échantillon pertinent, nous recommandons généralement de rencontrer au moins 12 usagers, dont au moins 6 par cible. Mais ces échantillons sont à définir au cas par cas. Parlons-en ensemble !

On ne pourra pas faire plus UX qu’en laissant la parole aux utilisateurs cibles, car c’est avant tout eux qui vont utiliser le futur site.

Quatrième étape : clarifier la stratégie SEO

En parallèle, nous réalisons un petit travail de recherche pour savoir quelles pages et quels mots clés SEO intégrer à l’arborescence. Pour cela, nous utilisons particulièrement Semrush et la Google Search Console. À partir des requêtes des utilisateurs pertinentes pour le futur site, nous pouvons plus facilement déterminer les priorités de l’arborescence.

Pour aller encore plus loin, selon les ambitions du client quant au référencement naturel, nous leur proposons même de débuter le projet par un audit lexical. En plus de définir toutes les requêtes sur lesquelles se positionner et d’analyser en détails la stratégie des concurrents, elle permet de faire une photographie des positions du site dans les moteurs de recherche, en début de projet. On pourra comparer ces données quelques mois après la mise en ligne du site pour s’assurer que les évolutions vont dans le bon sens.

Cinquième étape : observation des concurrents

S’il s’agit d’une création de site, il est important de faire un premier jet d’après ce qui semble important à mettre en avant. On peut jeter un œil aux sites des concurrents pour voir si une approche revient systématiquement : nommage des pages, profondeur, catégories, etc. Nous veillons à ne pas prendre pour argent comptant le site des concurrents : un site qui se distingue dans sa navigation peut aussi être un atout, si cela ne nuit pas à l’expérience utilisateurs (car trop éloigné des usages habituels).

C’est donc à partir de tous ces éléments, arborescence existante, observations des sites des concurrents, connaissance des besoins usagers et priorités SEO, que nous commençons à réorganiser l’arborescence. Bien sûr, certaines refontes sont plus simples que d’autres. C’est là que la méthode peut différer selon la typologie de projet.

Sixième étape : le cas d’une arborescence “simple”

À l’Agence, quand nous lançons la création ou la refonte du site d’une marque dont l’activité est très ciblée, claire, nous faisons des premières propositions de notre côté avant de les montrer aux clients. Pour cela, nous mobilisons toujours plusieurs métiers pour construire une arborescence à partir de compétences complémentaires : analyse du besoin client, analyse de l’expérience utilisateur, SEO, technique (pour les URLs), et webdesign (en vue du futur menu). À cela, vient ensuite se greffer la connaissance métier et l’approche marketing et communication du client, lors de la première restitution.

Avec une arborescence, il y a rarement besoin de réinventer la roue. Il faut toujours garder en tête les grands classiques des pages de site web :

• la page d’accueil,
• la page “à propos”,
• la page “contact”,
• les mentions légales,
• le plan du site,
• la ou les pages services/produits,
• La rubrique actualités, si c’est une volonté d’en avoir une.

En partant de cette première liste (qui peut, encore une fois, être remise en question), nous allons pouvoir étoffer avec des pages plus spécifiques à l’activité de l’entreprise ou de l’organisme.

Une fois cette proposition faite, nous la présentons aux clients qui nous suggèrent des modifications, à l’occasion d’un atelier. C’est d’ailleurs toujours l’occasion d’approfondir la connaissance de l’entreprise et de son activité.

C’est parfois aussi simple que ça.

Sixième étape bis : l’atelier de tri de cartes pour une arborescence “complexe”

Quand nous avons refondu le site des Champs Libres, lieu culturel incontournable à Rennes, des milliers de pages, de ressources et d’événements ont dû être passés en revue et la construction de l’arborescence a nécessité plusieurs ateliers. Lorsque nous avons réuni 8 sites en un pour la refonte du portail web Securitas, la réflexion a de même été longue.

Pour des projets de plus grande ampleur comme ceux-ci, nous commençons la conception de l’arborescence par un atelier de co-conception. C’est très utile lorsque l’activité des clients est large, que le métier est très niché, ou qu’il y a une grande diversité de ressources à partager sur le site.

Idéalement, cet atelier se réalise en deux temps. Il doit avoir lieu une première fois avec des utilisateurs cibles, accompagnés par notre équipe LunaWeb. Puis nous le renouvelons avec l’équipe client. Côté LunaWeb, il y a le ou la cheffe de projet, le ou la designer et, la plupart du temps, l’UX Researcher qui intervient sur le projet. Cela nous permet de superposer les besoins des utilisateurs aux objectifs des clients.

Il n’est pas toujours possible de réaliser deux ateliers de tri de cartes. Il nous arrive donc de réunir utilisateurs et clients lors d’un seul atelier. De même, selon les capacités du client ou la typologie du site (petit site vitrine), il arrive que nous réalisions l’atelier de co-conception seulement avec l’équipe client.

Notre atelier préféré pour cela, c’est l’atelier tri de cartes ouvert. S’il s’agit d’une refonte, nous créons des post-it pour chaque page/URL trouvées par l’outil Screaming Frog du site existant. Nous pouvons aussi en créer pour les fonctionnalités clés du site : recherche, agenda, etc. S’il s’agit d’une création de site, nous arrivons avec des premières propositions de post-it.

À partir des post-it, ou de nouveaux que l’on créera lors de l’atelier, les clients/usagers doivent les regrouper de façon logique et spontanée. Nous restons à proximité pour les guider si besoin et les interroger sur leurs choix pour s’assurer que cela fasse sens. Il arrive qu’il y ait des post-it inclassables. Nous y reviendrons plus tard dans l’atelier.

Une fois les groupes de post-it terminés, nous essayons tous ensemble de trouver un nom à chacun de ces groupes. Ces intitulés doivent raisonner pour les utilisateurs cibles. Ces intitulés détermineront d’ailleurs l’URL, et donc le fil d’Ariane.

Finalement, nous voyons où peuvent être intégrés les “inclassables” ; à savoir qu’il vaut mieux qu’une page soit solitaire plutôt qu’elle fasse partie d’un groupe qui n’est pas pertinent.

Ce que nous gardons en tête lors d’un atelier tri de cartes pour obtenir une arborescence pertinente :

• Nous interrogeons les clients sur le contenu qui sera intégré à chaque page : aura-t-on suffisamment d’éléments pour en faire une page complète ?
• Nous visons la simplicité autant que possible : on évite un parcours sur 10 pages différentes avant de fournir l’information recherchée par l’utilisateur.
• Nous rappelons un principe fondamental : une page = un sujet. On pourra se permettre de déroger à cette règle uniquement si on a un contenu chaud très court, alors là on pourra trouver une astuce pour le réunir avec un autre contenu.
• Nous nous inspirons de ce que recherche un utilisateur : a-t-il besoin de telle information ? Lui a-t-on prévu des pages pour répondre à ses demandes ?
• Nous évitons d’aller au-delà de 4 niveaux de profondeur de pages : cela va devenir particulièrement complexe.

Une session d’atelier de tri de cartes suffit dans la plupart des cas, mais cela dépend, encore une fois, de la volumétrie des contenus existants.

À savoir aussi qu’il existe l’atelier tri de cartes fermé. La démarche est différente : nous partons des catégories pour les enrichir avec les pages pertinentes et nécessaires.

Une fois l’organisation des pages validée, nous consolidons ce travail sur l’outil MindMeister, qui nous permet de créer des arborescences visuelles claires (et colorées). Nous renvoyons cette proposition aux clients, à qui nous laissons quelques jours de réflexion afin qu’il nous fasse d’éventuels retours. Nous ajustons ensuite l’arborescence en conséquence, puis le document est validé. C’est important de prendre du recul sur les différentes étapes d’un projet de création ou de refonte de site web, et aussi de procéder par itérations.

Nous en profitons ensuite pour définir de notre côté les URLs associées aux pages. Nous nous attardons uniquement sur les mots clés pertinents et retirons les mots de liaisons, pour éviter des URLs à rallonge et faciliter l’exploration du site par les robots explorateurs (Google et IA).

Plutôt qu’un atelier tri de cartes, le même travail peut-être réalisé sur différents supports, tels qu’un tableau blanc. Ce qui est primordial, c’est que l’équipe client accroche à la méthode et ait envie de s’impliquer dans la réflexion.

Septième étape (bonus) : faire tester aux utilisateurs

Le test auprès des utilisateurs, c’est une étape que nous recommandons particulièrement pour les projets d’ampleur : regroupement de plusieurs sites en un, un site qui s’adresse à beaucoup de cibles différentes, etc.

En effet, qui de mieux que les utilisateurs pour tester, selon des scénarii précis, la logique d’une arborescence ? Pour cela, nous utilisons la méthode du tree testing. Nous l’avions appliquée pour le projet des Champs Libres. On demande aux utilisateurs de trouver une information spécifique en les confrontant à l’architecture du site : les pages sont représentées par leur simple intitulé, et les testeurs peuvent dérouler les intitulés des sous-pages. Cela permet d’analyser la logique du parcours mais aussi la clarté des intitulés choisis.

C’est quoi la suite ?

L’étape qui suit l’arborescence, c’est souvent celle de la navigation, c’est-à-dire, la conception et le design des menus de navigation : menu principal, menu secondaire (si nécessaire), menu pied de page (ou “footer”)… À partir de là, nous pouvons aussi définir ensemble les pages qui devront être maquettées, voire rédigées par nos soins.

Généralement nous profitons de l’atelier de validation de l’arborescence pour montrer une première proposition de navigation. Mais ça, ce sera peut-être le sujet d’un prochain article !

Bien sûr, nous gardons bien de côté l’ancienne arborescence et toutes les URLs qui vont avec pour faciliter la préparation du plan de redirections lorsque le site sera prêt pour sa mise en ligne. Une refonte réussie se joue aussi sur l’absence d’erreurs 404 !