logo IAFACTORY
conseil en design UX
conseil en ergonomie
architecture IA - UX
icone stratégie éditoriale

L'arborescence de site web relève des techniques de stratégie éditoriale de structuration des contenus.
Découvrez des exemples et des ressources pour organiser les contenus et construire vos arborescences de sites.

Créer une arborescence pour votre site web

Révisé en Janvier 2024

Arborescence de site web : enjeux

arborescence de site web

L'arborescence du site constitue le socle fondamental de votre projet. L'architecture de l'information et l'organisation des contenus et des fonctionnalités sont à la base de tout projet de conception de site web...

Comment construire l'arborescence de votre dispositif digital ?
Pour quels systèmes de classifications pouvez-vous opter ? Quels moyens pour sélectionner les grappes de contenus ? Quelles sont les techniques et les méthodes pour organiser les contenus de votre projet ? Quels sont les choix à opérer en matière d'architecture de l'information ? A quel moment du projet doit-on créer l'arborescence ? Quelles sont les limites de l'arborescence éditoriale ? Une arborescence est-elle vraiment utile dans votre projet ? Quelles sont les alternatives de cartographie de site ?

Vous trouverez dans cet article, un appui solide pour vous aider dans la gestion de vos problématiques éditoriales : des modèles d'arborescence à télécharger, des exemples d'arborescence de site web à visualiser, un tutoriel vidéo pour vous aider à organiser les contenus et créer une arborescence, et enfin des conseils pour vous aider dans l'organisation de vos contenus.

Ce dossier dresse aussi un panorama complet des techniques d'arborescence. Il révèle les méthodes clés de l'architecture d'information et de l'organisation de l'information. Pour comprendre tous les systèmes de classification de l'information, nous vous invitons également à lire l'article portant sur la problématique de segmentation des informations. La conception de l'arborescence relève de la stratégie éditoriale et engage des profils comme l'architecte de l'information, le designer d'interaction, mais aussi les spécialistes du design stratégique et les référenceurs SEO.

L'arborescence permet de visualiser l'architecture de l'information de votre support interactif. C'est un livrable clé du projet. Le document formel d'arborescence n'est que la partie visible du travail d'organisation des contenus. Les arborescences permettent de représenter tout type de structure de l'information. Elles restent principalement utilisées pour figurer des informatiques à travers des logiques hiérarchiques par niveaux, ce qui conduit à considérer les dispositifs digitaux comme des systèmes arborescents là où ils sont en fait des entités organiques matricielles...

L'arborescence demeure l'outil le plus populaire pour partager l'organisation générale des contenus de votre projet. Sa simplicité en fait un support de communication compris de tous. Le paradoxe de l'arborescence est qu'elle donne à voir une vision simplifiée de l'organisation des contenus qui n'est pas représentative de ce qu'est la structure réelle d'un dispositif digital. Un site est tout sauf linéaire et arborescent. Le maillage d'un support numérique ne relève pas de l'arborescence. Les contenus gagnent rarement à être cloisonnés. Les parcours ne sont pas exclusivement linéaires...

Ces considérations nous amènent à dire que l'arborescence doit être vue comme un outil de travail collaboratif basique pour échanger sur l'organisation informationnelle du projet. Ni plus, ni moins q'un document de communication. Trop de débats se cristallisent autour de l'arborescence. Les projets patinent sur ce livrable car chaque individu projette son système de classification dans la représentation de l'information. Il n'y a pas de système d'organisation parfait qui puisse faire l'unanimité systématiquement. Un système de classification s'appuie sur des normes et des conventions mais reste une affaire de culture.

Par ailleurs, la structure d'un site web relève assez peu du mode arborescent. La fixation sur l'arborescence créée un syndrome de pensée arborescente comme si le dispositif digital était un simple arbre de contenu nivelé. Il faut désacraliser les arborescences et examiner d'autres artefacts pour visualiser l'architecture de l'information d'une part, et surtout élargir les considérations aux champs disciplinaires du design de l'interaction (parcours) et du design de l'information (organisation de l'information au sein de la page)...

Définitions de l'arborescence

Quelques mots sur les définitions de l'arborescence en introduction. Nous allons voir que ce n'est pas superflu...
Il y a plusieurs expressions qui qualifient le document formel d'organisation des informations et toutes ne renvoient pas les mêmes significations...

L'arborescence est une représentation de l'organisation des contenus et des fonctionnalités d'un support numérique. Or, personne ne dit que cette organisation doit nécessairement être arborescente et hiérarchique...
L'arborescence éditoriale permet de visualiser l'architecture de l'information. L'arborescence fonctionnelle permet de visualiser le fonctionnement du site web. On peut construire des arborescences pour visualiser l'organisation des contenus comme observer l'agencement des fonctionnalités.

On parle de plan de site ou site map, d'arborescence de site web comme de site tree... Cela implique une arborescence détaillée susceptible de représenter l'intégralité des unités informationnelles du site. Dans les faits les plus courants, une arborescence ne dépasse guère plus de 3 niveaux, quand bien même le dispositif digital en compterait 5.
D'abord, pour des raisons évidentes de simplification et de communication. Ensuite parce que les concepteurs ne s'intéressent pas ou peu aux sous-niveaux... Ceci par manque de temps, de volonté ou en raison d'un manque de culture technique du sujet (ce qui n'est jamais un bon argument). Enfin, pour des limites d'encombrement : en effet, que l'on choisisse le format portrait ou le format paysage, l'arborescence compose avec les limites de page du logiciel, et aussi absurde que cela puisse paraître, cela fixe une limite à la plupart des représentations visuelles de l'organisation d'information.
Disons-le clairement : l'arborescence n'est jamais un plan du site exhaustif comme le serait un fichier sitemap XML de 6000 entrées. Ou alors, l'arborescence est un plan de site, 1 fois sur 1000, pour des projets de taille critique où les concepteurs auront fait les efforts nécessaires pour documenter, reporter, lister chaque unité de contenu au sein d'un tableau excel.

Qui est prêt, et surtout capable (!), de travailler avec une arborescence excel de 5000 lignes ? Combien d'acteurs du projet sont prêts à prendre connaissance d'une arborescence équivalente à un panneau publicitaire 4x3 ?
Cela pose la question de la complexité des systèmes d'information et revient à poser l'interrogation suivante : comment représenter des structures d'information complexes sans verser dans la pensée simplifiante ?...
Nous reviendrons sur cette question dans la partie dédiée à la complexité de la représentation visuelle.

Les locutions de type arborescence des contenus, arborescence éditoriale ou encore content map sont également souvent utilisées... Ces dernières expressions considèrent l'arborescence sous l'angle éditorial. Il est vrai que la conception de l'arborescence implique d'effectuer des choix stratégiques sur le plan de l'organisation du contenu. Tous les projets digitaux donnent à voir des contenus... mais aussi des fonctionnalités, des processus, des composants d'interface plus ou moins sophistiqués... Est-ce à dire qu'une arborescence peut présenter autre chose que des contenus ?
Assurément.

L'arborescence a aussi vocation à favoriser la visualisation de l'organisation des fonctions : arborescence fonctionnelle ou arborescence du fonctionnement. Ce type de représentation s'attache davantage à représenter la structure fonctionnelle du dispositif digital. Il s'agit de représenter visuellement les processus (processus de commande, process d'inscription), les séquences de contenus interactifs évolués dans lesquelles un contenu se donne à voir dynamiquement dans un cartouche (filme interactif, narration pédagogique...). Un autre exemple consiste à considérer le logiciel : des programmes informatiques avancés comme les logiciels de retouche d'image ou de montage vidéo mettent en scène un nombre colossal de fonctions. Une arborescence peut tout à fait convenir pour représenter les fonctions d'un logiciel... En bref, il ne faut pas cloisonner l'arborescence à l'organisation des contenus textes.

L'arborescence est un livrable du projet

L'arborescence est avant toute chose, un livrable clé dans la conduite de projet numérique. En tant que livrable, il doit être assimilable, intelligible, compréhensible. Nous développerons en quoi ces points sont un problème pour réprésenter fidèlement la structure du dispositif digital.

L’arborescence de site web canalisent toujours l’attention de nombreux acteurs du projet. En effet, l'arbo est un des premiers noeuds visible qui illustre concrètement l'avancement du projet interactif. Elle est sensible car elle met en scène la convergence entre les offres métiers et les attentes supposées identifiées des utilisateurs finaux.
L'arborescence du site web représente un risque majeur de frein et de blocage dans tout projet. C'est assez amusant si l'on considère qu'il s'agit d'un document de communication qui embarque rarement les subtilités réelles du dispositif... Toujours est-il, un temps approprié doit être prévu dans le planning du projet pour garantir la réussite de cette étape clé :
préparation, réalisation, optimisation, validation de l’arborescence...
Engager un diplomate reste une alternative à méditer :).

On peut dire les choses sans euphémisme : il peut y avoir une bonne dizaine d'allers retours pour ajuster une arborescence. Comme dit le docteur ergo :
Ta logique n'est pas ma logique.
Cela vaut pleinement dans la construction des arborescences, où chacun cherche à mettre son grain de sel, ce qui est positif dans une logique constructive, et qui l'est moins quand il s'agit de batailles entre unités d'affaire pour se positionner dans l'arborescence...

