Week 9: Affordances

by wangtianchen

This week I am going to focus on the concept of Affordance. Designers in many different specialties use it, but today I mainly concentrate on its use in a contemporary smartphone.

After I have read one article calls “Affordances: An introduction” by Interaction Design Foundation and have watched one video “Affordances” by Norman on Youtube in this week, as I understand of the concept of Affordances are  the design aspect of an object which suggest how the object should be used; a visual clue to its function and use, according to Donald Norman (1988). He thus defines an affordance as something of both actual and perceived properties. [1]  For example from this picture, Human, cat and mouse have different action when they see one object, it is nature action and affordance of actual and perceived properties.



In the world of design, the term “affordance” has taken on a life far beyond the original meaning. It might help if we return to the original definition. The word “affordance” was originally invented by the perceptual psychologist J. J. Gibson (1977, 1979) to refer to the actionable properties between the world and an actor (a person or animal). To Gibson, affordances are a relationship. They are a part of nature: they do not have to be visible, known, or desirable. [2]

What are the affordances of a contemporary smartphone?

There are a lot of examples from a contemporary smartphone, where the actions you can take are fairly clear from the interface. Without knowing what the app is all about, you can already tell (if you’ve used touch interfaces, particularly iPhone) what you can touch, what will likely result in an action, and what items are just eye candy.


iPhone interface

Let’s take one more example from an iPhone application. In just a few seconds of seeing this interface, we intuitively know how to turn each setting on and off. This interface has been designed to afford pushing and afford switching to manipulate the controls, without any instruction to the user. [3]


iPhone application

Please remember to ask yourself “why use affordance?”

The examples shown above help users understand how to interact with the interface. At the end of the day, design is all about the user and these concepts should be used for their advantage, and not clutter, complicate or hinder the interface. [3]

User interface design is hard. Punting to a graphic designer sounds like a good idea, but consider that the difference between adequate and excellent on a user interface isn’t subtle or small. It’s the difference between usable and frustrating. The difference between good and beautiful. And maybe even the difference between viral and doomed to obscurity in the App Store’s bargain bin. Make sure you don’t just create pretty graphics, put the time in to make a pretty AND usable UI.

Don’t let your users walk into the wrong gender bathroom in your applications: use affordances to make your UI obvious and intuitive. [4]


[1] Soegaard, M. (2014). Affordances. Retrieved November 28, 2014 from https://www.interaction-design.org/encyclopedia/affordances.html

[2] JND.ORG. (2014). Don Norman: Designing For People. Retrieved November 28, 2014 from http://www.jnd.org/dn.mss/affordances_and.html

[3] Lappin, A. (2009). Design concepts explained: Affordance. Retrieved November 28, 2014 from http://www.thefloatingfrog.co.uk/graphic-design/design-concepts-explained-affordance/

[4] Drodenbaugh. (2010). Walking Into The Wrong Bathroom: Lack of Affordances. Retrieved November 28, 2014 from http://www.lessonsoffailure.com/software/user-interface-affordances/