Is color sufficient to differentiate signifiers?

When using colors, particularly red and green, as signifiers (i.e. indicators of interactivity) in user interface design, make sure to provide other hints such as shape, spacing or placement.

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).

By the way, I'm currently available for new User Experience Design positions and projects…