Autant le dire, c'est un travail assez pénible que de tenir compte des points de vue (pas toujours éclairés) de tous les acteurs du projet. C'est un peu dur, mais c'est vrai. Il revient à l'Architecte de l'information de canaliser tous les flux et les échanges autour de l'arborescence. Pour le meilleur et pour le pire. On arrive hélas trop souvent à des arborescences de compromis. Dans lesquelles la novlangue et le bullshit d'entreprise sont aux prises avec les contenus qui intéressent réellement les utilisateurs finaux.

Sur le fond l'architecte de l'information prend en charge ce jalon dans le respect des délais, en veillant à ce que tous les interlocuteurs du projet puissent s’exprimer sur les questions d’arborescences. Il peut également recourir à un test de tri de cartes pour évaluer l'architecture de l'information avec un panel représentatif des utilisateurs. L'IA cherche à ce que le système d'architecture de l'information soit proche des conventions d'organisation et des standards culturels. Ce qui est toujours très difficile à faire entendre.

Sur la forme, l'architecte de l'information peut être amené à matérialiser tout type d'arborescence, étant entendu que les équipes projets attendent une arborescence éditoriale structurée par niveaux et idéalement calquée sur l'organisation business de l'entreprise :). On est un peu dans la pensée magique et l'amateurisme, il faut bien l'admettre. Un système d'information, c'est tout sauf une histoire d'arbo à 2 niveaux...

Arborescence et complexité des systèmes d'information

Un système d'information est un médium relativement évolué sur le plan de l'organisation des informations, qu'il s'agisse d'un un site web, d'un logiciel, d'une application mobile, ou d'une interface d'objet connecté.
Il y a beaucoup d'éléments qui figurent à l'écran :

  • Contenus textuels...
  • Médias visuels (photo, illustration, vidéo)...
  • Médias interactifs (jeux, module avancé)...
  • Fonctionnalités basiques (partage 2.0)...
  • Modules fonctionnels enrichis (simulateur de devis)...
  • Gabarits types de pages...
  • Processus et séquences d'enchaînement d'écrans...
  • Composants d'interface...

Tous ces éléments doivent être organisés à travers l'interface, laquelle constitue un canevas ultra sophistiqué. L'ossature d'un support numérique ne repose pas que sur une organisation hiérarchique des contenus. Les parcours, les séries, les rebonds par lien, les associations, les appels de fonctions, les contenus in page représentent une structure organique qui échappe totalement à une représentation cartographique arborescente.

L'arborescence est populaire mais c'est un outil très limité pour figurer la richesse d'un dispositif digital. On peut invoquer deux raisons que nous allons développer : la rationalité limitée comme disent les économistes, et surtout la pathologie contemporaine de la pensée simplifiante développée par Edgar Morin...

Rationalitée limitée
On transpose ici la théorique économique centrée sur l'homo-economicus vers l'homo-digitus :).
Le concepteur a des ressources limitées sur le plan du temps, en matière d'informations mais surtout en termes de capacités cognitives (!). Le concepteur est un être limité pour trouver des solutions aux problèmes, n'en déplaisent aux enthousiastes (illuminés) du problem solving (mot savant pour résolution de problème)...
L'arborescence est utilisée pour des soucis d'efficacité : pas beaucoup de temps pour aller au fond des choses (pathologie de la performance), on se rabat sur un schéma basique pour représenter des informations complexes. Cherchez l'erreur :)...

Pensée simplifiante
Dans l'organisation de l'information, le concepteur et l'architecte de l'information font face à la complexité du système d'information.
Or, la complexité est un mot problème et non un mot solution. [...] La pathologie moderne de l'esprit est dans l'hyper-simplification qui rend aveugle à la complexité du réel.
Edgar Morin - Introduction à la pensée complexe.
Les propos du philosophe sont sociétaux. On peut les appliquer à l'industrie digitale.
Les équipes projets, le marketing et le monde de l'entreprise de façon plus générale ne sont aucunement favorables à ce que la complexité s'invite à la table du projet numérique.
Le paradigme de simplification et les pensées dogmatiques autour de la simplicité d'utilisation n'offrent pas d'espace aux travaux sophistiqués. L'arborescence hiérarchique est une des formes du dogme simplifiant. Il faut hélas presque accepter ce contexte et ces usages de l'industrie digitale, qui est plus que jamais fer de lance du capitalisme moderne, avec toutes les dérives que l'on connait. Le secteur digital exige des conceptions agiles, en temps réel là où le recul et l'approfondissement sont nécessaires...
La question philosophique introduite par Monsieur Morin est la suivante :
Comment envisager la complexité de façon non simplifiante ?
Nous ne sommes pas philosophes alors on se contentera de renvoyer vers les ouvrages... Essayons toutefois d'apporter quelques considérations complémentaires pour des représentations enrichies des dispositifs digitaux.

Design de l'interaction et structure arborescente

On peut commencer par évoquer les arborescences fonctionnelles pour leur capacité à illustrer les parcours d'utilisation et la structure du fonctionnement du dispositif digital.

L'arborescence du fonctionnement donne à voir l'organisation fonctionnelle et technique du projet numérique : elle permet de comprendre les interactions et les liens entre les écrans types - templates du dispositif digital. Cette visualisation de l'architecture d'information technique est importante pour la production et le développement du projet.
D'autre part, les arborescences fonctionnelles présentent des vertus pour illustrer les parcours d'utilisation et les séquences de fonctionnement impliquant des étapes.

Si l'arborescence figure les niveaux, les parcours représentent les cheminements au sein du niveau. L'arborescence fonctionnelle permet de court-circuiter la logique aplatie de l'arborescence par niveau en introduisant la notion dynamique de déplacement au sein de l'architecture de l'information.

En ouvrant l'arborescence au parcours, on travaille conjointement architecture de l'information et design de l'interaction. L'un ne va pas sans l'autre... La conception d'un dispositif digital n'est jamais une affaire de discipline cloisonnée... A la fin du compte, un site est un parcours dans une organisation de l'information plus ou moins élaborée ou réussie. Mais qu'est-ce qu'une organisation de l'information réussie ? Nous approfondirons ce point plus tard.

Arborescence et design de l'information

En parlant de décloisonnement des disciplines et d'approche transdisciplinaire, il est naturel de citer la discipline du design de l'information. Le designer de l'information ventile les éléments à l'écran et structure hiérarchiquement les informations pour chaque gabarit du support interactif. On parle de conception d'interface (UI design - user interface design). En quoi le design de l'information peut-il affecter l'architecture de l'information et l'organisation informationnelle d'un dispositif digital ?

Une page sophistiquée a les attributs nécessaires pour emmagasiner une quantité phénoménale de contenus. Or, le découpage de l'information, au moment de la création de l'arborescence, fait peu de cas du design de l'information. On considère les étiquettes d'information comme des unités autonomes qui prendront corps au sein des pages. C'est une erreur ! Une page a la capacité d'accueillir un niveau d'information pouvant correspondre à plusieurs étiquettes de l'arborescence. Un écran bien construit peut jouer le rôle d'une arborescence in page.
Combien d'arborescence considère-t-elle la capacité d'un gabarit à emmagasiner un à plusieurs niveaux de l'arborescence ?

Il ne s'agit pas que d'un discours technologique considérant les opportunités plus ou moins satisfaisantes de la technologie asynchrone AJAX. Il y a chargement à la volée, et présentation des informations à l'écran en dur. Certaines pages de Wikipédia dépassent allègrement les dizaines de milliers de mots : combien de niveaux d'arborescence cela peut-il suggérer ? Et quid de cet article : gagnerait-il à être découpé en niveaux pour en faciliter la lecture (et augmenter les revenus publicitaires :) ?

Il est tout à fait idiot de travailler l'arborescence sans considérer le design de l'information. Il est encore plus absurde de travailler le design de l'information sans considérer le design de l'interaction. Vous voyez la logique ?
Organisation des pages, parcours au sein des pages, présentation de la page sont les entités dynamiques d'un même ensemble.

Architecture de l'information et système arborescent

Il n'y pas de bonne architecture de l'information sans une prise en compte intelligente du design de l'information et du design de l'interaction. Autrement dit, l'architecture des informations, le design des interactions, le design des informations forment une triade incontournable pour organiser la structure informationnelle d'un dispositif digital.

Une architecture de l'information arborescente est une architecture de l'information imprécise. L'arborescence suggère une organisation de l'information hiérarchique par niveau. Or, il existe d'autres façons de structurer les informations d'un support interactif.

La structure d'un support digital peut être hiérarchique et basée sur des niveaux. Une architecture de l'information peut se structurer autour d'une logique matricielle comme dans les navigations à facettes. Un dispositif digital peut recourir à une structure séquentielle et linéaire par étape pour figurer les parcours qui peuvent être des contenus... Un site peut s'appuyer sur une structure analogique et associative autour du chaos des liens, des rebonds de suggestion, des associations d'idées... Un dispositif peut aussi s'appuyer sur une structure de distribution géographique de l'information.

Pourquoi faudrait-il se contenter de figurer des contenus organisés par niveaux autour d'une arborescence quand la structure d'un dispositif digital est toujours composite ? L'industrie digitale, sur ses bases, en est encore aux pithécanthropes de l'architecture de l'information. C'est mieux que rien...

Architecture de l'information et classement des informations

