Skip to content

Because some people cannot distinguish colors reliably, we use redundant cues to ensure that any color-encoded information is also accessible through some other modality.  For example, in most countries, traffic lights are stacked vertically, with red on top and green at the bottom so that even people who cannot tell red from green know how what to do.  In GMail's "Message blocked" automated reply, the red light is shown at the bottom.  People with normal color vision will get the message: "Stop!"  But people with some color vision deficiencies will see it as a "Go"!  This is an example where redundant cues instead of reinforcing the color-encoded information, contradict it instead.

red traffic light next to Google's "Message blocked" message, in which an icon in the shape of traffic light shows a red light at the bottom
In Google's "Message blocked" reply, people who cannot see color will get the opposite meaning from those who can. Photo credit: Kevin Payravi, Wikimedia Commons

When designers use the word "affordance," they mean design elements, whose appearance clearly communicates how these elements can be manipulated. For example, the overall appearance of a round door knob (its size, shape and rigidity of the material it is made of) clearly communicates that it can be twisted.

Round door knob
A round door knob affords twisting. Photograph by derrickcollins (CC BY-ND 2.0)

...continue reading "Affordances"

A color has two components: hue (e.g., green, red) and luminance (i.e., brightness).  Equiluminant colors differ in hue, but not in brightness. When foreground and background colors are equiluminant, the content of the image is hard to perceive:

...continue reading "Equiluminant color schemes"

Modern design uses color to communicate both information and mood.  Several research tools exist that will automatically recolor web sites on the fly to make the color-encoded information content accessible for individuals with color vision deficiencies (CVDs). Unlike all prior tools, our SPRWeb system recolors web sites in a manner that preserves both the color-encoded information and mood.

...continue reading "SPRWeb: Automatically recoloring web sites for people with color vision deficiencies"

To make color-encoded information accessible to people with color vision deficiencies (a.k.a. color blindness), good design should use redundant cues.  That is, the color-encoded information should also be encoded using some other visual cue, e.g. shape, texture, lightness, etc.  For example, the old Apple Chat interface used a combination of hue (green, orange and red) and shape (circle, triangle, square) to indicate whether potential chat partners were available online:

...continue reading "Redundant Cues"

Color Vision Deficiency (a.k.a. "color blindness") is a kind of vision impairment that causes a person to have difficulty perceiving certain colors.  It is a relatively common impairment, affecting up to 8% of men and about 0.5% of women.  The most common type of color vision deficiency results in difficulties in distinguishing between reds and greens, but other forms of color vision deficiencies also exist. Although common terms like "red-green color blindness" suggest complete inability to distinguish between some colors, most affected people experience partial color vision deficiencies -- they perceive the differences less well than people with typical vision.

...continue reading "Color Vision Deficiency"

The menu board at a local cafe provides a fun example of the failure to apply the mapping principle:

...continue reading "Which is bigger, small or grande?"

The mapping principle states that if your user interface relates to a spatial arrangement of objects in the real world, the user interface elements should be arranged similarly to the real world objects.  That way, the user can easily figure out which element corresponds to which object.  For example, the explanatory labels for the two art pieces below are arranged the same way as the pieces themselves making it clear which label goes with which piece:

...continue reading "Mapping"

Faceted search (a.k.a. faceted browsing or faceted navigation) is a design pattern that allows the user to filter a large collection of items quickly using a set of facets. There are two key properties of successful faceted search implementations: 1. the updates happen nearly instantaneously after each filter change and 2. filters can be applied/unapplied in any order.

...continue reading "Faceted Search"

A while ago, if you wanted to get vitamin C from Boots (a British pharmacy chain), you would be presented with choices like these:

It is hard to see (and not just because the image is low resolution) that in one of these containers you would find orange-flavored tablets, while those in the other would be blackcurrant-flavored.  Many customers failed to notice these flavor labels and brought home a product that was not what their loved one wanted.  This design failed to prevent customers from making a mistake.

...continue reading "“I hate blackcurrant!”"