Recherche, désencombrement et visualisation des données —

Les dribbbleshots pourraient bien être le foyer de tableaux de bord douteux. Des visuels saisissants, peu de contexte et aucune recherche : toutes les recettes de la médiocrité. La médiocrité ne fera pas l'affaire. Nous poursuivrons la grandeur. Et dans cette poursuite, nous couvrirons la recherche, le désencombrement et la visualisation des données.

Même si c'est une bénédiction déguisée, écarter des éléments de votre travail n'est pas amusant. Rejeter les parties sous-optimales de notre conception peut être une tâche intimidante, surtout après que vous y avez investi des heures de travail. Mais ne vous y trompez pas, c'est un préjugé auquel la plupart des concepteurs sont enclins. Nous pouvons nous attacher trop aux choses que nous avons créées, même si elles n'apportent aucune valeur réelle à nos utilisateurs. C'est ici que réside la différence entre ok et super conception de tableau de bord. Le premier est assez facile à réaliser. Ce dernier n'est pas.

J'ai compilé quelques choses que j'ai apprises tout au long de ma carrière en ce qui concerne la conception de tableaux de bord. Dans cet article, nous parlerons de la recherche, du désencombrement et de la visualisation des données, ainsi que de la façon dont ces éléments peuvent améliorer la conception de votre tableau de bord.

Définition

Un tableau de bord fait partie d'une application qui affiche des informations globales sur l'utilisation de l'application ou toute autre donnée externe. Ils se présentent sous différentes formes, à partir de tableaux de bord à une couche relativement simplistes comme celui-ci :

Alors que d'autres sont plus complexes et multicouches comme celui ci-dessous :

Les recommandations que nous allons fournir dans cet article s'appliquent à un large éventail de tableaux de bord, quelle que soit leur complexité.

Avant de plonger dans nos arguments, déterminons d'abord ce que j'entends par « médiocre » et « excellent ». Ces termes impliquent un système de valeurs qui n'est pas exactement conventionnel, donc je vous dois une explication. Il existe également un continuum entre ces deux catégories. Dans le cadre de cet article, les axes de ce continuum sont les suivants :

