I wrote the following intending to include it in an email newsletter I send out. I had Chey read it and it seems the word “affordance” used in this way is a bit too esoteric. I’ve started trying to rewrite it, starting from the user-testing paragraph, but I’m having trouble writing about this concept without using the word. This is really hard. Writing sucks.
Any ideas? I think I’m about to scrap this idea and try some other topic.
Donald Norman, usability expert and author of The Design of Everyday Things, makes an important distinction in the concept of affordances: There are affordances and perceived affordances.
An affordance is a property of an object that suggests a way we can interact with that object. Affordances exist whether or not we perceive them. For instance, since a bed is cushioned and horizontal, it affords laying down. To my daughter, since the bed is cushioned, horizontal, and a little springy, it also affords jumping up and down on.
As web designers, we are concerned with the affordances perceived by visitors to our web sites. Our problems arise when we count on an affordance of an interface element that our site visitors don’t realize.
For instance, a story headline on a web page for an online newspaper might afford clicking, but if site visitors do not perceive that clicking on the headline will be have a meaningful or useful result, they do not perceive that affordance. This might happen if the linked headline did not look like a link, i.e., if it lacked the conventions of being underlined text of a different color (often blue).
A reverse case is when we have a link in a site’s main navigation that affords clicking since it is grouped with other links and looks just like them (underlined, blue text perhaps). Yet, when clicked, no new page appears.
The affordance says “Click Me” and the convention demands that new information appears in the web browser. When a convention isn’t followed, site visitors can become irritated and sometimes disoriented.
Assessing affordances is one of the most common benefits of performing user tests. By having a test user work through some tasks on your web site, they will be forced to negotiate interface elements. By watching what they click on, hover over, try to drag, et cetera, you can gain insight into what affordances they perceive in your design.
From a web site accessibility slant, since affordances depend on the capabilities of a user and the user’s ability to perceive it, a blind person will not relate to a link because it is blue and underlined. Instead, the technology the person uses to navigate the web site should provide an affordance that, if acted on, results in the linked page being loaded.
Learn more about affordances
Affordances and Design by Donald Norman