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 Gliffycomme 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...)
Articles