• Source d'inspiration (copie),
• Recherche (appelée dans la section suivante « devoirs »),
• Conception Validation (conception à l'appui) décisions avec données),
• Visualisation des données,
• Palette de couleurs.

(Tout au long de cet article, toutes les références à la médiocrité sont basées sur ces distinctions)

Maintenant que nous avons trié les définitions, donnons rapidement un aperçu de mes arguments. Dans cet article, je suggère que, par opposition aux tableaux de bord médiocres, les bons nécessitent :

• Recherche,
• Une bonne dose d'encombrement et de désencombrement,
• Une palette de couleurs réfléchie.

Tout d'abord, commençons par décomposer la recherche, ou « devoirs » comme j'aime l'appeler. Comment faites-vous même des « devoirs » en tant que designer ? Est-il acceptable de copier le travail de quelqu'un d'autre tant que vous ne le rendez pas évident ? Ou repartez-vous de zéro à chaque fois ? — Réfléchissons bien.

Faire vos propres devoirs VS Copier vos pairs

Bien sûr, il y a toujours la possibilité de copier et de peaufiner ce que vos concurrents proposent déjà. Ou, s'il n'y a pas d'équivalents proches, vous pouvez simplement « Frankenstein » les éléments ensemble à partir de tableaux de bord similaires. Cela semble en effet plus facile que de « réinventer la roue ». « * Les bons artistes copient, les grands artistes volent * », comme le dit la citation de Picasso – mais, malheureusement, cette approche est susceptible de vouer votre conception à la médiocrité. Permettez-moi d'élaborer.

Un avertissement rapide : si ce que vous recherchez est d'apprendre, alors copiez de superbes designs et essayez d'apprendre d'eux. Cependant, si vous travaillez sur des projets commerciaux / "réels", alors la copie seule ne suffit pas.

Tout d'abord, théoriquement parlant, vous pourriez trouver de l'or en copiant de superbes tableaux de bord. Il y a un hic, cependant. Quelle est la probabilité que votre source d'inspiration soit bien documentée, pratique et surtout applicable à votre situation particulière  ? Les tableaux de bord que vous avez trouvés valent la peine d'être volés ? Qui sait. Si vous me demandez, cependant, je ne parierais pas là-dessus. Cela rejoint bien les idées exposées par Austin Kleon dans son livre Steal like an artist.

Deuxièmement, lorsque vous recherchez l'inspiration, tout ce que vous voyez est le produit final : un joli tableau de bord coloré. Vous pouvez rarement trouver l'inspiration accompagnée d'une analyse approfondie du processus, de la recherche et de la prise de décision impliqués. Cela conduit à quelque chose qui s'apparente à un culte du cargo, c'est à dire à reproduire les motifs que l'on voit sans comprendre pourquoi.

Enfin, un autre effet secondaire malheureux de la simple copie est que ce n'est pas cohérent. Vous ne pouvez pas jouer les cotes et gagner à chaque fois. Cela ne veut pas dire qu'un processus de conception « correct » est infaillible. Je pense qu'en suivant les principes que je décris dans cet article, vos conceptions seront systématiquement meilleures, de sorte que vous pourrez « toucher de l'or » avec un degré de fiabilité et de réplicabilité plus élevé.

En termes simples, suivre un processus approprié et maîtriser la conception. principes, par opposition à la copie inconsidérée, vous donne une meilleure chance de proposer des conceptions utilisables avec moins d'itérations et de sessions de tests d'utilisabilité.

Alors, comment trouvez-vous un équilibre entre « copier » et « faire vos propres devoirs » ? Voici ce que je pense. En plus de « voler » (ahem.. à la recherche d'inspiration), parlez également à vos utilisateurs.

Je ne peux pas assez insister sur ce point.

Je parie que nous le sommes. tous (moi y compris) fatigués d'entendre ce mantra. "Parler aux utilisateurs" est comme faire de l'exercice ou manger sainement – tout le monde sait qu'ils devraient en faire plus, mais peu le font réellement.

"Les gens ignorent le design qui ignore les gens".

– Frank Chimero[19659063]Y a-t-il une pire façon d'ignorer les utilisateurs que de les exclure complètement de la conversation ?

D'accord, il est important de parler aux utilisateurs. C'est clair. Ce qui n'est pas explicite, cependant, c'est comment exactement cette communication devrait avoir lieu – passons en revue quelques activités pour examiner plusieurs manières. un tableau de bord.

• De quelles informations les utilisateurs ont-ils le plus besoin ?
• À quoi sert ce tableau de bord ?
• Pourquoi les utilisateurs consultent-ils ce tableau de bord ?
• Comment procèdent-ils pour rechercher ces informations actuellement ?

Dans cet articleStelian Suboti, un concepteur UI & UX avec plus de 7 ans d'expérience, l'auteur affirme que :

Des informations vraiment précieuses peuvent sortir d'une courte phase de recherche utilisateur avec seulement cinq utilisateurs – et cela fera gagner énormément de temps sur toute la ligne.

Faire des recherches (dans ce cas, les entretiens avec l'utilisateur) est la première étape du processus de réflexion sur le design (empathie), ainsi que le processus UX en général.

Card-Sorting

« Le tri par carte, de par sa nature même, est une méthode que vous utiliseriez lorsque vous souhaitez découvrir des catégories, des groupes ou des interrelations. Utilisez cette méthode lorsque vous voulez savoir comment les utilisateurs réagissent aux indices visuels et que vous souhaitez capturer les similitudes et les différences. les utilisateurs regroupent et catégorisent les informations. En termes pratiques, le tri des cartes ressemble à ceci 👇

Vous souhaitez généralement découper votre tableau de bord en « atomes », bits d'information de la plus petite taille, afin que les participants puissent établir les relations entre ces éléments. C'est ainsi que vous pouvez créer une hiérarchie d'informations dans le tableau de bord qui soit cohérente avec les modèles mentaux des utilisateurs. à la conception du tableau de bord. Jouer à l'oreille et sauter complètement cette étape pourrait bien être le plus grand péché capital de la conception UX.

Voici ce que Nielsen Norman Group, la principale autorité de conception de produits au monde,a à dire à propos des tests d'utilisabilité :[19659062]« Même les meilleurs concepteurs UX ne peuvent pas concevoir une expérience utilisateur parfaite – ou même assez bonne – sans conception itérative guidée par les observations d'utilisateurs réels et de leurs interactions avec la conception.»

En pratique termes, vous voudriez mener des sessions de test d'utilisabilité après le tri des cartes et les entretiens avec les utilisateurs. Les deux dernières activités combinées à vos propres hypothèses devraient donner lieu à des versions précoces du tableau de bord. Ces idées brutes devront ensuite être testées et itérées à partir d'esquisses et de structures filaires basse fidélité jusqu'à un prototype haute fidélité.

Maintenant que nous avons discuté des méthodes de recherche, nous pouvons passer en toute sécurité à mon deuxième argument. , qui est tout au sujet du désencombrement. Comment savoir si votre tableau de bord est encombré ? Le principe « moins c'est plus » fonctionne-t-il à chaque fois ? — Ce sont les sujets que nous abordons ensuite. De plus, la pratique du « keep it simple stupid » (KISS) est devenue en quelque sorte un truisme de conception. Plus c'est simple, mieux c'est, non ? J'aimerais que ce soit aussi simple (sans jeu de mots).

Un design encombré, par définition, submerge ses utilisateurs. Cela ne veut pas dire qu'une application ne peut pas avoir une courbe d'apprentissage. Les produits Adobe sont probablement une définition classique de ce que signifie « écraser un utilisateur pour la première fois ».

Regardons le tableau de bord suivant :

C'est un excellent exemple de ce qui pourrait être considéré comme « encombré ». Un examen plus approfondi du tableau de bord vous dira qu'il s'agit du mouvement des cours des actions (indices), du volume des transactions, des événements économiques, etc. Si vous pensez que cela semble intimidant, vous avez raison. Pour un utilisateur moyen, c'est probablement le cas. Je parierais cependant que les personnes qualifiées pour utiliser ce type de logiciel bénéficient réellement de cette complexité – cela leur permet de travailler efficacement. Obscurcir une grande partie des informations présentées dans ce tableau de bord n'entraînera que des clics inutiles et des frictions excessives. Soit dit en passant, ce tableau de bord particulier, conçu par Bhojendra Rauniyara remporté le défi du tableau de bord minimal d'UpLabs. Félicitations à Bhojendra !

Avant de commencer à critiquer le tableau de bord ci-dessus, voici un avertissement. Tout d'abord, il s'agit d'un dribble, nous ne pouvons donc pas être certains s'il s'agit d'un élément de conception isolé ou d'une partie d'un produit. Deuxièmement, je n'ai pas accès au concepteur pour lui demander sa justification de certaines décisions de conception. Troisièmement, je ne sais pas si cette conception a été testée et le contexte complet de son utilisation. En tant que tel, il ne me reste plus qu'à spéculer et à assumer. J'espère que, à des fins éducatives, cela suffira.

Commençons par le graphique. Il compare les évaluations des clients avec les revenus. Je me demande si quelles valeurs définissent ces deux catégories ? Les valeurs doivent être les mêmes puisque les deux courbes sont sur le même graphique. Alors mesurons-nous les gains en note moyenne ou en note en dollars ? De plus, il n'y a pas d'étiquettes pour l'échelle, donc je ne peux même pas être sûr des unités de mesure. Ce qui serait probablement plus utile, c'est d'avoir des graphiques séparés pour les mesures clés avec des étiquettes claires, c'est-à-dire pour introduire une "complexité supplémentaire".

De plus, les statistiques seules ne sont pas très utiles. Gagner « 5k » en « 1.8k heures » est-il un bon résultat ? Comment cela se compare-t-il à mes pairs? Quelle est ma dynamique ?

Cela ne veut pas dire que le tableau de bord que j'ai mentionné en premier est parfait et le second est mauvais. Vous pourriez affirmer que ces deux éléments nécessitent un travail supplémentaire. Mon point est que le désencombrement pour le désencombrement est une mauvaise maxime de conception.

Les applications encombrées sont inutilement accablantes et difficiles à naviguer. Comment savoir si une application est tout ce qui précède ? Presto! C'est vrai, vous parlez aux utilisateurs et avez des sessions de test d'utilisabilité avec eux. Outre les tests d'utilisabilité, il existe quelques autres pratiques qui vous aideront à vous assurer que votre interface n'est pas encombrée :

• Hiérarchie claire des informations ;
• L'utilisation de modaux ou de panneaux ;
• Interactions au survol ;
• Deux à trois couleurs ;
• L'espace blanc, beaucoup.

Maintenant que nous sommes passés par la recherche et l'encombrement, nous pouvons passer à la visualisation des données. La visualisation des données est irremplaçable pour de nombreuses raisons. Il vous permet de :

• Voir les modèles,
• Comparer les données,
• Articuler les informations visuellement,
• Suivre la dynamique des données.

Cela vous dit quelque chose ? Exactement – c'est à peu près tout ce qu'un tableau de bord devrait faire. Ce n'est pas un hasard si presque tous les tableaux de bord comportent des graphiques et des tableaux. Par conséquent, être compétent en visualisation de données se traduit directement par un concepteur de tableau de bord compétent. Zoomons sur cela.

Améliorez votre jeu de visualisation de données

Il existe plusieurs types de graphiques disponibles, nous devons donc choisir judicieusement. Le graphique sunburst a l'air génial, mais est-il aussi clair et transparent que le camembert ? Peut-être. Cela dépend vraiment de vos utilisateurs. Mis à part les types de graphiques, il existe également des couleurs, leur sémantique et bien d'autres choses qui ajoutent à la complexité de la visualisation des données dans la conception des tableaux de bord.

Dans cette section, je ferai de mon mieux pour décrire certaines des meilleures pratiques de visualisation de données et leur application dans la conception de tableaux de bord. Commençons par les couleurs.

Cette section est largement basée sur les recherches de Claus O. Wilkeprofesseur d'évolution moléculaire à l'Université du Texas à Austin, et auteur de Fundamentals of Data Visualisation.

Couleur dans la conception du tableau de bord

Résolvons d'abord le problème des chiffres. Combien de couleurs devez-vous utiliser dans la conception d'interface utilisateur et la conception de tableaux de bord en particulier ? — Franchement, il n'y a pas de nombre magique de couleurs qui marche quoi qu'il arrive. Cependant, si je devais vous recommander un chiffre, ce serait 5. Cela n'inclut pas les nuances si l'intensité de la couleur représente une valeur ou les couleurs sémantiques si vous en avez besoin (par exemple rouge pour les messages d'erreur ou vert pour les messages de réussite) .

Pourquoi 5 ? Eh bien, il existe une règle "d'or" 6:3:1 en matière de conception visuelle. Ces chiffres représentent la proportion entre les trois couleurs de la marque : principale, secondaire et accent. Cependant, vous devez vous rappeler qu'en plus de ces trois couleurs, vous aurez probablement besoin d'une variation de blanc et de noir pour le texte et son arrière-plan.

Une autre chose à utiliser pour les couleurs est de distinguer les différentes entités. Voici quelques palettes de couleurs courantes.

Utilisez des palettes de couleurs monochromes si vous affichez des informations dans une seule catégorie. De cette façon, vous pouvez introduire une autre dimension à votre graphique qui est facile à lire. Par exemple, plus les couleurs sont intenses, plus la valeur est élevée et vice versa.

Voici un exemple :

Vous pouvez également choisir deux couleurs pour représenter les extrémités opposées d'un spectre. De cette façon, vous pouvez facilement distinguer les valeurs qui appartiennent à différents extrêmes. Voici un exemple :

Voici quelques palettes de couleurs pour cette approche que vous pouvez choisir :

Méfiez-vous de la sémantique des couleurs

Maintenant que nous avons passé en revue les approches que vous pouvez adopter avec l'utilisation des couleurs, il convient également de noter que les couleurs suscitent des réactions inconscientes. Ces réactions sont souvent appelées « sémantique des couleurs ».

Lors de la comparaison de 2 groupes, l'utilisation de couleurs comme le rouge et le vert (en raison de la sémantique associée à ces couleurs) peut entraîner une fausse représentation. Le rouge, par exemple, est souvent associé au danger, à l'échec et à de mauvaises performances.

Jetez un œil aux graphiques ci-dessous, qui illustrent les performances mathématiques de deux classes. Nous pourrions automatiquement supposer que les élèves sur le graphique de gauche dans la classe A ont de mauvais résultats, en raison du fait que les valeurs sont représentées en rouge. Le rouge, en particulier en combinaison avec le vert, suscite souvent une telle interprétation.

Cependant, il existe des cas où cette différence sémantique peut être utilisée à notre avantage, comme dans l'exemple ci-dessous, c'est-à-dire en utilisant le rouge pour afficher des performances inférieures à la moyenne et le vert pour les performances supérieures. Notez également qu'il est plus naturel pour les gens d'associer instinctivement des valeurs supérieures à celles inférieures. Le graphique ci-dessous illustre le dernier point.

Comme vous pouvez le voir, le vert représente les élèves qui obtiennent des résultats supérieurs à la moyenne, tandis que le rouge est réservé à ceux qui sous-performent. Les repères de couleur sémantiques rendent ce graphique beaucoup plus lisible qu'il ne le serait autrement avec un autre schéma de couleurs. Assurez-vous de choisir le type de graphique le plus approprié pour fournir le bon type de données. Ci-dessous, vous trouverez une liste plus ou moins complète de graphiques que vous pouvez utiliser pour représenter les informations présentées dans votre tableau de bord, en fonction des rôles qu'ils remplissent.

NB : La plupart des graphiques en servent plus d'un. but. Par exemple, un graphique à secteurs est utilisé pour comparer les valeurs, afficher la composition et la distribution des données. En tant que tel, je mentionnerai ces graphiques plusieurs fois en fonction du cas d'utilisation. Cependant, je ne donnerai une brève explication pour chaque graphique qu'une seule fois.

Comparer

• Pie
  Généralement utilisé pour représenter les fractions d'un tout. Les graphiques à secteurs fonctionnent parfaitement chaque fois que vous devez comparer un nombre relativement faible de segments comparables en termes de taille. Inversement, avoir trop de segments ou de petits segments rend le graphique trop difficile à lire. Un inconvénient majeur des camemberts est leur incapacité à afficher les changements au fil du temps. )
  
  • Stacked Bar
    Particulièrement utile lors de la comparaison de catégories. Tout comme les camemberts, plus ils sont complexes (plus de séries et de catégories), plus ils sont difficiles à lire. Un avantage des graphiques à barres empilées par rapport aux graphiques à secteurs est la possibilité de voir les changements au fil du temps. Une autre chose à surveiller est que lorsque vous avez des séries dont la valeur varie, il devient plus difficile de les comparer visuellement. Par exemple, jetez un œil à l'exemple ci-dessous, il n'est pas évident de savoir si la série orange pour "Crayon à sourcils" est plus grande ou plus petite que celle de "Fond de teint".

  

  • Mekko
    Parfait pour visualiser les différences de certaines catégories au sein de plusieurs dimensions. Tout comme le reste des graphiques que nous avons examinés jusqu'à présent, ils sont faciles à lire mais deviennent de plus en plus difficiles à saisir une fois que les catégories et les dimensions commencent à s'accumuler. De plus, vous devez éviter d'utiliser des graphiques Mekko si les différences entre les éléments sont trop importantes.

  

  • Colonne empilée
    Un excellent moyen d'afficher des comparaisons entre les catégories. Vous avez peut-être remarqué que ce type de graphique ressemble fortement à un graphique à barres empilées. Bien qu'il existe des différences de dénomination, vous devez savoir que les barres horizontales vont généralement de la valeur la plus élevée à la valeur la plus faible (ou vice versa), tandis que les barres verticales impliquent une autre justification de l'ordre.

  

  • Area
    Une façon très courante de représenter des données quantitatives. Souvent utilisé pour montrer l'augmentation ou la diminution de diverses séries de données au fil du temps. L'inconvénient majeur de ce type de visualisation est qu'il est difficile de connecter un point spécifique du graphique à une valeur sur les deux axes. Et, comme toujours, plus vous entasser d'informations, moins elles deviennent lisibles. Enfin, si les graphiques se chevauchent, alors une zone passera par-dessus une autre et vice versa. Par conséquent, les graphiques en aires sont utiles pour aider à voir la situation dans son ensemble sans trop se soucier d'être extrêmement précis.
    Vous pouvez également remarquer une similitude entre les graphiques en aires et en courbes. Le premier doit être utilisé lorsque l'accent est mis sur une relation de partie à tout. )
    
    • Waterfall
      Ce type de graphique est souvent utilisé dans le secteur financier pour afficher le mouvement de la valeur et son chemin incrémentiel vers un point final. Ces graphiques, n'étant pas trop courants, ne sont peut-être pas les plus intuitifs à lire, ils devraient donc être réservés aux professionnels qui traitent souvent des graphiques en cascade.

    

    • Ligne
      Un bon choix lorsque vous cherchez à présenter une série de valeurs. Ces valeurs (également appelées marqueurs) sont généralement reliées par des segments de ligne droite. Le graphique en courbes imite les inconvénients du graphique en aires, à l'exception du problème de chevauchement des couleurs.

    

    Présentez la composition :

    • Pie,
    • Stacked Bar,
    • Mekko,
    • Stacked Column,
    • Waterfall.

    Distribution des données :

    • Scatter Plot
      Un excellent moyen de souligner les relations entre une ou plusieurs variables numériques et/ou leur distribution sur deux axes. Le problème majeur avec l'utilisation des nuages ​​de points à des fins UX, c'est que ce type de graphique est considérablement plus difficile à lire que tous les autres dont nous avons parlé jusqu'à présent. En tant que tels, les nuages ​​de points doivent être réservés aux utilisateurs expérimentés uniquement. )
      
      • Mekko
      • Colonne
      • Bulle
        Couramment utilisé pour présenter des données financières. Les graphiques à bulles sont similaires aux nuages ​​de points, cependant, ils fournissent une compréhension plus approfondie des données, car ils ont 3 axes.

      

      Corrélation et relation entre les valeurs :

      • Scatter Plot,
      • Bubble,
      • Line.

      Si nous devions résumer les graphiques ci-dessus dans une matrice, cela ressemblerait à quelque chose comme ça.

      

      Il est tout à fait approprié que nous ayons résumé les types de graphiques et leur utilisation sous forme d'infographie. 😄

      Sachez cependant que j'ai indiqué à quoi ces cartes sont généralement utilisées. Théoriquement, si vous le souhaitez, vous pouvez créer un graphique à bulles, où chaque bulle est un graphique à secteurs. Voila, votre graphique à bulles peut maintenant aussi montrer la composition de chaque bulle. Bien sûr, c'est plus facile à dire qu'à faire, car généralement, la taille des bulles varie considérablement. Quoi qu'il en soit, vous voyez l'idée : la matrice est une ligne directrice générale, mais vous pouvez être plus créatif avec les graphiques si vous le souhaitez à votre propre discrétion.

      Équilibre entre la complexité et l'efficacité

      Alors voici une chose. Comme vous l'avez peut-être remarqué, de nombreux graphiques peuvent être utilisés à des fins similaires. Cela ne signifie pas, cependant, que ces graphiques sont également bons pour une certaine tâche.

      Généralement, une fois que vous avez limité votre choix à quelques graphiques qui semblent fonctionner le mieux, vous voulez alors vous assurer qu'ils sont le moins complexe qu'ils puissent être. Ci-dessous, j'ai décrit certains des graphiques que nous avons mentionnés en fonction de leur degré de complexité et d'efficacité.

      

      En un mot, vous voulez maximiser l'efficacité et minimiser la complexité. C'est le quadrant supérieur gauche. Ces tableaux sont assez faciles à comprendre par les collégiens. Vous devriez vous en tenir à ceux du personnage « consommateur », c'est-à-dire un Joe moyen. Plus vous vous déplacez vers la droite, plus vous devriez avoir de raisons de penser que vos utilisateurs seraient à l'aise pour les lire. conception, voici quelques ressources que mon équipe et moi avons trouvées utiles (à un degré de complexité croissant) :

      Articles

      Livres

      Articles scientifiques

      (ah, vf, il, yk)