The term “affordance” is one you’ll hear often in the world of UI and UX design. It regularly appears in tutorials on Tuts+ too, so this article will serve as a definition just to clear up any doubts.
What is Affordance?
There’s sometimes a bit of confusion surrounding affordance, so let’s look at three important relating terms:
1. Affordance
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.
2. Perceived Affordance
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.
3. Signifiers
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.
Interaction Design
As web designers we shape the way interfaces appear and behave, influencing 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.
That Whole “Flat” Thing
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 hinder 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. 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
Bear in Mind
- Not all users are equal! Affordances may not be perceived and interpreted the same by everyone.
- Labels and instructions are helpful in interface design, but back them up with other visual cues.
- Where graphical interfaces are concerned we’re referring to “perceived affordance”; they have no actual, physical properties unlike in product design.
- “Flat” design can communicate affordances equally as effectively as skeuomorphism–just make sure actions are perceptible when designing.
Further UI Design Reading
- The Design of Everyday Things by Don Norman
- User Interface Design Basics on usability.gov
- Affordances and Design by Don Norman
