conseil en ergonomie
conseil en design UX
architecture de l'information
icone conception UX design

L'arborescence fonctionnelle clarifie le fonctionnement et relève des techniques de conception UX design.
Découvrez des exemples illustrés et des ressources pour définir l'arborescence fonctionnelle de votre projet.
Des modèles d'arborescences et une formation en ligne sont disponibles en accès payant.

Arborescence fonctionnelle

Révisé en Mars 2021

Pourquoi réaliser une arborescence fonctionnelle ?

icone 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 :).

Objectifs des arborescences fonctionnelles

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

Exemples d'arborescence de fonctionnement

icone telecharger des modeles pour analyse UX
TÉLÉCHARGER
150 livrables projets !
Kit de livrables projet : 2,60€ le modèle

exemple d'arborescence fonctionnelle exemple d'arborescence fonctionnelle
ux Sécurité routière
iafactory - Julien MUCKENSTURM
arborescence fonctionnelle arborescence fonctionnelle
référence ux IAFACTORY
iafactory - Julien MUCKENSTURM
arborescence du fonctionnement arborescence du fonctionnement
ux Urbact
iafactory - Julien MUCKENSTURM
arborescence et design d'interaction arborescence et design d'interaction
ux Malakoff Le cercle
iafactory - Julien MUCKENSTURM

Méthode pour définir l'arborescence du fonctionnement

icone formation ux design en ligne
MAÎTRISER
les méthodes UX design
Formation UX en ligne : 18,00€ l'heure

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.

Travaux complémentaires aux arborescences de fonctionnement

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.

auteur Julien Muckensturm iafactory
linked in julien muckensturm

Ressources pour l'arborescence fonctionnelle

APPROFONDIR
le fonctionnement

Livre : Mapping websites, Paul Khan
Mapping websites, Paul Khan

Aller plus loin autour de la conception fonctionnelle

Formation vidéo à visionner :

Livrables à télécharger :

Articles du journal à méditer :

Études de cas à lire sur l'arborescence fonctionnelle :

Travaux à visualiser :

Supports de cours (débutant) à étudier :

Compétences métier pour la conception mobile :

Fiche métier :

Livres à bouquiner :

Autres ressources sur le web :

  • Un outil gratuit pour créer des diagrammes en ligne : diagramic
  • Signalez nous des ressources sympas autour de l'arborescence fonctionnelle en utilisant les commentaires !
Plus de techniques de conception
ENVERGURE FONCTIONNELLE
Identification et listing des gabarits dans une optique de maitrise et de rationalisation du fonctionnement.
inventaire fonctionnel
STRUCTURATION DES CONTENUS
Sélection, organisation et priorisation des contenus projetés au sein d'une vue hiérarchique.
arborescence éditoriale
CONCEPTION D'INTERFACE
Esquisse d'interface utilisateur, projection des contenus et fonctionnalités à l'écran.
wireframing
Arborescence
  • réalisé par iafactory
  • livré sous 4J. ouvrés
  • à partir de 2400€ HT