Affordance

July 29, 2008

Affordance is a simple but powerful idea.

I first came across is in Don Norman’s book The Design of Everyday Things, but according to Wikipedia it’s much older than that.

At Webstock this year Liz Danzico defined it as: “providing uninscribed and detectable cues that loosely govern a set of actions or interactions”.

I would say: “make it obvious to me what I can or should do with things”.

The classic textbook example :

When you approach a swinging door how do you know which was the door opens? Do you push the door away from you? Or pull it toward you?

The “handle” that’s placed on the door should make this obvious.

Correct:


Picture: https://blogs.technet.com/ewan/

Incorrect:


Picture: https://www.iqcontent.com/blog

If you think about it the flat piece of metal with the word “push” commonly placed on doors is an odd design element. It has no real purpose other than to remove the doubt about the direction of the door, and perhaps to indicate where is an appropriate place for your hand to push. But, we’d struggle without them.

Some other examples from web design:

Notice a pattern here?

What other affordances make your life easier every day without you even noticing?