Fiche de révision : Data Visualization et cognitive design

📋 Plan du Cours

1. Fondements et objectifs de la DataViz
2. Conception centrée sur l’utilisateur
3. Infographies et communication visuelle
4. Principes de Gestalt
5. Charge cognitive et decluttering
6. Construire un graphique efficace
7. Couleur et accessibilité
8. Éthique et évaluation d’une visualisation

📖 1. Fondements et objectifs de la DataViz

🔑 Notions clés & Définitions

• DataViz : Usage d’éléments visuels, comme les graphiques, les diagrammes et les cartes, pour raconter une histoire à partir de données.

★ À maîtriser

• La DataViz poursuit trois buts:
  • informer sur qui, quoi, quand, où et comment
  • comprendre ou analyser les tendances, les valeurs atypiques et les motifs
  • prendre des décisions fondées sur les données

📌 Une bonne DataViz associe la forme, qui raconte l’histoire, élimine le bruit et met en avant l’information utile, à la fonction, qui correspond à ce que le public veut faire avec les données.

Compléments

• Les six types de DataViz sont:
  • les infographies
  • les graphiques
  • les diagrammes
  • les tableaux
  • les cartes
  • les tableaux de bord

💡 Astuce mémo

Forme = raconter et simplifier ; fonction = permettre d'agir

📖 2. Conception centrée sur l’utilisateur

📝 Points essentiels

• 🔄 Pour concevoir une visualisation utile: identifier qui l’utilise, identifier pourquoi cette personne a besoin de l’information, identifier sur quel appareil elle la consultera, choisir le type et les choix visuels adaptés, réaliser des croquis ou wireframes sur papier avant l’outil final, ne garder que le nécessaire à la décision

💡 Astuce mémo

Qui ? Pourquoi ? Quel appareil ? Puis choisir, croquer, simplifier

📖 3. Infographies et communication visuelle

★ À maîtriser

• L’attention moyenne est de 8,25 s, une infographie a 30 fois plus de chances d’être lue qu’un article, 65 % de l’information des images est retenue, les images sont traitées 60 000 fois plus vite que le texte et le cerveau traite jusqu’à 83 % de l’information par la vue.

• Les infographies servent à:

  • illustrer et simplifier les données
  • comparer
  • rendre visibles les motifs et les relations
  • sensibiliser
  • suivre des variables

• Les cinq ingrédients d’une infographie sont:

  • les graphiques pour montrer les motifs et tendances
  • la couleur pour attirer l’attention
  • la structure et le flux
  • les images et symboles liés au sujet
  • peu de texte

Compléments

• 🔄 Pour créer une infographie: rechercher le sujet, collecter les données, organiser les données visuellement avec des graphiques, des diagrammes, des cartes ou des frises chronologiques

💡 Astuce mémo

GCSIP : Graphiques, Couleur, Structure, Images, Peu de texte

📖 4. Principes de Gestalt

★ À maîtriser

• Les six principes de Gestalt sont:
  • la proximité
  • la similarité
  • l’enclosure
  • la closure
  • la continuité
  • la connexion

📌 La proximité et la similarité regroupent respectivement les éléments proches et les éléments semblables, tandis que l’enclosure regroupe les éléments entourés.

Compléments

• La closure permet au cerveau de compléter les formes incomplètes, la continuité fait suivre à l’œil les lignes ou courbes continues, et la connexion fait percevoir comme groupe les éléments reliés par des lignes.

📖 5. Charge cognitive et decluttering

🔑 Notions clés & Définitions

• Charge cognitive : Effort mental demandé à la mémoire de travail pour traiter les éléments visuels, chaque élément ajouté en consommant une part.
• Clutter : Éléments qui prennent de la place sans augmenter la compréhension, rendent la visualisation plus compliquée que nécessaire et font perdre le public.

📝 Points essentiels

📌 Le data-ink ratio consiste à consacrer la plus grande part possible de l’encre aux données, tandis que le signal-to-noise ratio consiste à maximiser le message et à minimiser ce qui n’aide pas ou distrait.

📌 Le decluttering consiste à ne garder que les éléments qui ont une valeur informative.

💡 Astuce mémo

Clutter → charge inutile → compréhension réduite

📖 6. Construire un graphique efficace

★ À maîtriser

📌 Pour réduire la charge cognitive, il faut supprimer les bordures du graphique, les gridlines inutiles et les data markers inutiles, étiqueter directement les données et utiliser des bordures minimales ou légères dans les tableaux.

• Les attributs préattentifs sont l’orientation, la forme, la longueur de ligne, la largeur de ligne, la marque ajoutée, l’enclosure, la taille, la courbure, la couleur, l’intensité, la position spatiale et le mouvement.

📌 Pour guider l’attention, on peut utiliser la couleur ou le surlignage, les tailles relatives, les polices et tailles, le texte accentué et le positionnement afin de créer une hiérarchie visuelle.

• Dans l’exemple du camembert, remplacer sept parts et une légende par deux parts directement étiquetées, Friday en orange et Rest of the week en gris, rend le message « Friday's sales beat the rest of the week combined » visible avec 62 % contre 38 %.

Compléments

• La lecture en Z commence en haut à gauche et progresse en zigzag, donc l’information clé doit être placée en haut.

💡 Astuce mémo

Réduire, guider, distraire moins, expliquer par le texte

📖 7. Couleur et accessibilité

★ À maîtriser

📌 Il faut utiliser le gris comme couleur de base plutôt que le noir, réserver les nuances d’une couleur choisie à l’emphase et employer les couleurs avec parcimonie et intention.

📌 Le rouge et le vert ne doivent jamais être combinés, tandis que le bleu et l’orange fonctionnent pour comparer, notamment dans une comparaison avant-après.

Compléments

📌 Le choix des couleurs doit tenir compte des connotations culturelles et des besoins d’accessibilité, notamment du daltonisme.

💡 Astuce mémo

Gris pour le contexte ; couleur pour le message

📖 8. Éthique et évaluation d’une visualisation

★ À maîtriser

📌 Une visualisation intègre doit représenter correctement les données, les sourcer et éviter toute distorsion ou exagération.

• La grille d’évaluation vérifie: la clarté immédiate du message, la hiérarchie visuelle, l’application efficace de plusieurs principes de Gestalt, la gestion de la charge cognitive, l’exactitude et l’intégrité des données

• 🔄 Pour analyser une visualisation, il faut demander: quel message est voulu, si le message est clair et pourquoi, si l’information est digne de confiance, qui est l’audience, quelle histoire est racontée, si la visualisation est efficace et pourquoi

Compléments

📌 Une image trouvée sur internet n’est pas forcément libre de droits, et il faut vérifier la différence entre copyright et royalty free avant de l’utiliser.

📌 L’utilisation d’une IA générative sans esprit critique et la lecture de la présentation entraînent une pénalité de zéro point.

📊 Tableaux de synthèse

Principes de Gestalt dans un graphique