Graphiques et conception de sites web basés sur les principes d’Edward Tufte

Voici un aperçu des travaux pionniers d’Edward Tufte sur l’utilisation de graphiques pour afficher des informations quantitatives. Il s’agit principalement de textes et d’idées tirés de ses trois livres sur le sujet, ainsi que de quelques documents supplémentaires de mon cru. Cette page est en format texte uniquement : pour comprendre les concepts, il faut lire les livres, car les concepts ne peuvent pas vraiment être saisis sans les illustrations, et la technologie actuelle des moniteurs vidéo est trop faible en résolution pour leur faire justice. Son travail a été décrit comme un visuel de type Strunk and White.

Tout au long de cet aperçu, j’ai inclus des références aux illustrations de ses livres qui sont étiquetés avec les abréviations VD-pp, VE-pp et EI-pp, où « pp » est un numéro de page et :

VD ramène à l’affichage visuel d’informations quantitatives ;
VE signifie « Explications visuelles » ;
EI correspond à « Visualiser l’information ».

Les grandes lignes

#Introduction
#Historique des graphiques
#Le pouvoir explicatif des graphiques
#Philosophie de base de l’approche
#Intégrité graphique
#Densité des données
#Compression des données
#Éléments graphiques multifonctionnels
#Maximiser la mise en valeur des données importantes ; minimiser celle des données non-importantes
#Petits multiples
#Bruits ou parasites graphiques
#Couleurs
#Philosophie générale pour une meilleure compréhension des données
#Techniques pour améliorer la compréhension des données
#Quand ne pas utiliser de graphiques
#Esthétique

________________________________________

Introduction

Les travaux de Tufte portent sur les questions suivantes :

Le problème : le problème est de présenter de grandes quantités d’informations de manière compacte, précise, adaptée à l’objectif et facile à comprendre. Plus précisément, pour montrer la cause et l’effet, pour s’assurer que les comparaisons appropriées sont faites et pour atteindre les objectifs (valables) souhaités.
Son importance : Les informations imprimées et les graphiques constituent aujourd’hui le moteur de notre vie à tous. Elles ne sont plus l’apanage de travailleurs spécialisés dans des domaines spécifiques, mais concernent presque tout le monde grâce à l’utilisation généralisée de l’informatique et d’Internet. Le transfert rapide et précis d’informations peut être une question de vie ou de mort pour de nombreuses personnes (un exemple étant la catastrophe de Challenger). La mesure dans laquelle les symboles et les graphiques affectent nos vies peut être constatée par l’augmentation spectaculaire des scores de QI dans toutes les cultures qui ont acquis la technologie de l’information : aux États-Unis, on a enregistré une augmentation moyenne de 3 points de QI par décennie au cours des 60 dernières années, pour un total de 18 points de QI. Il n’existe aucune explication biologique connue à cette augmentation et la raison la plus probable est l’exposition généralisée aux textes, symboles et graphiques qui viennent avec la vie moderne. Comme mentionné ci-dessus, cette augmentation a été observée dans toutes les cultures exposées aux technologies de l’information.
Son application : Une partie de l’information concerne l’affichage d’informations statistiques, mais une grande partie s’applique à tout type d’affichage, même au texte en clair.
La solution : Développer une approche cohérente de l’affichage des graphiques qui améliore leur diffusion, leur précision et la facilité de compréhension.

________________________________________

Historique des graphiques

Le tout premier graphique connu remonte au Xe siècle (VD-28 : premier graphique connu). C’est à peu près à la même époque que Guido d’Arezzo développait la notation bidimensionnelle de la portée musicale, très similaire à celle que nous utilisons aujourd’hui. Au XVe siècle, Nicolas de Cusa a développé des graphiques de distance en fonction de la vitesse. Au XVIIe siècle, René Descartes a établi la géométrie analytique qui n’était utilisée que pour l’affichage de fonctions mathématiques. Mais le principal initiateur des graphiques informatifs a été William Playfair (1759-1823) qui a développé les graphiques linéaires, à barres et circulaires tels que nous les connaissons aujourd’hui.

________________________________________

Le pouvoir explicatif des graphiques

L’importance et le pouvoir explicatif des graphiques sont évidents dans ces exemples :

