Les tableaux de bord modernes ont beaucoup emprunté aux tableaux de bord automobiles. Des éléments intéressants peuvent également être vus dans les centres de contrôle de vol de la NASA dans les années 1960 et à l'aube de l'ère de l'automatisation. Aujourd'hui, toute situation assez compliquée, qu'il s'agisse d'un lancement de missile ou d'un combat avec des extraterrestres dans le casque de Tony Stark, apparaît inévitablement sous la forme d'une sorte de tableau de bord.

Mais nous ne sommes pas ici pour une leçon d'histoire, mais pour apprendre à créer un bon tableau de bord. Notre tâche sera d'étudier les types de tableaux de bord et de graphiques d'affichage utilisés dans la surveillance des systèmes modernes, cependant, de nombreuses leçons sont applicables dans d'autres contextes.

Il y a tellement d'informations dans ce sujet qu'il est difficile de savoir par où commencer! Mais je vais t'aider. Dans le cadre de l'étude de la conception des tableaux de bord, nous passerons par les points suivants:

1. Structure et schéma.
2. Présentation et accessibilité.
3. Choix des graphiques utilisés.
4. Amélioration du contexte.

Partie 1. Structure et schéma

Arrêtons-nous d'abord et posons-nous deux questions: qui est notre public cible et quels sont ses objectifs?

Connaître votre public cible et ses tâches est essentiel pour le reste du travail. Si votre public cible est les responsables du développement qui ont besoin de connaître des informations de haut niveau sur le fonctionnement du système, les données dont ils ont besoin seront très différentes de celles dont l'ingénieur entrant a besoin.

Avant de commencer à créer un tableau de bord, prenez un morceau de papier et notez les questions que votre utilisateur cible posera, triez-les par ordre de priorité et déterminez les données optimales à afficher pour répondre à la question.


Notes que j'ai écrites lors d'une interview avec moi-même pour ce post.

Pensez au formulaire

Chaque élément ajouté au tableau de bord doit clairement servir les tâches du public cible, et l'emplacement du widget doit être déterminé par son importance. Ces informations doivent être placées sur un seul écran sans défilement. Nos utilisateurs humains ne peuvent stocker que trois ou quatre éléments d'informations visuelles dans leur mémoire de travail, vous devez donc stocker toutes les informations importantes en un seul endroit (Few, 79). Pour aider l'utilisateur, vous pouvez vous assurer qu'il peut voir toutes les informations en lançant un coup d'œil ¹ , et il n'a besoin de se souvenir de rien.

Si vous avez besoin de visualiser des informations supplémentaires, envisagez de créer des tableaux de bord distincts conçus pour accomplir la tâche de l'utilisateur, par exemple, pour étudier les problèmes de récupération de place ou pour planter les dépendances en aval. Dans le cas optimal, ces procédures d'étude devraient pouvoir être réutilisées dans différents systèmes.

Il est préférable d'utiliser une disposition modulaire . Les gens sont particulièrement bien orientés dans les petits domaines décrits dans les principes de regroupement . C'est pratique car presque tous les systèmes de tableaux de bord modernes fonctionnent de manière similaire.

En écrivant une liste de priorités et en créant des modules, nous pouvons commencer à ajouter des éléments de tableau de bord. Vous avez probablement déjà une idée intuitive que l'élément le plus important doit être placé dans le coin supérieur gauche et que vous devez les placer de gauche à droite, de haut en bas.


Très probablement, vous n'avez pas besoin de cette illustration.

Il s'agit d'un modèle standard pour les personnes habituées à lire dans les langues occidentales: leurs yeux font généralement d'abord attention au coin supérieur gauche (Few, 107-108) ² . Cependant, il est important de ne pas oublier votre public cible: dans certaines langues, il est plus courant de travailler de droite à gauche ou de haut en bas ³ .

Prenez votre temps avec la mise en œuvre!

Je sais que vous ne pouvez pas attendre, mais avant de commencer, créez un croquis:


Ceci est un croquis.

Regardez-le. Discutez-en avec l'utilisateur. Accrochez-vous au réfrigérateur et dégustez en buvant du café. Partagez-le avec l'équipe. Il est utile d'esquisser et d'expérimenter des idées. Par exemple, après avoir créé l'esquisse, j'ai décidé qu'avant de continuer, l'ordre devait être changé. Mon utilisateur (moi-même) a décidé que connaître la durée était plus important que les erreurs.

Eh bien, commençons!

Après avoir créé un schéma modulaire, les développeurs commencent généralement à placer des graphiques et d'autres widgets de la même taille sur la grille, passant à la ligne suivante lorsque le lieu est épuisé. Vous ne pouvez pas vous en tenir à la même taille, mais ajustez la largeur des éléments pour souligner l'importance ou augmenter la clarté. Des graphiques plus larges se distinguent non seulement plus fortement, mais ont également d'autres propriétés utiles. Tufty dit que les graphiques plus larges ressemblent à l'horizon et que «l'œil humain s'est naturellement adapté pour suivre les écarts dans la ligne d'horizon» (186) ⁴ . De plus, dans les graphiques larges, moins de texte doit être transféré, ce qui souligne la relation causale de nombreux graphiques. Cela est particulièrement vrai pour les graphiques linéaires utilisés dans de nombreux tableaux de bord. L'effet mesuré - par exemple, la mémoire occupée ou le retard - sera indiqué sur l'axe Y et le temps - sur l'axe X. L'espace obtenu en augmentant la largeur des graphiques vous permet de "spécifier la valeur primaire plus en détail" (187) ⁴ .


