Skip to content

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"

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 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"

Consistency is a seemingly simple principle: the design should match the expectations the users might have developed by interacting with similar products in similar situations.  Consistency is also one of the hardest design principles to apply right in practice because as soon as you try to use it, the question arises: "consistent with what?".

...continue reading "Consistency"

Visibility of system status is another core principle for designing successful interactive systems.  Simply put, the system needs to clearly communicate to the user what it is doing and what state it is in.  Visibility of system status was included among the original 10 Usability Heuristics for User Interface Design by Jakob Nielsen.

...continue reading "Visibility of System Status"

One of the original 10 Usability Heuristics for User Interface Design by Jakob Nielsen, error prevention is probably the most important design principle for everyday interactive systems: Better than tutorials or awesome error messages, your system should make it very unlikely that the user will ever commit an "error" in the first place.

...continue reading "Error Prevention"