Arborescence d’un site internet : comment la construire, exemple à l’appui

Avant les couleurs, avant les textes, avant même les maquettes, il y a une question : quelles pages aura le site, et comment s’enchaînent-elles ? C’est l’arborescence, le plan du site.

Une bonne arborescence ne se remarque pas : on trouve ce qu’on cherche, sans réfléchir. Une mauvaise se sent tout de suite : on tourne en rond, on ne sait pas où cliquer, on part. Voici comment construire la vôtre.

L’arborescence, c’est quoi ?

L’arborescence est l’organisation des pages d’un site sous forme d’arbre : la page d’accueil au sommet, les grandes rubriques en dessous, puis les pages de détail. Elle détermine :

• le menu, et les mots qui y figurent ;
• les chemins que suivent les visiteurs d’une page à l’autre ;
• les adresses des pages, qui reflètent souvent la structure ;
• les liens internes entre les pages.

C’est la première étape de la conception d’un site, avant les wireframes et les maquettes.

Pourquoi elle compte pour vos visiteurs, et pour Google

Pour vos visiteurs, une arborescence claire veut dire trouver vite. Quelqu’un qui cherche vos tarifs ou votre zone d’intervention doit y arriver en un ou deux clics, sans chercher.

Pour Google, elle indique ce qui est important. Les pages proches de l’accueil et souvent reliées entre elles sont considérées comme centrales. Une page enfouie à cinq clics, que rien ne relie, a peu de chances d’être bien classée.

Une bonne arborescence prépare aussi l’avenir : elle laisse de la place pour de nouveaux services, un blog ou de nouvelles villes, sans tout réorganiser.

La méthode en cinq étapes

Voici la méthode qu’on applique sur chaque projet :

1. Lister ce que les visiteurs viennent faire. Demander un devis, voir des réalisations, vérifier une zone, réserver, comprendre un prix. Partez de leurs besoins, pas de votre organigramme.
2. Faire l’inventaire des contenus. Ce qui existe déjà, ce qui manque, ce qui peut disparaître.
3. Regrouper. Rassemblez les contenus qui vont ensemble. Le tri de cartes, avec des post-it, est très efficace : on écrit chaque contenu sur une carte et on demande à quelques clients de les regrouper.
4. Hiérarchiser. Sept entrées au maximum dans le menu principal, et pas plus de trois niveaux de profondeur pour l’essentiel.
5. Nommer avec les mots des clients. « Nos tarifs » plutôt que « Offres », « Où intervenons-nous ? » plutôt que « Couverture ».

Un exemple concret : le site d’un artisan

Prenons une entreprise de plomberie et de rénovation de salles de bain, qui intervient autour d’Annecy. Son arborescence pourrait ressembler à ceci :

• Accueil
• Services : Dépannage plomberie · Rénovation de salle de bain · Chauffe-eau et chaudière
• Réalisations : avant et après, par type de chantier
• Zone d’intervention : Annecy · Annemasse · Thonon-les-Bains
• Tarifs
• Avis clients
• Contact et devis

Chaque service a sa page, parce que chacun correspond à des recherches différentes. Les villes ont leurs pages, parce que les clients cherchent « plombier » avec le nom de leur ville. Et le devis est accessible depuis toutes les pages.

Pour un restaurant, l’arborescence est plus courte : sur le site de l’Auberge de Vandœuvres, on trouve l’accueil, la carte, la réservation, les événements, les actualités et le contact. Six entrées, et le bouton « Réserver » toujours visible.

Les règles qui évitent les impasses

Quelques principes à garder en tête :

• Aucune page orpheline : chaque page doit être reliée à au moins une autre.
• Des intitulés explicites : un visiteur doit deviner le contenu d’une page avant de cliquer.
• Un fil d’Ariane sur les pages profondes, pour savoir où l’on est et revenir en arrière.
• Un pied de page utile, qui reprend les pages importantes et les informations de contact.
• Des adresses lisibles, qui reflètent la structure : /services/renovation-salle-de-bain/.
• Pas de doublon : deux pages qui disent la même chose se font concurrence.
• De la place pour grandir : prévoyez où iront les futurs services ou le blog.

La fameuse « règle des trois clics » est moins importante qu’on le dit : un visiteur accepte de cliquer plusieurs fois s’il est sûr d’être sur le bon chemin. La clarté compte plus que le nombre de clics.

Les outils pour la dessiner

Pas besoin de logiciel compliqué :

• Du papier et des post-it, pour les premiers essais et le tri de cartes ;
• un tableur, pour lister les pages avec leur niveau, leur titre et leur adresse ;
• un tableau blanc en ligne, comme FigJam, Miro ou Whimsical, pour dessiner l’arbre et le partager ;
• des outils de plan de site visuel, qui génèrent l’arbre et parfois les premières maquettes.

L’arborescence n’est pas figée : on la revoit après les premiers tests, puis une fois le site en ligne, en regardant les pages les plus visitées et les recherches internes. Pour concevoir un site où vos visiteurs trouvent facilement l’essentiel, découvrez notre service de design UX/UI, notre guide sur la différence entre UX et UI et les étapes d’un cahier des charges de refonte.