Dataviz pour les designers : comment créer des graphiques qui communiquent vraiment
Le guide d'un designer en activité sur la data visualization. Choix des graphiques, couleur, hiérarchie, accessibilité et les principes qui transforment des données en un graphique qu'un vrai utilisateur lit en trois secondes.
La plupart des dashboards produit ne sont que du bruit. Douze graphiques, six palettes de couleurs, aucune hiérarchie claire, et un utilisateur qui doit étudier chacun d'eux pour comprendre ce qu'il mesure. L'équipe a appelé ça « data-driven » et l'a livré. L'utilisateur appelle ça confus et l'ignore.
Ce papier est la version de terrain. Les types de graphiques qui communiquent vraiment, les règles de couleur qui tiennent à petite taille, les décisions de hiérarchie qui permettent de comprendre les données en trois secondes, et les bases d'accessibilité qui gardent le travail utilisable. Pas de tutoriels D3, pas de galeries de graphiques, juste la discipline de design de la dataviz au sein d'un vrai produit.
Ce qu'est vraiment la dataviz
La data visualization est l'encodage visuel de nombres en formes que l'œil compare plus vite que le cerveau ne lit du texte. Un graphique en barres transforme une colonne de nombres en rectangles dont l'œil compare les hauteurs instantanément. Un graphique linéaire transforme une série temporelle en une pente que l'œil lit comme une histoire. L'encodage, c'est tout le travail.
Un mauvais graphique est un graphique où l'encodage se bat contre les données. Un camembert à onze parts n'encode rien que l'œil puisse comparer. Un graphique en barres 3D encode les données, puis déforme l'encodage pour l'effet visuel. Un graphique linéaire à double axe encode deux histoires comme si c'en était une seule. Chacun est un échec de design, pas un échec de maths.
L'analyse de la hiérarchie visuelle en design explique comment l'œil lit une page statique. La dataviz, c'est de la hiérarchie appliquée aux nombres.
Pourquoi le design de dataviz compte dans un produit
La plupart des surfaces produit portent une ou deux informations par écran. Un dashboard en porte des dizaines. Sans discipline de design, un dashboard devient un mur de signaux concurrents où l'utilisateur ne trouve pas ce qui compte.
La dataviz échoue aussi différemment des autres formes de design. Un bouton de la mauvaise couleur est moche. Un graphique du mauvais type est trompeur. L'utilisateur prend une décision selon ce qu'il croit que le graphique dit, alors que le graphique disait autre chose. Le coût d'un graphique trompeur est une mauvaise décision, pas seulement une mauvaise esthétique.
En 2026, chaque surface produit est plus chargée en données qu'il y a cinq ans. Les fonctionnalités d'IA exposent la confiance du modèle, des métriques d'usage, des ventilations de coûts. Les surfaces analytiques sont des tableaux et des graphiques partout. Les designers capables de construire des systèmes de dataviz sont désormais critiques pour tout produit plus complexe qu'une app mono-usage.
Choisissez le graphique qui correspond à la question
Le choix du graphique représente 80 % du travail de dataviz. Choisissez le mauvais et aucun polish ne le sauvera. Choisissez le bon et le design se termine presque tout seul.
Les cinq familles de graphiques qui couvrent l'essentiel du travail produit
La plupart de la dataviz produit vit dans cinq familles de graphiques. Maîtrisez-les et plus de 90 % du travail de dashboard devient routinier.
| Question que se pose l'utilisateur | Type de graphique |
|---|---|
| Comment ce nombre se compare-t-il aux autres dans une catégorie ? | Graphique en barres |
| Comment ce nombre évolue-t-il dans le temps ? | Graphique linéaire |
| Quelle est la répartition d'un tout ? | Barres empilées ou treemap (presque jamais un camembert) |
| Comment deux variables sont-elles liées ? | Nuage de points |
| Quelle est la distribution des valeurs ? | Histogramme ou boîte à moustaches |
Si le graphique à l'écran ne correspond à aucune de ces familles, l'utilisateur ne sait probablement pas à quelle question il répond. Changez le graphique pour qu'il corresponde à la question, ou changez la question posée.
Quand utiliser un simple nombre
Le graphique le plus sous-utilisé en design produit, c'est l'absence de graphique. Un gros nombre avec un libellé et une comparaison (« Chiffre d'affaires : 124 500 $, en hausse de 12 % par rapport au mois dernier ») communique plus que la plupart des dashboards avec douze graphiques.
Utilisez un simple nombre quand :
- L'utilisateur ne s'intéresse qu'à la dernière valeur, pas à la tendance
- La tendance est implicite grâce au contexte de comparaison
- L'espace écran est limité (mobile, barre latérale, barre d'état)
Le poids visuel d'un simple nombre avec une typographie en gras et un libellé clair est énorme. La plupart des dashboards seraient meilleurs si la moitié des graphiques était remplacée par de simples nombres.
Quand utiliser des petits multiples
Les petits multiples sont une grille du même type de graphique répété pour différentes catégories. Utilisez-les quand l'utilisateur doit comparer des motifs entre de nombreux éléments, pas les valeurs absolues.
Une grille de 12 sparklines montrant le chiffre d'affaires par région se parcourt plus vite qu'un seul graphique avec 12 lignes qui se croisent. L'œil lit chaque région isolément, puis compare les formes à travers la grille. La technique vient d'Edward Tufte et reste sous-utilisée dans les dashboards produit.
Le plafond se situe autour de 16 à 20 petits multiples par vue. Au-delà, l'œil ne peut plus tous les comparer et la grille devient du papier peint.
Les graphiques qui ne marchent presque jamais en produit
Certains types de graphiques persistent parce qu'ils font impressionnant sur une capture d'écran. Ils ne communiquent presque jamais bien dans un vrai produit. Coupez-les quand vous les voyez.
Les camemberts de plus de trois parts. L'œil ne peut pas comparer précisément des angles au-delà de trois ou quatre parts. Utilisez plutôt des barres empilées ou un treemap. Les camemberts fonctionnent pour des ratios à deux parts (oui/non, on/off), et presque rien d'autre.
Les graphiques en barres 3D. La troisième dimension déforme l'encodage. La barre à l'avant paraît plus grande qu'elle ne l'est, celle à l'arrière plus petite. Utilisez toujours de la 2D.
Les graphiques linéaires à double axe. Deux axes y sur un graphique suggèrent que les deux lignes devraient être comparées, mais la comparaison n'a aucun sens puisque chaque axe a une échelle différente. L'utilisateur lit une corrélation qui n'existe pas. Séparez en deux graphiques ou utilisez des valeurs indexées sur un seul axe.
Les donuts avec un libellé à l'intérieur. Les donuts sont des camemberts avec un effort en plus. Le libellé à l'intérieur duplique souvent une information déjà à l'écran. Utilisez plutôt un simple nombre et un petit graphique en barres.
Les nuages de mots. Ils ressemblent à des données et ne communiquent rien. La taille du mot est vaguement corrélée à la fréquence, l'œil ne peut pas comparer précisément les tailles, et les mots plus longs paraissent plus gros parce qu'ils ont plus de pixels. À couper à vue.
Les graphiques radar. Utiles pour des comparaisons très spécifiques (notes multidimensionnelles sur la même échelle), presque toujours mal utilisés pour des comparaisons générales. L'œil ne peut pas comparer les aires de polygones irréguliers. Si le graphique ne répond pas à un cas d'usage précis et connu, utilisez un graphique en barres.
La couleur en dataviz
En dataviz, la couleur n'est pas de la décoration. Elle fait partie de l'encodage. Un mauvais choix de couleur peut faire basculer un graphique de clair à trompeur.
Les trois usages de la couleur
Chaque couleur d'un graphique fait l'un de ces trois boulots :
La couleur catégorielle distingue des catégories discrètes sans ordre. Chaque région, chaque produit, chaque segment client reçoit une teinte différente. Utilisez une palette de 6 à 8 teintes distinctes. Au-delà de 8, l'œil commence à confondre les couleurs proches et l'encodage échoue.
La couleur séquentielle montre des valeurs ordonnées sur une seule dimension. Du clair au foncé, de la faible à la forte saturation. Utilisez une seule rampe de teinte, pas plusieurs. Les palettes séquentielles communiquent l'ampleur par la valeur, pas par la teinte.
La couleur divergente montre des valeurs allant du négatif au positif autour d'un point médian significatif. Du rouge au blanc au bleu est l'exemple classique. Le point médian doit être un vrai zéro ou un vrai seuil, pas une commodité visuelle.
Mélanger les trois tue le graphique. Une palette catégorielle utilisée pour encoder une ampleur est illisible. Une palette séquentielle utilisée pour encoder des catégories est déroutante. Choisissez la bonne pour les données.
L'analyse de la théorie des couleurs pour designers couvre les principes plus larges de la couleur. Le glossaire sur la palette de couleurs explique comment les palettes sont structurées.
Les règles de couleur qui survivent aux petites tailles
La plupart des couleurs de graphiques échouent aux petites tailles où les graphiques vivent réellement dans les UI produit. Une sparkline de 60 pixels n'a pas la place visuelle pour rendre clairement huit couleurs catégorielles.
Cinq règles qui tiennent :
- N'utilisez pas plus de 6 couleurs catégorielles par graphique. Au-delà de six, l'œil abandonne.
- Réservez une couleur d'accent pour la mise en avant. La ligne ou la barre que l'utilisateur doit regarder en premier reçoit la couleur de marque ou une teinte à fort contraste. Tout le reste est atténué.
- Atténuez les données secondaires. Fonds, grilles, libellés d'axes à 40 à 60 % d'opacité. Données au premier plan en pleine saturation. Le contraste, c'est la hiérarchie.
- Testez en monochrome. Convertissez le graphique en niveaux de gris et vérifiez que la hiérarchie se lit encore. Si le graphique ne fonctionne qu'en couleur, la couleur en fait trop.
- Testez en dark mode. La plupart des graphiques produit doivent fonctionner sur fonds clairs et sombres. La même teinte paraît souvent trop saturée sur sombre et trop délavée sur clair. Construisez une palette appairée par mode.
L'analyse du design du dark mode couvre la discipline plus large du dark mode. Les graphiques sont l'une des pièces les plus difficiles à réussir en dark mode.
Le daltonisme n'est pas une niche
Environ 8 % des hommes et 0,5 % des femmes ont une forme de déficience de la vision des couleurs. La plupart des palettes catégorielles qui paraissent correctes à un designer deviennent illisibles pour ces utilisateurs.
La solution : ne jamais encoder une information par la couleur seule. Associez la couleur à la forme, à la position, à un libellé ou à une texture. Un graphique linéaire avec trois lignes colorées devrait aussi avoir des libellés directs sur chaque ligne. Un graphique en barres devrait avoir des valeurs affichées sur les barres que l'utilisateur doit comparer.
Testez les palettes avec des simulateurs de daltonisme. L'échec le plus courant est le rouge et le vert indiscernables pour les utilisateurs atteints de deutéranopie. Utilisez plutôt le bleu et l'orange comme paire catégorielle : les deux fonctionnent pour les déficiences les plus courantes.
L'analyse du contraste de couleur accessible couvre les seuils de contraste. Le glossaire sur le ratio de contraste explique comment le contraste se mesure.
La hiérarchie dans un graphique
Chaque graphique a une hiérarchie. L'œil de l'utilisateur doit se poser d'abord sur les données, ensuite sur les libellés, enfin sur les grilles et les axes. La plupart des graphiques produit inversent cet ordre et l'utilisateur doit travailler pour trouver les données.
Quoi mettre en avant, quoi atténuer
Les données sont le héros. Barres, lignes, points reçoivent le plus fort poids visuel. Pleine opacité, pleine saturation, couleur de marque ou d'accent quand c'est pertinent.
Les libellés et les titres sont les seconds rôles. Assez forts pour être lus, pas assez pour concurrencer les données. Généralement 50 à 70 % du poids visuel des données.
Les grilles, les lignes d'axes et les graduations sont la scène. Visibles seulement quand l'utilisateur les cherche. Généralement 20 à 40 % du poids visuel des libellés.
La plupart des graphiques produit sortent avec des grilles à pleine force parce que c'est le défaut de toutes les bibliothèques de graphiques. La solution tient en une surcharge CSS qui atténue les grilles, et le graphique se lit immédiatement comme conçu plutôt que comme généré par un template.
Les libellés directs battent les légendes
Une légende sur le côté d'un graphique force l'œil de l'utilisateur à faire du ping-pong entre la légende et les données. Des libellés directs sur chaque ligne, barre ou segment permettent de lire le graphique en une seule passe.
Le libellage direct est plus difficile à implémenter et les bibliothèques de graphiques le gèrent mal. Construisez-le quand même. Un graphique linéaire avec trois lignes libellées à leur extrémité droite est radicalement plus lisible que le même graphique avec une légende dans le coin.
L'exception, c'est quand il y a trop de séries pour que les libellés directs tiennent. Dans ce cas, utilisez une légende interactive. Survoler ou toucher un élément de la légende met en avant cette série dans le graphique et atténue les autres.
La règle des trois secondes
Chaque graphique d'un produit devrait répondre à sa question en trois secondes. Si l'utilisateur doit étudier le graphique, le design a échoué.
Comment tester la règle des trois secondes
Montrez le graphique à quelqu'un qui n'a jamais vu le dashboard. Demandez « qu'est-ce que ce graphique vous dit ? » Chronométrez la réponse.
Si la réponse arrive en moins de trois secondes, le graphique fonctionne. Sinon, trouvez ce qui les ralentit. Le plus souvent, c'est l'un de ces points :
- Le type de graphique ne correspond pas à la question
- La hiérarchie est inversée (grilles plus bruyantes que les données)
- La légende force le ping-pong de l'œil
- L'encodage par la couleur n'est pas clair
- Le graphique a trop de séries
Corrigez l'échec, retestez. Un dashboard où chaque graphique passe le test des trois secondes est un dashboard qu'un utilisateur peut vraiment utiliser.
Quand la règle des trois secondes ne s'applique pas
Les outils d'analyse exploratoire (outils de BI, notebooks de data science) sont différents. L'utilisateur ne jette pas un coup d'œil, il enquête. Il veut chaque variable, chaque dimension, chaque filtre. Trois secondes deviennent trois minutes et c'est très bien.
L'erreur est de construire un dashboard produit avec la discipline d'un outil de BI. L'utilisateur du produit n'enquête pas. Il vérifie. Trois secondes, c'est le budget.
L'interaction en dataviz
Les graphiques dans les UI produit sont interactifs. Survol pour les infobulles, clic pour filtrer, sélection par glissement pour zoomer. Les interactions demandent un design aussi délibéré que l'encodage statique.
Design des infobulles
Les infobulles sur les graphiques répondent à la question « quelle est la valeur exacte de ce point ? » La plupart des bibliothèques de graphiques affichent par défaut une infobulle qui montre toutes les séries d'un coup, ce qui devient un mur de texte au survol.
De meilleurs défauts :
- Une infobulle par série, pas toutes les séries. Survolez la ligne qui vous intéresse, voyez la valeur de cette ligne. Survoler le fond du graphique n'affiche rien.
- Les infobulles incluent l'unité. « 1 240 $ » et non « 1240 ».
- Les infobulles montrent le contexte de comparaison quand c'est utile. « 1 240 $ (+8 % vs la semaine dernière) » transforme l'infobulle en histoire.
- Les infobulles ne bloquent jamais les données. Positionnez-les au-dessus ou en dessous du curseur selon la proximité du bord du graphique.
Filtrage et sélection
Les graphiques qui prennent en charge la manipulation directe donnent une impression de réactivité qu'un graphique nécessitant un panneau de filtres séparé n'offre pas. Sélectionner une plage de dates sur l'axe x pour zoomer, cliquer sur une catégorie de la légende pour l'isoler, faire glisser une ligne de seuil pour filtrer des lignes. Chacune demande un travail d'ingénierie qui paie en confiance utilisateur.
Le risque, c'est la sur-ingénierie. Un graphique qui a besoin de cinq interactions pour être utile est un graphique qui devrait être scindé en plusieurs graphiques plus simples. Chaque interaction a un coût cognitif.
Le glossaire sur la divulgation progressive couvre le principe plus large. Les graphiques peuvent bien l'exploiter en cachant les contrôles avancés jusqu'à ce que l'utilisateur démontre son intention.
Les échecs de dataviz à surveiller
Chaque audit de dashboard relève les mêmes échecs. Si le produit en livre un seul, la couche dataviz sape le reste du produit.
Des axes y tronqués qui exagèrent le changement. Un graphique en barres dont l'axe y commence à 95 au lieu de zéro transforme une variation de 2 % en falaise visuelle. Utilisez des axes sur toute la plage sauf raison claire du contraire, et signalez explicitement toute troncature.
Des graphiques en barres sans base à zéro. La longueur de la barre est l'encodage. Si la barre ne part pas de zéro, l'encodage ment. C'est non négociable pour les graphiques en barres. Les graphiques linéaires peuvent utiliser des axes tronqués quand ils montrent une petite plage dans le temps.
Des types de graphiques incohérents dans un même dashboard. Deux graphiques en barres d'orientations différentes, deux graphiques linéaires avec des plages d'axes différentes, un camembert à côté d'une barre empilée montrant les mêmes données. Choisissez le type de graphique adapté à chaque question, mais gardez un traitement visuel cohérent dans tout le dashboard.
Des graphiques qui mettent plus de temps à charger que le reste de la page. Un dashboard qui affiche la mise en page en 200 ms et les graphiques en 2 secondes paraît cassé. Construisez des états skeleton pour chaque graphique. Chargez en lazy-load les graphiques sous la ligne de flottaison. Streamez les données au lieu d'attendre la charge complète.
Des graphiques qui ignorent la marque. Un dashboard qui utilise les couleurs par défaut de la bibliothèque de graphiques ressemble à un template. La palette des graphiques doit dériver du système de couleurs de la marque, avec des ajustements pour l'accessibilité et la lisibilité à petite taille. Ne livrez jamais en production un dashboard avec la palette par défaut de Chart.js ou Recharts.
L'analyse de la palette de couleurs de marque couvre la discipline plus large de la couleur de marque. Les palettes de dataviz se dérivent, elles ne s'inventent pas.
La dataviz dans les conditions de 2026
Trois évolutions ont changé la façon de concevoir la dataviz. Le travail doit s'adapter.
L'IA génère des graphiques en quelques secondes. Des outils comme ChatGPT et Claude peuvent générer un graphique à partir de données brutes en un seul prompt. Le risque, c'est que les designers arrêtent de réfléchir au choix du graphique parce que l'IA en choisit un. L'IA choisit presque toujours un type de graphique générique qui ne correspond pas à la vraie question. Utilisez l'IA pour les premiers jets, puis refactorez selon la question que se pose l'utilisateur.
La donnée en temps réel est la norme. Les dashboards streament désormais des données en direct au lieu de se rafraîchir toutes les 60 secondes. L'implication de design : le mouvement a aussi besoin d'être conçu. Des graphiques live qui clignotent à chaque mise à jour sont inutilisables. Une interpolation fluide entre les points de données et un indicateur « live » clair sont le minimum.
Les dashboards mobiles sont courants. Un dashboard conçu uniquement pour le desktop est un dashboard qui perd l'essentiel de son usage le week-end et en déplacement. Les graphiques sur mobile demandent d'autres décisions : souvent des types de graphiques plus simples, moins de séries, des mises en page plus hautes qui défilent plutôt que des grilles qui se compressent.
L'analyse du responsive design couvre la discipline responsive plus large. La dataviz est l'une des couches les plus difficiles à rendre vraiment responsive.
FAQ
Quel type de graphique dois-je utiliser ?
Faites correspondre le graphique à la question que se pose l'utilisateur. Comparer des valeurs entre catégories : graphique en barres. Montrer l'évolution dans le temps : graphique linéaire. Montrer les parts d'un tout : barres empilées ou treemap (presque jamais un camembert). Montrer des relations entre deux variables : nuage de points. Montrer une distribution : histogramme ou boîte à moustaches. Si le graphique à l'écran ne rentre dans aucune de ces cases, l'utilisateur ne sait pas à quelle question il répond.
Quand éviter les camemberts ?
Presque toujours. Les camemberts fonctionnent pour deux ou trois parts quand le ratio est toute l'histoire (oui/non, on/off, simples partages binaires). Au-delà de trois parts, l'œil ne peut pas comparer précisément les angles et le graphique devient décoration. Utilisez plutôt une barre empilée horizontale ou un treemap.
Combien de couleurs un graphique doit-il utiliser ?
Six couleurs catégorielles maximum, plus un accent pour la série mise en avant. Au-delà de six, l'œil commence à confondre les teintes proches et l'encodage échoue. Pour des données séquentielles (du bas au haut), utilisez une seule rampe de teinte du clair au foncé. Pour des données divergentes (du négatif au positif), utilisez une rampe à deux teintes autour d'un point médian significatif.
Comment rendre les graphiques accessibles ?
N'encodez jamais une information par la couleur seule. Associez la couleur à la forme, à la position, à un libellé ou à une texture. Testez les palettes avec des simulateurs de daltonisme (la deutéranopie est la plus courante). Respectez les minimums de contraste WCAG entre les éléments du graphique et l'arrière-plan. Fournissez des libellés directs plutôt que des références uniquement via la légende quand c'est possible. Ajoutez des noms accessibles aux composants de graphiques pour les lecteurs d'écran.
Qu'est-ce que la règle des trois secondes pour les graphiques ?
Chaque graphique d'un dashboard produit devrait répondre à sa question en trois secondes ou moins face à un utilisateur novice. Si l'utilisateur doit étudier le graphique, le design a échoué. Testez en montrant le graphique à quelqu'un qui n'a jamais vu le dashboard et en chronométrant le temps qu'il met à résumer ce que dit le graphique. Tout ce qui dépasse trois secondes signifie que le graphique a besoin d'être simplifié.
Dois-je utiliser une bibliothèque de graphiques ou tout développer sur mesure ?
Utilisez une bibliothèque de graphiques pour les premiers jets et les prototypes. La plupart des graphiques en production dans les UI produit gagnent à avoir des couches sur mesure par-dessus la bibliothèque pour corriger les défauts : grilles atténuées, libellés directs, palettes de marque, infobulles personnalisées. Une dataviz entièrement sur mesure avec D3 ou canvas ne se justifie que lorsque le type de graphique est assez inhabituel pour qu'aucune bibliothèque ne le prenne en charge.
La dataviz, c'est du design, pas de la décoration
Un dashboard avec une dataviz disciplinée donne l'impression d'un produit qui respecte le temps de l'utilisateur. Un dashboard sans elle donne l'impression d'un mur de décoration qui contient des nombres par hasard. La distance entre les deux est petite, et le seul chemin vers le premier est la discipline de design appliquée au choix des graphiques, à la couleur, à la hiérarchie et à l'interaction.
Choisissez le graphique qui correspond à la question. Atténuez les grilles, mettez les données en avant. Utilisez la couleur comme encodage, pas comme décoration. Testez avec la règle des trois secondes. Testez face au daltonisme. Testez sur mobile et en dark mode.
Le produit qui livre une dataviz disciplinée paraît sérieux. Le produit qui livre la sortie par défaut d'une bibliothèque de graphiques paraît être un template. Les utilisateurs remarquent la différence même quand ils ne savent pas dire pourquoi.
Si vous voulez une équipe qui construit des systèmes de dataviz en même temps que le reste de l'UI produit, engagez Brainy. Des graphiques comme partie à part entière du design system, sur chaque projet.
Lectures associées
- Design de la hiérarchie visuelle
- Théorie des couleurs pour designers
- Design du dark mode
- Contraste de couleur accessible
Want a dashboard or product UI where the data actually communicates? Brainy ships data-heavy interfaces with chart systems built in, not bolted on after the fact.
Get Started