L’illustration VD-13/14 montre 4 diagrammes qui comportent un grand nombre de mesures et de propriétés statistiques totalement identiques et pourtant très différentes, comme on peut le voir immédiatement sur les graphiques.
La catastrophe de Challenger : les représentations graphiques de données présentées à la NASA n’ont pas transmis les informations réelles qui étaient utiles (VE-47 contre VE-45). Si la NASA avait vu les graphiques appropriés, mais très simples, qui montraient les effets de la basse température et les dommages causés aux propulseurs à poudre, le Challenger n’aurait pas été lancé ce jour (où il faisait très froid).
L’épidémie de choléra de Broad Street Pump en 1854 à Londres, telle que représentée par John Snow (VE-31 : décès dus au choléra). Ce graphique montre de fortes concentrations de décès dus au choléra autour du site de la pompe.
Illustration VD-166 : « communes en France » montre un graphique extrêmement dense qui révèle les limites de plus de 30 000 communes en France.

________________________________________

Philosophie de base de l’approche

Règles et thèmes importants à utiliser lors de la présentation des graphiques :

Partez du principe que le public est intelligent (une paraphrase d’E.B. White). Même les publications, comme le NY Times, supposent que les gens sont assez intelligents pour lire de la prose complexe, mais trop stupides pour lire des graphiques complexes.
Ne limitez pas les gens en « abrutissant » les données : donnez l’opportunité au public d’utiliser leurs capacités pour en tirer le meilleur parti.
Pour clarifier — ajoutez des détails (n’omettez pas les détails importants ; par exemple, les polices à empattements sont plus « détaillées » que les polices sans empattements, mais sont en fait plus faciles à lire). Et Einstein a dit un jour qu’ « une explication doit être aussi simple que possible, mais pas plus simple ».
Par-dessus tout, il faut montrer les données. Le graphique est « l’intelligence rendue visible ».
Les graphiques riches en données peuvent montrer d’énormes quantités d’informations sous différents angles : cause et effet, relations, parallèles, etc. (VD-31 : horaire des trains, VD-17 : Carte chloropléthique, VD-41 : La campagne de Napoléon, EI-49 : débris spatiaux).
Les graphes doivent être annotés pour indiquer les données, les limites des données, l’authentification et les exceptions (VE-32 : texte des exceptions).
N’utilisez pas de graphiques pour décorer quelques chiffres.

________________________________________

Intégrité graphique

En plus des « mensonges, foutus mensonges et statistiques », les graphiques peuvent également être utilisés pour tromper. À titre d’exemple, les graphiques trompeurs peuvent :

Comparer des périodes à temps plein avec des périodes plus courtes (VD-60 : prix Nobel, qui compare des périodes de 10 ans avec une période de 5 ans)
Utiliser un « facteur de mensonge » [= (taille du graphique)/(taille des données)] pour exagérer les différences ou les similitudes
Utilisez des représentations de surfaces ou de volumes au lieu d’échelles linéaires pour exagérer les différences. Voir VD-69 : « Shrinking family doctor » comme exemple de la manière de semer la confusion chez les gens en utilisant des comparaisons de taille en 1 dimension plutôt qu’en 2 et 3 dimensions. Les représentations des surfaces et des volumes trompent les gens avec la loi du carré/cube : une augmentation de la taille linéaire conduit à un carré de l’augmentation pour les surfaces et à un cube de l’augmentation pour les volumes.
Ne pas tenir compte de la croissance démographique ou de l’inflation dans les graphiques financiers.
Utiliser des variations de design pour obscurcir ou exagérer la variation des données (VD-61 : exagération des prix de l’OPEP).
Exagérer l’échelle verticale.
Ne montrer qu’une partie d’un cycle, de sorte que les données des autres parties de ce dernier ne puissent pas être utilisées pour une comparaison correcte.

Les erreurs graphiques peuvent être plus fréquentes aujourd’hui que par le passé en raison de l’utilisation facile et fréquente des ordinateurs. Voici quelques astuces pour s’assurer de l’intégrité graphique :

Éviter les bruits ou parasites graphiques.
Ne pas déquantifier : fournir des données réelles dans la mesure du raisonnable. Par exemple, classer des produits comme meilleurs ou pires selon un seul critère lorsque plusieurs facteurs entrent en jeu est souvent in utile, à moins d’indiquer l’ampleur des différences.
N’exagérez pas pour les effets visuels, à moins que cela ne soit nécessaire pour transmettre l’information. Parfois, de telles exagérations sont essentielles : par exemple, il est pratiquement impossible de montrer à la fois la taille et les orbites des planètes à la bonne échelle sur le même graphique. D’autre part, l’illustration VE-24 : « Échelle verticale exagérée de Vénus », montre une désinformation si dramatique, qu’un chercheur a appelé à la formation d’une « société dédiée à la Vénus plate ».
Évitez la désinformation : les encadrés épais et un texte sans empattement souligné rendent la lecture plus difficile.
Attention aux effets de l’agrégation : par exemple, les cartes en points sont souvent plus honnêtes à cet égard que les cartes chloropléthiques qui regroupent les résultats en fonction de limites (parfois arbitraires).

