Lorsqu’on lance un projet de site internet, on pense souvent en premier à son apparence : le style graphique, les couleurs, les visuels ou encore les fonctionnalités à intégrer.
Avant de travailler sur le design, il faut pourtant déterminer quelles pages composeront le site et comment elles seront organisées.
C’est précisément le rôle de l’arborescence : représenter la structure du site et les relations entre ses différents contenus.
Lorsqu’elle est claire, les visiteurs trouvent plus facilement ce qu’ils cherchent et les contenus importants pour votre activité occupent une place cohérente.
Elle permet ainsi de poser les bases de l'architecture du site avant de travailler sur les interfaces.
Commencez par vous poser deux questions : qu’attendez-vous de votre site et que viennent y chercher vos visiteurs ?
La définition de vos objectifs figure généralement parmi les premiers éléments d’un cahier des charges web bien préparé.
Souhaitez-vous :
Ces priorités influencent directement la structure du site.
Un site conçu pour générer des prises de contact donnera une place importante aux services, aux réalisations et aux coordonnées de l’entreprise. Une boutique en ligne s’organisera plutôt autour des catégories, des fiches produits et des informations utiles avant l’achat.
Cette réflexion évite de placer tous les contenus au même niveau. Certaines pages ont plus d’importance que d’autres et l’arborescence doit traduire cette hiérarchie.
Demandez-vous ensuite pourquoi les visiteurs arrivent sur votre site.
Cherchent-ils un produit précis, un tarif, des exemples de réalisations, une réponse à une question ou vos coordonnées ?
Listez leurs principales raisons de consulter le site. Il n’est pas nécessaire de créer immédiatement des profils utilisateurs très détaillés. Quelques situations concrètes permettent déjà de mieux comprendre leurs attentes :
Dans chaque cas, le visiteur doit pouvoir identifier immédiatement la rubrique qui répond à son besoin.
Une arborescence claire améliore directement l’expérience utilisateur (UX).
Une fois les objectifs et les besoins des visiteurs identifiés, vous pouvez commencer à travailler sur la structure du site.
Listez d’abord tous les contenus disponibles ou à créer.
Pour un site existant, passez en revue les pages actuelles :
Regardez également quelles pages génèrent du trafic, lesquelles sont réellement consultées et lesquelles n’apportent plus grand-chose.
Ces informations vous aideront à décider quoi conserver, fusionner ou supprimer.
Une modification de l’arborescence peut entraîner des changements d’URL. Évitez donc de bouleverser une structure qui fonctionne sans raison précise. Lorsqu’une page change d’adresse, prévoyez la redirection correspondante.
Pour un nouveau site, la démarche est la même : commencez par recenser les pages envisagées, sans chercher immédiatement à les organiser.
Pensez aussi aux pages plus discrètes, comme les mentions légales, la politique de confidentialité, la page 404, les confirmations affichées après l’envoi d’un formulaire ou les conditions générales de vente d’un site e-commerce.
Vous pouvez également consulter les sites de vos concurrents pour repérer des contenus utiles qui manqueraient à votre première liste.
À ce stade, l’objectif est surtout d’établir un inventaire complet. Le tri viendra ensuite.
Vous pouvez maintenant regrouper les pages qui traitent de sujets proches ou qui répondent aux mêmes besoins.
Le tri par cartes se prête bien à cet exercice. Inscrivez chaque page sur un post-it ou une carte virtuelle, puis déplacez les éléments jusqu’à former des groupes cohérents. Cette méthode permet de voir rapidement quels contenus vont naturellement ensemble.
Si vous le pouvez, invitez une personne qui connaît peu le projet à participer. Son classement sera peut-être différent du vôtre, ce qui peut révéler des associations plus intuitives pour les futurs visiteurs.
Une fois les premiers groupes constitués, vérifiez que chaque page répond à un besoin précis et contient assez de matière pour exister seule.
Une bonne arborescence organise les contenus selon la logique de vos visiteurs, pas selon celle de votre entreprise.
Vous devez maintenant attribuer une place à chaque contenu.
Une arborescence comprend généralement plusieurs niveaux :
Dans cette hiérarchie, on parle aussi de pages parentes et de pages enfants. Une page "parent" regroupe plusieurs pages "enfants" qui lui sont rattachées.
Pour une boutique de vêtements, l’organisation pourrait ressembler à ceci :
Accueil
Femme
Vêtements
Robes
Vestes
Pantalons
Chaussures
Accessoires
Homme
Vêtements
Chemises
Vestes
Pantalons
Toutes les branches n’ont pas besoin d’être parfaitement symétriques. La hiérarchie doit avant tout rester facile à comprendre.
Vous avez peut-être entendu parler de la règle des trois clics, selon laquelle une information importante devrait être accessible en trois clics maximum depuis la page d’accueil. Ce principe peut aider à repérer une structure trop profonde, mais il ne constitue pas une règle absolue.
Une page accessible en quatre étapes logiques sera parfois plus facile à trouver qu’une page située à deux clics derrière des intitulés ambigus. Demandez-vous donc si une personne qui découvre le site saura naturellement où aller.
Ne confondez pas l’arborescence avec le menu. L’arborescence décrit toute la structure du site, tandis que le menu principal n’en montre généralement qu’une partie.
Vous pouvez maintenant donner une forme visuelle à la structure.
Vous n’avez pas besoin d’un outil sophistiqué pour commencer. Un schéma sur papier, des post-its ou un simple document hiérarchisé peuvent parfaitement faire l’affaire.
Placez la page d’accueil en haut, puis ajoutez les grandes rubriques, leurs sous-rubriques et les pages plus précises.
Ce schéma permet de repérer rapidement :
Profitez-en pour réfléchir aux liens possibles entre les différentes branches du site.
Dans l’exemple de la boutique de vêtements, un article intitulé « Comment choisir son manteau ? » peut renvoyer vers plusieurs catégories de produits. Une fiche produit peut aussi proposer un lien vers le guide des tailles ou vers des articles complémentaires.
Ces liens transversaux facilitent le parcours du visiteur et participent au maillage interne du site.
La première version de votre arborescence aura probablement besoin de quelques ajustements avant le passage aux maquettes ou au développement.
Présentez-la à des personnes qui connaissent peu le projet et proposez-leur des recherches simples :
Observez leur premier réflexe. Si elles hésitent souvent entre deux rubriques, emploient un autre vocabulaire ou cherchent une information au mauvais endroit, certains intitulés ou regroupements méritent d’être revus.
Vérifiez également que la structure pourra accueillir de futurs contenus. Déplacer une case dans un schéma prend quelques secondes. Réorganiser un site déjà développé demande beaucoup plus de travail.
Une structure efficace doit pouvoir doit pouvoir s’adapter à de nouveaux contenus.
Le choix de l’outil dépend de la taille du site, du nombre de pages et des personnes qui participent à la réflexion.
Pour un atelier ou une première séance de travail, le papier reste très pratique. Chaque page est représentée par un post-it que l’on peut déplacer, regrouper ou retirer.
Cette méthode convient particulièrement aux ateliers collectifs. Elle permet de se concentrer sur la structure sans passer du temps à mettre en forme un document qui changera probablement encore.
Google Sheets ou Excel sont pratiques dès que le site commence à contenir beaucoup de contenus.
Vous pouvez prévoir plusieurs colonnes :
Le tableur offre une représentation moins visuelle qu’un diagramme, mais il permet de suivre l’ensemble des pages dans un même document.
Pour représenter l’arborescence sous forme de schéma, vous pouvez utiliser un outil de mind mapping comme MindMup. Le principe de la carte mentale se prête bien à une structure composée de pages parentes et de pages enfants.
Des outils libres comme Whimsical ou Excalidraw permettent également de créer rapidement une représentation visuelle de l’arborescence, de déplacer les blocs et de faire évoluer la structure au fil des échanges.
Des solutions comme FlowMapp, Slickplan ou Octopus.do vont plus loin et sont spécialement conçues pour travailler sur la structure d’un site.
Elles peuvent être utiles pour les projets comportant beaucoup de pages, plusieurs intervenants ou des parcours utilisateurs plus complexes.
Une arborescence bien pensée rend le site plus simple à comprendre, à parcourir et à faire évoluer. En attribuant une place précise à chaque contenu, vous facilitez le travail de conception et la navigation des futurs visiteurs.
Ce travail doit être intégré au cahier des charges web, avant de passer aux wireframes, aux maquettes puis au développement.
Chez Koncept47, nous accordons une attention particulière à cette étape pour construire des sites cohérents aujourd’hui, mais aussi capables d’évoluer demain. → Parlons de votre projet