Nous avons élargi le calendrier pour souligner l'importance du taux de réussite.

Notez que même les graphiques «normaux» de ce tableau de bord sont plus larges que hauts. C'est bon pour les raisons mentionnées ci-dessus, et en plus, c'est agréable à regarder à cause du principe du nombre d' or .

Pour résumer

Félicitations! Vous avez commencé à créer un tableau de bord sous la direction des meilleurs esprits dans le développement de tableaux de bord. Ce sera une excellente base pour le développement de votre tableau de bord.


Bon début.

Brève répétition

Répétons ce que nous avons appris ici:

• Agissez consciemment, étudiez votre utilisateur et les questions qu'il pose
• Gardez la simplicité, ne forcez pas les utilisateurs à faire défiler et à mémoriser
• Créez des tableaux de bord associés supplémentaires selon vos besoins
• Afficher des informations importantes dans des endroits importants pour la conscience
• Utilisez une disposition modulaire et privilégiez les graphiques larges plutôt que les graphiques étroits.

Sources et notes

1. Les gens n'ont généralement qu'une paire d'yeux.
2. Stephen Few (peu, Stephen). Conception du tableau de bord de l'information . Analytics Press, 2013.
3. Si votre tableau de bord est destiné aux extraterrestres ou aux robots, lisez les guides de conception appropriés.
4. Edward R. Tufte (Tufte, Edward R). L'affichage visuel des informations quantitatives . Graphics Press, 1998.

Partie 2. Présentation et accessibilité

Nous avons donc une belle grille et le poids visuel nécessaire est sélectionné pour chaque élément de cette grille. Maintenant, nous devons penser à afficher des données pour l'utilisateur. Et ici, tout peut mal tourner, vous devez donc maintenir la clarté et la constance du design.

Le principe directeur devrait être les tâches de l'utilisateur et l'intégrité des données affichées. Étant donné que ces paramètres peuvent varier considérablement - le nombre d'utilisateurs, le temps consacré à la collecte des ordures et la quantité imprévisible d'erreurs, nous devons créer une sorte de cadre qui peut être utilisé pour sélectionner des solutions.

Étudions pour cela en quoi consiste la visualisation de haute qualité des mesures du système.

Sélection des données

Vous vous attendez probablement à ce que dans cette section, je dise quelles données spécifiques doivent être placées sur le tableau de bord. En fait, c'est à vous de décider, lecteur! N'oubliez pas les utilisateurs et leurs objectifs. Utilisez votre liste et décidez de ce qui convient le mieux à ce que peu ont appelé les quatre étapes de la surveillance de l'information (32) ¹ :

1. Mise à jour des données de situation à un niveau élevé.
2. Identification des éléments spécifiques nécessitant une attention et se concentrant sur eux.
   
   1. Mise à jour des informations sur cet article avec plus de détails
   2. Déterminer le besoin d'action
3. Si une action est nécessaire, des informations supplémentaires doivent être accessibles pour déterminer les informations requises.
4. La réponse.

En général, la meilleure signalisation du fonctionnement et de la sensibilisation du système de haut niveau est fournie par la méthode RED et / ou la méthode USE . Dans le cas optimal, le tableau de bord ne devrait contenir que des indicateurs de performance clés (KPI) nécessaires pour vous familiariser avec la situation, et non pour étudier les données (peu, 30-31) ¹ . Cependant, il existe de nombreux cas où, en plus des KPI standard, des informations plus spécifiques sont requises. Si vous ne savez pas lequel, consultez les objectifs de l'utilisateur. Chacun des éléments à l'étude est-il nécessaire pour effectuer des tâches utilisateur?

Il convient également de rappeler que ces tableaux de bord sont souvent des systèmes de suivi, dont les lectures changent souvent. Vous devrez ajouter des graphiques unitaires ou des widgets horaires distincts pour suivre les nouveaux KPI intéressants ou simplement les données importantes pour les tâches en cours. À mesure que votre organisation se développe, votre organisation doit examiner de façon critique les tableaux de bord et éliminer tous les artefacts qui ne sont plus utiles. Regardez le tableau que vous avez ajouté en cas de problème de fuite de descripteur de fichier et demandez-vous: en avez-vous besoin aujourd'hui? Vous savez à quelle table je pense.

Performances de visualisation

Dans la palette de widgets de votre tableau de bord, il y aura très probablement de nombreuses options à choisir. Et tire pour utiliser les plus beaux! Mais tous ne sont pas égaux - les gens perçoivent différemment différents types d'informations visuelles. L'utilisateur veut naviguer rapidement, notre tâche est donc de présenter les données de la manière la plus efficace.


Tâches de perception par ordre de précision.

