5 astuces pour améliorer la conception de la visualisation des données

Guide pour faciliter la lecture des données de votre application et accroître la participation et la rétention de l'utilisateur dans le processus!

Pour de nombreuses applications Web et mobiles, les données font partie intégrante de l'expérience de l'utilisateur. Des éléments de visualisation des données, tels que des graphiques et des tableaux, permettent notamment aux utilisateurs de noter rapidement leurs progrès, de se renseigner sur les tendances et de comparer plusieurs éléments à la fois, entre autres choses.

Si vous souhaitez que les utilisateurs restent actifs sur votre application, des données dans un format facile à consommer vous seront utiles.

Ne sous-estimez pas l'impact de vos décisions de conception sur l'expérience utilisateur, pour le meilleur ou pour le pire.

Bien qu'il puisse sembler assez facile de créer un graphique. pour afficher des données, ce n'est pas si simple. Même un détail apparemment insignifiant peut compromettre la capacité de vos utilisateurs à lire les données.

Vous trouverez ci-dessous cinq petits détails sur lesquels vous pouvez vous concentrer lorsque vous ajoutez de nouvelles visualisations de données aux applications de vos clients.

1. Choisissez le bon type d'élément de visualisation de données

Que vous construisiez un élément de visualisation de données à partir de zéro ou utilisiez un modèle de votre outil de conception, déterminez le type d'élément dont vous avez besoin avant de déposer des données.

Pourquoi ça compte? Eh bien, il peut sembler qu’il existe plusieurs options pour afficher les données. Cependant, il y aura toujours un type de graphique qui le représente le mieux. Avant de commencer à concevoir, réfléchissez donc au type de données avec lequel vous travaillez.

Par exemple:

Avez-vous un ensemble de pourcentages totalisant 100%? Si tel est le cas, alors un diagramme à secteurs est probablement préférable, comme le montre la Bank of America :

Graphique circulaire de Bank of America montrant les coûts: taxes, autres factures, chèques, autres dépenses, animaux domestiques, prêts, distributeurs automatiques de billets, frais de déplacement, frais de service, services téléphoniques, services de santé, autres.

Les graphiques circulaires offrent aux utilisateurs une idée de comment quelque chose est distribué. Dans cet exemple, ils peuvent rapidement déterminer où va la majorité de leurs dépenses.

Et si vous disposiez d'un jeu de données permettant de suivre la croissance ou la descente? Dans ce cas, un graphique à courbes fonctionnerait bien. Voici comment Google Trends affiche les résultats du mot clé "design ux" sur un graphique linéaire:

Google Trends trace la popularité du terme de recherche "ux design" sur un graphique linéaire entre le 1er janvier 2004 et le 23 août 2019. La ligne oscille autour de 0 jusqu'à environ 2009, avec une croissance lente mais exponentielle, atteignant 50 vers janvier 2018 100 à la fin du graphique en 2019.

Ce style de visualisation de données permet de repérer facilement les trajectoires ascendantes et descendantes ainsi que les événements ou tendances récurrents.

Maintenant, qu’en est-il si vous voulez comparer les données, que ce soit le long d'une chronologie ou parmi quelques variables choisies? Dans ce cas, un graphique à barres fonctionnerait bien.

Voici un exemple de graphique à barres que les utilisateurs de Toggl voient dans leur tableau de bord:

Toggl utilise un graphique à barres minimal pour afficher les heures suivies au cours du mois de mars.

Notez dans le coin supérieur droit la légende "Comparer avec la période précédente". Lorsque les utilisateurs cliquent dessus, ils peuvent comparer les données de cette période avec les précédentes, le tout dans le même graphique.

Voici à quoi cela ressemble:

Toggl permet aux utilisateurs de comparer des données entre deux périodes similaires. Dans ce graphique, les heures suivies au cours des mois de mars et de février sont comparées.

Vous verrez que les heures non facturables du mois de mars (en bleu) sont comparées aux heures non facturables des mêmes jours en février (en gris). Ce type de comparaison est utile pour permettre aux utilisateurs de repérer les tendances dans leurs flux de travail et de détecter les améliorations ou les ralentissements.

Enfin, que se passe-t-il si vous souhaitez afficher un grand nombre de données connexes? Plutôt que d'essayer de regrouper toutes ces informations dans des éléments plus petits, tels que des graphiques, des tableaux, un tableau serait une meilleure solution

. Par exemple, il s'agit d'un tableau de l'application NFL . ] affiche les horaires des équipes:

L'application mobile NFL utilise des tableaux pour répartir les horaires complets des équipes. C’est l’horaire de la pré-saison et de la saison régulière des Patriots avec les semaines, les dates, les matchs et les temps / résultats ventilés.

Puisqu'il n'y a pas de défilement horizontal et qu'il suffit d'un ou deux défilements verticaux pour atteindre le bas du tableau, il n'y a besoin d'inclure des filtres ou une fonctionnalité de tri. Cependant, c'est l'un des avantages de rassembler une tonne de données dans un seul tableau.

