Choisir une visualisation selon la question

Le même tableau peut devenir une courbe, des barres ou un tableau de valeurs. Le choix dépend de ce que le lecteur doit comparer, pas du graphique disponible en premier dans le menu.

Cette fiche travaille le choix de visualisations pertinentes et accessibles en BC06.

Question du lecteur	Représentation de départ	Ce que l'œil compare
Comment la mesure évolue-t-elle dans le temps ?	courbe	positions et pente dans un ordre temporel
Quelle catégorie a la plus grande valeur ?	barres triées	longueurs sur une même échelle
Comment les valeurs se répartissent-elles ?	histogramme	effectifs par intervalle
Quelle est la valeur exacte ?	tableau	nombres et libellés

Un histogramme regroupe une mesure numérique en intervalles. Il ne faut pas le confondre avec des barres qui comparent des catégories distinctes.

Comparer deux rendus d'un résultat réel

Sur papier, utilise directement les quatre lignes ci-dessous. Si tu travailles dans un outil choisi avec le formateur, copie-les dans avis-quatre-mois.csv, un fichier texte dont les colonnes sont séparées par des virgules :

mois_commande,note_moyenne,nombre_avis
2018-01-01,4.04,7245
2018-02-01,3.83,6758
2018-03-01,3.75,7187
2018-04-01,4.16,6894

Une ligne représente un mois civil de commande. Les valeurs portent sur les lignes d'avis reliées à une commande achetée entre janvier et avril 2018, sans jointure avec les articles. La note est sur 5 et sa moyenne est arrondie à deux décimales. Le nombre d'avis compte des lignes d'avis, pas des commandes distinctes.

Sur papier, dessine les deux rendus demandés ci-dessous avec une règle : place les mois à intervalles réguliers sur la courbe et fais partir les barres de zéro. Indique les graduations, le titre, l'unité et la période.

Dans un outil, importe le fichier et vérifie qu'il contient quatre lignes de données et trois colonnes séparées par des virgules. mois_commande doit être reconnu comme une date, note_moyenne comme un nombre décimal dont le point est le séparateur, et nombre_avis comme un nombre entier.

Avant de construire, prédis lequel des deux rendus répondra le plus vite à chaque question : « comment la note évolue-t-elle ? » et « quel mois a la meilleure note ? »

Construis ensuite les deux rendus avec note_moyenne comme mesure :

une courbe avec mois_commande dans l'ordre chronologique ;
des barres triées de la note la plus haute à la plus basse.

Affiche les notes arrondies fournies et nombre_avis dans un tableau associé à chaque rendu. Demande à une autre personne d'identifier le mois le moins bien noté, ce qui se passe ensuite et le mois qui porte le moins d'avis. Vérifie ses réponses dans les quatre lignes de données avant de choisir le rendu adapté à chaque question.

Comparer après avoir construit les deux rendus

La courbe conserve l'ordre du temps et montre la baisse jusqu'en mars puis la remontée. Les barres rendent le classement plus rapide, mais ordonnent avril, janvier, février, mars et cachent la succession. Le mois le moins bien noté n'est pas celui qui porte le moins d'avis : le volume doit donc rester visible.

Tu peux comparer tes dessins à cette figure. Les deux échelles vont de 0 à 5 : la variation reste petite sur cette échelle, sans être amplifiée par un axe resserré. Les barres partent de zéro et comparent les notes, pas le nombre d'avis.

La note moyenne baisse de janvier (4,04) à février (3,83) puis mars (3,75), avant de remonter en avril (4,16). Les barres classent avril, janvier, février, mars. Notes sur 5 ; janvier à avril 2018.

Ouvrir la figure pour l'agrandir. Les quatre lignes du CSV conservent les valeurs exactes affichées et le nombre d'avis associé à chaque mois.

Modifier un mauvais choix

Sur papier, recopie la courbe en plaçant cette fois les mois par note décroissante. Prédis son allure avant de la tracer, puis compare avec la courbe chronologique et nomme la succession réelle que la copie fait disparaître. Rétablis enfin l'ordre chronologique.

Dans un outil, duplique la courbe. Dans cette copie seulement, traite les mois comme des libellés, puis vérifie que leur ordre visible est encore janvier, février, mars, avril. Avant de modifier le tri, prédis ce que la ligne semblera faire si tu classes ces libellés par note décroissante. Applique ce tri, compare les deux courbes et le CSV, puis nomme la succession réelle que la copie fait disparaître. Rétablis enfin les mois comme dates dans l'ordre chronologique. La même règle vaut pour des catégories sans ordre naturel : une ligne tracée entre elles invente une continuité ; utilise plutôt des barres ou un tableau.

Si les catégories sont trop nombreuses pour rester lisibles, ne choisis pas un seuil arbitraire en silence. Affiche un sous-ensemble défini, regroupe le reste en l'expliquant ou propose un filtre et un tableau détaillé.

Garder l'information accessible

