Lire un diagramme de Sankey des parcours d'un prototype, pas à pas
Un Sankey se lit de gauche à droite : chaque colonne est une étape, chaque bande un passage, son épaisseur le nombre de sessions. Méthode et pièges.
Par Thomas Cescousse, product designer et créateur de DASHUND
Un diagramme de Sankey des parcours se lit de gauche à droite : chaque colonne est une étape de la session, chaque bloc un écran, et chaque bande qui relie deux écrans un passage de l'un à l'autre. Plus une bande est épaisse, plus de sessions l'ont emprunté. Pour le lire utilement, on suit le flux principal, on repère où il se divise, puis on cherche les sorties : les sessions qui s'arrêtent avant l'objectif. Voici la méthode, avec les erreurs de lecture les plus courantes.
D'où vient ce diagramme ?
Le nom vient de Matthew Sankey, un ingénieur irlandais qui l'a utilisé à la fin du XIXe siècle pour représenter les pertes d'énergie d'une machine à vapeur : une large bande d'énergie entrante qui se divise en bandes plus fines, l'épaisseur restant proportionnelle à la quantité. Le principe n'a pas changé. Appliqué à un prototype, ce qui circule n'est plus de l'énergie, mais des sessions. Ce qui « se perd », ce sont les personnes qui quittent le parcours.
Les quatre éléments à reconnaître
| Élément | Ce qu'il représente | Question à se poser |
|---|---|---|
| Colonne | Une étape : le 1er écran vu, le 2e, le 3e… | À quelle étape suis-je ? |
| Bloc | Un écran à cette étape, avec ses sessions | Combien de sessions sont ici ? |
| Bande | Un passage d'un écran à un autre | Où vont-elles ensuite ? |
| Sortie | Les sessions qui s'arrêtent à cet écran | Pourquoi partent-elles ici ? |
Point important : une colonne n'est pas un écran fixe. C'est un rang dans la session. Le même écran peut apparaître dans plusieurs colonnes, par exemple « Produit » à l'étape 2 pour ceux qui y vont directement, et à l'étape 3 pour ceux qui passent d'abord par la recherche.
Une méthode de lecture en cinq temps
1. Partir de l'écran d'entrée
Regardez la première colonne. Dans un prototype, il y a souvent un seul écran de départ, et toutes les sessions y commencent. Notez le total : c'est la base de tous les pourcentages qui suivent.
2. Suivre la bande la plus épaisse
Suivez le flux principal d'étape en étape. Il raconte le parcours « typique ». Est-ce celui que vous aviez imaginé ? Si la bande la plus épaisse après l'accueil part vers la recherche alors que vous attendiez la catégorie, c'est déjà un résultat.
3. Repérer les divisions
Là où une bande épaisse se sépare en plusieurs bandes de taille proche, les gens hésitent. Deux chemins à peu près équivalents depuis un même écran signifient souvent que cet écran ne hiérarchise pas assez ses actions. À l'inverse, une division très déséquilibrée montre un choix évident, ce qui peut être voulu.
4. Chercher les sorties
Les sorties sont souvent la partie la plus utile. Une grosse sortie sur un écran intermédiaire, et surtout juste avant l'objectif, indique un blocage. Par exemple, si sur 200 sessions qui atteignent la livraison, une large part s'arrête là, il faut ouvrir cet écran et regarder ses clics.
5. Revenir en arrière depuis l'écran qui pose question
Un Sankey qui part du début montre où vont les gens. Pour savoir d'où ils viennent, placez l'écran étudié au milieu : vous voyez alors les écrans qui le précèdent et ceux qui le suivent. C'est la lecture la plus parlante pour un écran à fort taux de sortie : arrive-t-on ici par le chemin prévu, ou par un détour ?
Les erreurs de lecture courantes
- Lire l'épaisseur comme du temps. Une bande épaisse veut dire beaucoup de sessions, pas un long moment passé. Le temps
se lit ailleurs, écran par écran.
- Oublier les retours. Selon l'outil, un retour en arrière crée une nouvelle étape ou n'est compté qu'une fois. Dans le
premier cas, un parcours plein d'allers et retours s'étire sur de nombreuses colonnes sans que les gens avancent vraiment : vérifiez la règle avant de lire la longueur des parcours.
- Ignorer le bloc « autres ». Pour rester lisibles, les Sankey regroupent les écrans peu fréquentés d'une étape. Si ce
bloc grossit, c'est que les parcours se dispersent : les gens cherchent.
- Comparer des pourcentages qui n'ont pas la même base. 50 % d'une petite bande, c'est peu de sessions. Revenez toujours
aux volumes.
- Conclure sur trois sessions. Une bande fine sur un petit échantillon peut être le fait d'une seule personne. Regardez
combien de sessions il y a derrière avant de tirer une conclusion.
Sankey, funnel ou sitemap : lequel regarder ?
| Vue | Ce qu'elle montre | Quand la regarder |
|---|---|---|
| Sankey (Flow) | Les chemins réels, étape par étape, et les sorties | Pour découvrir ce que font les gens |
| Funnel (parcours cible) | Combien de sessions suivent un chemin précis, dans l'ordre | Pour mesurer un tunnel attendu |
| Sitemap | Tous les écrans, les liens prévus et ceux réellement suivis | Pour voir ce qui n'est jamais emprunté |
Le Sankey sert à découvrir, le funnel à mesurer ce que vous attendiez. Les deux vont bien ensemble : le Sankey vous montre qu'un détour fréquent existe, le funnel vous dit combien de sessions vont au bout du chemin prévu.
Dans DASHUND : l'onglet Flow
Dans DASHUND, le Sankey est l'onglet Flow. Sous chaque écran s'affichent le nombre de sessions et leur part ; les sorties sont en rouge ; les écrans peu fréquentés d'une étape sont regroupés dans « Autres écrans ». Les réglages se lisent comme une phrase : « Écran étudié [écran] placé à l'étape [N] ». Placé plus loin que l'étape 1, l'écran montre aussi ce qui le précède, et le bloc gris « Début de session » regroupe ceux qui y sont arrivés plus vite.
Deux règles évitent les faux signaux : un écran vu plusieurs fois compte à partir de sa première visite, et les navigations faites avec la barre de Figma (écran précédent, recommencer) sont exclues, parce qu'elles ne sont pas des choix du design. Un clic sur un écran ouvre sa heatmap, un clic sur une bande montre les sessions qui ont fait ce passage.
Le diagramme est d'autant plus lisible que le test est naturel : sans consigne, les gens prennent leurs propres chemins, et c'est justement ce que le Sankey révèle. La méthode est détaillée dans Tester un prototype Figma sans tâches ni script. Pour voir l'onglet Flow sur un exemple, la page Fonctionnalités le présente avec les autres vues.
Questions fréquentes
Qu'est-ce qu'un diagramme de Sankey ?
Un diagramme de flux où l'épaisseur des bandes est proportionnelle à la quantité qui circule. Pour un prototype, il montre combien de sessions passent d'un écran à l'autre, étape par étape.
Pourquoi le même écran apparaît-il dans plusieurs colonnes ?
Parce qu'une colonne est un rang dans la session, pas un écran. Un écran atteint en deux clics par certains et en trois par d'autres apparaît aux deux étapes.
Que signifie une sortie en rouge ?
Les sessions qui s'arrêtent sur cet écran. Une grosse sortie avant l'objectif signale un blocage à examiner avec la heatmap et quelques sessions revues une par une.
Quelle différence entre un Sankey et un funnel ?
Le Sankey montre tous les chemins réellement suivis. Le funnel mesure combien de sessions suivent un chemin précis que vous avez défini, dans l'ordre.
À partir de combien de sessions un Sankey est-il lisible ?
Le flux principal et les grosses sorties se voient vite. Pour comparer des bandes proches, il faut davantage de sessions : DASHUND signale un échantillon faible sous 30 sessions.