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 compléxité (avec les inserts de zones dynamiques présentes dans chaque page, une page peut en contenir plusieurs à la fois...)

Biblio et articles :