Couleurs de la barre de progression / d'état en plusieurs parties
Je travaille sur une application qui doit montrer aux utilisateurs leur état actuel/leur progression dans l'exécution d'une tâche sur un certain nombre d'éléments. Il y a trois états que chaque élément peut avoir:
- Nouveau (bleu) - L'article n'a pas encore été vu ou traité
- Bon (vert) - L'élément a été traité dans le passé et aucune tâche en attente ne lui est associée
- Échéance (rouge) - L'élément a été traité dans le passé, mais une tâche en attente lui est associée
Pour un aperçu rapide des collections de ces éléments, une barre de progression en plusieurs parties est utilisée. L'image ci-dessous montre 4 de ces possibilités pour ces barres.
Ma préoccupation est que certaines couleurs ne fonctionnent pas bien les unes à côté des autres - en particulier pour les personnes daltoniennes.
Que puis-je faire pour rendre cela plus agréable pour les yeux, et plus accessible?
Vous avez raison, la couleur seule sera problématique, surtout avec le rouge et le vert côte à côte.
Une bonne barre de progression imbriquée a besoin de réponses élégantes aux questions suivantes:
- Comment qualifier les types dans le tableau (nouveau, bon, dû)?
- Comment quantifier les types dans le tableau?
La couleur seule est une solution inadéquate pour l'un ou l'autre besoin car vous n'avez aucune idée du nombre d'articles dans chaque type (vous ne pouvez mesurer qu'en gros le rapport par rapport aux autres).
Barres de progression segmentées annotées
Une option consiste à ajouter des indices visuels et des données supplémentaires aux barres afin que la couleur soit un indicateur secondaire ou tertiaire plutôt qu'un indicateur principal. Dans ce cas, j'ai utilisé une étiquette de texte pour afficher le type, puis un disque avec le nombre d'éléments de type.
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Si la quantité d'un type n'est que de 1 ou 2 et que la largeur de la barre de progression imbriquée n'est pas assez grande pour s'adapter à l'étiquette et compter le déplacement de certaines annotations à l'extérieur de la barre elle-même, cela pourrait être une avenue à considérer.
Voici quelques autres exemples réels de la même idée avec une implémentation légèrement différente:
Que diriez-vous quelque chose comme ça?
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Le gris est fait
La texture en mouvement indique les tâches en attente/la partie actuellement traitée
Le blanc est "manquant", ce qui doit être traité
Jetez un œil à la barre de progression JIRA:
Les couleurs fonctionnent bien et il y a un indicateur clair quelle couleur signifie quoi. Les chiffres ici sont plus clairs que de les avoir dans la barre de progression comme dans la réponse de Charles, mieux adaptés aux appareils mobiles. De plus, si vous n'avez aucun élément dans une catégorie, vous pouvez également le voir immédiatement à partir du nombre.