What are affordances and signifiers?

What affordance means

The psychologist James J. Gibson coined the term. He first used it in 1966 in the book The Senses Considered as Perceptual Systems. He gave the best-known definition in 1979 in The Ecological Approach to Visual Perception.

For Gibson, an affordance is what the environment offers an animal, for good or ill. The term describes a relationship. Steps a metre high don’t afford climbing to a crawling baby. To a tired adult, on the other hand, they can be a place to rest.

In Gibson’s sense, a possibility doesn’t have to be visible. Norman makes the same point: Gibson’s affordances didn’t have to be perceivable or even known.

Norman’s move to the interface, and the signifier

Don Norman brought the term into design in 1988 with the book The Design of Everyday Things, but he changed its meaning. For Norman, an affordance was a possibility for action that can be easily perceived. This is called a perceived affordance.

According to Norman, designers used the term a lot, and often wrongly. In 2008, Norman tried to correct this in his piece “Signifiers, not affordances” in the ACM magazine Interactions. His proposal was short: forget affordances, provide signifiers.

Norman defines a signifier as a sign that can be meaningfully interpreted in the physical or social world. The concept also went into the revised 2013 edition of the book.

I put the difference in one sentence. An affordance means something can be done. A signifier is what shows you that it can be done.

The same screen with and without signifiers

See what you lose when the signifiers are off:

• Save: without a border and fill, the word reads like a label. You only notice that you can tap it by trying.
• Shipping cards: if the first card fills the whole screen, the list looks finished. The free in-store pickup stays on the fourth card.

What signifiers look like on screen

On screen, the real difficulty for me is showing users where they can click.

In her 2015 article, Hoa Loranger of Nielsen Norman Group lists the signifiers of clickability. For links, she says blue is still the safest colour. For buttons, she recommends keeping the rectangular shape and a clear border; the corners can be rounded.

The same article cites an early study: making flat buttons three-dimensional increased clicks by 416%. Loranger adds that the effect is smaller today, but still large. It also works the other way: give a heading that isn’t clickable a background colour, and it looks like a button, and users are misled.

Scrolling is no different. In her 2016 article, Kim Flaherty describes the “illusion of completeness”: the visible screen looks like the end of the content, though there is more.

Flaherty’s recommendation: show part of the following content at the edge. In areas that scroll sideways, content that sticks out and a slide counter do the same job.

My note

A problem I often see in audits is controls that work but aren’t visible. An “Edit” without a border in flat design, or a row of full-width cards, are examples.

If users don’t find these elements, they think the feature doesn’t exist. In the report I note this as “affordance there, signifier missing”. The fix is usually a border, or a card that sticks out past the edge.

Whether a signifier works is decided by the user’s mental model. We learned on the web to read blue underlining as a link. Users may not recognise a cue you invented yourself.

I flag problems like these screen by screen in the UX Audit.

Related terms

How well a signifier works shows up in a test of usability. Buttons, links and cards are parts of the user interface. The link to the heuristics is on the page about Nielsen’s 10 heuristics.