Il existe bien sûr d'autres types de visualisations de données que votre application peut nécessiter. Barres de progression. Diagrammes de Venn. Diagrammes à bulles. Cartes en surbrillance. Réfléchissez vraiment à ce que vos utilisateurs souhaitent extraire de ces données, puis concevez l'élément de visualisation de données spécifiquement pour ces données.

2. Ne soyez pas créatif avec la copie

À la différence d’un titre de blog ou d’une ligne d’objet de courrier électronique, qui risquerait de taquiner ou de choquer les utilisateurs, les données de votre application ne devraient jamais rester un mystère. En d'autres termes, privilégiez toujours la simplification excessive avec la copie entourant ainsi que dans vos éléments de visualisation de données.

Facebook fait un bon travail pour les utilisateurs professionnels qui suivent les performances des annonces:

Les publicités Facebook fournissent une évaluation simple des performances de l'annonce. Tout est clairement étiqueté, y compris les clics sur les liens, les personnes atteintes, le coût par clic et l'engagement global.

Le titre de cet ensemble de données est «Performances». Et tout ce qu'il contient est clairement étiqueté. Cela évite également l’utilisation de jargon qui a tendance à faire trébucher les utilisateurs.

Par exemple, “Coût par lien de liaison” aurait pu être écrit en “CPC”. Même s’il s’agit là d’un acronyme, les propriétaires d’entreprise qui diffusent eux-mêmes des annonces risquent de ne pas le faire. Donc, la décision de Facebook de tout écrire – et de le faire de manière succincte – est un choix judicieux.

Vous pouvez même abréger les étiquettes de vos graphiques et tableaux tant que vous savez que les utilisateurs le comprendront (par exemple, "Yrs" pour " Années ").

3. Inclure seulement ce qui est nécessaire

C’est facile de submerger les utilisateurs de nos jours, c’est pourquoi les applications sont conçues si simplement en premier lieu. Les données sont toutefois délicates, car vous ne voulez rien omettre. Il arrive cependant que certaines données ne valent pas la peine d’être partagées.

Par exemple, supposons que votre client exécute une enquête. Ils donnent à 500 répondants 20 choix de réponses. Deux des réponses aboutissent toutefois à un score inférieur à 0,01%.

Dans ce cas, vaut-il la peine de partager les résultats de ces deux réponses? S'il y a une valeur dedans – par exemple pour éloigner les utilisateurs de ces options – alors ce pourrait être le cas. Mais vous devriez considérer cela avant d'occuper votre précieuse application immobilière avec ces données.

Regardons un exemple concret tiré de de l'application QuickBooks Self-Employed :

Les données kilométriques de QuickBooks de l'année dernière indiquent les données enregistrées en octobre et en novembre, avec une déduction totale de 53 $.

Dans ce rapport Kilométrage, le graphique reste très simple. L'axe des ordonnées commence à 0 et va jusqu'à 93. L'axe des abscisses affiche les mois de 2018. Toutefois, aucun détail spécifique n'est fourni sur le kilométrage réellement enregistré au cours de chacun de ces mois.

Les utilisateurs sont-ils même besoin de cette information si? Ils pourraient s’ils doivent le signaler à leur employeur ou partager avec leur comptable le moment de l’impôt.

Bien que QuickBooks ait choisi de masquer ces détails de la vue à vol d'oiseau de ce graphique, les utilisateurs peuvent le révéler en survolant la page. barres comme ceci:

Lorsque les utilisateurs survolent les barres du graphique Kilométrage QuickBooks, des détails supplémentaires sont affichés. Celui-ci indique que 4 miles ont été enregistrés en novembre, donnant à l'utilisateur une déduction de 2 dollars.

De nombreux graphiques sont conçus de cette manière, notamment s'il est utile d'afficher les données sous forme de tendances globales et de plonger profondément dans l'image. Dans les détails.

Vous voudrez peut-être aussi réfléchir à des moyens de supprimer les lignes et les bordures inutiles dans vos éléments de visualisation de données. Dans l'exemple ci-dessus, vous pouvez voir qu'il n'y a pas de lignes autour du graphique lui-même. Et, cependant, les barres colorées et grisées sont toujours faciles à déchiffrer.

Un autre type de stylisation que vous devez absolument supprimer de la visualisation de vos données est la 3D et l'ombrage. Il n’ya aucune raison de compliquer la conception de vos données si le reste de votre application est minimalement conçu avec des éléments plats.

4. Commandez les données de manière logique

Comme nous l’avons déjà vu, chaque type d’élément de visualisation de données fonctionne mieux pour afficher un type de données différent. Ainsi, il n'y aura pas qu'un seul moyen d'afficher les données de manière logique.

Par exemple:

