Sunday, July 14, 2019

interface design - Distinguishing information via colors


I am working on the design of an app and I am stuck, I believe, due to (bad) color picking.


The app is related to personal performance and I diferentiate the 'state' of the information via colors — red, yellow are bad; grean, teal are good.


The red outline in the picture represents the average per week. I made it it yellow to better contrast on those graphs.


The second green outline, represents specific stats for a certain day in that week. Depending on the exercise, there is a score and a color.


My question is, do you think there is a chance for that average to be misinterpreted as "bad" because it is yellow/orange?


Looking forward to your answers.



Thank you


enter image description here



Answer



Please do remember that to be appropriately inclusive, your colour information discrimination concept design must include in the design parameters the most common forms of colour blindness, so that you use value as well as hue to ensure that everyone viewing or using your app perceives the visual cue you're aiming for.


That said, your lower gradient being used to express unwanted results could be orange-red and have a darker value than the higher, and if the average line is mid dark value where the other two are differentiated lighter values, I think that would work fine.


Here's a resource which can help you visualise your colour choices with respect to colour blindness (look under the Vision Tab):


https://galactic.ink/sphere/


Normal Colour Perception - Schema Normal_colour


Deuteranomaly Colour Perception - same Schema Colour Perception - Deuteranomaly


Achromatic Colour Perception - same Schema Colour Perception - Achromatic



The most common form of colour blindness overall is the Red-Green Colourblindness called Deuteranomaly.


Here are two resource links which can help with overall colourblindness awareness and issues, and which give generalised distribution data for the most common forms of colourblindness:


https://www.colour-blindness.com/
https://nei.nih.gov/health/color_blindness/facts_about


Hope this helps.


No comments:

Post a Comment

technique - How credible is wikipedia?

I understand that this question relates more to wikipedia than it does writing but... If I was going to use wikipedia for a source for a res...