Construire une datavizualisation compréhensible

Mar 16, 2015
Yann Cadoret

Pour être efficace, une datavizualisation doit informer visuellement, simplement et rapidement. Rendre des données sous forme graphique vise à proposer une lecture simplifiée qui permettra de mieux comprendre et décider sereinement, plus vite et plus simplement.

1228581-html5-css3-navigateur

Les technologies disponibles

La datavizualisation est une discipline particulièrement adaptée aux technologies Web et aux sous-ensembles HTML5. Il existe aujourd’hui deux grandes familles parmi les technologies utilisées le plus souvent : les représentations graphiques basées sur une technologie SVG et celles qui utilisent la technologie CANVAS. Si toutes deux présentent des possibilités interactives, ces deux approches reposent sur des philosophies différentes qu’il convient d’étudier en amont.

Html5_canvas_logo  03-01_html5_canvas_element_ld_img   SVG_logo.svg

Le bon choix dépend fortement de votre besoin en lui-même, la couverture recherchée, le parc et le public concerné. Les frameworks SVG vous proposent des rendus dits vectoriels, c’est-à-dire qu’ils sont construits à partir d’éléments graphiques tracés entre des points identifiés. Le fichier image de type .svg est en réalité un fichier contenant du code décrivant les points de jonctions et la manière dont ils seront réunis pour dessiner une image identique en proportion quelle qu’en soit sa taille. Les frameworks basés sur la technologie CANVAS manipulent quant à eux des pixels.

La construction d’un tableau de bord efficace et adapté

La construction d’un bon tableau de bord requiert une réflexion importante en amont du développement. A qui sont destinées les données ? Quelles sont les motivations à mettre ces informations à disposition ? Quels sont les messages à transmettre ? Qu’est-ce-qui est important ? La donnée elle-même ? Son volume ? Son évolution ? Sa valeur aujourd’hui ou sa moyenne sur une période donnée ? Sa représentation a-t-elle besoin d’être à l’échelle ? Parfois, déformer l’espace et ses proportions permettra d’attirer l’attention du visiteur sur la partie du graphique à mettre en avant.

Capture d’écran 2015-03-16 à 16.25.52

De l’importance du choix des couleurs

Le sens à donner aux données affichées repose sur le volume qu’il représente mais également sur la couleur utilisée pour transmettre le message. Par exemple, sur un graphique camembert représentant le volume de ventes de plusieurs produits, il est évident que la part la plus volumineuse sera sans conteste la meilleure performance et sera probablement illustrée dans une couleur positive telle que le vert. On pourra également utiliser des images métaphoriques pour augmenter encore la clarté, par exemple les batons d’un graphique par des petites voitures pour rester dans l’exemple précédents. Plus les ventes sont importantes, plus les petites voitures sont nombreuses.

En revanche si un graphique camembert représente le nombre d’absences des employés d’une société, la part la plus importante sera également la plus préoccupante et de fait, motivera l’utilisation d’une couleur portant cette connotation telle que du rouge ou le orange par exemple.

Quoi qu’il en soit, un tableau de bord efficace est un tableau de bord clair. Les données illustrées dans les représentations graphiques doivent être clairement légendées et chaque représentation doit comporter un titre permettant à l’utilisateur de comprendre ce qu’il regarde. La représentation doit être l’élément mis en avant. Si trop de texte illustre le pourquoi du graphique, l’utilisateur aura tendance à porter son attention sur les explications bien plus que sur le message porté par les données et leur représentation. De même, l’utilisation de pictos peut apporter une couche supplémentaire d’information en permettant aux utilisateurs de comprendre rapidement la matière exposée.

La cible du tableau de bord

Les données à afficher sont donc en relation directe avec le message à transmettre lui aussi directement relatif au public visé. On ne cherche généralement pas à dire la même chose de la même manière lorsque l’on s’adresse à la direction générale d’une entreprise, à ses actionnaires ou encore à ses employés.

newdash-mednarrow

L’interactivité

Un autre avantage très important des représentations graphiques versus les tableaux de données est très certainement la possibilité d’ajouter simplement de l’interactivité. Pouvoir faire disparaitre une donnée et relancer le calcul de proportion de chacune des restantes peut permettre une comparaison fine et une analyse simple. Par ailleurs, on peut même envisager de permettre à l’utilisateur de spécifier le type de représentations graphiques qu’ils souhaitent utiliser pour tel ou tel type de données. En d’autres termes, proposer à l’utilisateur de modifier légèrement son tableau de bord afin de l’adapter parfaitement à son utilisation est également une fonctionnalité riche !

De plus, plusieurs représentations graphiques peuvent travailler ensemble et inter-opérer, c’est à dire qu’un changement d’état et de proportion d’une première représentation en modifiera une seconde qui sera automatiquement mise à jour. On comprendra par cette méthode l’impact d’une donnée sur une autre qui n’est pas ou ne semble pourtant pas nécessairement liée à la première.

Représenter un ensemble maitrisé de données. Plus les données sont nombreuses, moins-bien ces dernières sont comprises.

Même si un graphique peut être amené à afficher un nombre important d’items, il est préférable de découper l’ensemble en plusieurs écrans, ou plutôt plusieurs états. Par exemple, si on représente les ventes de voitures dans le monde, la majorité des utilisateurs sera intéressée par le palmarès des 5 ou 10 premiers. Sans doute beaucoup moins par les marques plus locales et donc moins répandues. On choisira ici de représenter un premier camembert avec les 9 meilleurs scores,  puis une 10ème tranche qui cumulera l’ensemble des résultats restant par rapport à la masse globale.

Si toutefois l’utilisateur est intéressé par une granularité plus importante, on lui proposera de cliquer sur la tranche “autres” (la 10ème tranche) et ce clic aura pour effet de permettre à l’utilisateur de “rentrer” dans le graphique, c’est-à-dire que la représentation va se redessiner mais cette fois l’ensemble du camembert ne représentera que le volume contenu initialement dans la 10ème tranche. L’utilisateur verra ainsi apparaitre le deuxième niveau du graphique, à savoir les parts de 10 à 19 et la 20ème représentera une nouvelle fois le volume cumulé de données restantes.

Vous l’aurez compris, construire un tableau de bord efficace repose sur beaucoup de bon sens. Ce type d’interfaces repose également sur les mêmes règles qu’une interface plus classique.

Quelques frameworks recommandés :

D3.js (open source), HighCharts (payant), ElyCharts (open source), iCharts etc.

Par Yann Cadoret
Associé @UXRepublic

UX-REPUBLIC est une agence spécialisée en conception centrée utilisateur. Nous sommes également centre de formation agréé. Retrouvez toutes nos formations en UX-DESIGN et en Développement Front (HTML/CSS/JS) sur notre site training.ux-republic.com