• Les segments d'un graphique à secteurs peuvent être insérés en fonction de la taille.
• Un graphique en courbes sera probablement affiché dans ordre chronologique.
• Il peut être nécessaire de trier un graphique à barres par ordre alphabétique.
• Un tableau peut comporter plusieurs options de classement que les utilisateurs peuvent contrôler à l'aide des paramètres de tri.

Parfois, l'ordre n'est pas aussi simple que numérique. ou ordre alphabétique. Comme avec l'appli Alexa SEO and Competitive Analysis .

Alexa présente un graphique à barres de l'analyse concurrentielle qui compare le site Web de l'utilisateur à ses principaux concurrents. dans un certain nombre de catégories: Recherche, Social, Référence et Direct. Les données de l'utilisateur sont mises en surbrillance dans la partie supérieure, tandis que celles des concurrents sont affichées en gris juste en dessous.

À première vue, vous pourriez penser que ce graphique à barres Sources de trafic place le site Web de l'utilisateur en haut des résultats pour faciliter la comparaison avec les concurrents ci-dessous. Cependant, si ce site Web particulier avait reçu 54% de son trafic de la recherche organique, cette barre violette aurait été placée entre et wphive.com et theplusaddons.com .

Vous Vous pouvez en voir la preuve dans d'autres éléments de visualisation de données de l'application, comme celui-ci:

Alexa place des données relatives au nombre de sites de référence de cet utilisateur. par rapport à la concurrence dans un format de tableau simple. Les données sont triées par ordre numérique décroissant.

Dans ce cas, vous pouvez voir que Alexa trie toujours ses données dans un ordre numérique décroissant, qu'il s'agisse de pourcentages ou de nombres entiers, comme le montre cet exemple Sites de référence. [19659003] Conclusion:

Quelle que soit la taille du jeu de données, vous souhaitez que les utilisateurs puissent lire et comprendre les données aussi rapidement que possible. Donc, n’ajoutez pas chaque point de donnée bon gré mal gré. Réfléchissez d'abord à ce qui sera le meilleur ordre logique.

5. Attention aux couleurs

Enfin et surtout, choisissez bien les couleurs de votre application. Il y a un certain nombre de raisons à cela:

Premièrement, il peut être trop difficile de distinguer les couleurs au-dessus d'un petit . Cela dit, cela dépend vraiment du type d’élément de visualisation de données que vous concevez. Pour un diagramme en camembert bien étiqueté, il n’est peut-être pas si compliqué de colorier chaque coin sur un dégradé.

Par exemple, voici un camembert que j’ai assemblé dans Google Docs :

Un exemple de camembert montrant les résultats d'un sondage demandant: «Que pensent les pigistes des pizzas hawaïennes?» 33% ont répondu «C'est génial! "; 33% ont répondu «c’est correct»; 33% ont répondu «Je le déteste».

Comme je ne demande pas aux utilisateurs de référencer des données à partir d'une clé et de les localiser par couleur, il est plus que pratique d'utiliser ce type de palette de couleurs.

, pour quelque chose comme le portail Screen Time d'Apple chaque élément du graphique a besoin d'une couleur distinctement unique:

Le rapport de temps d'écran Apple fournit une analyse du temps consacré aux applications de réseautage social, d'éducation et autres. Le graphique représente chaque catégorie dans sa propre couleur.

Ces choix de couleurs vives et uniques permettent aux utilisateurs de voir en un coup d'œil comment ils répartissent leur temps entre les applications de leur téléphone.

Il est également important de garder à l’esprit le choix des couleurs pour des raisons telles que l’accessibilité, la densité et l’interprétation.

Pour accessibilité il est préférable d’éviter les couleurs qui pourraient être compromises par des utilisateurs daltoniens. Cela créera une expérience frustrante, en particulier si la couleur est la seule chose qui distingue les points de données.

Pour la densité de données vous pourriez être tenté d’utiliser la couleur pour distinguer les données. Cependant, sur un graphique comme un graphique en courbes dans lequel plusieurs lignes peuvent être espacées de manière compacte, la couleur n’aidera pas les utilisateurs à mieux lire les données.

Il faut aussi penser au sens de de couleur . Par exemple, choisir les couleurs vert et rouge peut envoyer des signaux incorrects, comme si le point de données vert était «bon» et le rouge était «mauvais».

La couleur est toujours une question délicate dans la conception. chaque aspect de votre élément de visualisation de données pour vous assurer que la couleur ne gênera pas la lecture des résultats.

Amélioration de la conception de la visualisation de données; Améliorer l’application des applications

Les données peuvent constituer un atout majeur pour une application, car c’est ce qui permet aux utilisateurs de faire plus que simplement utiliser l’application. Cela leur donne une raison de se reconnecter pour vérifier les progrès, voir les tendances, surveiller leurs performances par rapport à la concurrence, et bien plus encore. non seulement participer régulièrement à l'application, mais aussi conserver leur adhésion pendant longtemps.