Puisque l'arborescence a vocation à organiser les informations, parlons des fondamentaux de l'architecture d'information. Tout système de classification repose sur des conventions culturelles et des standards. Ce sont les structures sociétales qui nous permettent d'assimiler ces groupements d'informations (langage, société, famille, amis, école, travail...). Il n'y a pas de logique universelle dans le classement des informations. Toute organisation est toujours le fruit d'un apprentissage culturel. Ce précepte est crucial.
Pour autant, quelles implications pour nous concepteurs au moment de construire une arborescence de site ?

L'architecte de l'information doit s'appuyer sur les systèmes organisationnels en place, sur les structures de l'information déjà connus, pour construire un maillage de l'information ouvert au plus grand nombre. La capacité de l'architecture de l'information à s'appuyer sur des standards de groupements et des conventions de nommage universels est un facteur clé de compréhension pour le récepteur.

L'enjeu du travail d'architecture de l'information est donc de faire en sorte que les offres d'un émetteur puissent être intelligibles côté récepteur. Cela passe par une détechnisisation des offres, par la création de groupement déjà connu, et par une utilisation de labels significatifs sans ambiguïté. L'architecte de l'information a un rôle de tampon entre l'émetteur et le récepteur.

Il n'est pas souhaitable que l'utilisateur final soit obligé d'opérer un travail de classification conséquent au moment de consulter votre dispositif digital. Cela ne veut pas dire que le dispositif doit se présenter simplement, cela signifie plutôt que le système d'organisation doit faire écho dans l'esprit du récepteur : ses codes, sa culture, ses connaissances. S'il est impossible de percer les logiques de classifications de chaque individu, il est possible de solliciter les classements universels déjà connus qui gisent au fond de chaque citoyen, consommateur, élève, étudiant.

S'il fallait dire les choses autrement, on pourrait avancer qu'il est assez contre-productif d'être iconoclaste pour incarner le rôle d'architecte de l'information. Paradoxalement, c'est un métier qui exige une immense créativité. Chez IAFACTORY, on parle de l'architecte de l'information comme un profil intuitif rationnel... Une hydre à 2 têtes :).

Arborescence et système de classification universel

Il existe toujours plusieurs façons de faire pour organiser un dispositif digital. Réciproquement, il n'y a pas de système de classification qui puisse faire l'unanimité. Le meilleur choix que puisse faire l'architecte de l'information, c'est d'utiliser les groupements déjà connus par les usagers. Si ces individus représentent une catégorie suffisamment homogène pour partager des codes culturels communs, ce sont encore et toujours les enquêtes terrains qui permettent d'appréhender les codes, les valeurs et le langage (sociologie).

Les systèmes de classifications universels sont trop nombreux pour être listés. Cela reviendrait à faire une économie de la culture. Laissons ça aux penseurs. Pour le principe, voici quelques structures organisationnelles universelles et connues de tous :

  • Organisation du monde : continent, pays, région, ville, quartier...
  • Structuration du livre : couverture, sommaire, page, mot, syllabe, lettre...
  • Ordonnancement de l'économie : agriculture, pêche, service...
  • Classement des fruits : agrumes, fruits rouges...
  • [...] Liste infinie.

Aux systèmes d'organisations culturellement acquis de tous, se greffent les systèmes de classifications personnels : ce sont ces derniers qui créent les frictions dans les échanges du projet digital, notamment autour de l'arborescence. Quand votre interlocuteur suggère des classifications personnelles, plus ceci ou moins cela.

  • L'organisation de la boîte à gant de la voiture...
  • L'agencement des dossiers de l'ordinateur...
  • La composition du tiroir de votre bureau...
  • La place des casseroles dans la cuisine...
  • Ce qui est prioritaire pour l'entreprise bidule...
  • La place de l'item X dans l'arborescence...

Ces organisations-là sont personnelles et n'ont aucune base commune susceptible d'être partagée. Si vous prenez 3 cuisines différentes, et que je vous demande de trouver les fourchettes, vous ouvrirez probablement un tiroir, mais lequel ?

Si les systèmes de classifications sont omniprésents dans notre vie, il faut admettre que seul un nombre limité d'entre eux représentent des normes établies. Le travail du concepteur est de connaître les normes et de les identifier quand il ne les connait pas : on gagne plus à s'appuyer sur des conventions établies que des logiques organisationnelles personnelles. Allez donc organiser un atelier de travail sur l'organisation avec ce concept en tête. Vous verrez à quel point l'égo reste au centre de la plupart des échanges. C'est ce qui rend le travail d'architecture de l'information si complexe, au-delà de sa complexité native intrinsèque...

Dans la continuité du point précédent, s'il est déjà difficile d'outrepasser les logiques de classifications personnelles pour un profane, imaginez dès lors les couches d'obstacles pour dépasser les logiques de classements propres au système culturel interne d'une entreprise... Dans ce cas, vous avez affaire à des individus connaissant plus ou moins bien la structure des activités de leur entreprise. Il faudra du temps pour faire admettre qu'une organisation interne des activités a nécessité un temps d'apprentissage et qu'elle sera potentiellement difficile à appréhender en dehors du cadre culturel de référence. C'est d'autant plus compliqué que beaucoup de collaborateurs d'une même entreprise peuvent projeter des visions différentes de l'organisation de leur société. Ici on touche aux problèmes des unités d'affaires. Tirer la couverture vers soi reste quelque chose d'humain :). Mais ça ne facilite pas les choses...

L'architecte de l'information doit défaire les croyances et tenter de militer pour que le business de l'entreprise ou que les offres d'une organisation soient lisibles en dehors de l'entreprise elle-même. Il est normal qu'une entreprise souhaite calquer son dispositif digital sur ses usages de classification interne. En revanche, c'est le rôle de l'équipe de conception de sensibiliser l'annonceur au fait qu'une architecture de l'information centrée sur le business - business centric est un frein au potentiel de développement des activités, tout simplement.

Arborescence et expérience utilisateur

Le fait que l'architecture de l'information gagne à être ouverte et grand public va de pair avec les considérations UX design. On peut toutefois restreindre la notion de grand public à public tout court pour le cas d'une audience bien ciblée. Dans le cadre d'un intranet, les logiques de classifications internes à l'entreprise sont admises, voire encouragées. Cela ne signifie pas que les nouveaux arrivants dans l'entreprise auront une expérience fluide et immédiatement intelligible, au contraire : ils devront apprendre la classification et la segmentation interne à l'entreprise. On parle souvent d'expérience. L'assimilation de la culture et des codes d'organisation internes est une composante importante de l'expérience professionnelle dans un domaine.

Un autre exemple concerne les sites dédiés à une communauté d'individus : IAFACTORY s'adresse aux professionnels du digital, aux porteurs de projet... Il y a un vocabulaire et des usages qui n'ont rien à voir avec la gastronomie. Je suis donc en droit de vous parler de sujets plus techniques en m'appuyant sur un référentiel lexical qui fait écho dans l'esprit de chacun d'entre vous :). IAFACTORY opte néanmoins pour une architecture de l'information très grand public sur le plan de l'arborescence...

L'arborescence doit être intelligible, accessible, lisible.
Le caractère scannable des premiers niveaux de l'architecture de l'information est un enjeu fort du design d'expérience utilisateur
, sur le plan de l'interface utilisateur. Des labels explicites permettent à l'utilisateur d'entrevoir l'objet de chaque catégorie sans avoir à les explorer...
Une architecture de l'information technique, dense, qui implique un effort important côté utilisateur, risque d'être rejetée. C'est la connaissance du public qui permet de déterminer les notions de technicité.

Arborescence, UX, design de navigation

Une navigation peu explicite et des principes de segmentation de premiers niveaux confus impliquent des interactions très limitées avec le système d'architecture de l'information. N'oublions pas que nous sommes paresseux par nature. Aucun usager ne fera d'effort conséquent pour comprendre une architecture de l'information qui se donne à voir sous sa robe technique. Une architecture très sophistiquée n'implique pas forcément une mise en forme obscure en front-office...

Si l'architecture de l'information est importante pour organiser la structure du dispositif digital, elle ne l'est plus autant sur le plan de l'utilisation de l'autre côté de l'écran. Les systèmes de navigation sont peu à peu remplacés par les assistants prédictifs : le copain Siri, les enceintes intelligentes, Google... Les performances exceptionnelles des moteurs de recherche externe créent des usages basés sur les logiques aller-retour entre le moteur de recherche et la requête. Si votre site fait partie de la recherche, tant mieux. En revanche, ne vous étonnez-plus des taux de rebond extraordinaires sur votre site. La navigation, c'est Google, du moins en France.
Attention, cela ne vous dispense pas de créer un bon système d'architecture de l'information et la jolie arborescence qui va avec...

L'arborescence a donc un rôle défensif : se prémunir du rejet côté récepteur. En effet, une architecture de l'information basée sur des standards de classification, a moins de risque d'être rejetée qu'une architecture de l'information très exclusive.
Sur le plan UX, on n'entendra jamais :
Ô, regardez comme cette architecture de l'information est limpide !
En revanche, vous entendrez volontiers :
Impossible de trouver quoi que ce soit sur ce site !
Je vais éviter de dire que c'est propre aux français même si je le pense au moins un petit peu. Voilà c'est dit.

L'architecture de l'information ne doit pas reposer ses fondamentaux sur l'arborescence, les niveaux et le design de navigation : il s'agit également de s'appuyer sur l'ergonomie incitative au sein de chaque page. Les usagers ont tendance à privilégier les liens dans la page (in page), lors de leur arrivée sur votre site. Or, une fois de plus, cet état de l'art entre design de l'interaction et design de l'information, vous ne pourrez pas le visualiser dans l'arborescence du site web.

