Arborescences : complexité et représentation graphique (2/2)
En 1995, bien avant Morville et Rosenfeld, Jakob Nielsen développe le concept de large information spaces appliqué aux logiciels et aux sites web, dans un chapitre de son ouvrage Multimedia and Hypertext: The Internet and Beyond. S’il adopte surtout le point de vue de l’utilisateur et moins celui du concepteur, il contribue à ancrer dans l’imaginaire de la pratique de l’architecture de l’information la métaphore cartographique. Ces overview diagrams sont le niveau d’abstraction supérieur (méta-navigation) à l’hypertexte dont ils offrent une lecture à la fois globale et locale. Nielsen souligne déjà à l’époque les bénéfices de l’alignement de la grille pour rendre aisément interprétable la structure de l’information et les moyens de simplifier la représentation hypertextuelle. Il fournit des exemples qui illustrent déjà la complexité visuelle des structures hypertextes et hiérarchiques.
Figure : « A hypertext version of the Canada-U.S. Free Trade Agreement » (cité par Nielsen).
La métaphore cartographique
Inspirés sans doute par les travaux et la pensée d’Edward Tufte, qui développe une critique de la « pensée visuelle » et des moyens de représentation de l’information dès le début des années 1980, nombre de concepteurs établissent l’analogie entre les objectifs de la cartographie et leur besoin d’une documentation claire des espaces d’information en ligne. Tout comme « le principe majeur de la cartographie est la représentation de données sur un support réduit représentant un espace généralement tenu pour réel » (Wikipedia), le site web a besoin d’une « représentation concise et efficace » afin de permettre « une compréhension rapide et pertinente ». Dès lors, quelles sont les conventions cartographiques choisies ?
Créée en 1990 par Paul Kahn et Krzysztof Lenk, Dynamic Diagrams a contribué, d’abord dans le champ du design d’information, à explorer les méthodes de cartographie de l’information en ligne. Dans le projet Holtzbrinck Web Map (1999), l’agence américaine synthétise dans un diagramme un écosystème de 150 sites web qui matérialisent la présence en ligne de la société Holtzbrinck. Dans chaque cercle coloré, l’arborescence explicite la nature du contenu de chaque site, le pays, la langue et le statut.
Visualiser les systèmes complexes d’information à travers la représentation isométrique
Comment représenter un recueil de données abstraites ? Visualiser les systèmes complexes d’information constitue un besoin constant dans la pratique de conception de sites web. Dans leur ouvrage Mapping websites (Rotovision, 2001, aujourd’hui épuisé), Paul Kahn et Krysztof Lenk reviennent aux fondements de la métaphore de l’architecture de l’information et réaffirment la pertinence de l’analogie entre la structure d’une construction et celle d’un site web. Cet ouvrage traite en fait d’une question beaucoup plus vaste que les arborescences de sites web : la cartographie de l’information dans les environnements digitaux, mais nous ne nous attacherons ici qu’au périmètre des arborescences.
Paul Kahn et Krysztof Lenk s’appuient sur 2 types de représentation cartographique pour définir leur méthodologie de modélisation des sites web : le plan de Turgot et le plan du métro de Londres. L’analogie avec le monde de l’architecture physique est donnée à travers la carte, représentation du monde en 3 dimensions dans une forme encodée en 2 dimensions.
Le plan de Turgot représente Paris en perspective cavalière axonométrique (perspective isométrique ; elle renvoie littéralement à la vue du haut du promontoire de terre situé en arrière des fortifications militaires, appelé « cavalier »). Dessiné par Louis Bretez au 18e siècle, son objectif était de promouvoir l’image de Paris auprès des élites. La caractéristique de la perspective isométrique est de renseigner sur la notion de profondeur, mais elle n’offre pas une représentation conforme à notre vision naturelle des objets. Son intérêt réside dans ce que les rapports de longueur sont conservés.
Le plan du métro de Londres, créé par Harry Beck dans les années 1930, insiste sur la représentation topologique plutôt que géographique. Ici, c’est la configuration du réseau et le jeu des relations qui sont signifiants. L’alignement des lignes de métro sur une grille permet de réduire la complexité visuelle et de rendre la représentation plus harmonieuse, régulière. Son intérêt réside dans sa meilleure lisibilité.
Dans une perspective hypertexte, c’est-à-dire non-séquentielle, la représentation de l’information constitue un défi car il est impossible de modéliser toutes les modalités d’accès à un contenu. C’est ce qui a motivé Kahn et Lenk à proposer le principe d’arborescences isométriques.
Pour Paul Kahn et Krysztof Lenk, « les sites web sont de façon inhérente multi-dimensionnels, car ils existent dans un espace abstrait qui n’obéit pas aux règles de la géométrie euclidienne » (une vision de l’espace physique au sens classique du terme). Tout comme Jesse James Garrett, ils insistent sur l’importance des conventions de représentation dans les diagrammes d’information pour rendre visibles les relations et les propriétés abstraites : boîtes connectées par des lignes, couleurs, symboles.
Figure : arborescence isométrique pour l’INRS – Kahn + Associates (une galerie de projets est accessible sur le site).
Pour formaliser une arborescence, il faut définir le type d’information à représenter : profondeur de clic, type de page, regroupement logique, principaux chemins de navigation, relations des liens hypertextes, droits d’accès aux contenus… Puis on procède à l’inventaire de contenu et seulement ensuite l’information peut être organisée selon des conventions visuelles. Le niveau de détail de l’arborescence dépend alors du public auquel elle est destinée (concepteur, développeur, client…).
Plusieurs niveaux d’informations peuvent être représentés : titre de page (le plus courant), mais aussi niveau de profondeur, url etc.
Kahn et Lenk précisent que le format de l’arborescence est fortement influencé par son médium de destination : écran ou papier ? Si sur l’écran, l’orientation horizontale de la représentation apparaît plus évidente, la limite de sa résolution pose la question du volume de texte qui peut être donné à lire.
Démocratiser la formalisation des livrables
En s’appuyant sur les avancées théoriques et pratiques des travaux de Paul Kahn, Davide Bolchini et Paolo Paolini ont pour leur part proposé l’idée d’Interactive Dialogue Model (article PDF), qui a pour ambition d’être opératoire pour des applications multi-écran. La méthode de conception se veut surtout « légère et agile », sans rechercher une représentation graphique riche ou complexe. La démarche cherche aussi à conserver une vision d’ensemble dans le livrable. Les auteurs ont partagé en ligne une bibliothèque graphique d’éléments PowerPoint et PDF permettant de s’approprier rapidement la méthode, toujours destinée aux applications et aux sites web très vastes. Ils détaillent la pratique de cette méthode de conception légère dans un article d’Interactions, « Beyond interfaces and flows: abstractions for mapping organic architectures ». L’un des avantages non négligeable d’une arborescence isométrique, c’est le considérable gain de place qu’elle permet pour favoriser une vision d’ensemble du contenu.
L’agence EightShapes a mis à disposition un framework de conception similaire, Unify, avec InDesign.
Aux frontières de la visualisation de données
De nombreuses initiatives pour questionner la structure du réseau sont issues de la démarche de visualisation de données. Le site Visual Complexity en dresse un inventaire raisonné dans le champ du web. Si ces projets mettent en œuvre une recherche formelle et plastique indéniable, ils se démarquent culturellement de la vocation utilitaire et opératoire à laquelle répondent les projets de design interactif. Elles peuvent néanmoins fournir une source d’inspiration.
Figure : websites as graphs
Parmi les outils open source, on pourra citer également Graphviz, un logiciel de visualisation qui permet de mettre en évidence les structures de données.
Une application en ligne, WriteMaps, permet de réaliser des arborescences relativement complexes, avec la possibilité de « déployer » et de « replier » les branches de l’arbre.
Remarquable article, bravo ! Le corpus théorique, les références citées ainsi que la mise en perspective historique des travaux sur la question sont très intéressants. Les illustrations sélectionnées, notamment les cartographies de Dynamic Diagrams, représentent de bons modèles d’inspiration.
Les représentations isométriques, les réflexions sur la 3D, les cartographies fines d’écosystèmes digitaux restent néanmoins des sortes « d’idéal-type » : peu de clients à mon sens, du moins sur le marché français, semblent prêts à investir les moyens nécessaires à la relève de ces fabuleux défis de représentation visuelle.
La représentation visuelle d’un écosystème digital reste une prestation très pointue, que peu d’interlocuteurs qualifiés sont capables d’appréhender du côté des annonceurs, avec par voie de conséquence la difficulté de « vendre cette prestation ». C’est bien sûr à nous de le faire et de le pousser de la façon la plus naturelle qui soit. Mais quand même
Les clients sont généralement demandeurs de représentations simples, rapides à réaliser, et bien évidemment flexibles en ce qui concerne les mises à jour… Les représentations isométriques de Paul Kahn sont remarquables et relèvent du musée
, bien qu’étant tirées de cas réels, les modes projets très rythmés de l’industrie digitale me paraissent en totale inadéquation avec ce type de représentation, hélas.
D’autre part, toutes ces problématiques liées à la complexité et à l’organisation de la représentation des espaces digitaux profonds, sont très difficiles à traiter en atelier de travail, etc. peu d’acteurs du digital sont prêts à relever les défis de ce fastidieux et complexe ouvrage de structuration du chaos. Cela me fait beaucoup penser aux réflexions d’Edgar Morin, notamment dans son « introduction à la pensée complexe », avec des questions du type « comment envisager la pensée de façon non simplifiante ? ». C’est au fond le cœur de la question. Car pour être compris et avancer dans le projet, nos interlocuteurs ont besoin d’appréhender la complexité de leur écosystème digital, mais bien souvent cela doit être présenté de façon simple… avec ce que cela implique de dégâts sur la réalité du complexe.
Dans les faits et le quotidien des projets digitaux, les représentations visuelles qu’elles soient éditoriales ou fonctionnelles restent le parent pauvre de la documentation projet, bien que cruciale, faute de maturité parfois mais aussi et surtout en raison des contraintes de timing projet 100 % orientés sur les objectifs de mise en ligne…
Pour ma part, ces représentations avancées s’intègrent bien en phase d’étude, pour mettre à plat un existant, photographier un système complexe. Ensuite, en mode opérationnel et en phase de production, il devient beaucoup plus difficile de recourir à ces outils, car ils sont très difficiles à faire évoluer (!) et nos clients aiment tellement faire évoluer les choses en cours de projet.
Encore bravo pour votre article, on parle trop peu de ces choses-là,
Bien à vous,
J.Muckensturm
«bien qu’étant tirées de cas réels, les modes projets très rythmés de l’industrie digitale me paraissent en totale inadéquation avec ce type de représentation, hélas.»
Au lieu de faire ça avec Illustrator, une absurdité quand on y réfléchit en terme de complications, on peut faire un peu plus simple, et bien plus rapide, en utilisant directement un outil 3D, puis un classique export image.
C’est que fait Jean-Christophe Carius, et j’avais pu voir les livrables pour la Fondation PPR en 2009, c’était admirable de clarté et de simplicité — le client pouvait réellement balayer du regard la proposition de réorganisation des contenus (une image site actuel, une image site après).
Les exemples d’arborescence isométriques sont réalisés à partir de PowerPoint. Oui, ils réclament une certaine habileté dans le contexte d’un projet de l’ « industrie digitale ».