❤️ 15/15

Affordance × Signifier: 'Can Be Operated' and 'Looks Operable' Are Two Different Things

Norman borrowed the concept of affordance from psychologist J.J. Gibson: an affordance is the relationship of 'possible actions by a particular agent in a particular environment' — a chair 'affords' sitting, a button 'affords' pressing.

Two points are most often missed:

1. It is a relationship, not an intrinsic property of the object;
2. It is not necessarily visible — an affordance can objectively exist while users cannot see it.

That is why Norman stresses that what design really needs to care about is the 'perceived affordance': what users notice they can do matters more than what they objectively can do. An invisible affordance is as good as nonexistent.

So what lets users 'see it'? Norman introduced the signifier to make up for what affordances lack: a signifier is 'an indicator or signal in the physical or social world that can be meaningfully interpreted' — a perceivable cue that tells users 'where and how to act.'

He puts it bluntly: 'Forget affordances: what people need, and what design must provide, are signifiers.' People understand products through cues — affordances themselves do not communicate; signifiers do.

Examples: an empty platform suggests you missed the train; a trodden path across the lawn (a desire line) shows where people want to walk; a scrollbar's position marks the document's length and your place in it.

For designers: a clickable element must carry a visual signal that says 'this is clickable' (shape / color / underline / cursor), or its affordance stays invisible.

⚠️The most common misuse: 'add an affordance to this button.' Designers often use 'affordance' to mean 'a visual hint that something is operable' — by Norman's precise definition, that is a misuse: affordance = whether the action can be done (a relationship / possibility); signifier = the perceivable cue that shows it can be done, and how.

Flat design fell into exactly this trap: elements were still objectively clickable (the affordance remained), but borders / shadows / underlines were removed (the signifier was lost), so users could no longer tell they were clickable.

The corrective rule of thumb: when you want something to 'look clickable,' what you need to add is a signifier, not an affordance.
The affordance is intact but the signifier is gone: flat design hides what's clickable