Arborescence

Livrable design

Organiser vos contenus dans une arborescence

L’arborescence d’un site ou d’une application représente l’organisation hiérarchique et logique de ses pages et fonctionnalités. Proposer une arborescence optimale, c’est définir une catégorisation qui corresponde au mieux à la représentation mentale des utilisateurs. La définition de l'arborescence est une étape déterminante dans la conception d’une navigation efficiente pour l’utilisateur. La co-construction de l'arborescence avec les différentes parties prenantes métier permet d'assurer une vue globale des contenus à organiser.

À quoi sert une arborescence ?

  • L’arborescence est la colonne vertébrale d’un site internet ou d'une application mobile. Définir l'arborescence, c'est traduire vos enjeux et priorités dans l'organisation de vos contenus. C'est l'arborescence qui permet à l’utilisateur de se repérer facilement et de trouver l’information souhaitée. Une arborescence mal pensée peut contraindre l’utilisateur à abandonner sa recherche en le laissant sur une mauvaise expérience.
  • En plus de structurer et catégoriser l’information sur la plateforme, l'arborescence joue également un rôle clé pour le référencement de vos contenus par les moteurs de recherche.

Pourquoi faire une arborescence ?

  • Définir l'architecture de l'information générale
  • Organiser le contenu de votre site ou application en un nombre limité de catégories
  • Hierarchiser les contenus en fonction de leur position ou niveau dans l'arborescence
  • Visualiser l'architecture de l'information de vos contenus
  • Tester la facilité d'accès aux contenus
  • Préparer la conception en identifiant les gabarits d'écrans à créer

Comment structurer le contenu dans une arborescence ?

01

Lister les contenus et les organiser

L'arborescence correspond à la structure. Avant d'organiser les contenus, il convient donc de lister de façon exhaustive les contenus et fonctionnalités de votre interface.

02

Visualiser les différents parcours utilisateurs

L’arborescence formalise les chemins que peuvent prendre les utilisateurs pour accéder au contenu souhaité. C’est une organisation hiérarchique et logique des pages et des fonctionnalités.

03

Valider la cohérence du placement de l’information

Une bonne arborescence permet de catégoriser l’information afin de correspondre au mieux à la représentation mentale des utilisateurs. Il est conseillé de la faire tester auprès des utilisateurs grâce à des méthodologies de type « tri de cartes » afin de s’assurer de la bonne compréhension de la part des usagers.

04

Identifier le nombre de gabarits de page différents

La structure de l’arborescence va induire le type de page que la future plateforme contiendra : actualité, formulaire de contact, page de présentation d’une offre… Ce travail en amont est nécessaire pour identifier les différents gabarits et leurs emplacements sur la plateforme. Cela permet également de prioriser ces gabarits en se basant sur les différents niveaux d’une arborescence. On pourra, par exemple, privilégier de concevoir uniquement les pages de premiers niveaux.

Les types de représentation d'une arborescence

Une même arborescence peut se représenter de plusieurs façons. Le choix dépend du niveau de détail attendu et de l’usage que l’on fera du livrable.

  1. La vue linéaire. Produite avec un simple traitement de texte, sous forme de liste à niveaux. Les niveaux hiérarchiques se lisent facilement et le livrable est rapide à réaliser comme à modifier. En revanche, le format reste austère et incomplet, sans les informations complémentaires comme les gabarits ou les liens entre les pages. Plus l’arborescence grandit, plus elle devient difficile à lire.
  2. La vue tableur. Le principe est le même, mais les colonnes gèrent mieux la profondeur des niveaux et la mise en forme rend le livrable plus lisible que la vue linéaire. Les informations complémentaires manquent toujours.
  3. La vue fonctionnelle. C’est la représentation la plus utilisée. Chaque page est figurée par un bloc relié aux autres, ce qui rend le livrable nettement plus lisible et permet d’y ajouter des annotations de toute nature. Sa contrepartie est le temps de mise à jour, chaque modification impliquant de revoir les liens, les alignements et les gabarits.

Questions fréquentes

Quelques exemples de réalisations

Co-conception

Basés sur l'intelligence collective, ces ateliers alignent les parties prenantes et font émerger des solutions avec l'équipe et/ou les utilisateurs finaux.

En savoir plus sur Co-conception

Test utilisateur

Les tests utilisateurs font évaluer l'ergonomie de votre produit ou service par des utilisateurs cibles. Selon les objectifs, plusieurs approches existent.

En savoir plus sur Test utilisateur

Architecture de l'information

L'architecture de l'information organise contenu et navigation pour que les utilisateurs trouvent ce qu'ils cherchent. Elle guide le design d'interface

En savoir plus sur Architecture de l'information

Zoning

Le zoning est la représentation visuelle d'une interface par l'emplacement de ses blocs de contenu simples, sans détail : ni texte, ni image.

En savoir plus sur Zoning

Wireframe

Maquette sans aucun élément graphique, décrivant les zones et les composants essentiels que doit contenir une interface.

En savoir plus sur Wireframe

User flow

Le flux utilisateur ou le User flow est une représentation graphique qui modélise les chemins possibles lorsqu'il consulte un site ou une application.

En savoir plus sur User flow

Tri de cartes

Cette méthode de tri consiste à laisser les utilisateurs regrouper les cartes en catégories dans le but d’établir l’architecture de l’arborescence d’un site web ou d’une application.

En savoir plus sur Tri de cartes

Vous souhaitez en savoir plus sur nous ?

Tout le monde parle experience utilisateur, design de service, ergonomie...
C'est pas très clair, mais vous aimeriez bien découvrir tout ca ou progresser.

Parlons-en