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.

Google Material Design Do's and Don'ts

Some things are done right:

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

Google Material Design Do's and Don'ts


redesign-case ux-critique

Related posts

Please note: By using this site, you accept cookies from Google Analytics.