Mes astuces pour réussir la data-visualisation

Quand graphisme et données unissent leurs forces

À notre époque où la production de données est toujours plus accrue, la Data Vizualisation est une réponse pour donner aux informations qui nous entourent une forme plus compréhensible et familière. En utilisant les outils que sont la couleur, le contraste, l’allégorie… elle nous rend la donnée accessible, voire lui donne une force émotionnelle. Elle peut donc être une grande aide pour la création d’interfaces, en les rendant lisibles d’un coup d’œil et en leur apportant une touche d’originalité. Je vous livre ici quelques astuces pour la mettre en place dans vos designs.


Un langage graphique aux formes diverses

Du point de vue de la forme, je distingue deux formes de DataViz. D’un côté celles relevant majoritairement des propriétés visuelles, de l’autre celles relevant de l’allégorie. La première catégorie repose sur les outils de base du graphisme : couleur, échelle, positionnement d’éléments… pour mettre en forme les données. La seconde utilise des éléments concrets de notre environnement pour nous “raconter” la donnée. Dans le premier cas, le plus l’important est la lisibilité de l’information et sa rapidité d’interprétation. C’est pour cela qu’on la retrouve beaucoup dans des dashboards et autres outils de monitoring. Dans le second cas, la lecture s’accompagne d’une volonté de raconter une histoire et de susciter l’émotion. Ici les visuels sont souvent plus complexes et illustratifs.

Les deux formes de dataviz en images.

Dans le cadre de la création d’interfaces, c’est donc la première de ces deux formes qui semble être la plus efficace. Dans un contexte de monitoring de services il est en effet primordial de faciliter la lecture pour l’utilisateur. Pas besoin pour autant d’occulter la deuxième forme. En l’habillant d’un style graphique sobre et clair, on peut même faire d’une pierre deux coups, en associant la lecture simplifiée au côté ludique de l’allégorie.


La dataviz comme un langage

…un langage visuel et universel, voué à traduire des données textuelles. Et comme dans toute traduction, il convient de bien choisir ses termes, pour que le discours garde le même sens et la même force. La forme de dataviz que l’on va utiliser va donc dépendre des données de base, et de ce qu’elles ont à nous dire en priorité. De manière grossière : on ne va pas utiliser un histogramme pour montrer la connexion entre les éléments…

Je vous livre ici quelques exemples de types de visualisation catégorisées selon le message à transmettre :

  • temporalité (montrer l’évolution d’une valeur dans le temps) : graphiques en courbes, en spirale ou d’aire, nuage de points…
À gauche, graphique d’aire. À droite, graphique en spirale.
  • répartition par entités (comment divers éléments se partagent une valeur) : diagramme circulaire, diagramme de Kiviat (diagramme en radar), treemap (carte proportionnelle)…
À gauche, diagramme circulaire. À droite, treemap.
  • connexion (comment des éléments se lient ou se dissocient des autres) : plan de métro, chord diagram, diagramme de Venn…
À gauche, plan de métro. À droite, diagramme de Venn.
  • spatialisation (évolution d’une variable en fonction de l’espace) : carte
Carte
  • flux (évolution de données d’un point d’entrée vers un point de sortie) : diagramme de Sankey, diagramme de flux de données…
À gauche, diagramme de Sankey. À droite, diagramme de flux de données.
  • arborescence (connexion de données et leurs relations hiérarchiques) : treemap, dendrogramme…
Dendrogramme

Certains types de visualisation sont à même d’être adaptés à divers messages, ce qui peut être utile quand on veut représenter différents rapports entre les mêmes données à la fois.


Choisir des données pertinentes

La dataviz est un moyen et non une fin ! Employer celle-ci pour représenter un ensemble de données, c’est les mettre en valeur. Il faut donc réfléchir à leur importance pour l’utilisateur afin de mettre plus en avant celles dont il aura le plus besoin.

