Arborescence fonctionnelle

Pourquoi réaliser une arborescence fonctionnelle ?

C'est quoi une arborescence fonctionnelle ?
Avez-vous besoin de modéliser l'arborescence fonctionnelle de votre dispositif digital ? Et comment faire pour concevoir l'arborescence fonctionnelle de votre projet ? Dans cet article, nous allons vous expliquer l'intérêt de l'arborescence fonctionnelle et les moyens de la représenter au travers de quelques exemples. C'est un travail qui relève du design d'interaction et de l'architecture de l'information.

Dans le projet digital, l'arborescence éditoriale des contenus est considérée comme incontournable : tout le monde s'accorde à dire qu'il est important de visualiser la hiérarchie et l'organisation des contenus. L'arborescence de contenu permet de visualiser l'architecture de l'information et de saisir l'envergure éditoriale du dispositif digital.
Mais, qu'en est-il du fonctionnement ?

Il est plus rare de parler d'arborescence fonctionnelle.
C'est pourtant un document fondamental en conception. L'arborescence du fonctionnement permet de représenter la structure fonctionnelle du dispositif digital, c'est à dire, l'organisation et l'articulation des fonctions du site. L'arborescence fonctionnelle permet de visualiser le design d'interaction.

Visualiser le design d'interaction ?

L'arborescence fonctionnelle exprime les principes de design d'interaction du site. Autrement dit, avec l'arborescence du fonctionnement, on figure visuellement les imbrications et les connexions entre les différents gabarits constitutifs du support interactif. Ce qui revient à en illustrer le fonctionnement. On parle d'arborescence des fonctions car la projection symobilse la hiérarchie entre les grandes briques fonctionnelles du site. On peut aussi parler de diagramme fonctionnel, d'arbre fonctionnel ou de graphe fonctionnel. Mais peu importe le nom, l'essentiel réside dans la fonction : comprendre le fonctionnement du dispositif digital en un coup d'oeil.

La représentation de la mécanique du site web sous forme d’arborescence fonctionnelle permet à tous les acteurs du projet de partager une vision commune de l'organisation du dispositif, sur le plan du fonctionnement.

Les arborescences fonctionnelles permettent de modéliser la mécanique ainsi que le fonctionnement du support : l’arborescence fonctionnelle est particulièrement précieuse pour compléter l'arborescence éditoriale dont elle agrègera les contenus. L'arborescence fonctionnelle est aussi un bon outil pour échanger avec les interlocuteurs techniques et préparer l'inventaire des gabarits.

Rationaliser le fonctionnement

Le designer d'interaction cherche à factoriser le fonctionnement du dispositif digital. Comme un développeur s'emploie à simplifier son code, le designer interactif recherche à proposer un fonctionnement optimal faisant appel à un minimum de composants fonctionnels . D'une part, il s'agit d'optimiser les coûts, en recyclant au maximum les composants fonctionnels existants. D'autre part, on se démène pour améliorer l'expérience de l'utilisateur en proposant un minimum de choses différente à l'utilisateur : l'interface doit s'appuyer sur des éléments consistants et homogènes et limiter le travail d'apprentissage de l'utilisateur...

Plus le dispositif digital est dense, plus le designer d'interaction essaye de minifier le fonctionnement : la tentation est grande de multiplier les fonctions et de créer de nouveaux gabarits pour chaque besoin qui émerge. C'est une grave erreur de conception, une hérésie sur le plan de l'UX, et un gouffre potentiel au niveau financier...

Il y a donc une différence relativement marquée entre l'arborescence éditoriale et l'arborescence fonctionnelle. L'arborescence des contenus gagne à s'étoffer pour étendre l'envergure éditoriale, agrandir son territoire en matière de référencement et proposer de nouveaux axes de lecture aux usagers...

Ce n'est pas la même histoire pour l'arborescence du fonctionnement... Il est effectivement souhaitable de maîtriser l'envergure fonctionnelle du dispositif digital et de contenir sa croissance qui peut s'avérer critique sur les plans de l'utilisation mais aussi de la maintenance...

Un schéma juste, ou juste un schéma ?

Dans la documentation de la conception, l'arborescence fonctionnelle n'est pas un schéma de plus. C'est LE graphe dont tout le monde a besoin. En effet, le diagramme du fonctionnement est utile à tous les acteurs du projet impliqués dans sa réalisation :

• Développeur back-end : il comprend en un coup d'oeil le fonctionnement général du dispositif digital.
• Développeur front-end : il saisit les interactions entre les différents gabarits et peut préparer, lui aussi, la factorisation de l'intégration.
• Designer graphique : il visualise le périmètre fonctionnel et peut estimer les charges représentés par l'effort de production.
• Marketeur : il peut pointer les gabarits dans lesquels il estime pertinent d'activer des leviers marketing.
• Designer de l'information et designer de l'interaction : ils savent précisément ce qu'ils ont à maquetter sur le plan de l'interface.
• Rédacteur : il accède à la vision technique du projet et dispose du pendant de l'arborescence éditoriale sur le plan du fonctionnement.
• SEO : ah, il peut conceptualiser le maillage éditorial avec une meilleure compréhension de l'imbrication des gabarits.
• Chef de projet : il peut communiquer efficacement avec tout le monde :).