Ci-dessus, des indicateurs numériques des tâches de perception des personnes (Mackinley, 125) ² , qui permettent de comprendre facilement à quel point la visualisation sera simple pour le cerveau de l'utilisateur. En fait, certains composants visuels sont traités inconsciemment , en utilisant la perception au niveau de l'attention sous le seuil . L'utilisation appropriée de la couleur, de la forme, de la position et du mouvement peut grandement faciliter et accélérer la perception d'informations importantes sur un tableau de bord (Few, 80) ¹ .


Exemples d'attributs au niveau d'attention inférieur au seuil. Vous pouvez les remarquer sans même y penser!

Échelle et unités

Après avoir approfondi un peu l'étude de la forme, Cleveland et McGill (830) ^{3 ont} classé les tâches par précision et ont découvert que la position sur l' échelle générale est plus précise qu'à différentes échelles. Peu (40-41) ont complété cela en conseillant l'utilisation d'unités de mesure et les détails nécessaires pour que l'utilisateur n'ait pas à effectuer des calculs inutiles. Par conséquent, si possible, la même échelle, les mêmes axes et unités de mesure doivent être utilisés.


Trois graphiques des mêmes données: sans unités, avec unités et avec une mise à l'échelle. 250 pourquoi?! Les graphiques de gauche et du milieu sont plus faciles à comparer et celui du milieu est plus facile à comprendre. L'alignement et les unités sont importants!

Grâce à ces informations, vous pouvez choisir plus efficacement les options de visualisation, en sélectionnant celles qui permettent au lecteur de percevoir rapidement les données.

Le temps

Nous utilisons activement des graphiques de séquences temporelles , nous devons donc examiner attentivement l'affichage du temps. Les graphiques doivent utiliser la même fenêtre de temps. Si le premier graphique montre une tranche en une heure et est lié au moment actuel, il devrait en être de même dans tous les autres graphiques. Cela est particulièrement vrai si un sélecteur de temps ou un autre contrôle «global» est utilisé.

De nombreux tableaux de bord ont un «curseur» utile: lorsque vous survolez un graphique, d'autres graphiques indiquent également le même moment. Cela aide l'utilisateur à comprendre le temps, et rend également évidentes toutes les déviations dans la relation entre le temps et l'espace, comme on peut le voir dans l'exemple ci-dessous, où un graphique est plus large que les autres:


Le graphique inférieur est plus large que les deux graphiques supérieurs, mais la barre verticale du «curseur» vous permet de les aligner.

Les mêmes principes s'appliquent à la disposition horizontale. Les widgets ou les graphiques qui n'entretiennent pas la même relation entre le temps et l'espace devraient clairement traduire cela soit par des différences visuelles (par exemple, un widget avec une «valeur unique») ou une indication claire.

Agrégation cachée

Gardez à l'esprit que dans de nombreuses visualisations, nous devons gérer l'agrégation de données, qui est effectuée automatiquement .

Pour que les systèmes fonctionnent, les tableaux de bord doivent prendre en charge des fenêtres temporelles qui varient sur une large plage de valeurs. Par défaut, les tableaux de bord de la plupart des systèmes utilisent la vue «actuelle», affichant les valeurs dans l'intervalle d'une heure aux quinze dernières minutes. En supposant que les données soient capturées à des intervalles de dix secondes, chaque heure devrait contenir 360 points de données! Étant donné que chaque graphique individuel contient très peu de pixels informatifs, les outils du tableau de bord doivent décider comment adapter tous ces points dans des champs de petite taille.


Le graphique supérieur montre les données pendant 15 minutes et le graphique inférieur montre une semaine. Notez que nous perdons complètement des informations sur l'augmentation périodique de la latence due à l'agrégation standard des données moyennes. La résolution du widget est affichée à droite du titre du graphique.

Habituellement, cela est mis en œuvre en utilisant l'agrégation de données: les graphiques montrent la moyenne, le montant ou quelque chose de similaire. La sélection par défaut peut grandement affecter l'affichage. Regardons le graphique précédent, seulement au lieu de la moyenne, les valeurs maximales sont agrégées:


Lors de l'agrégation des valeurs de données maximales pendant une semaine, le délai augmente d'environ 30%.

Vous pouvez découvrir comment cela fonctionne dans la documentation de votre outil de création de tableau de bord. Nous aborderons ce sujet lorsque nous parlerons de différents types de graphiques.

Addition: ratios et montants

D'après mon expérience, c'est l'un des problèmes les plus courants dans les tableaux de bord système. En affichant le compteur sous forme de rapport ou de somme, nous pouvons grandement influencer la compréhension des données par l'utilisateur. Si nous affichons le nombre d'erreurs sous forme de rapport, chaque point du graphique sera la somme des erreurs divisée par le temps écoulé. Si nous affichons la somme, alors naturellement nous verrons la somme. Cela signifie que le formulaire de données sera le même, seule l'échelle diffère.

Il est recommandé d'indiquer clairement dans le titre du graphique le type de données affichées: ratio ou montant. Lorsque vous choisissez entre les deux options, discutez de ce problème avec l'utilisateur et sélectionnez le formulaire qui convient le mieux à vos besoins. Qu'attend-il à voir sur le graphique?

