What is ‘Affordance’ in Good Product Design and User Experience?
It is the relationship between a product and its agent.
When we say affordance here, we do not mean it in the context of $$ but the $ value it adds to a good product. We have discussed the fundamental principles of interaction design in the previous article. Affordance is the first principle among them. So what does it actually mean and encapsulate?
Essentially, what do we do when we use a mouse or a keyboard? We use a mouse to click with the help of a cursor whereas we use a keyboard to tap the letters to type. Here, the ‘clicking’ and the ‘tapping’ are the affordances of the mouse and keyboard, respectively. When we look at a mouse, the design leads us to hold it a certain way and click. When we look at a keyboard, its keys will make us tap. Their design then defines their primary function. Affordance is a property through which objects convey critical information about how people could interact with them. In simpler terms, it is the property or feature of an object that gives a clue or prompts the user on how a product can be used. These prompts could also be intangible, but not imperceptible — they are cues picked up by our sensory capabilities.
An affordance should not be mistaken for a feature of an object. A feature may rely on an affordance to work, but it is not an affordance in itself. Affordance is not singularly dependent on the design of the object. In fact, it considers the link between design attributes and our sensory capabilities while interacting with the object. Thus, the product’s use is defined by us. This is not a static principle or property of a product’s design but a use case principle.
What do you do when you see a ball? Do you bounce it, kick it or throw it? All of us will have different answers to this question. This is because the physical attributes of the ball such as its shape, size and material, and our personal sensory cues have a direct result on how we interact with it. We do not interact with a cricket ball or a basketball in the same way. But, we could interact with volleyball and basketball quite similarly because of the similarity in size. Here, the shape of the ball, its material, and its size give us a clue or prompt on how we can interact with it.
The affordance of an object can have various types. These are defined as:
- Perceptible — The perceptual characteristics of an object itself indicate what action possibilities are available and desired. The form of the mouse prompts us to use our palm in a certain way. The left and right-click and a cursor in the middle indicate how it can be used. These affordances make sure the product is used the way it was intended.
- Hidden — In certain user interfaces, there are no obvious affordances. In this case, we often rely on experience or trial and error to determine possible actions. For example, the drop-down menu stays hidden until we hover or click on it with the cursor.
- False — An object’s characteristics suggest we can do something when we cannot. For example, underlined text that is not hyperlinked.
These three were defined by Bill Gaver in 1991. Four additional types were later defined by Rex Hartson in 2001.
- Physical — These perceptual characteristics show us what to do, such as the ‘Add to Cart’ or ‘Sign-Up’ button on a website. Text appearing on affordances such as on buttons are called explicit affordances.
- Cognitive — These are design features that explicitly draw our attention to notice something. For instance, a pop-up window that pops up after deleting something, asking for confirmation.
- Sensory — These design features help us sense something. This is like a pinging notification that shows us an update or notification.
- Functional — These design features help us achieve goals. It is like an item appearing in the shopping cart after we click ‘Add to Cart.’
Apart from the above affordances, other main affordances in User Interface Design are pattern and negative affordances. Pattern affordances follow conventions to prompt us to take action. Like the hamburger icons (the three lines or dots in the top corner of a page) that indicate menus or the floppy disk sign which indicates the save option. Negative affordances block us from proceeding towards a goal when we must provide more data. Like the greying out of the ‘submit’ button until we complete the form.
Affordance requires a relationship between a product and the user. This relationship can be perceptual, cognitive. When no such relationship is formed, there is no affordance. Hence, clear affordances and their discoverability are vital to a product’s usability. Sometimes a property of an object may restrict a function perceived by us — this is termed anti-affordance. A barricade as a checkpoint is an affordance but becomes an anti-affordance to passage and movement. Similarly, a locked door adds anti-affordance to the function of entering.
Recognition of affordance and anti-affordance is necessary for a good user experience. The use of glass as a building material creates the affordance for light, transparency, and visibility. But many people injure themselves by walking into it, while birds often die after flying into it. This does not make glass a ‘bad design choice’ as its affordance facilitates direct perception. But its anti-affordance is sometimes not recognised by the user. This then requires an added sign or property to alert us. Such signs are called ‘signifiers’ which we will explore in the next article.
About the Writer
Malika Vaidya is an architect and writer. She is the Co-Founder of Architecture Pulse, a blog that explores the intersection of architecture and society. She is a graduate of the Rachna Sansad’s Academy of Architecture (AoA), Mumbai. She has interned at One Habitat Studio and The Origin.
About the Editor
Vishwa Balani is an English Literature graduate from St. Xavier’s College, Ahmedabad and MS University, Baroda. She has been associated with CEPT University for two and a half years, where she has taught writing to students across various courses. Her tryst with language began very early in life, and it has continued no matter which field she chooses to work in. She likes experimental writing but also believes in grammar, and the Oxford comma.
About the Illustrator
Ipsita Choudhury is an undergraduate architecture student at the School of Planning and Architecture (SPA), Bhopal. She is a writer, artist, illustrator, and graphic designer. She is an Observation and Action Network (OAN) Fellow 2020 for The Centre for The Living City, UDC and NASA. She was a semi-finalist in the “2019 Berkeley Prize Essay Competition.”
