Meilleures pratiques de conception des visualisations

Désencombrement des applications

Si votre application comporte trop d'informations, cela peut empêcher votre audience de voir ce qui est important. De nos jours, le style des interfaces utilisateur modernes tend vers une conception claire, simple et épurée. Une conception simplifiée guide subtilement le lecteur et lui permet de rester concentré.

Le mieux est l'ennemi du bien

Il est fréquent que les utilisateurs tentent d'inclure une trop grande quantité d'informations dans une seule application. Les graphiques en courbes comptant plusieurs mesures peuvent prêter à confusion et être difficiles à interpréter. Essayez de créer plusieurs visualisations plus petites de façon à répartir ces informations sur la page. Cette technique permet par ailleurs au lecteur de comparer et d'évaluer efficacement des visualisations placées côte à côte. Enfin, vous pouvez utiliser des dimensions et des mesures alternatives pour permettre au lecteur de basculer rapidement entre différentes mesures sans surcharger une visualisation. Pour plus d'informations, voir Modification des données d'une visualisation.

Il existe différentes façons dont vous pouvez améliorer l'aspect esthétique et les fonctionnalités de votre application. Selon votre audience et les données que vous souhaitez mettre en évidence, la manière dont vous concevez une visualisation peut avoir un impact important sur l'interprétation des données par le lecteur.

Connaissez vos limites

Il se peut que les consommateurs de vos visualisations disposent d'un espace ou d'une résolution d'écran limité(e). Qlik Sense utilise la conception réactive pour remédier à ce type de limitation. Cependant, si l'écran présente un espace ou une résolution par trop limité(e), il est nécessaire de procéder à certains ajustements de conception. Par exemple :

• Un sous-ensemble des données est affiché dans les graphiques en barres et les graphiques en courbes. Lorsque le nombre de valeurs de dimension dépasse la largeur de la visualisation, un mini graphique avec barre de défilement s'affiche.
• Les menus de sélection des filtres de données sont réduits. Lorsque le nombre de valeurs de dimension ne tient pas dans l'espace disponible pour le volet de filtre, le menu est réduit. Les consommateurs de l'application doivent alors cliquer sur le nom de la dimension dans le titre du volet de filtre pour ouvrir un nouveau volet. Ils peuvent ensuite effectuer leurs sélections dans le nouveau volet. De plus, lorsque l'espace est limité, les noms des dimensions peuvent s'afficher sous forme de points de suspension dans les titres des volets de filtre. Les consommateurs de l'application doivent alors cliquer sur les points de suspension pour afficher le nom du volet de filtre.
• Les noms des légendes d'un graphique sont tronqués. Les noms trop longs par rapport à l'espace disponible pour les dimensions et les mesures sont tronqués. Des points de suspension sont ajoutés à la fin du nom tronqué. Les consommateurs de l'application peuvent pointer avec la souris sur le nom tronqué pour l'afficher en entier.
• Il manque des légendes, des étiquettes et des titres.

Les consommateurs de l'application peuvent développer les visualisations pour résoudre certains de ces problèmes. Nous vous recommandons toutefois de tester vos applications sur les appareils sur lesquels elles sont susceptibles d'être consommées. Vous pouvez également vous servir de différents outils pour tester vos applications, tels que le mode de conception réactive Vue adaptative de Firefox (Ctrl+Maj+M). Si nécessaire, vous pouvez déplacer des visualisations sur de nouvelles feuilles, réduire la quantité de données affichées dans les visualisations, etc.

Accessibilité au niveau des couleurs

Pour les personnes atteintes d'une déficience visuelle liée aux couleurs, le spectre des couleurs est plus étroit. Il peut donc donner lieu à une interprétation différente de votre visualisation.

Par exemple, certaines personnes perçoivent les couleurs rouge et verte comme du jaune ou du brun. Cette forme de daltonisme est la plus courante. Cette remarque vaut la peine d'être soulignée, car le rouge est souvent chargé d'une connotation négative dans les visualisations de données, notamment dans la finance.

Un indicateur KPI rouge ou vert peut prêter à confusion. Pour améliorer l'accessibilité de vos conceptions, vous pouvez utiliser des formes de couleurs différentes comme indicateurs de performance. Vous pouvez ainsi choisir un cercle vide de couleur rouge pour traduire un mauvais résultat et un cercle plein vert pour dénoter un bon résultat, ou encore ajouter un triangle comme symbole d'avertissement, s'affichant uniquement lorsque le niveau d'un indicateur KPI est inacceptable.

En cas de distorsion des couleurs, les lignes, barres et secteurs peuvent être difficiles à différencier.

Pour plus d'informations, voir Modification de l'aspect d'une visualisation.

Positionnement des filtres et des icônes

