Créer l’arborescence de votre site web en 4 étapes

Créer l’arborescence de votre site web en 4 étapes

Cours du mardi 13 novembre 2012

Créer l’arborescence de votre site web est une étape cruciale du projet. Véritable squelette du site, elle servira aussi bien au maquettage fonctionnel des pages qu’au remplissage de contenus.


Imaginons que vous vouliez construire une maison. Avant la construction vous allez bien-sûr devoir établir son plan pour savoir le nombre de pièces que vous allez y mettre en fonction de la superficie, du nombres de personnes qui vont y habiter, etc. Vous allez aussi vous poser la question de la façon dont celles-ci vont devoir être réparties et communiquer entres-elles. Pour un site internet c’est exactement la même chose. Pour que vos informations soit compréhensibles pour les utilisateurs, il faut que votre contenu soit structuré. Le visiteur de votre site doit pouvoir le parcourir intuitivement, sans avoir une notice d’utilisation pour y parvenir. Le plan d’architecture de votre espace web correspondra à votre arborescence. Combien de pages vous allez créer, et comment vous allez les assembler dans vos différentes rubriques et sous-rubriques.

L’arborescence peut être reprise dans le « plan du site » (sitemap) qui est ni plus ni moins le plan où l’utilisateur pourra visualiser l’ensemble de la structure du site.

arborescence site webLister tous les contenus du site web

Soyez logique, vous serez ergonome !

Avant de commencer la réalisation d’un site web, il est primordial de lister l’ensemble des contenus qui vont y être présents.
Commencer la réalisation graphique avant cette phase de structuration serait une abération, ce serait comme si vous cherchez à meubler votre intérieur avant même qu’il soit construit.

2-Organiser vos contenus par thèmes

Reprenons l’exemple de l’aménagement de votre intérieur. Imaginons que vous voulez aménager votre intérieur pour l’instant vide. Vous allez d’abord regrouper dans une même pièce, tous les meubles que vous avez à votre disposition pour votre aménagement ( ce qui correspond à tous les contenus que vous allez placer à l’intérieur de votre site web). Comment allez-vous vous y prendre ? Et bien vous allez être logique et fonctionnel pour vous faciliter la vie : vous allez ranger vos meubles dans les pièces correspondantes.
Difficile d’imaginer vos plaques chauffantes dans votre chambre ou votre armoire de linge dans votre salle à manger ! Tout simplement parce qu’on à l’habitude de ranger les choses par rapport à nos habitudes de vie, par rapport aussi de la fréquence de leur utilisation. Ainsi on mettra un objet à porter de main si on l’utilise régulièrement… Bref notre intérieur est « ergonome », plus il sera agréable d’y vivre.

Pour un site internet c’est la même chose à la différence que vous préparez votre aménagement afin que d’autres, qui ne le connaissent pas encore, puissent retrouver facilement ce qu’il cherche sans avoir à y passer des heures !

C’est pourquoi, l’organisation de vos contenus contribue à améliorer l’ergonomie web et engendrera le succès de votre site !

Donc regrouper l’ensemble de vos contenus par groupe d’idées, de thèmes en essayant d’anticiper sur la manière dont l’internaute va chercher l’information.
Faciliter-lui l’accès en regroupant ensemble ce qui peut être rassembler au sein d’une même rubrique. Vous pouvez les regrouper par ordre alphabétique, chronologique, thématique … choisissez-bien ce qui aidera le plus l’internaute à comprendre l’organisation de vos contenus. Ci-joint un récapitulatif des différentes manières dont vous pouvez regrouper ses contenus pour la création de votre arborescence :

– Par cible d’utilisateur, selon le type de visiteurs.

Le site Pôle Emploi par exemple utilise ce type d’entrée selon que le visiteur du site internet soit demandeurs d’emploi ou entreprises.
Clair et efficace et cela évite de guider l’internaute vers un contenu qui risque de ne pas l’intéresser !

arborescence site web

Même exemple pour Edf Suez avec des entrées par profils : journalistes candidats …
ergonomie-web-organiser

– Par tâches d’utilisateur.

Ci-joint l’exemple de Bouyges Immobilier avec un moteur de recherche à 2 types d’entrées : habiter/investir…

organisation-contenus-web

– Par localisation géographique.

Le bon coin, ce gros site avec beaucoup de contenus reste pourtant très facile de navigation grâce à la manière dont le parcours du visiteur se crée et s’affine à l’image d’un entonnoir :
Avec en premier lieu un choix d’entrées par localisation géographique puis par cible d’utilisateurs (professionnels ou particuliers).

navigation-ergonomie-web

3-Hiérarchiser les thèmes en rubriques et sous-rubriques

C’est maintenant que vous allez commencer à envisager une arborescence pour votre site web.

-Définissez tout dabord vos rubriques principales

Chaque thème représentera une rubrique de votre site.

– Hiérarchisez ensuite les informations à l’intérieur de vos rubriques principales

Chaque groupe d’informations représentera une sous-rubrique.

4-Créer l’arborescence web de votre site

Vous pouvez maintenant réaliser sur papier le graphisme de votre arborescence. Elle représente sous-forme de schéma les différentes rubriques, les différentes pages et les relations qui vont s’établir entre elles ou pas. L’arborescence décrit l’organisation de votre contenu web.
Elle permet d’avoir un aperçu global des différents niveaux de navigation et de leur profondeur.
On parlera de largeur, pour le nombre de rubriques accessibles depuis la page d’accueil (rubriques formant le premier niveau à l’horizontal), et de profondeur pour le nombre de sous-rubriques accessibles depuis une rubrique.
Elle se présente généralement sous forme d’un arbre avec des rectangles pour les rubriques et vous pouvez y ajouter des flèches pour les relations :



Niveau 1 : Sous l’accueil, c’est le menu principal de votre site.
Niveau 2 : Ce sont des pages d’orientation qui vont présenter vos rubriques d’une manière générale.
Niveau 3 : Présentation détaillée de vos rubriques principales.
Ces sous-rubriques sont exclusivement des pages d’informations.
Niveau 4 : Présentation des sous-sous-rubriques.
A prévoir si les pages de niveau 3 sont trop denses en informations.

Mais attention ! plus il y aura de profondeur dans votre arborescence, et moins votre site sera clair. Construisez une arborescence de 3,4 niveaux maximum (essayer de respecter la règle des 3 clics!), au-delà votre site sera trop complexe et difficile pour l’internaute à naviguer. L’expérience acquise montre que l’utilisateur se perd dans la hiérarchie dès qu’il dépasse le deuxième niveau. Il faut savoir anticiper ce que le visiteur va rechercher et surtout faire en sorte qu’il ne soit jamais perdu !
Votre arborescence détaillée est à présent élaborée ? Nous allons pouvoir passer à l’étape suivante.


arborescence internet

Cet article vous a plu ?

N’hésitez pas à partager notre page facebook pour suivre nos nouveaux posts et astuces…

[button url= »http://www.lecil.fr/fr/category/webdesign » size= »medium »  arrow= »left »]retour aux articles web design[/button] [button url= »http://www.lecil.fr/fr/webdesign/zoning-site-web » size= »medium »  arrow= »right »]zoning site web[/button]