The term “affordance” is one you’ll hear often in the world of web design. It regularly appears in tutorials on Tuts+ too, so this article will serve as a definition just to clear up any doubts.
There’s sometimes a bit of confusion surrounding affordance, so let’s look at three important relating terms:
Defined originally by James J. Gibson way back in the 1970’s, affordances are the possible actions between an object and an individual. A door knob is one of the classically used examples; it affords a twisting motion. Whether or not the individual recognizes the possibility of that action is irrelevant–the affordance is still present, though it requires the individual to actually do the twisting.
The term as we often use it nowadays was made mainstream by Donald Norman in his book The Design of Everyday Things (originally published under “The Psychology of Everyday Things”) and conflicts a little with Gibson’s. Norman took the conceptual idea of affordance and added to it “human interpretation”, giving us what he refers to as “perceived affordance”.
Going back to our door knob, it’s an object whose form communicates how the user should engage with it. If designed effectively the user will instinctively know whether to push, pull, twist and so on.
Norman enjoys the idea that affordance should be a combination of actions which are actually possible and those which are simply perceived as being possible.
Perceived affordance is particularly relevant in interface design, which we’ll look at in a moment.
Signifiers play a role in Norman’s definition. In various ways, characteristics of an object suggest to the individual what actions are possible. Signifiers are the “perceivable parts of an affordance”. Again using the door knob example, its roundness signifies that it affords twisting.
If designed poorly, the lack of signifiers (or presence of signifiers which give false affordance) might mean that the user makes mistakes to begin with.
As web designers we shape the way interfaces appear and behave. Through design we influence the way users interact with them, often through common UI elements such as buttons, input controls, navigational components and so on.
We use visual details as signifiers which help users perceive how they should interact with those UI elements.
What computer monitors display is flat; a collection of pixels, nothing more. But by graphically suggesting depth and dimension we can bring perceived affordances into the mix to help users. Take buttons, for example. Which of these do you perceive as “affording” a pressing action more effectively?
This is perhaps the biggest argument against the flat design movement; removal of details in an effort to be minimal can sometimes mean hindering perceived affordances. For example, have you ever encountered a form like this?
By going super-minimal, any differences between the submit button and the inputs have been stripped. Through convention a user may understand how to interact with this form, but signifiers (such as inner shadows on the inputs and rounded corners on the button) would have helped visually communicate that the inputs are containers and the button is for “pressing”.
“A good designer makes sure that appropriate actions are perceptible and inappropriate ones invisible.” – Donald Norman