Considérez enfin qu'en matière de parcours, le plan se déroulera rarement comme prévu. D'abord, parce que l'originalité de chaque individu se traduit par des stratégies d'utilisation et de contournement extraordinaire. Ensuite, parce que le phénomène de longue traine vous ramène un trafic plus ou moins qualifié à tous les niveaux de l'arborescence : le cas idéal de l'utilisateur qui déroule méthodiquement et scolairement les niveaux de l'arborescence du haut vers le bas est un idéal-type, un mythe, une utopie. Dans les faits la navigation au sein d'un site est absolument chaotique et relève principalement du rebond par impulsion très sèche. Les systèmes d'organisation par associations d'idées sont d'ailleurs très intéressant à ce titre pour éviter de voir l'utilisateur retourner à la case départ Google.

Voilà pour cet état des lieux sur les enjeux en matière d'arborescence de site web. Si vous avez tenu jusque-là, vous n'êtes plus très loin de la partie méthode :).

Exemples de modèles d'arborescence à télécharger

IAFACTORY vous propose des modèles d'arborescence multi-niveaux pour vous aider dans le travail de classification et de segmentation éditoriale de votre dispositif digital. Les modèles d'arborescence sont à télécharger au sein de note shop. Comme une arborescence reste un support limité (nous l'avons assez martelé), vous trouverez également des modèles de cartographies et des modèles de parcours à télécharger. Ces exemples sont disponibles en accès immédiat et sont 100% personnalisables.

Pour vous guider dans le travail de segmentation et d'architecture de l'information, vous pouvez vous appuyer sur le tutoriel vidéo arborescence et architecture de l'information, ultra complet sur les techniques d'organisation des contenus.

Objectifs de l'arborescence de site web

Visualiser l'architecture de l'information avec l'arborescence

L'arborescence figure les principes d'architecture de l'information. Son but est de permettre aux acteurs du projet de visualiser l'esquisse du système d'architecture de l'information.
L'arborescence du projet a une double vocation : communicationnelle et conceptuelle. C'est un document que tout le monde comprend. En revanche, l'arborescence, même détaillée, est rarement le reflet exact de la structure du dispositif digital. L'architecture de l'information ne se résume pas à l'arborescence. Les principes de segmentation sous-tendus doivent être explicités. Une arborescence devrait toujours être le fruit d'une stratégie éditoriale (voir méthode).

Travailler sur l'architecture de l'information c'est : énumérer, classer, organiser, hiérarchiser, mailler les contenus, les fonctionnalités, les médias, les composants d'interface...

Au-delà de ces tâches incontournables, les objectifs poursuivis par un travail de formalisation d'une arborescence sont de :

  • Favoriser les échanges entre les acteurs du projet.
  • Suggérer les principes de l'architecture de l'information.
  • Détailler et expliciter les choix réalisés en matière d'IA.
  • Créer une base d'organisation de l'information pour procéder à des tests.
  • Considérer tout le scope du système d'information et pas juste le contenu.

Les attributs d'une bonne arborescence :

  • Flexible : différents scénarios d'accès aux contenus.
  • Modulaire : adaptable à différents terminaux.
  • Evolutive : anticipation de la montée en charge informationnelle.
  • Universelle : repose sur des conventions de groupement universelles.
  • Lisible : les items facilitent le travail de classification.
  • Explicite : les labels sont significatifs.
  • Accessible : proscrire l’utilisation de jargon interne.
  • Contextuelle : prendre en compte la logique de classement des cibles.
  • Fine : précision de tous les niveaux de profondeur.
  • Séquencée : limiter la charge informationnelle dans chaque section.
  • Scannable : base homogène pour faciliter la classification.
  • Maillage : favorise les connexions contextuelles entre les thématiques.

Une arborescence bien conçue privilégie aussi les performances :

  • Maximisation de la visibilité des produits - services à forte valeur ajoutée.
  • Optimisation de l’arborescence en regard des objectifs de consultation.
  • Simplification des accès aux contenus et services prioritaires.

Sur le plan de la méthode, l'arborescence :

  • Considère les parcours d'utilisation.
  • Croise l'architecture de l'information et design de l'information.
  • Couple l'architecture de l'information au design de navigation.

Nous vous conseillons de recourir à la réalisation d’une arborescence éditoriale dans les cas suivants :

  • Segmentation éditoriale obsolescente.
  • Problème d'utilisabilité dans l'exploration de l'arborescence du site.
  • Navigation peu performante.
  • Documentation projet nulle.
  • Problématique éditoriale dense.
  • Equipe projet à fort dimensionnement.
  • Externalisation de la production.
  • votre chef vous l'a demandé :).

Exemples d'arborescence des contenus

arborescence de site web Vinci immobilier arborescence des contenus
IA Vinci immobilier
iafactory - Julien MUCKENSTURM
exemple d'arborescence fonctionnelle exemple d'arborescence fonctionnelle
ux Sécurité routière
iafactory - Julien MUCKENSTURM

Méthode : créer une arborescence

Méthodologie de l'architecture de l'information

La création d'une arborescence éditoriale et fonctionnelle présuppose un travail préparatoire : difficile d'organiser ce qu'on ne connait pas, n'est-ce pas ?

Le travail de préparation de l'arborescence prend corps dans la phase de cadrage. Les équipes de conception doivent mener deux chantiers importants. Le recueil des besoins du commanditaire et le recueil du besoin des usagers.
Il s'agit d'identifier les besoins en information côté émetteur et côté récepteur. Cette démarche d'expression des besoins se rattache aux méthodes de design d'expérience utilisateur dans lesquelles on cherche à faire converger l'offre et la demande. L'arborescence a en effet la vertu de matérialiser la proposition de valeur entre ce que l'émetteur souhaite proposer et ce que le récepteur pourra visualiser...

Qu'il s'agisse d'un projet de création de site, de refonte voire d'optimisation, l'architecte de l'information doit toujours effectuer un travail d'analyse avec les équipes projet et avec les usagers du dispositif digital (dans le cadre d'une création de support interactif il convient de les déterminer). Ce sont les sources à l'origine de toute création de système d'architecture de l'information. Nous verrons un peu plus loin que les projets de refonte et d'optimisation doivent considérer des travaux d'étude complémentaire.

Il est très important que les profils de concepteurs, de designers UX et autres architectes de l'information s'immergent au sein de la problématique éditoriale de l'émetteur, que ce soit un projet interne ou dans le cadre d'une prestation de service.
En effet, on cherche à esquisser des solutions de conception pour organiser tout ou partie des offres d'un annonceur. Il n'est pas concevable d'organiser efficacement un domaine éditorial que l'on ne maitrise pas. L'acculturaion projet ne peut être partiel. Il y a un réel travail d'appropriation, d'autant plus si le sujet est technique. Ce temps de maîtrise du sujet est incontournable et précède tout travaux d'architecture de l'information : il se fait d'abord à l'aide de documentation (livre, magazine, sites web, documentaire, film d'entreprise) et ensuite au contact des experts du sujet. Les profils qui se sentent peu à l'aise avec un domaine gagnent à ne pas se positionner sur le projet en question. Affaire de déontologie.

Recueil des besoins de l'émetteur et du récepteur

Le travail de recueil des besoins se fait en deux temps.
D'abord, avec le donneur d'ordre (annonceur, commanditaire). Dans l'expression des besoins métiers, l'annonceur précise ses attentes et ses exigences. Des réunions et des entretiens permettent aux équipes de conception de comprendre d'abord, puis d'affiner ensuite, les besoins du commanditaire. Il s'agira de poser des questions pour aider l'émetteur à accoucher de ses besoins. C'est une étape incontournable pour identifier la première typologie d'information du projet à travers une liste de contenus et de fonctions.

Dans un deuxième temps, et dans la continuité du travail de cadrage, les équipes de conception vont à la rencontre d'un échantillon représentatif de l'audience dans l'optique de recueillir le besoin côté utilisateur. Lorsque le dispositif digital existe, des appels à participation peuvent être lancés via le site avec une rétribution à la clé. S'il s'agit d'une création de site web, on pourra solliciter les services d'une agence marketing pour le recrutement ou jouer sur son réseau...
Les focus groupes et les entretiens individuels issus des techniques d'enquêtes sont les protocoles à activer pour réaliser le recueil des besoins côté utilisateur. Là-aussi, on cherche à explorer les besoins en information de la cible. Il en ressortira également une liste de contenus et de fonctions potentielles pour le projet.

L'étape de recueil du besoin peut allègrement couvrir 2 semaines, voire plus en fonction de la complexité du sujet.
A l'issue de cette phase de cadrage éditorial et fonctionnel, les équipes de conception ont une meilleure compréhension du sujet et sont en possession d'une première liste de contenus... Cette phase d'étude est un des fondamentaux du travail d'architecture de l'information.

Autres études préalables à l'arborescence

Des études complémentaires sont les bienvenues pour approfondir la phase d'analyse. Un premier type d'étude à réaliser en complément du recueil des besoins n'est autre que le benchmark. On parle ici d'analyse concurrentielle sous l'angle éditorial.