– Posez les bonnes questions :

L’affichage exprime-t-il la vérité ?
La représentation est-elle exacte ?
Les données sont-elles documentées ?
Les méthodes d’affichage disent-elles la vérité ?
Des comparaisons, des contrastes et des contextes appropriés sont-ils affichés ?

________________________________________

Densité des données

Les meilleurs graphiques sont ceux qui représentent des ensembles de données très denses et riches. Tufte définit la densité des données comme suit :

Densité de données = (nombre d’entrées dans la matrice de données)/(surface du graphique)

Notez que les faibles densités de données sur les écrans d’ordinateur nous obligent à visualiser les informations de manière séquentielle, plutôt que spatiale, ce qui est mauvais pour la compréhension. Les graphiques de bonne qualité le sont :

Comparatif ;
Multivariable ;
De haute densité ;
Capables de révéler des interactions, des comparaisons, etc. ;
Et la zone où la quasi-totalité de la couleur est présente devrait correspondre à des données pertinentes.

Voici quelques exemples de densités de données :

110 000 nombres/pouce carré pour un graphique astronomique. C’est la densité maximale connue pour un graphique. Pour la plupart des revues scientifiques, nous obtenons environ 50-200 nombres/pouce carré
150 Mbits = œil humain
8 Mbits = écran d’ordinateur
25 Mbits = diapositive en couleurs
150 Mbits = grande carte dépliante
28 000 caractères = Livre de référence
18 000 caractères = annuaire téléphonique
15 000 caractères = non-fiction

Un excellent exemple de graphique riche en données est un horaire de train sous forme graphique (VD-31 : horaire de train) qui montre les heures de départ et d’arrêt, les lieux, les directions, les itinéraires, les transferts et les vitesses sur une seule feuille de papier.

________________________________________

Compression des données

Utiliser la compression des données pour les révéler (et non pas pour les cacher). Par exemple, EI-22 : « Sun Spot cycles » affiche les taches solaires sous forme de fines lignes verticales dans la direction de l’axe des Y uniquement afin de présenter un grand nombre de ces taches sur une certaine période de temps sur un seul et unique graphique.
Utilisez la compression pour afficher beaucoup d’informations dans un seul graphique, comme un tracé qui montre les interactions entre l’axe des X, l’axe des Y et l’axe des X/Y. (VD-134 : Signaux pulsar ; VE-111).
Exclure la symétrie bilatérale lorsqu’elle est redondante (par exemple, les figures de Chernoff) ou l’étendre lorsqu’elle aide à la compréhension (une vue du monde 50 % plus large sur une carte du monde fournit un contexte global qui aide à la compréhension). Des études montrent que nous nous concentrons souvent sur un seul côté d’une figure symétrique et que nous jetons juste un regard sur l’autre côté.

________________________________________

Éléments graphiques multifonctionnels

Les structures graphiques peuvent être utilisées à plusieurs fins à la fois. Par exemple :

Les diagrammes à tiges et à feuilles présentent des séquences de nombres qui illustrent directement la structure par la longueur physique de chaque séquence. (VD-140 : tige/feuille ; VD-141 : divisions de l’armée ; VD-143 : courbe normale)
Les rapports de consommateurs listant les défauts des voitures (VD-174 : Rapports de consommateurs) révèlent une structure micro/macro : l’affichage global de l’encre noire fait immédiatement savoir quelles voitures sont les plus gênantes, alors que chaque élément individuel de l’affichage identifie une faiblesse particulière.
La grille de données elle-même peut constituer les données, révélant à la fois les valeurs et le système de coordonnées (VD-152 : marqueurs de bases de données)

________________________________________

Maximiser la mise en valeur des données importantes ; minimiser celle des données non-importantes

Tufte définit le rapport de mise en valeur des données comme suit :

Rapport données mises en valeur = (données mises en valeur)/(mise en valeur totale dans le graphe)