Sur papier, écris les valeurs et les noms des mois pour que la couleur ne soit pas nécessaire à la lecture. Puis fais le contrôle du texte alternatif situé après le volet ci-dessous : ce texte transmet l'information du graphique à quelqu'un qui ne le voit pas.

Contrôler un rendu numérique lorsque l'outil est disponible

Les WCAG, Web Content Accessibility Guidelines, sont les recommandations du W3C pour l'accessibilité du web. Les contrôles suivants contribuent à leur niveau AA :

ne transmets jamais un statut par la couleur seule ;
fournis un texte alternatif qui donne l'observation et les données utiles ;
mesure au moins 4,5:1 entre un texte courant et son fond, ou 3:1 pour un grand texte ;
mesure au moins 3:1 entre un élément graphique nécessaire et la couleur adjacente qui permet de le distinguer ;
vérifie que les filtres fonctionnent au clavier.

Ici, « grand texte » signifie au moins 18 points, soit environ 24 pixels, en graisse normale, ou 14 points, soit environ 18,7 pixels, en gras. Un titre n'est donc pas automatiquement un grand texte.

Avant de modifier ton rendu, prédis le résultat des trois contrôles suivants. Ils peuvent tous réussir : une correction est nécessaire seulement si le contrôle échoue.

Choisis un libellé et son fond réellement adjacents. Relève leurs deux codes couleur, saisis-les dans le vérificateur de contraste WebAIM et note le rapport sans l'arrondir. Par exemple, #777777 sur #FFFFFF donne environ 4,48:1 : le texte courant échoue au seuil de 4,5:1. #767676 sur le même fond donne environ 4,54:1. En cas d'échec, modifie une couleur, mesure à nouveau et conserve les valeurs avant et après.
Exporte une capture de la courbe et ouvre ce fichier local dans Chrome. Ouvre les outils de développement, affiche le menu de commandes avec Ctrl + Maj + P, ou Cmd + Maj + P sur Mac, saisis Show Rendering, puis choisis Emulate vision deficiencies → Achromatopsia (no color). La documentation officielle de Chrome montre ce réglage. Demande à une autre personne d'identifier sur la courbe le mois le moins bien noté et ce qui se passe ensuite. Vérifiez sa réponse dans le CSV. Si la réponse dépend de la couleur, ajoute un libellé, une forme ou un motif, puis refais l'essai. Cette simulation en niveaux de gris est un contrôle partiel : elle ne couvre pas toutes les déficiences de perception des couleurs, le contraste, le clavier ni un lecteur d'écran.
Ajoute à la copie un filtre sur mois_commande qui permet d'afficher les quatre mois ou un seul mois. Pose la souris. Avec Tab et Maj + Tab, atteins le filtre et repère le focus visible, le repère qui indique quel élément recevra ta prochaine action au clavier. Utilise ensuite les touches proposées par le contrôle, par exemple Entrée, Espace ou les flèches, pour l'ouvrir, choisir un mois et valider. Vérifie que la courbe change, puis rétablis les quatre mois uniquement au clavier.

Compare les résultats à tes prédictions. Si un contrôle échoue, corrige le rendu, rejoue le même contrôle et garde dans ta note la mesure ou l'observation avant et après. Les références expliquent le contraste du texte, le contraste des éléments graphiques, l'usage de la couleur et l'utilisation au clavier.

Reprends la courbe des quatre mois d'avis. Écris un texte alternatif qui nomme la mesure, la période, le mouvement général et le point qui répond à la question du lecteur. Ne décris pas les couleurs ni la forme de chaque trait : le texte doit transmettre l'information utile quand le graphique n'est pas visible.

Cache le graphique et donne seulement ce texte à une autre personne. Demande-lui quel mois est le moins bien noté et ce qui se passe ensuite. Si elle ne peut pas répondre, fais-lui nommer l'information manquante, puis corrige le texte. Si elle confond la note et le nombre d'avis, précise l'unité de chaque valeur au lieu d'ajouter une conclusion plus forte que les données.

Transfert autonome

Reprends un indicateur défini avec la fiche Définir un indicateur à partir d'un besoin, distinct du cas guidé. Rappelle son destinataire, sa question, sa population, son unité et sa période, puis dessine deux représentations plausibles à partir de son résultat.

Si le formateur t'a fourni le TP sur le tableau de bord Olist, tu peux réaliser ce transfert dans sa partie 3 : prends un indicateur que tu as déjà produit en partie 2, distinct des quatre mois d'avis du cas guidé. Produis les deux rendus demandés par le TP.

Dans les deux cas, fais-les essayer sans donner ta conclusion. Demande au lecteur ce qu'il compare, ce qu'il conclut et quelle information lui manque. Choisis le rendu à partir de ces réponses et justifie ce que le rendu retenu laisse encore hors champ.

Si tu utilises ChatGPT, conserve ta prédiction avant son aide. Note ce que tu as repris ou modifié, puis explique ton choix en montrant dans les données ce qui le justifie. Une image produite seule ne permet pas de vérifier ce choix.