Hiérarchisez vos infos : utiliser la dataviz pour tout, c’est le risque de la surcharge cognitive et d’une interface illisible. Tout l’inverse de ce que l’on souhaite. Les données principales mériteront à la fois un visuel plus travaillé, une plus grande taille et un positionnement dans la page qui les rend visibles de suite. Associez cela à d’autres graphiques plus petits et plus simples (graphiques circulaires, courbes) pour compléter la lecture. Les données moins importantes pourront simplement être placées dans des listes ou des tableaux plus bas dans la page ou dans des pages annexes.

Laissez également “respirer” vos visuels : n’hésitez pas à laisser de l’espace libre autour de ceux-ci, notamment les plus importants pour simplifier leur lecture.

Enfin, je conseille de décomposer les groupes massifs de données en petits sous-groupes, représentés chacun via un graphique simple. Cela vaudra mieux qu’un seul qui serait surchargé (généralement un grand nombre d’items dans la légende = graphique trop complexe).

En plus d’aider à la lisibilité, les changements d’échelle apportent du rythme au design.

Interactivité

En termes d’UX, on parle beaucoup de l’importance de l’animation et des micro-interactions dans les interfaces. N’hésitez pas là encore à amener ce genre de principes dans vos visualisations. C’est d’une part une façon de leur apporter une touche d’originalité supplémentaire, et d’autre part un moyen d’inciter l’utilisateur à entrer progressivement dans le détail des informations qui lui sont présentées.

On peut par exemple jouer avec les animations d’apparition de votre graphique. Arrive t’il dans sa totalité sur l’écran, ou un type de donnée à la fois ? Veut-on une transition discrète et fluide telle qu’un scale-in à l’animation lissée, ou quelque chose de plus remarquable en y ajoutant un effet de bounce ? Une fois de plus dans ce domaine, il sera intéressant de mettre en corrélation les types de visualisation et le style de l’animation. Hiérarchisez là aussi la prégnance visuelle de vos animations : en associant les plus marquantes aux graphiques principaux, et les plus discrètes à ceux plus secondaires.

Comme pour d’autres éléments UI, l’animation et l’interaction sont un moyen d’épurer le design. Un clic ou un hover sur un élément d’un graphique pourrait donner plus de détails sur celui-ci, au sein d’une tooltip ou d’une popover par exemple. Dans ce cas, pensez dès le début du design de votre interface à représenter les différents états de vos éléments, à la manière d’un storyboard.

Design réalisé par SonMin

Résumé

Retenez que votre message et la façon dont vous voulez le transmettre doivent vous guider dans le choix de votre visualisation. Ne cherchez pas non plus à tout traduire par la dataviz : sélectionnez et hiérarchisez.

Enfin, n’oublions pas les règles d’accessibilité ! Un beau graphique ne sert à rien s’il empêche une partie de vos utilisateurs d’avoir accès aux données qu’il met en forme. Souvenez-vous entre-autres que l’information ne doit pas passer que par la couleur. Combinez-la par exemple à des effets de trame, des jeux de contours, d’échelle… Utilisez aussi des couleurs aux contrastes suffisants et des fonts en taille assez importante.

La DataViz est une méthode efficace de représentation, qui peut revêtir une grande variété de formes qui n’ont de limites que votre imagination. Des outils tels que la photo ou le dessin se prêtent totalement à ce genre d’exercice. Bref, amusez-vous !

Histogramme et frise chronologique matérialisés via la photo.

Sources

Information is beautiful : Initié par David McCandless, ce site vous présentera diverses visualisations souvent amusantes

The Data Visualisation Catalogue : Ce site vous donnera une carte d’identité assez détaillée de divers types de visualisation

Sites de veille graphique : les Pinterest, Behance et autres Dribble regorgent d’exemples de visualisations souvent mis en scène au sein d’interfaces

Camille Gicquel, UI designer Team OVH UX Labs R&D