Le benchmark éditorial a vocation à explorer les stratégies éditoriales concurrentielles pour identifier le positionnement d'autres acteurs sur les plans du contenu. On prendra note des choix opérés en matière de segmentation éditoriale et de design de navigation, entre autres... Les bons analystes seront capables de reproduire les arborescences des principaux dispositifs concurrents.
Il ne s'agit absolument pas de calquer la conception du dispositif digital sur d'éventuels choix opérés par les concurrents. Le but du benchmark éditorial est d'identifier ce que font les concurrents pour guider l'annonceur dans son positionnement éditorial afin de créer un contraste et un différentiel sur le plan des contenus. La stratégie éditoriale, qui vise notamment à définir les grands axes de la politique éditoriale et des chaines de contenus à déployer, est effectivement un élément clé destiné à orienter l'arborescence...

Quand le support interactif existe, il est recommandé de réaliser un travail d'audit éditorial. L'audit éditorial recouvre différents travaux d'architecture de l'information. Le plus important est l'inventaire des contenus : il consiste à lister toutes les pages existantes du dispositif digital. L'inventaire des contenus est à la source de tous les travaux d'optimisation et de refonte d'un existant. Il peut être réalisé manuellement (recommandé) ou de manière assistée à l'aide de logiciel (screamingfrog) pour les dispositifs de taille critique. On reporte chaque page du support interactif au sein d'un tableau excel. En fonction de la profondeur des analyses, on pourra affecter de nombreux critères d'observation à chacune des pages du site : nous vous renvoyons à l'article dédié à l'inventaire des contenus (voir les travaux complémentaires à l'arbo, plus bas).

Sur la base de l'inventaire des contenus, l'architecte de l'information sera en mesure de reconstruire l'arborescence existante, comme un instantané de ce que voit l'utilisateur à un moment T. La visualisation de l'architecture de l'information du site existant est essentielle pour envisager des scénarios d'amélioration et de repositionnement.

Au-delà de l'arborescence existante, et toujours à l'aide du listing exhaustif des contenus existants, l'architecte de l'information pourra créer différentes typologies de cartographie des contenus : plan de masse des contenus, maillage interne d'une thématique... Le plan de masse des contenus est particulièrement intéressant car il permet de comparer la taille de chaque groupe de contenu au sein du dispositif digital (voir les exemples de travaux arborescence).
Pour les sites existants, il faut bien entendu utiliser les données de fréquentation comme : Google Search Console, Google Analytics, etc.

Analyse de l'arborescence

Il y a en effet un autre outil que tout analyste doit utiliser dans le cadre de l'optimisation d'une architecture de l'information : les indicateurs web analytics.
L'analyse des données de fréquentation va permettre de mettre en lumière les sections et les pages les plus visibles ainsi que les parties du site les moins visibles. Il s'agit d'abord de données quantitatives qui donnent des informations sur les faits, qu'il faudra probablement étudier de façon détaillée sur le plan qualitatif pour comprendre les raisons de tel ou tel constat. Pourquoi telle page est visible, pourquoi le taux de rebond est-il si important sur la page Y... Voici quelques-uns des principaux éléments que l'on peut observer :

  • Pages vues et part du trafic d'ensemble.
  • Temps passé.
  • Fréquentation et fidélisation. Visite. Revisite.
  • Taux de rebond (aller-retour entre le moteur de recherche et votre site).
  • Pages d'entrées.
  • Pages de sorties.
  • Référencement des pages.

L'analyse pourra mettre en lumière les parties du site les plus populaires et d'autres sections visiblement moins consultées. Des données intéressantes avant d'envisager tout scénario de refonte... Les chiffres sur la visibilité ne disent pas si le contenu est de bonne ou de mauvaise facture, mais portent généralement sur la visibilité. Or, la visibilité des contenus est au coeur de la conception d'une arborescence. Il est toujours intéressant de confronter les observations obtenues à l'aide des outils quantitatifs avec des entretiens sur le terrain (par exemple dans la phase de recueil du besoin utilisateur ou lors d'un test...).

L'analyse des performances sur la base des indicateurs analytiques gagne à être couplée à un audit SEO - search engine optimization. On s'intéresse à la sémantique et aux performances de chaque page en matière de référencement naturel. Il est ici question de la qualité des pages, de leur contenu, de la diversité des expressions sémantiques, du choix des expressions clés affectées à une page, de l'optimisation technique in-page. Voilà autant d'éléments complémentaires susceptibles d'aider l'architecte de l'information dans son travail d'analyse.

L'analyse de l'arborescence débouche sur un diagnostic de l'architecture de l'information et sur des axes d'optimisation éditoriaux. Ce bilan considère les principaux attributs de l'arborescence :
modularité, évolutivité, universalité, lisibilité, caractère explicite, charge informationnelle, accessibilité, finesse et profondeur, scannabilité, maillage...

L'architecte de l'information pourra émettre différentes recommandations. Voici quelques exemples :

  • Les opportunités de croissance éditoriale du site.
  • La réaffectation de tout ou partie des contenus.
  • La suppression ou l'archivage des contenus obsolètes.
  • L'optimisation des libellés de chaque étiquette de l'arborescence.
  • L'amélioration du design de navigation.
  • L'amélioration des sections éditoriales plus ou moins visibles.
  • La revalorisation de tout ou partie des contenus.
  • La réécriture d'articles.
  • L'optimisation SEO de tout ou partie des pages.
  • La fragmentation des sections denses.
  • L'agrégation de contenus autour de sections plus fédératrices.
  • Le découpage éditorial au sein d'un article.
  • [...]

Il s'agit là de considérations expertes sur l'architecture de l'info non basées sur les feedback des utilisateurs. A ce stade, nous ne connaissons pas de techniques permettant de soumettre des usagers à la densité d'un dispositif digital. Le tri de cartes n'est approprié que pour évaluer les labels et opérer quelques choix de regroupements sur les 2 premiers niveaux d'une arborescence.
On touche ici à une règle clé de la conception :
L'utilisateur n'est pas le concepteur [le votant ne détermine pas la politique]. Et cela n'est pas prêt de changer malgré l'idéologie UX.

Maintenant que nous avons un peu parlé du travail préparatoire, il est temps de parler de la conception et des choix d'arborescence en tant que tel :).

Conception éditoriale et arborescence

Sur le plan méthodologique, la création de l'arborescence a lieu en phase de conception. Plus particulièrement dans la conception éditoriale. Ceci nous amène à rappeler rapidement les grandes phases de conception du projet.

Un projet digital suit un cycle autour de quelques phases clés, qui, en fonction de la méthode et de l'éditeur, oscillera autour des étapes suivantes :

  • 1. Avant-projet. Cadrage. Analyse.
  • 2. Conception fonctionnelle. Conception éditoriale. Design graphique.
  • 3. Production graphique. Production éditoriale. Intégration front-end.
  • 4. Développement back-end (programmation).
  • 5. Test et recette. Optimisation. Mise en ligne.

La création de l'arborescence s'appuie sur la phase de cadrage autour des travaux d'analyse pour préparer le terrain. Envergure fonctionnelle. Envergure éditoriale. C'est cette étape qui permet de recueillir tout le matériel exploratoire avant de concevoir les solutions de conception, dont fait partie le système d'architecture de l'information.
On élabore précisément l'arborescence dans la phase de conception.

Il faut bien distinguer la conception fonctionnelle de la conception éditoriale. Pour un ensemble de facteurs culturels et historiques de l'industrie digitale, les projets sont d'abord orientés sur la dimension technologique et fonctionnelle. Le contenu reste bien souvent le parent pauvre du projet. Quelles en sont les conséquences ?
Tout d'abord, il est fréquent que la conception fonctionnelle conditionne la conception éditoriale, autrement dit que le contenu soit l'esclave du fonctionnel : la maquette fonctionnelle cadre le fonctionnement et oblige le contenu à rentrer dans la coquille, jusque-là vide. Autant le dire, bien que ces méthodes concernent la majorité des projets digitaux, elle est tout à fait contre-productive.
En effet, ce sont les contenus qui doivent conditionner le fonctionnement, et pas l'inverse !

On arrive ici au coeur du sujet : plus l'arborescence sera réalisée en amont, plus les travaux d'architecture de l'information seront complets et diversifiés, plus le fonctionnement sera en mesure de s'adapter à l'envergure éditoriale du projet. La conception éditoriale est au carrefour de la création de valeur : le contenu est roi et reste le tampon fondamental entre l'émetteur et le récepteur. Les méthodes UX n'ont pas encore bien intégrées ce facteur et les projets centrés sur les utilisateurs oublient que le contenu est d'abord issu du business, et donc de l'annonceur...

Les travaux de conception fonctionnelle restent intrinsèquement liés au système d'architecture de l'information : l'architecture de l'information impacte le design de l'interaction et inversement, et sont eux-mêmes impactés par le design de l'information. L'architecture de l'information est une triade qui considèrent l'arborescence, les parcours, les écrans (wireframes) comme les parties d'un même tout.

La matérialisation de l’arborescence éditoriale demeure un jalon clé du cycle projet. Or, il y a beaucoup de projet où le concepteur amorce la conception de l'interface (wireframing) sans avoir la moindre connaissance de l'envergure éditoriale du dispositif. Donc sans jamais avoir vu d'arborescence. Un non-sens. En effet, comment proposer de bonnes solutions de conception sans maîtriser l'envergure fonctionnelle et éditoriale du site web ?
Ce paradoxe fondamental est à l'oeuvre dans la plupart des agences digitales fabricantes de coquilles vides :
on verra plus tard pour le contenu :) !