Modéliser le fonctionnement

Avec l'arborescence fonctionnelle, vous disposez d'une excellente vision du fonctionnement de votre dispositif. Voici les principaux objectifs de la matérialisation d'un diagramme complet du fonctionnement :

• Formaliser le fonctionnement du support interactif.
• Factoriser les composants fonctionnels (fonctionnalité, gabarit, process).
• Visualiser le design d'interaction.
• Comprendre les fonctions de chaque gabarit (écran type).
• Distinguer les parties privés des parties publiques du site.
• Représenter les processus et les enchaînements d'écrans dans le site.
• Mettre au jour toutes les composantes fonctionnelles du dispositif.
• Représenter visuellement les imbrications des composantes fonctionnelles.
• Fournir la documentation permettant de fluidifier le travail collaboratif.
• Faciliter les échanges avec les interlocuteurs techniques.
• Favoriser le travail de rédaction des spécifications techniques.
• [...]

L’arborescence fonctionnelle est une pièce maîtresse dans la documentation du projet. Ce n'est pas un document indispensable mais il facilite grandement les interactions entre les équipes. Tous les projets complexes nécessitent, tôt ou tard, la mise à plat du fonctionnement...

Afficher l'envergure fonctionnelle

L'envergure fonctionnelle, concrètement, c'est le nombre de gabarits et de fonctions qui permettent de faire fonctionner votre support interactif. Un dispositif digital de taille critique peut être dynamisé par plus de 200 gabarits (Cdiscount, Carrefour, Orange...). C'est beaucoup trop ! Le rôle du designer d'interaction est de proposer des interfaces agréables mais également rationalisées.

L'absence de vision fonctionnelle exhaustive est un frein pour l'efficacité du dispositif digital. Comment maîtriser ce que l'on ne connaît pas ? Comment comprendre ce qu'on ne peut pas représenter ? Recourir à une cartographie du fonctionnement permet d'afficher l'envergure fonctionnelle de façon tangible. L'arborescence fonctionnelle est un bon outil pour apprivoiser la complexité du projet.

Un acteur qui n'envisage la croissance fonctionnelle et éditoriale qu'au travers de la création de nouveaux templates doit être trainé en justice :). Il court le risque de créer la fameuse usine à gaz que tous les professionnels du digital craignent, particulièrement dans le milieu de la production.

Multiplier les coupes du fonctionnement

L'arborescence fonctionnelle ne se fige pas à représenter la hiérarchie des gabarits. Le designer d'interaction cherche, dans un premier temps, à dresser la cartographie générale du site. Cette vision fonctionnelle est parfois insuffisante. Il faut alors multiplier les vues, ou les plans de coupes... Comme en architecture.

On souhaitera par exemple détailler le fonctionnement d'un processus qui n'apparaîtra pas de façon assez pécise dans l'arborescence. Le designer d'interaction peut également faire des plans isométriques pour matérialiser les liens entre les différents gabarits. La vision isométrique est très utile. C'est un atout pour les experts du SEO dans la construction du maillage.

In fine, un diagramme fonctionnel, comme tout schéma, revêt une notion extrêmement dynamique. Toutes les représentations sont possibles. Mais il ne s'agit pas de perdre du temps en représentation inutile. Le plus important est bien de figurer tous les écrans types du dispositif digital. Les niveaux de granularité plus fins sont optionnels (fonctionnalité, type de gabarit, nomenclature)...

Inventoriez toutes les composantes fonctionnelles...

Pour cartographier le fonctionnement d'un site, il faut avoir une très bonne vision de sa mécanique générale. Le travail de schématisation du fonctionnement peut être réalisé pour un site existant ou dans le cadre de la création du dispositif. Dans ce dernier cas, le designer d'interaction doit disposer d'une solide expérience car il s'agira de projeter le fonctionnement du site avant de l'avoir conçu...

Comme pour une cartographie de contenu, il faut d'abord recueillir le matériel de base. Ainsi, pour représenter le volume des contenus, on procèdera à un inventaire de toutes les pages du dispositif digital. Cet inventaire éditorial est la clé pour maîtriser la densité du dispositif, sa profondeur, son envergure, son organisation. L'inventaire éditorial est le travail de base qui permet de se réapproprier l'organisation et l'articulation hiéarchique des contenus entre eux.

Il en va de même pour le fonctionnement. De même qu'on ne peut pas représenter une cartographie des contenus sans avoir procédé à l'inventaire éditorial, il paraît délicat de projeter le fonctionnement d'un dispositif digital sans avoir énumérer et dresser la liste de toutes les composantes fonctionnelles constitutives du dispositif digital.

