Dell's Data visualization library
Conception de palettes de couleurs de visualisation des données pour le système de conception de Dell
Rôle
Designer produit
Rôle
Designer produit
Rôle
Designer produit
Industrie
Services infonuagiques B2B
Industrie
Services infonuagiques B2B
Industrie
Services infonuagiques B2B
Tag
design-system
Tag
design-system
Tag
design-system
Étape 1. Où nous avons commencé - Étalonnage
Alors que Dell entamait le travail sur la version 2.0 de son système de conception, il y avait une opportunité d'introduire un nouvel élément dans le système qui pourrait aider nos dirigeants et nos clients à prendre des décisions informées fondées sur les données et, par là même, apporter de la cohérence à travers nos produits et offres - une bibliothèque de visualisation des données.
En tant que designer principal de ce nouveau flux de travail, j'ai commencé à travailler avec le chef de produit et le développeur principal pour identifier les éléments qui constitueraient notre MVP.
Nous avons commencé par réaliser une étude rapide. Nous avons examiné sept leaders de l'industrie possédant de solides guides de styles et bibliothèques de visualisation des données : IBM Carbon, Salesforce Lightning, Adobe Spectrum, Google Material, Mailchimp, Shopify Polaris, et Quickbooks.
Fondamentalement, tous ces systèmes de conception avaient en commun des palettes de couleurs fortes.
Étape 1. Où nous avons commencé - Étalonnage
Alors que Dell entamait le travail sur la version 2.0 de son système de conception, il y avait une opportunité d'introduire un nouvel élément dans le système qui pourrait aider nos dirigeants et nos clients à prendre des décisions informées fondées sur les données et, par là même, apporter de la cohérence à travers nos produits et offres - une bibliothèque de visualisation des données.
En tant que designer principal de ce nouveau flux de travail, j'ai commencé à travailler avec le chef de produit et le développeur principal pour identifier les éléments qui constitueraient notre MVP.
Nous avons commencé par réaliser une étude rapide. Nous avons examiné sept leaders de l'industrie possédant de solides guides de styles et bibliothèques de visualisation des données : IBM Carbon, Salesforce Lightning, Adobe Spectrum, Google Material, Mailchimp, Shopify Polaris, et Quickbooks.
Fondamentalement, tous ces systèmes de conception avaient en commun des palettes de couleurs fortes.
Étape 2. Collaboration avec l'équipe de marque chez Dell
Il existait déjà une palette de couleurs que l'équipe du système de conception a produite en collaboration avec l'équipe de marque chez Dell (voir capture d'écran à droite pour référence).
Alors que cette palette conforme à la marque offrait un point de départ significatif pour mon équipe, nous avons remarqué qu'elle était encore testée pour respecter la conformité AA de la WCAG, telle que prescrite par la politique d'entreprise de Dell.
Il est devenu important pour moi et mon équipe d'inclure l'accessibilité dans chaque élément que nous créons pour notre bibliothèque de visualisation de données.
Étape 3. Types de palettes de couleurs
En regardant à travers les mêmes systèmes de conception avec lesquels nous avions commencé nos efforts de benchmarking, nous avons réalisé qu'il y avait 3 principaux types de palettes de couleurs :
Palettes séquentielles (monochromatiques et divergentes)
Palette catégorique
Palette d'alerte
Étape 3. Types de palettes de couleurs
En regardant à travers les mêmes systèmes de conception avec lesquels nous avions commencé nos efforts de benchmarking, nous avons réalisé qu'il y avait 3 principaux types de palettes de couleurs :
Palettes séquentielles (monochromatiques et divergentes)
Palette catégorique
Palette d'alerte
Palette séquentielle
Qu'est-ce qu'une palette séquentielle?
Les couleurs des palettes séquentielles ont une corrélation entre elles et sont reliées à une catégorie numérique (par exemple, les taux de sans-abri aux États-Unis par État).
Il existe deux types de palettes séquentielles :
Palettes monochromatiques (gradation de clair à foncé).
Palettes divergentes (utiles lorsqu'il s'agit de valeurs négatives)
Palettes monochromes
Qu'est-ce qu'une palette monochrome?
Une palette monochrome est une palette séquentielle qui utilise la gradation d'une couleur pour représenter les tendances dans un ensemble de données.
Comment avons-nous créé une palette monochrome?
Étant donné que nous avions développé la palette de couleurs conforme à la marque en utilisant la méthode/approche du cube hélicoïdal de D.A. Green, nous avions un excellent point de départ pour créer une palette monochrome. Ensuite, nous devions nous assurer que nos couleurs satisfaisaient à la norme WCAG AA en matière de contraste des couleurs.
Pour nous conformer à cette norme, nous avons défini les couleurs d'arrière-plan que nos éléments de visualisation des données utiliseraient.
Nous avons ensuite testé toutes les nuances de couleur de la palette de couleurs conforme à la marque pour le contraste des couleurs par rapport aux arrière-plans mentionnés ci-dessus.
Vérification de contraste des couleurs échantillon
Conformité générale au contraste des couleurs
Après avoir testé toutes les nuances de couleur de la palette de couleurs conforme à la marque, il est apparu clairement que les teintes les plus claires de chaque couleur ne satisfaisaient pas le ratio standard de 3:1 pour la norme WCAG AA.
Nous avons donc abouti aux palettes monochromes suivantes:
Palettes divergentes
Qu'est-ce qu'une palette divergente?
Une palette divergente est également un type de palette séquentielle qui utilise les gradations de deux nuances de couleurs pour représenter des tendances. Cela inclut toujours à la fois des valeurs négatives et positives.
Comment avons-nous créé une palette divergente?
En utilisant Chroma.js Color Palette Helper (https://gka.github.io/palettes), j'ai commencé par combiner les nuances les plus sombres de différentes couleurs de notre palette de couleurs conforme à la marque pour générer des palettes divergentes. J'ai ensuite assorti les couleurs de la palette générées par Chroma.js à celles existantes de notre palette de couleurs conforme à la marque.
Ensuite, il était essentiel de garder à l'esprit l'accessibilité. En utilisant Chroma.js, j'ai testé les palettes pour m'assurer qu'elles étaient adaptées aux personnes atteintes de daltonisme en testant pour des déficiences extrêmes de la vision des couleurs où l'un des cônes lumineux est affecté : deutéranopie, protanopie, tritanopie.
Après avoir testé toutes les palettes divergentes pour m'assurer qu'elles étaient adaptées aux personnes atteintes de daltonisme, j'ai écarté celles qui ne satisfaisaient pas aux normes.
Palettes divergentes accessibles et conformes à la marque
Après avoir testé toutes les palettes divergentes pour m'assurer qu'elles étaient adaptées aux personnes atteintes de daltonisme, j'ai écarté celles qui ne satisfaisaient pas aux normes.
Palette catégorielle
Qu'est-ce qu'une palette catégorielle?
Une palette catégorielle est une gamme de couleurs qui aident les utilisateurs à distinguer des données sur des catégories non numériques n'ayant pas de corrélation inhérente (par exemple, Paul et Virginie en tant que personnes individuelles, pays, etc.).
Qu'est-ce qui fait une excellente palette catégorielle?
Les couleurs dans une palette catégorielle doivent avoir un contraste visuel suffisant entre elles (optimisé pour toutes les déficiences de couleur) et éviter les fausses associations ou corrélations en raison de similarités de luminosité ou de teinte.
Tests
Une fois que j'ai établi ce qui fait une excellente palette catégorielle, j'ai combiné différentes couleurs de la palette accessible et conforme à la marque ci-dessous à l'aide d'un outil appelé « viz palette » (https://projects.susielu.com/viz-palette) pour m'assurer qu'il y avait suffisamment de contraste visuel et aucune corrélation entre les couleurs:
Test de combinaison de couleurs échantillon
Le test ci-dessous montre que les couleurs choisies ont un contraste visuel suffisant entre elles. Les personnes n'ayant pas de déficiences de la vision des couleurs ne peuvent pas les confondre les unes avec les autres. Cependant, cela change lorsque vous regardez la deutéranopie, où le vert et l'orange ou le bleu et le violet deviennent indiscernables les uns des autres dans de grandes zones (par exemple, un graphique en anneau).
Palette catégorielle finale
Après plusieurs tours de tests de combinaison, j'ai abouti à la palette catégorielle suivante. Comme le montrent les rapports de couleur ci-dessous, les conflits entre elles sont significativement faibles.
Palette d'alerte
Qu'est-ce qu'une palette d'alerte?
Une palette d'alerte est une gamme de couleurs utilisée pour indiquer l'état de santé - bon, mauvais et avertissement. Elle se compose de trois couleurs : vert, rouge et orange.
Comment avons-nous créé une palette d'alerte?
Lorsque nous avons dû choisir les couleurs qui composeraient notre palette d'alerte, j'ai recommencé avec la palette monochrome conforme à la marque et accessible. Il est important de noter que les teintes les plus sombres tendent vers le noir, ce qui les rend indistinctes les unes des autres. Plus les teintes de rouge, vert et orange sont claires, plus elles sont distinctes les unes des autres. C'est ainsi que nous avons abouti aux couleurs suivantes:
Palettes monochromes
Qu'est-ce qu'une palette monochrome?
Une palette monochrome est une palette séquentielle qui utilise la gradation d'une couleur pour représenter les tendances dans un ensemble de données.
Comment avons-nous créé une palette monochrome?
Étant donné que nous avions développé la palette de couleurs conforme à la marque en utilisant la méthode/approche du cube hélicoïdal de D.A. Green, nous avions un excellent point de départ pour créer une palette monochrome. Ensuite, nous devions nous assurer que nos couleurs satisfaisaient à la norme WCAG AA en matière de contraste des couleurs.
Pour nous conformer à cette norme, nous avons défini les couleurs d'arrière-plan que nos éléments de visualisation des données utiliseraient.
Nous avons ensuite testé toutes les nuances de couleur de la palette de couleurs conforme à la marque pour le contraste des couleurs par rapport aux arrière-plans mentionnés ci-dessus.
Vérification de contraste des couleurs échantillon
Conformité générale au contraste des couleurs
Après avoir testé toutes les nuances de couleur de la palette de couleurs conforme à la marque, il est apparu clairement que les teintes les plus claires de chaque couleur ne satisfaisaient pas le ratio standard de 3:1 pour la norme WCAG AA.
Nous avons donc abouti aux palettes monochromes suivantes:
Palettes divergentes
Qu'est-ce qu'une palette divergente?
Une palette divergente est également un type de palette séquentielle qui utilise les gradations de deux nuances de couleurs pour représenter des tendances. Cela inclut toujours à la fois des valeurs négatives et positives.
Comment avons-nous créé une palette divergente?
En utilisant Chroma.js Color Palette Helper (https://gka.github.io/palettes), j'ai commencé par combiner les nuances les plus sombres de différentes couleurs de notre palette de couleurs conforme à la marque pour générer des palettes divergentes. J'ai ensuite assorti les couleurs de la palette générées par Chroma.js à celles existantes de notre palette de couleurs conforme à la marque.
Ensuite, il était essentiel de garder à l'esprit l'accessibilité. En utilisant Chroma.js, j'ai testé les palettes pour m'assurer qu'elles étaient adaptées aux personnes atteintes de daltonisme en testant pour des déficiences extrêmes de la vision des couleurs où l'un des cônes lumineux est affecté : deutéranopie, protanopie, tritanopie.
Après avoir testé toutes les palettes divergentes pour m'assurer qu'elles étaient adaptées aux personnes atteintes de daltonisme, j'ai écarté celles qui ne satisfaisaient pas aux normes.
Palettes divergentes accessibles et conformes à la marque
Après avoir testé toutes les palettes divergentes pour m'assurer qu'elles étaient adaptées aux personnes atteintes de daltonisme, j'ai écarté celles qui ne satisfaisaient pas aux normes.
Palette catégorielle
Qu'est-ce qu'une palette catégorielle?
Une palette catégorielle est une gamme de couleurs qui aident les utilisateurs à distinguer des données sur des catégories non numériques n'ayant pas de corrélation inhérente (par exemple, Paul et Virginie en tant que personnes individuelles, pays, etc.).
Qu'est-ce qui fait une excellente palette catégorielle?
Les couleurs dans une palette catégorielle doivent avoir un contraste visuel suffisant entre elles (optimisé pour toutes les déficiences de couleur) et éviter les fausses associations ou corrélations en raison de similarités de luminosité ou de teinte.
Tests
Une fois que j'ai établi ce qui fait une excellente palette catégorielle, j'ai combiné différentes couleurs de la palette accessible et conforme à la marque ci-dessous à l'aide d'un outil appelé « viz palette » (https://projects.susielu.com/viz-palette) pour m'assurer qu'il y avait suffisamment de contraste visuel et aucune corrélation entre les couleurs:
Test de combinaison de couleurs échantillon
Le test ci-dessous montre que les couleurs choisies ont un contraste visuel suffisant entre elles. Les personnes n'ayant pas de déficiences de la vision des couleurs ne peuvent pas les confondre les unes avec les autres. Cependant, cela change lorsque vous regardez la deutéranopie, où le vert et l'orange ou le bleu et le violet deviennent indiscernables les uns des autres dans de grandes zones (par exemple, un graphique en anneau).
Palette catégorielle finale
Après plusieurs tours de tests de combinaison, j'ai abouti à la palette catégorielle suivante. Comme le montrent les rapports de couleur ci-dessous, les conflits entre elles sont significativement faibles.
Palette d'alerte
Qu'est-ce qu'une palette d'alerte?
Une palette d'alerte est une gamme de couleurs utilisée pour indiquer l'état de santé - bon, mauvais et avertissement. Elle se compose de trois couleurs : vert, rouge et orange.
Comment avons-nous créé une palette d'alerte?
Lorsque nous avons dû choisir les couleurs qui composeraient notre palette d'alerte, j'ai recommencé avec la palette monochrome conforme à la marque et accessible. Il est important de noter que les teintes les plus sombres tendent vers le noir, ce qui les rend indistinctes les unes des autres. Plus les teintes de rouge, vert et orange sont claires, plus elles sont distinctes les unes des autres. C'est ainsi que nous avons abouti aux couleurs suivantes:
Étapes suivantes...
Créer des palettes de couleurs accessibles pour le mode sombre.
Établir des directives claires pour chaque palette.
Étapes suivantes...
Créer des palettes de couleurs accessibles pour le mode sombre.
Établir des directives claires pour chaque palette.
Autres projets
Agoda's YCS Mobile Bookings feature
Création de l'expérience mobile sur l'outil d'extranet partenaire d'Agoda
Rénovation du système de conception de NerdWallet
Consolidating NerdWallet's Design System Libraries in Figma
Agoda PBS Config
Présentation d'un flux d'approbation pour la comparaison et la recherche de prix sur Agoda