Arborescence de contenu et périmètre éditorial

Pour créer l'architecture de l'information du site, le concepteur se base sur une liste de contenus. Cette liste de contenus est le fruit des recherches, de l'expression des besoins métiers, du recueil des besoins utilisateurs, du benchmark éditorial, des ateliers de travail avec les experts techniques d'un sujet et des recommandations des équipes éditoriales.

Le périmètre éditorial n'est pas autre chose qu'une liste de contenus. On peut les considérer comme un ensemble de petites cartes à la façon des pièces d'un puzzle. La comparaison n'est pas idéale parce que le puzzle n'a qu'une seule configuration possible, ce qui n'est pas le cas de l'architecture de l'information.

Le scope éditorial au travers de la liste des contenus constitue le matériel de base pour élaborer l'arborescence des contenus. Mais une arborescence ne figure pas que des contenus, il s'agit aussi de visualiser les composantes fonctionnelles...

Arborescence de fonctionnement et périmètre fonctionnel

Les architectes de l'information vont également considérer les listes de fonctions issues des mêmes recherches que celles effectuées pour les contenus. Le rôle des concepteurs est aussi d'imaginer et de proposer des fonctionnalités. Le périmètre fonctionnel peut donc évoluer à la faveur des inspirations des designers. Il en va de même pour les contenus qui sont des entités dynamiques...

Le périmètre fonctionnel se donne à voir à travers un inventaire fonctionnel qui va lister toutes les fonctionnalités du dispositif digital, une à une, de la plus élémentaire à la plus élaborée : fonctionnalité, module riche, interaction autonome, gabarit type, processus...

Le scope fonctionnel au travers de la liste des fonctionnalités et des modules représente la source pour dresser l'arborescence de fonctionnement. On considère ici les parcours et le design de l'interaction.

Les logiques d'organisation de l'information

Sur la base des listes de contenus et des listes de fonctionnalités, vous allez pouvoir opérer le travail d'organisation. Dans la théorie, on cherche à poser l'architecture de l'information sur des bases conventionnelles susceptibles d'être déjà connues chez le récepteur.
Dans les faits, vous avez plusieurs scénarios pour orienter l'organisation de votre dispositif digital. Les logiques organisationnelles sont intéressantes à combiner : une architecture de l'information mixant différents systèmes d'organisation offre des expériences d'utilisation plus personnalisées. Ce qui va dans le sens des conventions ergonomiques : adaptabilité de l'expérience, flexibilité de l'interface, diversité des parcours...

Pour l'ordonnancement des grappes d'informations, vous pouvez opter pour les logiques d'organisations suivantes :

  • Ordre alphabétique
    Une convention universelle. Quasiment jamais utilisée pour organiser un site. Pas assez sexy pour les marketeurs, mais ultra efficace. Un paradoxe.
  • Thématique éditoriale
    Les majeures parties des dispositifs digitaux reposent sur une organisation par thème. Les informations sont ordonnées autour de chaines éditoriales sur les principes des content channels à la manière des chaines de TV ou des stations de Radio... En matière de référencement, cette logique d'organisation correspond au siloing. Le silo est un approfondissement vertical et hiérarchique d'une thématique, du général vers le particulier. Une organisation typiquement arborescente... Est-ce pour cela que 95% des sites reposent sur des silos centrés sur le business (business centric) avec un classement hiérarchique ? Mystère et boule de gomme :).
  • Typologie
    C'est une logique d'organisation qui fait partie des thèmes. On classe l'information autour de typologie de contenus voir de formats : dossier, reportage, diaporama, photo, vidéo, podcast...
  • Tâche
    C'est également une logique organisationnelle rattachée aux thèmes. Les tâches sont souvent des actions. Par exemple, pour l'immobilier : acheter, vendre, louer...
  • Géographique
    Logique d'information organisée par lieu. Ambassadeur : Leboncoin. Géolocalisation, infos locales...
  • Profilage
    Moins de 5% de l'organisation des dispositifs se calent sur une catégorisation de l'information par audience. Les architectures de l'information profilées sont difficiles à déployer sur le plan de la conception. Adapté pour les dispositifs gouvernementaux, les formations. Organisation centrée sur l'utilisateur (user centric).
  • Association d'idées
    C'est la mode. Et l'avenir. Une organisation de l'information basée sur le caractère intuitif et humain. Proche du concept du mind-mapping. Ce sont les techniques rattachées au cocon sémantique où l'organisation fixe les préoccupations des usagers. Centré sur l'utilisateur (user centric).
  • [...]

Une bonne arborescence doit mixer toutes ces logiques d'organisation, particulièrement les thématiques et les associations d'idées.

Les logiques de parcours de l'information

On parle ici de design de l'interaction. Une architecture de l'information pose l'organisation des contenus et des fonctionnalités. Les parcours déterminent le cheminement et les déplacements au sein de l'architecture de l'information et entre les contenus. Or, l'arborescence est assez limitée pour figurer ce type d'informations, qui est pourtant une caractéristique essentielle d'un support interactif. Oui, dans support interactif, il y a bien le terme interaction.

Les concepteurs cherchent en général à déployer des parcours centraux complétés par des parcours secondaires. Il s'agit de donner différentes modalités d'accès aux contenus, soit de diversifier l'accès aux informations.

  • Parcours rationnel : séquentiel, à la main de l'utilisateur, hiérarchique.
  • Parcours guidé : assisté, par étape, pédagogique.
  • Parcours impulsif : direct, raccourcis, opportuniste.
  • Parcours associatif : indirect, rebond, chaos, aléatoire.
  • Parcours imposé : transactionnel, obligatoire, formel.
  • [...]

Ces différents parcours ont une influence sur l'architecture de l'information et donc sur l'arborescence fonctionnelle et éditoriale du projet. Les parcours d'utilisation considèrent le cheminement de l'utilisateur.
Ainsi, pour une même organisation de contenus, la structure de l'information peut prendre différentes formes :

  • Structure hiérarchique : niveau, grandeur, ordre.
  • Structure matricielle : dynamique, à la demande.
  • Structure séquentielle : linéaire.
  • Structure analogique : associative, suggestive.
  • Structure prédictive : anticipation.
  • Structure mix : un mélange de tout :).

Les logiques de classements de l'information

L'architecte de l'information est amenée à organiser les listes de contenus, mais aussi à les classer et à les ordonnancer. Il existe différents systèmes de classifications. On parle ici de priorisation et de hiérarchisation.

On peut agencer les informations autour de nombreux critères. Voici les principaux types de classements :

  • Ordre d'importance : importance business (best-seller)...
  • Ordre alphabétique : un critère de tri comme une logique d'organisation...
  • Ordre de grandeur : taille, prix, attribut, distance...
  • Popularité : item le plus vu, le plus ceci, le plus cela...
  • Pertinence : sémantique, géographique...
  • Hiérarchie : gamme, produit, général, particulier...
  • Lieu : proximité...
  • Classement personnalisé et spécifique.

Pour flexibiliser l'architecture de l'information, les concepteurs cherchent à donner les clés du classement des informations aux utilisateurs. Ce sont les systèmes de tris, voire de filtres.

Arborescence top-down et arborescence bottom-up

Les architectes de l'information ont souvent deux méthodes stratégiques pour créer l'arborescence du dispositif digital :

  • Arborescence Top down : du macro vers le micro, du haut vers le bas, du général vers le particulier.
  • Arborescence Bottom up : du micro vers le macro, du bas vers le haut, du particulier vers le général.

Dans les usages, les concepteurs privilégient l'arborescence Top down. Pourquoi ?
Parce que cette méthode ne s'intéresse qu'aux premiers niveaux. Elle permet donc un survol et un travail superficiel sur les contenus. Y concourent, le manque de temps et ou le manque de conscience professionnel. Un savant mix des deux explique cet état de fait. C'est dommage :|. La technique Top Down est puissante sur le plan stratégique. Peu adaptée pour faire entrer les contenus micro dans la structure macro dessinée par les concepteurs pressés et peu au fait de la problématique éditoriale...

Dans l'idéal, il faut privilégier la technique de l'arborescence Bottom up. Pourquoi ?
Parce que l'arborescence Bottom up du micro vers le macro repose sur une maitrise éditoriale complète et une connaissance approfondie du sujet. Chaque unité de contenu est considérée. Il n'est pas possible de survoler l'envergure éditoriale du dispositif. La technique Bottom Up relève du travail de fourmi. Elle est de nature encyclopédique. Elle est moins adaptée à la démarche marketing. Néanmoins, à un moment donné, on arrive aussi au sommet de la pyramide.

Le choix entre Arborescence Top Down ou Arborescence Bottom Up relève du même dilemme méthodologique existentiel qu'en sociologie : faut-il partir de la partie pour considérer le tout (approche inductive - individualisme méthodologique), ou faut-il partir du tout pour considérer les parties (approche déductive - holisme). Comme indiqué à plusieurs reprises, la meilleure approche consiste à opter pour les 2 :). Du haut vers le bas de l'arborescence et du bas vers le haut de l'arborescence, pour faire les ajustements au milieu !

Si vous suivez les méthodes de cadrage et de recueil de besoins, alors vous avez un pied dans le Bottom Up. Et c'est très bien comme ça !

