Méthodologie : focus sur l’arborescence

Par Eric DI POL, lundi 21 janvier 2008 :: Méthodologie - Conception

Depuis le temps que je voulais publier un billet sur le document qu'est l'arborescence,
c’est maintenant chose faite ! J’espère que ce billet vous fera réagir car c’est un sujet sur
lequel je souhaite discuter et partager des retours d’expérience !

Mais avant de commencer, petite précision, car il y a arborescence et arborescence. Et

pour qu’il n’y ait pas de malentendu, je préfère clarifier la situation : je ne parle pas ici
de l’arborescence des répertoires d’un site et encore moins du plan du site - sitemap en
anglais - qui correspond à la page regroupant tous les accès directs vers les autres pages
du site. Ici, je veux vous parler du livrable qui fait partie de tous les projets
interactifs, du document qui permet de représenter visuellement la structure
d’un site ou d’une application interactive.

Maintenant que c'est clarifié, on peut y aller ;-)

A QUOI SERT UNE ARBO ?

L’arborescence permet de visualiser de façon schématique les différentes pages

qui composent un site ainsi que les principaux liens qui les unissent. Grosso
modo, 1 case = 1 page. Tous les liens ne sont pas affichés car l’arbo doit rester lisible et
compréhensible par tous. En tant que livrable, elle doit être signée et approuvée par le
client en phase de conception. Indispensable pendant cette première phase, elle est très
utile tout au long du projet et doit continuellement être mise à jour, et ce, même après la
mise en ligne du site.

ARBO GÉNÉRALE vs ARBO DÉTAILLÉE

On distingue 2 types d’arborescences :

• l’arbo générale ou "high level" : elle ne s’attache pas aux détails et propose
une vue macro du site,
• l’arbo détaillée ou "low level" : elle permet d’être très précise, et ce pour un
certain nombre d’éléments (les pages, les liens, les gabarits...)

Dans les projets un tant soit peu importants, on devrait avoir à chaque fois ces 2 types
d’arbos. Le problème, c’est que bien souvent l’arborescence se résume à cela :
Dès lors, on peut dire qu’elle ne sert qu’à lister les pages et les visualiser dans l’espace.
Bref, un bon vieux fichier Excel ferait la même chose...

DÉTAILLER SON ARBORESCENCE

Pour que notre arbo soit un peu plus fine que "1 case = 1 page", elle doit contenir plus
d’informations précises et plus utiles, histoire qu’elle serve de vrai document de référence
à toute l’équipe projet.

Petits conseils :

• pour chacune des pages, on peut définir si elle est statique, dynamique, si
c’est une popup,
• on peut également afficher les différents gabarits de page qui seront utilisés
(par exemple avec un picto "G4" qui correspond au Gabarit n°4)
• on peut visualiser les pages similaires ou groupes de pages (les stacks)
• on peut afficher les grands process qui seront utilisés (sign in, ajout au panier...)
par exemple avec un picto "P4" qui correspond au Process n°4 par exemple,
• on peut différencier les pages des nœuds d’arborescence (ces derniers
permettent de visualiser les différentes sections)
• ainsi, si l’on utilise une mise en page verticale, l’arbo permet de définir
précisément le niveau de profondeur du site. On sait donc qu’il me faudra N
clics pour passer de la home page à la fiche produit par exemple.
• on peut afficher différents types de liens : liens internes / externes, liens direct
/ après identification...
• on peut également y inclure les étapes de développement ultérieurs (v1, en
v2...) en colorant les pages par exemple ou en utilisant de petites pastilles

Evidemment, vu le volume d’information, il est indispensable de légender le tout

pour que le vocabulaire visuel soit compris par tous et que le document soit
utilisable.
Et voilà ce que ça peut donner à titre d'exemple :
Enfin, sachez que dans le cas
d’un très gros site, une arbo
détaillée peut être composée de
plusieurs arborescences (1 par
rubrique par exemple). Si l’on
veut l’imprimer, il faut alors
plusieurs feuilles A4 pour
reconstituer l’arborescence
détaillée en intégralité.

QUELS LOGICIELS UTILISER ?

Contrairement aux
wireframes, je ne connais pas
de très bons logiciels pour
créer des arbos. Personnellement, je les faisais avec Illustrator car j’avais récupéré un
certain nombre d’éléments graphiques pour annoter mes arbos, mais j’avoue que ce n’est
pas l’outil le plus pratique. En
effet, la notion de "connecteur" lui
est inconnue, donc quand vous
devez insérer ou modifier votre
arbo, c’est la galère car il ne
déplace pas automatiquement les
pages et les liens...

Sinon, il y a toujours les

incontournables PowerPoint, Visio,
Omnigraffle pour Mac ou Gliffy
comme outil en ligne. Pour des
arbos générales c’est suffisant,
mais pour des arbos low level,
c’est de suite moins adapté.

CONCLUSION

L’arborescence est, il me semble, un des livrables qui n’a que très peu évolué
depuis ces dernières années. Bien adaptée pour des sites de taille moyenne, elle
peut devenir très complexe pour des sites qui comportent des centaines de
pages.

Créer une arborescence avec des outils non spécialisés est assez fastidieux et
avec le succès d’Ajax et des interfaces riches, on ajoute un niveau de
complexité (avec les inserts de zones dynamiques présentes dans chaque page,
une page peut en contenir plusieurs à la fois...)
Le zoning : contrainte ou aide précieuse ?

Généralement rédigé par le Chef de projet, le zoning est un document

qui permet de représenter de façon schématique les gabarits des
principales pages d’un site. Chaque page est découpée en zones de
contenus, ce qui permet de visualiser pas mal de choses (la navigation,
les fonctionnalités présentes dans la page…)

Lorsqu’il est très détaillé, le zoning peut donner un aperçu assez

précis d’une page : hiérarchisation des différents textes, description des
liens principaux et secondaires, affichage des dimensions en pixel des
contenus, description de la navigation…
Dès lors, je me pose parfois la question suivante : où se trouve la
liberté d’un DA qui reçoit un zoning assez détaillé ?
• est-ce que son challenge, c’est de proposer une maquette
créative en se pliant aux contraintes qu’on lui impose ? Et si
oui, est-ce que sa marche de manœuvre ne s’en trouve
limitée ?
• ou bien est-ce que c’est un document qui lui est essentiel et
qui l’aide dans sa démarche créative ?
Ci-dessous, une page extraite d’un zoning pour un des clients dont je
m’occupe et le résultat final en html