Affordances, between the user and the interface
The term affordance was created by psychologist James J. Gibson in his 1966 book ‘The Senses Considered as Perceptual Systems’.
“The affordances of the environment are what it offers the animal, what it provides or furnishes, either for good or ill. The verb to afford is found in the dictionary, the noun affordance is not. I have made it up. I mean by it something that refers to both the environment and the animal in a way that no existing term does. It implies the complementarity of the animal and the environment.”
In 1988 Donald Norman took this concept for his book ‘The design of everyday things’ but introduced it in a different context.
“The term affordance refers to the relationship between a physical object and a person (or for that matter, any interacting agent, whether animal or human, or even machines and robots). An affordance is a relationship between the properties of an object and the capabilities of the agent that determine just how the object could possibly be used”.
An affordance is not a property of a certain physical or non-physical object but the relationship between the person and the object. In the context of human machine interaction it would be the relationship between the interface and the user.
There are two different types of affordances:
Physical affordances
Look around and check some of the physical objects that surround you. Look at that cup that you use to drink your coffee: it’s small, which affords that it should not be so heavy, has a handle, which affords handling, has a hole, which affords filling.
Physical affordances can be divided into three categories: perceptible, hidden, and false.
- Perceptible: an action that comes directly from the object’s characteristics. E.g.: A glass can hold liquids.
- Hidden: when the affordance is not too obvious. E.g.: A glass can be used to light out a candle.
- False: an action that is perceived by the agent but in fact doesn’t work as expected. E.g.: A button that when you press nothing happen.
In terms of affordance, physical objects are much more flexible than digital ones. You can imagine several things that can be done with a cup or a piece of paper but when it comes to digital objects, affordances are much more restricted.
Digital affordances
For physical objects there is a tacit knowledge of the perceptible characteristics that will be interpreted. If a cup has a handle you know that was made for holding but when it comes to digital interfaces the designer should know what the user assumes that will occur when interacting with them.
A digital interface needs to rely on visual cues to make them intuitive and easy to use.
Digital affordances can be divided into six categories: explicit, pattern, hidden, false, metaphorical, negative.
- Explicit: This type of affordance is the one that gives the user information about what to do. E.g.: Label on an input field. The input field by its own affords to input some value, the label is placed to inform the user the type of value the system is expecting. Explicit affordances are very useful to inform the user direct actions to the user. Anyway designers should have in mind that the interface should be intuitive enough to avoid holding the user in every single step.
- Pattern: There are certain patterns that the user identifies the moment he sees it. Designer’s most important job is to empathize with the user and discover what are the interaction patterns he’s used to and how to take the most of it. There was a time when it was recommended that the hamburger menu needed to be accompanied by the text ‘menu’ because a regular user didn’t know what was that icon with three bars. Nowadays an average user knows that behind that menu resides a complete navigation structure.
- Hidden: It’s an affordance that is reveled only when the user perform some action. It’s used to simplify the complexity of the interface. Dropdowns menus can be an example of this. You cannot see the menu unless you click on it. Not using such affordance will add complexity and will probably get the user lost in the interface.
- False: When you are clicking on a hyperlink and this does not redirect you anywhere you’re in presence of a false affordance. This is unfortunately quite popular and it’s a sign of bad design. It’s also considered a false affordance when you don’t follow a common pattern that the user is used to. E.g.: When you click on a logo that is in the upper left corner of the screen you should be redirect to the home of the website, if that doesn’t happen say hello to a false affordance.
- Metaphorical: Metaphors can help communicate abstract ideas without much instruction. Icon design is a good example to talk about this. Think of a basket, a speaker or an envelope. These are icons that try to represent the physical objects but in the digital world. In the old days when the skeuomorphic design was widely used this type of affordance was commonly used. Nowadays UI design tend to be more and metaphors are not that representative of the real world. It’s up to the designer when to use it and how to do it.
- Negative: It’s this idea of you can’t do something, you can’t proceed with something. The most common one is the grey out button that indicates the user that the control is disabled.
Affordances are key to create successful and usable interfaces. It’s critical to have a good balance of them to make the interface as intuitive and usable as possible. They are deeply connected with the idea that good design is not about how it looks but how it works.