Les filtres et les icônes sont une composante essentielle des visualisations de données, mais il peut s'avérer difficile de savoir où les positionner et comment les trier. En général, vous pouvez anticiper l'endroit où le lecteur va commencer sa lecture en vous appuyant sur quelques principes de conception bien établis.

Positionnement à gauche

Plusieurs sites Web connus ont choisi de positionner les filtres et les vignettes de navigation à gauche. Cela s'explique par le fait que de nombreuses langues se lisent de gauche à droite. De ce fait, le côté gauche de l'écran est l'endroit le plus consulté par ces lecteurs. Les utilisateurs qui recherchent des informations dans un texte ont tendance à graviter autour du côté gauche de l'écran. Plus les objets sont situés vers l'extrémité droite, moins les utilisateurs les examineront. Si tous vos filtres et icônes sont empilés à la verticale du côté gauche, cela leur octroie la même importance.

De la même manière, l'inverse se vérifie pour les langues dont le texte s'écrit de droite à gauche. Tenez compte de ce principe si vos applications sont traduites dans ces langues.

Positionnement en haut

Une autre option de positionnement courante pour les icônes et les filtres consiste à occuper la partie supérieure d'une application. Si vous ne positionnez pas les filtres ou les icônes dans la partie gauche, vous disposez de davantage d'espace pour les visualisations de grande taille, aux menus distrayants. Lorsque les filtres et les icônes sont positionnés au-dessus des visualisations, ils sont également considérés comme distincts du contenu situé en dessous. Cette technique peut permettre au lecteur de comprendre que vous accordez la priorité aux filtres ou aux icônes. Si tous les filtres et icônes que vous avez conçus figurent côte à côte en haut de la visualisation, l'élément le plus à gauche revêt le plus d'importance et est examiné en priorité par le lecteur.

Pour plus d'informations, voir Structuration d'une application à l'aide de feuilles.

Hiérarchie des informations

Dans certains cas, vous souhaiterez que le lecteur privilégie certaines visualisations par rapport à d'autres. Vous pouvez hiérarchiser les informations en suivant quelques meilleures pratiques clés en matière de conception. Par exemple, vous pouvez jouer sur les différences de taille pour mettre en avant certaines visualisations. Les informations présentées en grand sont considérées comme revêtant plus d'importance : en augmentant la taille de la police ou du graphique, vous pouvez indiquer au lecteur où regarder en premier lieu.

Le positionnement des pages joue également un rôle dans la hiérarchie des informations. Les informations figurant en haut d'une page sont perçues comme étant plus importantes que celles se trouvant en bas, parce qu'elles sont lues en premier lieu. Les informations placées sur la première page sont perçues comme étant plus importantes que celles de la dernière page.

Ajout d'un contexte aux indicateurs KPI

Les indicateurs KPI constituent un moyen formidable de communiquer certaines des grandes idées que renferme votre application. Cependant, les valeurs des indicateurs KPI ne fournissent aucun contexte concernant les nombres et les calculs qui interviennent en coulisses. La présence d'un feu vert à côté d'un indicateur KPI ne précise pas au lecteur si l'objectif a tout juste été atteint ou largement dépassé.

Afin de replacer les indicateurs KPI dans un contexte, à côté de la valeur, incluez des renseignements complémentaires en texte plus petit. Vous pouvez ainsi comparer la valeur actuelle de l'indicateur KPI à celle de l'année précédente. Vous pouvez également ajouter un petit graphique en barres, sans axes ni valeurs, qui présente des informations sur la tendance actuelle.

Comment éviter les pièges de la visualisation des données

Pour tirer profit des avantages de la visualisation des données, vous devez éviter les pièges sous-jacents à cette fonction. Voici quelques écueils courants à éviter :

Utilisation abusive des couleurs

N'exagérez pas dans votre utilisation des couleurs. Ayez toujours à l'esprit que l'emploi d'une mauvaise couleur au mauvais endroit peut être source de confusion plutôt que d'engendrer de la clarté. De plus, les couleurs n'ont pas nécessairement la même signification dans tous les pays.

Mauvaise utilisation des graphiques en secteurs

Évitez de placer côte à côte des graphiques en secteurs à des fins de comparaison. Efforcez-vous de ne pas introduire trop d'informations dans ce type de graphique.

Encombrement visuel

Trop d'informations tue l'information et va à l'encontre de l'objectif de clarté. Sélectionnez neuf indicateurs de performance clés (KPI) au maximum et évitez d'encombrer la visualisation.

Privilégier la forme sur le fond

Une belle visualisation n'est pas nécessairement convaincante. Suivez toujours les bonnes pratiques de conception.

Données erronées

Repérez et corrigez les erreurs contenues dans les données avant de présenter la visualisation. Ne faites pas porter le chapeau à la visualisation quand il s'agit de problèmes au niveau des informations.