L'inventaire fonctionnel est ainsi bienvenue en prémisse du travail de représentation de l'arborescence fonctionnelle. Pour inventorier le support interactif, le designer d'interaction se penche sur :

• les gabarits types,
• les fonctionnalités simples,
• les fonctionnalités enrichies (module),
• les processus.

Il s'agit d'abord d'établir le listing de tous les composants qui permettent de faire fonctionner le site. On reporte en général toutes les fonctions au sein d'un tableau excel, en veillant à regrouper les gabarits et les fonctions autour d'espaces fonctionnels homogènes (par exemple, le processus de commande, l'espace client...).

Le fait de mettre à plat, l'inventaire complet des éléments de fonctionnement, permet d'objectiver le fonctionnement et de bien saisir la façon dont le dispositif digital se comporte sur le plan technologique.

L'arborescence éditoriale est aussi concernée...

L'arborescence éditoriale est aussi concernée par le travail de cartographie fonctionnelle... En effet, ce sont les gabarits éditoriaux qui vont permettre de dynamiser les contenus et de donner corps à l'envergure éditoriale stockée dans l'arborescence... Les templates éditoriaux devront être spécifiés afin que tous les acteurs du projet soient capable de visualiser les parties fonctionnelles du projet qui permettent de diffuser les contenus.

Ainsi, le gabarit Dossier va mettre en musique les grands dossiers du site, quand l'article permettra d'approfondir chaque page de façon exhaustive...
Ce que nous cherchons à expliquer, c'est que l'arborescence éditoriale et l'arborescence fonctionnelle portent des informations complémentaires : d'un côté le contenu, de l'autre le contenant.

Un projet qui permet de visualiser l'architecture de l'information et le design d'interaction présuppose un dispositif digital très bien conçu. C'est une certitude, visualiser l'organisation du contenu et la structuration du conteneur représente des atouts dans la conduite et l'optimisation de votre dispositif digital.

Projection du fonctionnement...

Sur la base de l'inventaire fonctionnel, on projette le fonctionnement sous forme de cartographie. Un diagramme. Un graphe fonctionnel. Un arbre décisionnel. L'essentiel est de faire figurer les gabarits types pour comprendre l'articulation générale du dispositif digital.

Il n'y a pas de méthode type pour construire l'arborescence. Vous pouvez néanmoins vous appuyer sur les exemples présentés pour vous aider à établir le fonctionnement de votre dispositif digital.
N'oubliez pas qu'il ne s'agit pas exactement du même type de représentation que l'arborescence éditoriale. L'arborescence fonctionnelle cherche à figurer le fonctionnement, et la notion de hiérarchie est ici moins importante que pour l'arborescence des contenus. Nous touchons ici aux spécifcités métiers et aux différences entre les disciplines de l'architecture de l'information et du design d'interaction. Un bon accès au contenu présuppose de gros efforts sur les plans de la structure éditoriale (architecture de l'information) ; une progression fluide entre les écrans présuppose d'excellents parcours utilisateurs sur les plans fonctionnels (design d'interaction). Les deux démarches forment des synergies comme disent les marketeurs.

Démarche pour réaliser une arborescence fonctionnelle

Les travaux cartographiques et les représentations visuelles débouchent invariablement vers la réalisation d’arborescence éditoriale puis la modélisation du fonctionnement mécanique du dispositif. Il est primordial de réaliser les arborescences éditoriales ainsi que les arborescences fonctionnelles de vos projets de site web, indépendamment de la complexité et même s’il faut éditer un panneau 4 X 3.
:)

Des travaux en matière de conception d'arborescence fonctionnelle peuvent suivre les étapes suivantes :

• analyse de l’existant lorsque l’intervention porte exclusivement sur l'arborescence fonctionnelle,
• inventaire des gabarits du dispositif,
• mise en place d'une nomenclature pérenne pour identifier les gabarits,
• rationalisation du fonctionnement du dispositif,
• modélisation et projection de l'arborescence fonctionnelle.

Note : la modélisation de l'arborescence fonctionnelle peut faire l’objet d'ajustements au cours du cycle de conception.

Arborescences de fonctionnement : compléments

Tout commence par un inventaire fonctionnel.

Après ou plutôt en parallèle, l'arbo fonctionnelle est à mixer avec l'arbo éditoriale et les wireframes. On parle de triade de conception du projet : arborescence éditoriale + arborescence fonctionnelle + wireframing.

L’arborescence fonctionnelle, qui représente la logique d’articulation, d’imbrication et de relations entre les gabarits du support interactif, est donc à concevoir de paire avec l’arborescence éditoriale dont elle emmagasinera les contenus… Chaque composante fonctionnelle doit également être modélisée sous forme d'écran au sein des wireframes - technique de wireframing.