L’objectif est de faire en sorte que ce rapport soit aussi large que possible. Pour ce faire, vous :

Évitez les grilles lourdes ;
Remplacer les boîtes à moustaches (box plots) par des lignes interrompues (VD-125 : boîtes à moustaches réduits) ;
Remplacer la boîte de fermeture par une grille X/Y ;
Utilisez les espaces blancs pour indiquer les lignes de la grille dans les diagrammes à barres (VD-128 : espaces blancs) ;
Utilisez des tics (sans ligne) pour indiquer les emplacements réels des données sur X et Y ;
Élaguer les graphiques en remplaçant les barres par des lignes simples, en effaçant les mises en valeurs ne correspondant pas à une donnée, en éliminant les lignes des axes, en commençant les axes X/Y par les valeurs des données ;
Évitez les grilles trop chargées, les tics excessifs, la représentation redondante de données simples, les cases, les ombres, les pointeurs, les légendes. Concentrez-vous sur les données et NON sur les conteneurs des données ;
Fournissez toujours autant d’informations que possible sur l’échelle (mais sous forme muette).

________________________________________

Petits multiples

Les petits multiples sont des ensembles de graphiques de la taille d’une vignette sur une seule page qui représentent différents aspects d’un seul phénomène. Ces éléments :

Représentent la comparaison, améliorent la dimensionnalité, le mouvement, et sont excellents pour les affichages multivariés (VD-114 : Dynamique des particules) ;
Invitent à la comparaison, aux contrastes et dévoilent l’étendue des alternatives ou de l’éventail des options (VE-111 : Graphiques médicaux) ;
Doivent utiliser les mêmes mesures et la même échelle ;
Peuvent représenter le mouvement via une représentation fantôme de plusieurs images ;
Sont particulièrement utiles dans les ordinateurs parce qu’ils permettent la superposition réelle des images et se caractérisent par un cycle rapide.

________________________________________

Parasites ou bruits graphiques

Les parasites graphiques (chartjunk) sont des éléments décoratifs qui ne fournissent pas de données et peuvent semer la confusion.

Tufte parle de la règle de 1+1=3 (ou plus) : 2 éléments à proximité immédiate provoquent une interaction visible. De telles interactions peuvent être très fatigantes (par exemple, les motifs moirés ou les vibrations optiques) et peuvent montrer des informations qui ne sont pas vraiment présentes (EI-60 : Données qui ne sont pas là, VD-111 : Parasites graphiques) ;
Dans les grandes publications scientifiques, on voit entre 2 et 20 % de vibrations moirées. Par exemple, dans les publications statistiques et informatiques récentes, la vibration moirée varie de 12 à 68 % ;
Les techniques permettant d’éviter les erreurs de représentation graphique comprennent le remplacement des hachures par des couleurs unies (pastel) ou du gris, l’utilisation d’un étiquetage direct plutôt que de légendes et l’évitement des conteneurs de données lourds.

________________________________________

Couleurs

Les couleurs peuvent souvent améliorer considérablement la compréhension des données.

La superposition de couleurs est souvent efficace ;
Les grilles de couleurs sont une forme de couche qui fournit un contexte, mais qui doit rester discrète et muette ;
Les couleurs vives et pures doivent être réservées aux petites zones de surbrillance et ne sont pratiquement jamais utilisées en guise d’arrière-plan ;
Utilisez la couleur comme principal identifiant sur les écrans d’ordinateur, dans la mesure où différents objets sont souvent considérés comme identiques s’ils ont la même couleur, indépendamment de leur forme, de leur taille ou de leur fonction ;
Lignes de contour qui changent de couleur en fonction de la mise en évidence du fond sans produire les effets 1+1=3 ;
Les couleurs peuvent être utilisées comme étiquettes, en guise de mesures, mais aussi pour imiter la réalité (par exemple, les lacs bleus sur les cartes) ;
Ne placez pas les couleurs vives mélangées à du blanc les unes à côté des autres ;
Les zones de couleurs sont plus efficaces que le gris clair ;
Les couleurs peuvent transmettre des valeurs multidimensionnelles ;
Les barres de défilement doivent se décliner dans des couleurs pastel unies ;
Notez que les couleurs environnantes peuvent avoir pour effet de rendre deux couleurs différentes semblables alors que deux mêmes couleurs peuvent sembler très différentes (EI-92/93 : Effets du contexte sur les couleurs).
Les nuances de couleur ou l’échelle des gris sont meilleures si elles sont délimitées par de fines lignes de contour (EI-94 : Couleurs avec contours).
Sachez que 5 à 10 % des personnes sont daltoniennes à un certain degré (le rouge-vert est le type le plus courant, suivi du bleu-jaune, qui comprend généralement le bleu-vert)

