L'arborescence d'un site web : la base d'un projet réussi

Catégories : "Conception" par Hadrien Marchand Hadrien Marchand le 21 Août 2009

L'arborescence d'un site web : la base d'un projet réussi

C'est le document fondateur de tout projet internet conçu dans les règles de l'art. Pourtant nombreux sont les cahiers des charges web où l'arborescence est confuse voire inexistante. L'arborescence web est la simple retranscription « au propre » des différentes pages et sections d'un site internet.

Quelle forme prend-elle ? Jusqu'à quel niveau de détails faut-il rentrer ? A quelle étape du projet doit-on la concevoir ?

Rappelons qu'un site internet est composé de plusieurs pages et contenus qui peuvent être de natures différentes : liste d'actualités, un forum de discussion, une page contact, un extranet, etc.
L'arborescence permet d'organiser ce contenu de manière logique et hiérarchisée.

Arborescence vs navigation

Attention à ne pas confondre la navigation du site avec son arborescence même si ces deux notions sont très proches.

Effectivement à l'heure où les sites sont de plus en plus maillés et interactifs, on accède de multiples manières à un même contenu. Par exemple, la page d'accueil d'un site peut accueillir une grosse animation flash qui met en avant certaines parties, également accessibles par le menu principal, mais aussi par des modules annexes dans d'autres sections du site.

La problématique de navigation intervient d'ailleurs après l'arborescence du site web, puisqu'elle est étroitement liée à son ergonomie et à son design.

L'arborescence traite donc théoriquement seulement de la manière dont les pages sont organisées. Si on devait faire l'analogie avec des documents papier, cela reviendrait à déterminer la quantité et les noms de classeurs, dans lesquels on subdiviserait les documents avec des intercalaires.

Comment représenter les informations ?

Généralement l'élément central d'une arborescence est la page d'accueil. Un exemple valant mieux qu'un long discours :


Exemple arborescence - miniature

On retrouve donc la totalité des contenus, et on remarque qu'il est inutile de lister toutes les pages de types similaires. Le but reste que tout le monde puisse comprendre le principe d'organisation : les webdesigners, les développeurs, etc

De même il est possible – sans surcharger le document – d'annoter certains des éléments ou encore, par exemple, de griser les pages seulement accessibles via une identification par mot de passe, le tout accompagné d'une légende si possible !

Quel logiciel pour créer une arborescence de site web esthétique et compréhensible ?

Il est évidemment possible d'utiliser Powerpoint pour dessiner son arborescence. L'inconvénient principal réside dans l'impossibilité de bien connecter chaque élément comme on le souhaiterait, d'ajouter des nouvelles catégories sans être obligé de tout déplacer, etc.. Powerpoint n'a pas été conçu pour cela.

logo xmindAprès avoir utilisé l'excellent Mindjet Manager, nous lui avons préféré son équivalent du monde Open Source : Xmind. Très intuitif, gratuit, multiplateforme (Windows, Mac OS X, Linux) et compatible avec Mindjet Manager : que demander de plus ?

Préparez vous à réaliser des arborescences web professionnelles en moins de 10mn car Xmind est vraiment très simple d'utilisation.

Seuls petits bémols : d'une part il est nécessaire de se créer un compte (gratuit) pour télécharger l'application, et d'autre part il n'y a pas de fonctionnalité directe d'exportation en PDF : heureusement PDF Creator vient palier à ce problème mineur.

Ne sous-estimez jamais l'importance de passer du temps en début d'un projet de site internet sur son arborescence. Si celle-ci a bien été travaillée et qu'elle n'oublie aucun élément, alors les maquettes graphiques et le reste du projet auront un pilier solide sur lequel se reposer.

L'arborescence d'un site web : la base d'un projet réussi

A propos

Bienvenue sur le Workshop de l'agence interactive Maecia : notre espace d'actualités, de veille et de publications sur les nouvelles tendances d'Internet. Vous y trouverez aussi le fruit de certains de nos développements techniques que nous mettons à disposition de la communauté. Découvrez notre vision du web et surtout n'hésitez pas à prendre la parole !