Stratégie éditoriale et arborescence

La stratégie éditoriale revient à poser la question suivante :
sur quels critères orienter les choix d'organisation de l'information ?
Il y a différentes façons sur le plan de la méthodologie pour déterminer les premiers nœuds de la structure arborescente du dispositif digital.

D’abord, en privilégiant les exigences business côté commanditaire : positionnement, objectifs du service, objectifs du produit, objectifs transactionnels, performances visées par les offres de première importance qui ont un poids économique considérable dans le business. Le flux business offre un premier axe d'orientation pour organiser les contenus de l'arborescence...

Ensuite, en considérant les feedbacks des utilisateurs finaux : à partir des personas identifiées et crées sur des données réelles de la phase de recueil des besoins utilisateurs. On considère les attentes dites majeures, les principaux scénarios de visite, les canevas et motifs susceptibles d'apporter de la satisfaction. Le flux utilisateur est un deuxième axe qui permet d'orienter l'organisation des contenus de l'arborescence...

L'architecte de l'information a d'abord pour mission d'aider l'émetteur à organiser son business, et il apparaît tout à fait légitime que le donneur d'ordre souhaite créer une architecture de l'information centrée sur les performances économiques. D'un point de vue capitalistique, c'est souhaitable pour une entreprise.

Arborescence, storytelling et identité de marque

Dans la mesure où la navigation donne à voir les items de premier niveau de la segmentation éditoriale, elle porte des attributs de positionnement stratégique. En effet, les premiers niveaux de la navigation figurent au côté des éléments identitaires de la marque : logo, baseline, éléments de charte significatifs.

Il apparaît naturel de considérer les premiers niveaux de l'arborescence comme des outils de marketing permettant de positionner le dispositif digital. Attention, considérations marketing et communicationnelles ne signifient pas que le choix des libellés doivent être purement conceptuels ou suivre des logiques de storytelling. Au contraire. Il s'agit simplement d'avoir conscience que la barre de navigation est un élément de positionnement fort du dispositif digital.

La narration digitale et le storytelling demeurent des outils de démarcation forts pour un annonceur. Les contenus sont le premier vecteur de l'expérience utilisateur. Ils ont donc également vocation à être différenciant et contrastés par rapport à la concurrence. Il apparaît donc cohérent de considérer qu'un item de la navigation puisse permettre à l'annonceur de développer les attributs de son identité autour d'un discours de marque.

Inbound marketing et stratégie éditoriale

L'inbound marketing repose sur la logique du pull : le client vient naturellement vers l'annonceur. La création de contenus très spécifiques va permettre de générer un trafic entrant qualifié. Tel est le principe machiavélique de l'inbound marketing.

Dans ce cas, c'est l'orientation de la stratégie éditoriale et l'ajustement de l'envergure des contenus du dispositif qui deviennent les outils du marketing. Créer du contenu pour obtenir du trafic. Cela implique de diriger la ligne éditoriale vers des thématiques ciblées.

Autrement dit, la stratégie de marketing entrant peut peser lourd dans la définition des premières entrées de l'architecture de l'information.

Arborescence et SEO : siloing et cocon sémantique

Un autre poids lourd qui pèse rudement dans l'orientation de l'architecture de l'information, c'est le référencement...
Les enjeux SEO sont absolument colossaux et l'architecture de l'information est à la source d'une stratégie SEO
. Pourtant, dans l'industrie digitale, les inputs SEO interviennent souvent en phase de production. Etrange, n'est-ce pas ?

Il y a 4 points à considérer : le volume de recherche, la sémantique, les silos, les cocons... On va détailler chaque concept.

  • Volume de recherche et choix des noeuds de l'arborescence
    Comme vous le savez, une page a plus de chance d'être bien référencée en organisant sa structure et son contenu autour d'une expression clé. Dans ce cas, le choix de l'expression clé d'une page a une incidence directe sur son potentiel en matière de volume de recherche. Les experts du SEO gagnent à identifier les requêtes les plus porteuses pour chaque étiquette de contenus importante. On utilise des outils comme le planificateur de mots clés Google pour étudier les requêtes les plus génératrices de trafic. Et ensuite on choisit les expressions clés. On peut s'appuyer sur une table de correspondance et un tableau excel : pour chaque mot-clé, on liste les expressions de correspondances et on leur affecte le volume de recherche estimé.
  • Sémantique et arborescence
    L'optimisation sémantique découle du point précédent. Sur la base des expressions clés choisies, les équipes de rédaction produiront des contenus de nature à occuper un territoire sémantique horizontal (varié) et vertical (détaillé) pour chaque page clé. Plus les contenus sont précis, exhaustifs, plus l'article aura de chance de remonter du trafic qualifié sur la base du concept de longue traine.
  • Arborescences en silos
    Le silo donne de bons résultats sur le plan du SEO car il s'intègre très bien dans l'optimisation sémantique. Il s'agit de dérouler un thème du général vers le particulier, par niveau arborescent. Le maillage entre les niveaux est un facteur important de réussite de la stratégie de siloing. Très centré sur le business comme approche.
  • Arborescences en cocon sémantique
    Le cocon sémantique considère les associations d'idées sur le modèle des moteurs de suggestion. On modélise le cheminement de l'utilisateur pour créer une arborescence organique et associative qui se détache de l'organisation rationnelle par thème ou par niveau : on se situe plutôt sur des associations comme pour un mind-map.

Nombre d'items et nombre de niveaux de l'arborescence

Vous n'avez pas besoin de vous préoccuper de règles strictes sur le plan du nombre d'items. Tout simplement, il n'y en a pas. Chaque dispositif est un cas particulier. Faîtes au mieux. On ne peut raisonnablement pas organiser des systèmes d'information de taille critique autour d'un délire de 3 clics. C'est comme essayer d'être à 3 poignées de main de n'importe qui :)...

On peut oublier toutes les légendes qui tournent autour de la règle des 3 clics : une pure hérésie :)... C'est une affirmation dogmatique à rattacher au concept Less is more qui n'est pas toujours la bienvenue au moment de construire une arborescence. Quand un sujet est véritablement complexe et dense, inutile de faire une invocation Less is more. C'est tentant, mais ça ne marche pas. Cela plaira sans doute aux profils en charge de présenter le projet sous couvert du paradigme de simplification. Mais non. Un domaine vaste reste un domaine vaste. Dans ce cas l'architecture de l'information doit étendre sa voile et couvrir le périmètre éditorial au mieux, en mixant les systèmes d'organisation et en proposant des moteurs de recherche sophistiqués.

IAFACTORY a eu l'opportunité de travailler sur des dispositifs de taille critique très profonds, comme des encyclopédies de normes, des catalogues d'hypermarché ou des écosystèmes multi-sites avec beaucoup de verticalité. Voici notre constat : un utilisateur est tout à fait capable de dérouler 6 à 8 niveaux, sans erreur, dès lors que la séquence induite est claire. Cela ne veut pas dire qu'il y prenne plaisir. La clé passe toujours par un bon guidage. Par des paliers peu surchargés. Comme un fil rouge. Comme un processus de commande. Au fond, il s'agit d'un système d'organisation linéaire. Il est vrai que les usagers suivent rarement le parcours central tel qu'il est scénarisé dans le design d'interaction. Au demeurant, une séquence aplatie et linéaire étalée sur plusieurs niveaux reste tout à fait envisageable en matière d'architecture de l'information.

Un bémol cependant : à l'ère de la saturation communicationnelle maximale, et du phénomène d'infobésité des dispositifs digitaux (syndrome de la ferme à contenu), il reste sage de mesurer les volumes éditoriaux proposés aux premiers niveaux des supports numériques. Il est toujours possible de contenir l'emballement de l'envergure éditoriale d'un site, en privilégiant le qualitatif au quantitatif, et en injectant la densité au sein des pages, qui deviennent alors, des mini-sites en puissance. Principes des matriochkas : les sites dans le site. L'arborescence dans l'arborescence. L'architecture de l'information dans l'architecture de l'information. La complexité éclatée. C'est de cette façon que l'on appréhende la conception des écosystèmes digitaux multisites.

Il y a un autre principe qui peut vous guider dans l'élaboration de l'arborescence : la flexibilité. En effet, il faut garder en mémoire que l'arborescence doit être évolutive pour autoriser l'ajout de nouvelles sections éditoriales et fonctionnelles au cours du cycle de vie du produit digital et au rythme de l'évolution des offres d'une entreprise ou des contenus d'un site de presse en ligne... Un dispositif digital gagne à pouvoir emmagasiner efficacement, et de façon élégante, de nouvelles grappes de contenus, sans que cela ne génère un déséquilibre profond de la structure éditoriale du support numérique.

Pour en finir sur le nombre d'items, un dernier concept et quelques lignes directrices pour vous guider. Les ergonomes aiment citer le nombre magique de Miller qui fixeraient les capacités de notre mémoire consciente autour de 7 éléments simultanés : j'écris, j'ai chaud, les lettres sont noires, je fais quoi après, hop limite de ma mémoire... (mince, seulement 4 ! je dois être fatigué, cet article est trop long :). Dans les faits, on peut considérer ce concept comme un petit phare. Est-ce à dire qu'il faudrait se contenter de 7 items (l'étude énonce 7 plus ou moins 2 items) ? Bien sûr que non.
L'utilisateur n'a pas besoin de mémoriser votre navigation. N'oubliez pas que la navigation est morte. La navigation c'est Google...

A qui souhaite rester dans le cadre mythique des 3 clics, car il y a toujours des aficionados de la mythologie, nous proposons le système d'organisation d'architecture de l'information suivant, qui donne de très bons résultats sur le plan hiérarchique.

  • 15 items pour le niveau 1. Oui 15 max :). Oui ça marche très bien.
  • 15 items pour chaque niveau 2. Ce qui fait : 15 x 15 = 225 niveaux 2.
  • 15 items pour chaque niveau 3. Ce qui fait : 15 x 15 x 15 = 3375 niveaux 3.
  • Note : une catégorie peut figurer dans plusieurs sections d'un même niveau.

