A user interface is just a picture on a screen. Some parts of the screen we can click and get a reaction, other places just ignore our poking. How can we tell the difference? An affordance is a hint that helps us distinguish the two.

Four Affordance Flavours

There are various types of affordances. The combinations based on visibility and truthfulness are:

Affordances in physical objects refer to the capabilities that the object offers: a chair affords sitting.

A cup “affords” holding water, but so does a bucket.

The cup affords holding with one hand; it affords drinking from.

Software has no physical affordances. An affordance in software is used to refer to a “suggestion of capability” instead.

Visible Affordances

A button (and this is just a picture of button) affords pushing. The 3D shading insinuates the raised surface; the outer ring shadow intimates the recess the button can push into.

Roll-over effects are also visible affordances – they are invisible until the mouse pointer moves over, and the roll-over change becomes visible. The visual change indicates interactivity to the user.

Invisible Affordances

A hidden affordance is a capability that cannot be seen. You need to experiment in order to uncover them. Right-click context menus are typical of these.

Hidden affordances can be a very useful tool when designing for expert users. They allow more functionality to be added without cluttering the visible user interface.

True Affordances

A true affordance is truth in advertising. It means that the capability is present.

False Affordances

Affordances which appear to be there, but which are not.

One of these two buttons reacts when clicked. The other does not.

The one which does nothing is lying to you: it looks just as clickable as the other, but nothing happens. The affordance is false.

Graphic Design

Since the user interface for software is mostly made up of pictures, these pictures must be made with care, so that they do not promise more than they can afford.

Graphic designers are specialists trained in making the pictures stylish and elegant. The trick is making sure that the pictures fit with the behaviours and structure of the software. Affordances are a great way of thinking about how the parts interact. A skilled graphic designer can use the concept of affordances to make the picture reveal the intended interactions to the user by using shadows, highlights, and textures to guide the eye.

Touch + Gesture Affordances

With the new focus on touch interfaces on iPads and Surfaces, the idea of affordances has hit a rough patch. No-one has quite figured out how to create a visible affordance for gestures like "pinch" or "two-finger-slide". Without affordances touch interfaces can be quite mystifying. Gestural user interfaces are still in their infancy, much like windows-mouse-pointer interfaces were rather novel back in 1990. Double-clicking and right-click were once considered complex actions; touch gestures will eventually become part of the "normal" user interface. For now we still haven't figured out the right vocabulary.

Back to articles