Remarque : lorsque vous travaillez avec l'agrégation, pensez à utiliser des ratios et des sommes!

Attention: pas de données

S'il y a des problèmes pendant les mesures, certains points de données peuvent être manquants. Si l'utilisateur s'attend à un affichage régulier des points de données, cela peut être un problème. Si cela se produit, envisagez l'utilisation de l'interpolation. En règle générale, les tableaux de bord système utilisent une interpolation linéaire pour connecter les données manquantes. Parfois, ils ne savent même pas du tout que les données manquent. Parfois, la résolution des données change.


La ligne bleue remplit les données manquantes de zéros. La ligne rouge utilise une interpolation linéaire.

Dans un accès de pédanterie, j'ai contacté Stephen Few lui-même et posé une question sur ce problème. Je m'intéresse à cette tâche depuis longtemps et j'étais curieux de savoir comment il suggère de travailler avec des données qui disparaissent à intervalles irréguliers et changeants:

Si vous affichez des valeurs sur une chronologie, les intervalles sur cette chronologie sont généralement constants. Autrement dit, ils sont à égale distance les uns des autres. Si l'intervalle change, la distance entre les intervalles doit également changer en conséquence pour indiquer visuellement ce changement, et doit rester constante à moins que la taille de l'intervalle ne change à nouveau, après quoi la distance doit également changer. Les valeurs associées à des intervalles de temps consécutifs doivent être connectées par une ligne, mais si pour une raison quelconque il n'y a pas de valeurs dans les intervalles, alors la ligne dans ces intervalles ne doit pas continuer. Si les valeurs sont lues uniquement de temps en temps (par exemple, lorsque certains événements se produisent), et non à intervalles égaux, elles ne doivent pas être connectées par une ligne. Dans de tels cas, vous devez utiliser un point ou une colonne de données distinct pour coder les valeurs. Bonne chance pour trouver un outil qui implémente cela.

Comme c'est intéressant! Je ne savais pas comment cela peut être implémenté par programme, donc pour résoudre le problème, j'ai esquissé un croquis.


La partie médiane est des intervalles plus rapides. Il n'y a aucune donnée de part et d'autre. Les données manquantes ne sont pas connectées. Le surlignage rose est à titre informatif et n'est pas affiché sur le graphique que l'utilisateur voit.

Vous vous demandez peut-être: pourquoi un seul package de création de tableau de bord n'implémente-t-il pas une telle fonctionnalité? Principalement parce que les développeurs ne savent pas si les données sont perdues ou non. Habituellement, nous intervenons dans l'intervalle où les métriques arrivent, et dans le monde moderne des conteneurs abstraits, ces métriques peuvent apparaître et disparaître en une fraction de seconde. Oui, c'est un problème complexe qui vous inspire pour trouver une solution.

Recommandations générales

Quelques conseils plus utiles:

• Privilégiez les couleurs douces et naturelles. , . .
• . , . .
• , , 3D-, .