Vous pouvez vous entrainer sur différents sites à classer 15 items de navigation, sur la base d'un classement alphabétique et d'expressions clés de 2 -3 mots maximum, avec un classement par ordre alphabétique, un bon interlignage : vous verrez à quelle vitesse vous êtes capable de scanner une liste de 15 items. C'est phénoménal :).
Ce principe d'organisation est très puissant. Vous n'exposez jamais vos visiteurs à plus de 15 items simultanément. Et vous maintenez un classement par ordre alphabétique, avec un éventuel petit court-circuit en tête de liste pour faire plaisir à l'annonceur qui veut valoriser un item économiquement important (à gouacher et à contraster pour bien comprendre qu'il s'agit d'un autre traitement de l'information).

Au total, vous bénéficiez d'une classe de 3615 catégories (15 niveaux 1, 225 niveaux 2, 3375 niveaux 3). Voilà qui devrait résoudre de nombreux problèmes. Les sites présentant plus de 3615 étiquettes de contenus ne doivent pas représenter plus d'1% du total des sites web. Mais, souvent, ce sont les plus visités (Amazon, Cdiscount, Site publics...).

Démarche pour organiser les contenus et créer l'arborescence

Lorsque vous êtes amenés à formaliser une arborescence, cela ne devrait jamais être une tâche isolée. Ce travail d'organisation et de structuration d'arborescence s’inscrit toujours en amont ou en aval d’une autre tâche : l’arborescence peut conclure les travaux d’inventaire et de cartographies de contenus, optimiser la segmentation suite à un tri de carte…
Autrement dit, le travail d’arborescence éditorial doit être intégré à la démarché projet et ne pas être traité isolément des problématiques d’expérience utilisateur et de conception fonctionnelle.

Il y a deux cas de figure : dans un cas, le dispositif digital n'existe pas et on le créé, et dans l'autre cas, le dispositif digital existe et on l'optimise (refonte). Ces deux cas ont une influence sur la façon de construire et de reconstruire l'arborescence. Quoi qu'il en soit,avant l'arborescence, il y a un travail de recherche (énumération des contenus et inventaire des contenus dans le cas d'un dispositif existant). Le listing des contenus (énumération) nécessite un premier travail de groupement (segmentation) au travers de cartographie éditoriale.

Il s'agit donc, avant de réaliser l'arborescence du site, d'inventorier les contenus, de les segmenter, de les ordonnancer et de prioriser les informations. Faire le ménage quoi. Après quoi on peut sereinement parler du travail d'arborescence. Les travaux d’inventaire et de structuration des contenus sont utiles pour anticiper et amorcer sereinement la hiérarchisation des contenus. Les arborescences permettent de faire converger les objectifs du support interactif avec les besoins des utilisateurs en veillant à adapter voire proscrire les logiques de classement interne, les nomenclatures et jargon spécifiques.

Dans la mesure où l'arborescence reste un support limité pour présenter la complexité organisationnelle du système d'information, il est recommandé de proposer différentes vues ou coupes complémentaires de l'architecture de l'information :

  • Arborescence isométrique : maillage, filiation entre les contenus.
  • Arborescence fonctionnelle : parcours, design d'interaction, visualisation du fonctionnement.
  • Cartographie : cartographie éditoriale pour visualiser les volumes de contenus.

L’arborescence d'un site n'est effectivement pas qu'une affaire d'organisation des contenus. Elle s'envisage à travers les parcours, le design de l'information. L'arborescence amorce également les réflexions sur la conception fonctionnelle. Il y a toujours plusieurs logiques de classement à envisager, dont les répercussions sont différentes :

  • Regroupement, concentration – allongement de la profondeur du site.
  • Fragmentation, éclatement – élargissement des points d’entrées.
  • Ordonnancement par besoin, par profil, par thématique, par plébiscite.
  • [...]

Quel que soit le contexte d’intervention, la matérialisation d’une arborescence de site oblige à :

  • Disposer d’une vision micro / macro des contenus à organiser.
  • Connaître les services et éléments prioritaires à valoriser.
  • Anticiper les stratégies des utilisateurs et donc à connaître leurs besoins…
  • Prévoir les impacts en matière d’interface.
  • Envisager les connexions entre les contenus au sein des pages.
  • Identifier les répercussions de l’arborescence sur la navigation.

Voici le récapitulatif de la démarche complète d'architecture de l'information :

  • Recueil des besoins métiers et recueil des besoins utilisateurs.
  • Typologies des besoins en information et première liste de contenus.
  • Priorisation des services et des offres.
  • Priorisation des besoins et attentes des utilisateurs.
  • Benchmark éditorial exploratoire.
  • Atelier d'idées avec les experts techniques pour étoffer la liste.
  • Audit éditorial pour un existant :
    inventaire des contenus, plan de masse, arborescence existante.
  • Etudes analytiques pour un existant : analyse des performances.
  • Etudes SEO pour un existant.
  • Cartographie des étiquettes, listing de tous les contenus.
  • Choix des logiques de classification (regroupement, éclatement…).
  • Recherches : design de l'interaction, design de l'information.
  • Choix des expressions clés par rapport aux considérations SEO.
  • Stratégie éditoriale Top Down : positionnement choix des sections N1.
  • Déploiement de la logique organisationnelle.
  • Stratégie éditoriale Bottom Up : câblage des sous-niveaux vers les niveaux supérieurs.
  • Formalisation de l’arborescence éditoriale. Cartographie et plan de masse. Parcours.
  • Itérations et optimisations avec les équipes projets.
  • Tri de cartes.
  • Optimisation sémantique.
  • On tient l'arborescence à jour au cours du projet !
  • On passe à autre chose :).

Travaux complémentaires à la réalisation d'arborescences

Pour commencer, il faut recueillir le besoin sur le terrain :

La modélisation de l'arborescence peut intervenir après des travaux d'analyse des contenus dans le cas d'un site existant :

Les techniques de mind map sont intéressantes pour travailler sur les noeuds informationnels dans une logique de cocon sémantique.

La cartographie des contenus permet également de visualiser les masses et les volumes éditoriaux, pour donner un indicateur visuel de la taille représentée par telle ou telle rubrique.

Les choix opérés en matière d'arborescence sont à tester via la technique du tri de carte. Les libellés à retenir (étiquette des contenus, nom des items, nom des labels) peuvent être améliorés via une optimisation sémantique, et ce afin que les étiquettes de contenus soient mieux comprises par les utilisateurs finaux, mais aussi pour que les contenus soient plus en phase avec les exigences SEO (référencement).

L’arborescence éditoriale ne permet pas de matérialiser les workflows impliqués par les publications de contenus : la définition des flux d'information et plus globalement des spécifications éditoriales complètent efficacement l’arborescence éditoriale et offre une vision orientée sur la gestion des problématiques éditoriales. Cette approche permet de travailler de façon efficace et fluide avec les profils fonctionnels et marketing.

En complément des arborescences de contenus, nous vous recommandons de matérialiser l'arborescence fonctionnelle de votre dispositif, illustrant le fonctionnement du support interactif et les interactions entre tous les gabarits : ce document vous permettra d’échanger efficacement avec les profils techniques. Les parcours d'utilisation sont rattachés à l'arborescence fonctionnelle...

Tous ces travaux relatifs à la gestion des problématiques de contenus et à leur mise en forme au travers d'une arborescence peuvent être regroupés au sein des travaux dits d'audit éditorial.

L'arborescence est naturellement liée aux problématiques de design de navigation.

Concevoir l'arborescence implique également une projection et une visualisation de la conception d'interface : wireframing. En effet, certains gabarits de pages représentent une opportunité d'arborescence in page.

auteur Julien Muckensturm iafactory
linked in julien muckensturm

Ressources pour réaliser une arborescence

APPROFONDIR
le fonctionnement

Livre : Mapping websites, Paul Khan
Mapping websites, Paul Khan

Aller plus loin sur les arborescences éditoriales

Articles du journal à méditer :

Etudes de cas à lire :

Travaux à visualiser :

Supports de cours (débutant) à étudier :

Compétences métier pour l'arborescence de site web :

Fiche métier :

Livres à bouquiner :

Plus de techniques éditoriales
ENVERGURE EDITORIALE
Relevé minitieux et complet des contenus existants pour une maitrise éditoriale totale.
inventaire des contenus
STRUCTURATION DES CONTENUS
Regroupement des contenus autour de labels fédérateurs et esquisse du rubriquage.
segmentation des contenus
CONCEPTION D'INTERFACE

design de navigation

Conception du menu de navigation et valorisation des principaux parcours d'utilisation.
design du menu de navigation
Arborescence
  • avec iafactory
  • prestation sur-mesure
  • livraison sous 10J