Distinguishing colors can be hard, for some people particularly red and green. Thus, conveying meaning by color alone isn't doing any good for these people.
So, how can we help – not just people with color deficiencies – but people in general when designing user interfaces? By leveraging other cues such as shape, position and distance.
Example: The documentation for Google Material Design
Google Material Design is a relatively new design language and philosophy introduced for the Android operating system. Google has created a rather extensive and thorough website documenting the thoughts behind and specifics of the design. Very impressive indeed.
However, in one area, things aren't so impressive. The documentation makes use of illustrated Do's and Don'ts scenarios, see screenshot below. While a very good idea on itself, the visual execution is lacking in terms of usability.
Some things are done right:
- Use of "Do" and "Don't" labels
- The "Do" scenario always comes first (i.e. use of consistent positioning)
Still, the primary means of conveying meaning are equally shaped horisontal colored bars. Green for "Do" and red for "Don't". Not easily distinguishable for a great number of people.
Remedy: Differentiate in shape as well as color
So, how can we remedy this? By using shape, like for instance, changing the styling of the colored bar (e.g. use CSS border-style: dotted in this case).
