Le vert, le jaune et le rouge ne peuvent pas aller ensemble? Les Éthiopiens doivent être terriblement insultés. Google pour les images vertes, jaunes et rouges, et je pense que vous trouverez plusieurs exemples attrayants (ainsi que des images laides).
La qualité de tout ensemble de couleurs dépend des coordonnées exactes des couleurs, des positions relatives, des formes, de la taille des objets colorés et de l'effet que vous souhaitez avoir (par exemple, apaisant contre excitant, amusant contre sérieux, audacieux contre subtil). ). Je n'ai pas de règles strictes pour vous, mais voici quelques choses à expérimenter.
Compromis taille-saturation
Pour éviter un effet discordant (en supposant que vous ne le vouliez pas), la taille de l'objet coloré doit être inversement proportionnelle à sa saturation de couleur. Votre exemple avait des saturations assez élevées, alors essayez des saturations de couleurs plus faibles (par exemple, des pastels) ou coloriez autre chose que l'arrière-plan. Par exemple, vous pouvez colorer le texte et laisser l'arrière-plan neutre, ou vous pouvez colorer une petite forme ou un symbole à côté du texte. Ce dernier fournirait une chance d'utiliser la forme pour coder de manière redondante la correspondance des compétences à des fins d'accessibilité et d'impression en noir et blanc (coche verte pour Satisfait, point d'exclamation jaune pour Shortfall et symbole rouge «n'entrez pas» pour Not Good Enough) .
Espacement
L'aspect des couleurs dépend de leur proximité. Les couleurs qui s'affrontent lorsqu'elles sont adjacentes semblent correctes avec une petite séparation. Essayez de placer une bordure neutre autour de chaque cellule pour séparer davantage les couleurs (comme vous en avez dans vos en-têtes), à moins que les cellules de même couleur ne se mélangent pour être perçues comme un seul objet. Essayez différentes épaisseurs. Essayez de séparer chaque cellule avec des bordures blanches , pour un aspect en mosaïque.
Modèle
La façon dont les couleurs s'associent change également avec le motif créé par les couleurs, alors assurez-vous d'évaluer des maquettes avec des proportions et des positions typiques des couleurs. Par exemple, si la plupart du temps tout est vert et qu'il est très important que les utilisateurs assistent aux «reflets» des jaunes et des rouges, choisissez un vert qui fait un bon arrière-plan (par exemple, faible saturation, lumière) et jaune et le rouge semble s'asseoir «sur le dessus» (par exemple, une saturation plus élevée, sombre). Considérez que l'esthétique du motif peut également communiquer et motiver l'utilisateur. Si l'utilisateur a un ensemble de compétences particulièrement inadapté ou déséquilibré, vous voulez peut-être un schéma laid. Le motif le plus attractif doit correspondre à l'état le plus avantageux pour l'utilisateur.
Convivialité
Votre question concerne l'esthétique, mais le choix du codage couleur a également des implications d'utilisabilité importantes. Vos sélections de couleurs doivent être:
Visuellement distincts les uns des autres, surtout s'ils sont utilisés dans des conditions visuelles dégradées (par exemple, sur un mobile au soleil).
Fournit un bon contraste avec l'arrière-plan (si son premier plan), ou avec l'avant-plan (si son arrière-plan). Par exemple, le texte noir sur rouge n'est pas si bon. En règle générale, le premier plan et l'arrière-plan nécessitent des niveaux de luminosité différents.
Assurez-vous que les couleurs sont cohérentes avec ce qu'elles codent. Par exemple, les choses auxquelles l'utilisateur doit assister doivent avoir plus de contraste avec l'arrière-plan et les autres couleurs.
Fournissez l'accessibilité et l'imprimabilité, où chaque couleur a également un niveau d'obscurité différent, l'obscurité étant mise à l'échelle selon les rangs (rouge plus que jaune plus que vert). Rendez votre vert quelque peu bleuté et / ou votre rouge un peu orangé pour que les utilisateurs daltoniens rouge-vert (le type de daltonisme le plus courant) puissent toujours voir des différences de couleur.
Utilisez le codage couleur pour une seule variable. Je ne sais pas pourquoi vous utilisez le gris et l'orange, mais cela risque de créer de la confusion et de rendre plus difficile pour les utilisateurs d'utiliser les couleurs rouge vert et jaune. Chaque fois que vous avez plus de trois couleurs, il est difficile de garder les choses utilisables. Trouvez une autre façon de coder le code gris et orange (par exemple, utilisez la taille ou le poids de la police, ou utilisez des lignes en pointillés pour les bordures des cellules; voir Mettre le G dans l'interface graphique ).
Dans un projet sur lequel j'ai travaillé, les couleurs avec lesquelles j'étais venu étaient # E00000, # FF8400 et # C0FFE0 (pas un jaune très jaune, mais ça fonctionnait quand même).
J'ai plus d'informations sur le choix des codes de couleur, y compris sur la façon de calculer le contraste de couleur et de luminosité à Breaking the Color Code .