L'utilisateur peut avoir des difficultés à interpréter les tableaux de bord s'il ne répond pas au principe d'accessibilité pour les personnes handicapées. Pour la commodité de l'utilisateur, suivez les directives d'accessibilité du W3C . Certains peuvent être plus faciles à mettre en œuvre que d'autres (cela dépend de l'outil spécifique), mais de toute façon cela vaut la peine d'être considéré.

• Le daltonisme est très fréquent: 1/12 des hommes et 1/200 des femmes dans le monde ont la distinction entre le rouge et le vert . Ceci est particulièrement important pour les tableaux de bord, car les couleurs verte et rouge indiquent souvent des états «bons» et «mauvais». Utilisez différentes techniques pour les signaux (voir la section "Efficacité"): taille, couleur, texte et icônes.
• : W3C 4.5:1 . . Consumer Finance Protection Bureau .
• , (). . , CSV , .
• Utilisez les fonctions de navigation et d'exploration de données disponibles pour profiter des fonctionnalités de l'aide au navigateur avec des outils tels que WAI-ARIA .
• Quel sera l'affichage de l'utilisateur? Le tableau de bord d'un grand téléviseur devrait très probablement être différent de celui utilisé sur l'écran 13 pouces de l'ordinateur portable d'un ingénieur visiteur. Gardez cela à l'esprit lors de la conception d'un tableau de bord pour votre appareil.

Pour résumer

Les utilisateurs de la cartographie des données doivent réfléchir attentivement. De nombreux aspects doivent être pris en compte, et dans cette partie de l'article, j'ai expliqué en détail ce que les concepteurs et les développeurs créant des outils de surveillance de système devraient prendre en compte.

Brève répétition

• Utilisez des KPI tels que RED et USE. Des mesures supplémentaires sont déterminées en fonction des tâches de l'utilisateur.
• , , CASE , !
• , , , . , !
• .
• , . .
• , . .
• . , .

1. (Few, Stephen). Information Dashboard Design . Analytics Press, 2013.
2. . (Mackinlay, Jock D.) Automating the Design of Graphical Presentations of Relational Information. ACM Transactions on Graphics, Vol. 5, 1986
3. . , (Cleveland, William S., McGill, Robert). Graphical Perception and Graphical Methods for Analyzing Scientific Data. American Association for the Advancement of Science, 1985.

3. ?

Attendez, mais les tableaux sont-ils vraiment des visualisations? Oui et encore plus! Peu de ¹ nous rappelle que si nous affichons des valeurs unitaires, alors il n'y a aucune raison d'utiliser (114) ¹ graphiques . S'il n'y a que quelques valeurs, alors il est assez efficace d'utiliser le tableau.


Bonne vieille table.

Les tableaux sont des visualisations courantes et bien comprises pour trouver un sens. Le tableau ci-dessus permet de trouver très facilement la valeur et ses paramètres associés. Cette version est peut-être trop surchargée pour le tableau de bord du système, mais nous pouvons la convertir en une «valeur unique» comme ceci:


Le tableau est compressé en un volume adapté au widget.

Si l'utilisateur a besoin de connaître une valeur, par exemple la somme, la valeur moyenne ou instantanée, l'utilisation de nombres ou de tableaux individuels est idéale.

Graphiques linéaires

Les graphiques linéaires conviennent bien à la plupart des données affichées. Un graphique linéaire est constitué de points reliés par des segments de ligne droite. Il convient également de noter que sur le graphique de séquence temporelle, cette interpolation de données donne à l'utilisateur une idée de la connexion de la forme et du temps . Vous entendrez souvent des gens regarder la mise à jour du graphique que la métrique monte ou descend.


La forme est visuelle. Quelque chose se passe avec des retards!

Les graphiques linéaires sont des visualisations populaires car ils incarnent de nombreux attributs au niveau d'attention inférieur au seuil avec un nombre minimum de pixels. Les lignes ont une pente et un angle, une position et une couleur, ce qui vous permet d'extraire beaucoup d'informations sans hésitation. Vous pouvez compliquer un peu l'affichage et utiliser l'épaisseur et la luminosité des lignes pour attirer l'attention:


De toute évidence, la ligne brune est la plus importante ici.

Tout n'est pas limité aux graphiques linéaires.

, , . , , ( ). (. ).


Les lignes sont si proches les unes des autres qu'elles sont difficiles à distinguer.

Les graphiques linéaires interpolent les données entre deux points à l'aide d'une ligne. Dans la plupart des cas, cela est souhaitable car la forme créée par les lignes facilite la perception. Malheureusement, l'interpolation peut également masquer des informations manquantes, voire blesser: faites-nous penser que nous avons des données que nous n'avons pas réellement. Prenez par exemple le graphique linéaire ci-dessus, en ajoutant des points pour chaque lecture:


Les points nous indiquent que nous n'obtenons qu'une seule lecture pour chaque changement de retard.

La longueur de la ligne peut être trompeuse car il y a plus de mesures qu'il n'y en a vraiment, par exemple, des changements comme dans le graphique ci-dessus.

Graphiques de zone

Tout d'abord, n'utilisez pas de graphiques avec des zones qui ne se chevauchent pas . Le chevauchement d'un graphique avec un autre masque uniquement les données et est source de confusion.


De quoi s'agit-il? En plus du vert, rien n'est visible.

Les graphiques en aires sont mieux utilisés lorsque tous les totaux sont importants . Ils ont beaucoup en commun avec les graphiques linéaires en ce qu'ils montrent la forme. Malheureusement, cette forme est aussi leur inconvénient: lorsque l'une des régions inférieures change, la même chose se produit avec toutes les régions situées au-dessus. L'utilisateur peut ne pas comprendre la cause des modifications. Trouver un vrai changement peut être difficile dans une telle situation.


Le retard varie autour de 4 secondes, mais nous ne pouvons pas déterminer ce qui affecte les changements. Les valeurs de toutes les lignes changent-elles?

Au lieu de représenter les régions, Few suggère d'utiliser un graphique linéaire avec une somme et un graphique supplémentaire montrant la contribution des valeurs individuelles (Few, 146) ¹ . Cela facilite le suivi des modifications.


Les mêmes données sont présentées ici que dans le diagramme de zone ci-dessus. Le graphique de gauche montre la somme des retards, et le graphique de droite montre chaque élément qui affecte le retard. Les valeurs qui affectent le retard sont bien comprises et en même temps on peut voir la somme!

Graphiques à barres

Les graphiques linéaires montrent des formes, les graphiques à barres montrent des valeurs «précises». La plupart des mesures du système sont mieux à l'aide d'un graphique linéaire. Une exception peut être un graphique qui compare plusieurs mesures:


Nous pouvons facilement comparer ces deux séquences temporelles à l'aide de colonnes. S'il y a plus de valeurs, ce sera plus difficile.

Le graphique à barres aide à comparer les valeurs à chaque intervalle en raison de la relation claire entre les intervalles et de la facilité de comparaison des longueurs. Si vous choisissez un graphique à barres, cela signifie que la chose la plus importante pour votre utilisateur est de comparer un petit nombre de valeurs.

Soyez prudent et essayez d'éviter le moiré . Cela peut se produire si les colonnes sont petites et équidistantes. Ajoutez un petit espace entre les colonnes pour les séparer visuellement, comme cela est fait dans la figure ci-dessus.

Colonnes de superposition

Voir tout ce qui est écrit sur les diagrammes qui se chevauchent avec les zones. Les colonnes de superposition sont généralement rarement utilisées, elles ne sont nécessaires que si la valeur dans son ensemble est importante. Les utilisateurs ont du mal à comparer les colonnes empilées.

Cartes thermiques

Utilisez des cartes thermiques si vous avez un graphique linéaire avec trop de lignes. Les cartes thermiques utilisent un changement de luminosité des couleurs, de sorte qu'une très grande quantité de données peut être regroupée dans un petit espace. Lorsque dans les graphiques en ligne le chevauchement des lignes interfère avec la perception, les cartes thermiques dans le cas du chevauchement améliorent la couleur. Cela a un bon effet secondaire: les cartes thermiques montrent des bandes sur les superpositions, ce qui aide à reconnaître les motifs et les valeurs aberrantes.


Les graphiques linéaires sont terribles dans tout sauf la détection des valeurs aberrantes. Les heatmaps indiquent où le tableau de données principal est regroupé.

Cette capacité d'afficher plus de données et de reconnaissance de formes a un prix. Dans les cartes thermiques, la précision diminue car les gens ne peuvent pas facilement distinguer entre de nombreuses luminosité de couleur. Peu de gens disent que la limite de distinction est de 5 degrés de luminosité (Few, 86) ¹ . Cela signifie que les cartes thermiques sont mieux utilisées dans les situations où la précision est moins importante que la forme générale de visualisation.

Échelles, marqueurs, intervalles, etc.

Utilisez les contraintes dans les visualisations uniquement lorsque les données ont réellement ces contraintes. Par exemple, afficher le nombre de requêtes par seconde sous forme d'échelle est déroutant, car cet indicateur n'a pas de maximum!

Si vous devez afficher une limite, comme un pourcentage ou une file d'attente avec une profondeur maximale, l'utilisation de ces visualisations peut être extrêmement utile. Ils nous permettent de rendre compte de la valeur de la limite, et indiquent également à quel point la valeur est proche de cette limite. Utilisez ces types de visualisation lorsque la métrique a une base de comparaison!


Il s'agit d'un exemple acceptable d'utilisation d'un intervalle car il a des limites et aide l'utilisateur à naviguer.

Lors de l'ajout de couleur à cette visualisation, nous permettrons à l'utilisateur de comprendre rapidement la valeur actuelle, les limites supérieure et inférieure, ainsi que l'urgence de la valeur actuelle.

Malheureusement, je ne connais aucun outil qui vous permette d'utiliser pleinement l' échelle du graphique . Au mieux, les outils des tableaux de bord n'utilisent qu'un seul marqueur.

Autres graphiques

D'autres graphiques qui ne méritent pas une section entière.

• Diagrammes à secteurs: ne les utilisez pas. Les gens ne peuvent généralement pas estimer la zone de secteur d'un graphique. Utilisez plutôt des colonnes.
• Graphiques en beignet: c'est généralement une belle façon de montrer une seule signification. Ou juste un graphique circulaire avec un trou à l'intérieur.
• Graphiques superposés: similaires aux diagrammes avec régions, mais pires qu'eux, car le manque de remplissage des régions les rend inattendus. Évitez-les.
• Graphes de flamme: idéal pour certains cas d'utilisation, mais généralement pas pour les tableaux de bord système, mais plus pour les profileurs.
• Sparklines: Idéal pour afficher des valeurs uniques, mais sans les éléments familiers du graphique en courbes, ils manquent souvent de contexte. Peu de graphiques suggérés, qu'il a appelés sparkstrip - ils ont ajouté des rayures de couleur ou des nuances pour aider l'utilisateur à naviguer. Malheureusement, je ne connais aucun outil contenant ces graphiques.
• Schémas fonctionnels: rares dans nos outils
• Diagrammes de dispersion: utilisez plutôt des graphiques à barres. Peut-être peuvent-ils être utiles si des données rares arrivent sur une longue période?
• Diagrammes de dispersion: idéal pour trouver des corrélations, mais il s'agit d'une application spécialisée, nous ne les examinons donc pas ici.
• Disques et échelles: si vos données n'ont pas vraiment de limites inférieure et supérieure, les afficher sous forme d'indicateurs de disque est déroutant. De plus, ils occupent en vain beaucoup d'espace.

Pour résumer

Avant de commencer à me critiquer pour ne pas avoir mentionné certaines des rares visualisations de votre outil, permettez-moi de vous rappeler que si un utilisateur comprend un tableau de bord, un graphique ou une visualisation, alors elles sont bonnes . Si vous développez vos scénarios d'utilisation et votre base d'utilisateurs, vous devez revenir au guide de sélection de la visualisation dans la partie 2.


Très probablement, la ligne est ce dont vous avez besoin. Peut-être que quelque chose d'autre vous sera utile. Le homard n'est pas une chronologie.

Utilisez des graphiques linéaires, ils sont super! Les valeurs individuelles ou les graphiques tabulaires sont excellents pour afficher des valeurs instantanées / uniques. Les colonnes sont bien adaptées pour comparer un petit nombre d'ensembles de données, et les cartes thermiques ont également leur propre domaine d'application.

Les sources

1. Stephen Few (peu, Stephen). Conception du tableau de bord de l'information . Analytics Press, 2013.

Partie 4. Amélioration du contexte.

Notions de base: texte

Les gens lisent assez bien. Les développeurs de tableaux de bord sont généralement sujets à la brièveté. Dans la partie 2, nous avons examiné l'échelle et les unités. En étiquetant les données et en réfléchissant à la forme de ces étiquettes, nous pouvons augmenter la perception des données.

Mais n'allez pas plus loin: améliorez simplement la signature sur les graphiques. Ne changez pas les lettres! Imaginez que vous êtes un nouvel opérateur et que vous avez d'abord vu un tableau de bord. Que faut-il savoir?


Les créateurs du graphique de gauche n'ont pas fait beaucoup d'efforts. À droite, il y a des signatures logiques qui aident l'utilisateur à comprendre le contexte de la visualisation.

Notions de base: prochaines étapes

Si l'utilisateur veut en savoir plus sur une visualisation particulière, comment peut-il le faire? Habituellement, il suffit de cliquer sur le titre, après quoi une version plein écran s'ouvrira, vous permettant d'étudier plus en profondeur la visualisation. C'est un endroit pratique pour placer des tableaux de données et d'autres informations utiles:


Lorsque vous ouvrez le graphique en plein écran, de nouveaux outils apparaissent car l'utilisateur a manifesté de l'intérêt pour une étude plus approfondie.

Si l'utilisateur voit de mauvaises lectures sur le graphique, il peut avoir besoin d'utiliser un autre outil ou d'avertir ses collègues. Pourquoi ne pas intégrer ces fonctionnalités dans le menu graphique?


Le menu peut nous conduire à la fonction de suivi des exceptions, de transfert d'informations à Slack ou de lancement du processus d'enregistrement d'un incident.

Actions humaines, données de gestion

Dans la section «Graphiques linéaires» de la partie 3, nous avons parlé de l'importance du fait que le temps dans les graphiques d'exécution est affiché sur l'axe X. Ceci est incroyablement utile pour les utilisateurs car il montre les changements dans le temps, mais le passage du temps n'est pas un facteur causal pour nos données. Pour cela, nous avons besoin de plus de contexte.


De nombreuses raisons peuvent conduire à des changements.

Tufty a proposé d'améliorer l'affichage en «insérant des variables supplémentaires dans la conception graphique» (38) pour accroître la compréhensibilité des relations de cause à effet ² . Cela fonctionne bien pour les tableaux de bord système, car les modifications apportées par des personnes ou des systèmes automatisés sont souvent des sources d'effets système. Le suivi et la visualisation de ces événements fournissent à l'utilisateur des informations importantes sur les événements qui peuvent être en corrélation avec le comportement du système.


Le losange bleu indique que le moment de déploiement est fortement corrélé à une diminution de la latence. Super!

Ces données de niveau de contrôle ont une fréquence beaucoup plus faible que les signaux mesurés dans nos systèmes. Il est nécessaire d'accorder une priorité élevée pour que ces modifications soient enregistrées et affichées en un seul endroit avec des tableaux de bord. Cela améliore considérablement la vitesse de réalisation des tâches par les utilisateurs.

Implémentation: marquage des événements

Malheureusement, la plupart des outils de création de tableaux de bord système prennent partiellement en charge ces données, souvent appelées «annotations». Les événements sont généralement difficiles à réutiliser, ils ne sont pas dactylographiés et sont souvent considérés comme instantanés . Certains packages prennent en charge les événements avec des horodatages du début et de la fin pour effectuer des déploiements et d'autres changements "d'étape".

De plus, pour transférer des annotations vers des tableaux de bord, vous devez souvent configurer manuellement des dizaines de systèmes divisés. Ensuite, vous devez rechercher des moyens de connecter tous les événements pertinents aux tableaux de bord. Très inconfortable!

Voici quelques conseils pour implémenter correctement ce comportement:

• Utilisez une sortie commune, telle que CloudTrail Events et les systèmes CI / CD.
• Efforcez-vous de réutiliser les événements afin que les utilisateurs n'aient pas à créer les leurs, en travaillant uniquement sur leurs tableaux de bord.
• Évitez le chaos: trop d'événements sont aussi mauvais que leur absence!
• Assurez-vous qu'il existe un lien dans l'événement afin que l'utilisateur puisse cliquer dessus et trouver plus d'informations. Cela fournit à l'utilisateur un contexte, mais permet au tableau de bord de ne pas se transformer en interface d'administration. C'est mieux quand les utilisateurs peuvent simplement cliquer sur des liens.

Normes, tâches et accords

Certains indicateurs de performance clés ont des plages acceptables, des objectifs internes ou même des obligations contractuelles. L'ajout de ces informations aux graphiques appropriés peut faire partie de la visualisation (voir la section «Échelles, marqueurs, intervalles, etc.» de la partie 3) ou être un contexte à l'intérieur du widget. Ce contexte permet aux utilisateurs d'éviter les exigences concernant l'apparence du graphique ou la manière dont la valeur actuelle peut affecter les parties prenantes.

De nombreux outils prennent en charge une fonction de flottaison similaire. Leur ajout fournit à l'utilisateur un contexte supplémentaire selon lequel la séquence temporelle n'est pas une valeur arbitraire, mais une comparaison avec nos attentes.


Le SLO de notre service est ajouté à la carte sous la forme d'une "ligne d'eau".

Nous pouvons étendre cette fonctionnalité en ajoutant des décalages temporels, un biais de moyenne ou divers types de détection d'anomalies pour démontrer les valeurs attendues:


Voici à quoi ressemblent les lectures normales. Ce motif en boucle semble bon!

Étant donné que nous connaissons ces valeurs limites et attendues, nous pouvons faire un autre pas en avant et traiter les informations pour l'utilisateur à l'avance. Lorsque la norme ou l'attente est violée, nous pouvons signaler cette violation de manière proactive. Ensuite, l'utilisateur fera attention aux informations les plus importantes (peu, 54) ¹ .


On dirait que nous cassons SLO sur ce graphique actuel!

Nous avons laissé la ligne anonyme sur le graphique pour une situation avec une grande quantité de contexte et une indication claire de l'état du système. On voit clairement l'excès de SLO!

Signaux de danger ou d'autres maladies

En règle générale, les tableaux de bord du système sont utilisés pour diagnostiquer les accidents, en particulier en réponse à des signaux de danger. Le contexte de la vitesse de commande illustré ci-dessus peut être complété par des données de signaux de danger. Quand et comment devraient-ils fonctionner?


Étiquettes de chronologie pour les signaux de danger, les violations mises en évidence et les valeurs de coloration qui dépassent les seuils.

Ces informations permettent à l'utilisateur de comprendre ce qui a provoqué l'alarme, l'aident à naviguer le problème. D'autres graphiques peuvent fournir un contexte supplémentaire ou les menus ajoutés par nous vous aideront à effectuer d'autres actions.

Projections et autres données synthétiques

Le volume principal des données affichées est la mesure directe des lectures des systèmes. Par conséquent, vous devez être prudent avec l'affichage des données projetées, prédites ou autrement synthétisées afin que l'utilisateur comprenne ce en quoi il doit avoir confiance. Le Consumer Financial Protection Bureau a des conseils sur la façon de minimiser ces données .

Un exemple d'un tel problème serait un graphique en éventail temporaire.


La valeur estimée et la plage de valeurs futures possibles permettent à l'utilisateur de voir ce qui pourrait arriver.

Brève répétition

• Réfléchissez soigneusement aux signatures sur les graphiques, ajoutez des titres, des sous-titres et toutes les autres informations nécessaires à leur sujet.
• Notre travail ne se termine pas par une séquence temporelle. Les utilisateurs ont besoin de contexte pour comprendre ce qui se passe d'autre. Ce contexte doit être emprunté aux différents services de l'organisation / entreprise.
• L'affichage des données d'événement sur les séquences temporelles aide les utilisateurs à comprendre ce qui pourrait avoir changé. Ces événements sont des données d'observation et ont des rapports signal / bruit plus élevés.
• Les données sur les graphiques peuvent être améliorées en ajoutant des valeurs normales, attendues ou cibles, permettant à l'utilisateur de mieux naviguer.
• L'ajout d'informations sur les dangers permet d'accélérer les temps de réponse aux incidents.
• L'utilisation de tout type de projection nécessite une visualisation soigneusement pensée.

Pour résumer

Grâce à l'aide de mes utilisateurs, j'ai beaucoup appris sur la création de bons tableaux de bord. Beaucoup de leçons contredisent mes vues et conseils précédents. Beaucoup de ces recommandations montrent combien nous devons améliorer nos outils, notamment en termes de contexte.

Tout cela est très important . De nombreuses organisations utilisent ces tableaux de bord comme source principale d'informations sur l'état, les performances et la disponibilité des services critiques. Ils sont également des sources d'échange d'informations pour les organisations de conception. Dans de nombreux cas, les tableaux de bord sont des affaires car l'entreprise ne peut pas voir le nombre de personnes utilisant le site Web. Notre seule méthode d'observation est les données que nous collectons et affichons.

Les tableaux de bord et les graphiques sont des ressources qui peuvent augmenter considérablement le retour sur les efforts de leurs développeurs. Quelques jours de développement de conception réfléchi seront récompensés par des milliers d'heures économisées par les ingénieurs, les gestionnaires et / ou les utilisateurs. Dans de nombreux cas, ils peuvent conduire à des réponses plus rapides aux problèmes.

Ça vaut votre temps, non?

J'espère que vous avez également apprécié la lecture de cet article, en étudiant les informations et en les écrivant. Je vous recommande d'étudier les sources indiquées à la fin de chaque partie pour approfondir ce sujet.

Les sources

1. Stephen Few (peu, Stephen). Conception du tableau de bord de l'information . Analytics Press, 2013.
2. Edward R. Tufte (Tufte, Edward R.). L'affichage visuel des informations quantitatives. Graphics Press, 1998.