________________________________________

Philosophie générale pour une meilleure compréhension des données

La haute densité est une bonne chose : l’œil/le cerveau humain peut sélectionner, filtrer, éditer, grouper, structurer, mettre en évidence, concentrer, mélanger, esquisser, regrouper, détailler, trier, résumer, lisser, isoler, magnifier, résumer, etc. Donnez aux gens les données de telle sorte qu’ils puissent exercer leurs pleins pouvoirs – ne les limitez pas.
L’encombrement et la confusion constituent des échecs de conception plutôt que de la complexité.
Les informations consistent en des différences qui font la différence : vous pouvez donc « camoufler » les données qui ne font pas la différence dans ce que vous essayez de décrire.
En montrant les parallèles, seules les différences pertinentes doivent apparaître.
Valeur et puissance du parallélisme : une fois que vous avez vu un élément, tous les autres deviennent accessibles.
Concepts importants d’une bonne conception : séparation du graphique et de l’arrière-plan (par exemple, un arrière-plan flou met souvent l’accent sur le premier plan), superposition et séparation, utilisation de l’espace blanc (par exemple, les paysages chinois mettent l’accent sur l’espace, comme chez le peintre connu sous le nom de « one corner Ma » ; la musique orientale est souvent là pour souligner le silence et non le son).
Les graphiques doivent mettre l’accent sur la direction horizontale.

________________________________________

Techniques pour améliorer la compréhension des données

Pour augmenter la compréhension des données, voici ce que vous devez faire :

Faites des marques ou des étiquettes aussi petites que possible, mais pas trop pour qu’elles restent claires.
Évitez les diagrammes circulaires, car ils sont de faible densité et n’ordonnent pas les valeurs selon une dimension visuelle.
On utilise généralement des cartes en points au lieu de cartes chloropléthiques, car elles montrent plus de détails et sont plus précises.
Entremêler étroitement le texte et les graphiques : attacher des noms directement aux parties, placer de petits messages à côté des données, éviter si possible les légendes et annoter les données directement sur le graphique (VE-99 : Anatomie d’une police).
Évitez si possible les abréviations et utilisez un texte horizontal.
Utiliser des polices à empattements en majuscules/ minuscules.
Utilisez les transformations d’échelle si elles peuvent (réellement) révéler des informations qui pourraient autrement être négligées.
Utiliser différentes structures pour révéler la 3D et le mouvement, telles qu’un hexagone explosé, une vraie stéréo ou un raccourcissement extrême (comme sur le bord d’une sphère : voir EI-15 « Hexagone explosé »).

________________________________________

Quand NE PAS utiliser de graphiques

Souvent, des tableaux de texte peuvent remplacer les graphiques pour des données simples ; vous pouvez également utiliser des tableaux de textes en 2D, où les résumés de lignes et de colonnes sont utiles. Les ensembles de données non comparatives appartiennent généralement à des tableaux, et non à des graphiques.
Les affiches sont conçues pour attirer l’attention, et non pour transmettre des informations – en général, ce ne sont pas de bons supports pour des graphiques.
Si une image ne vaut pas 1000 mots, qu’elle aille au diable (citation de Ad Reinhardt — notez que cette citation est inspirée d’une citation chinoise originale qui dit qu’« une image vaut 10 000 mots »).

________________________________________

Esthétique

L’excellence graphique consiste en la simplicité de la conception et la complexité et la véracité des données. Pour y parvenir :

Utiliser des mots, des chiffres, des dessins dans un même espace, à proximité les uns des autres ;
Afficher une complexité de données accessible ;
Laissez les graphiques raconter l’histoire ;
Éviter la décoration hors contexte ;
Utiliser des lignes de poids différents pour afficher les données de manière attrayante et compacte (VD-185 : Mondrian) ;
Utiliser la symétrie pour ajouter de la beauté (bien que quelqu’un ait dit un jour que « Toute vraie beauté requiert un certain degré d’asymétrie »).

Original: http://staff.washington.edu/larryg/Classes/R560/zz-tufte.html

Traduit par: https://casinofiables.com/