web-dev-qa-db-fra.com

Catégoriser les cellules individuelles dans le tableau de données

Je travaille sur un produit de données et il est nécessaire de classer les cellules individuelles. Ceci est actuellement réalisé en changeant la couleur du texte dans cette cellule, par exemple, noir = données réelles, bleu = données d'estimation (voir l'image ci-dessous).

Color coded data

Je n'aime pas vraiment l'esthétique de cela et cela n'aiderait pas non plus les utilisateurs daltoniens, j'ai donc cherché d'autres options. J'ai pensé à y parvenir grâce à un point de couleur à côté de la valeur, avec une info-bulle qui apparaît en survol pour aider les utilisateurs daltoniens (illustrés ci-dessous). Cependant, les parties prenantes n'ont pas vraiment aimé cette option.

Quelqu'un peut-il m'aider à trouver une solution à la fois accessible mais aussi esthétique?

Coloured dot next to value

2
Jeffrey

Concevoir pour les utilisateurs daltoniens ne signifie pas que vous n'êtes pas autorisé à utiliser des couleurs. Cela signifie plutôt que les couleurs, par ex. devrait avoir une grande différence dans leur luminosité:

enter image description here

Source: https://designshack.net/articles/accessibility/tips-for-designing-for-colorblind-users/

Voici un autre exemple: mauvais (couleurs pâles et insaturées) vs bon (couleurs vives) vs meilleur (y compris différentes textures)

enter image description here

enter image description here

Source (avec explications détaillées): http://jfly.iam.u-tokyo.ac.jp/color/

Je vous suggère d'utiliser des couleurs d'arrière-plan au lieu de couleurs de police. De cette façon, il y a plus d'espace pour la couleur, ce qui facilite la comparaison des valeurs (et je pense que cela aura meilleure apparence) et facilite l'application des textures.

1
Anna Prenzel

Utilisez la couleur pour souligner le sens mais ne vous fiez pas uniquement à lui . Pour la solution, essayez de commencer sans couleur, puis appuyez sur Couleur pour vous aider. Voici votre image en noir et blanc (et gris):

enter image description here

Vous pouvez adopter différentes approches pour faire en sorte que certains éléments l'emportent sur les autres:

  • Poids de la police
  • Fond de champ (luminosité d'abord, puis saturation)
  • Soyez explicite en écrivant le mot "Estimation", "E" ou un symbole à côté de chaque champ avec une légende ci-dessous. Semblable à la façon dont les entrées requises ont un astérisque dans l'étiquette et en dessous il dit * Obligatoire.

Voici un exemple sans couleur:

enter image description here

En remarque, je pense qu'il est préférable d'aligner le texte au centre dans ce cas.

0
Alvaro