All about affordance and signifier: terms by Don Norman, the UX pioneer

To better relate, answer the following before proceeding further.

Ever been clueless about what a machine is for or how to operate it? Pushed a door when it was meant to be pulled or vice-versa? Confused about where and how to open a packet? Stuck on a digital interface wondering how to proceed further? Mistook a hyperlink-like blue text to be clickable?

If yes to any of the above, then that was the issue of affordance and signifier.

Affordance was coined by James J. Gibson in 1977 and popularized and redefined by Don Norman in 1988. As per Gibson, affordance is the action possibilities of an object in relation to the action capabilities of an actor. Okay, a lot of action, action… let’s break it down in simple terms. Gibson explained affordance as the usefulness aspect, pen used to write, paper to write on, and obvious ways how an object SHOULD be used. It’s like I intend this article to inform and empower the designers’ design decisions; therefore, its affordance is the same and not anything else. But in the wilderness, one can use it in ways I may not have thought about (it’s based on an individual’s perception). Gibson didn’t count on perceived use. Then who accounted for it? Don Norman. As per Norman, affordance is the action possibilities, but both actual and perceived possibilities of an object in relation to the action capabilities of an actor. In simple terms, it is what a user can do with an object. That use may be intended or not by the maker, visible or hidden. Basically, Norman’s definition takes into account human perceptions or conceptual models. And these conceptual models make for usability, so affordance makes for usefulness.

“Affordances represent the possibilities in the world for how the agent (a person, animal or machine) can interact with something.”

— Don Norman, UX researcher, professor, and author of “The design of everyday things”

Photo by eduard on Unsplash

“The presence of an affordance is jointly determined by the qualities of the object and the abilities of the agent that is interacting” — Don Norman, UX researcher, professor, and author of “The design of everyday things”

Let’s take an example that Norman himself uses of a chair. A standard chair invites you to sit on, put some stuff on, or on lesser occasions stand on it, hence that’s what it affords for an abled person. Or a paper suggests its utility as to write on, use as a wrapper, duster, cleaner, container, or sometimes as a toothpick😉 So these are some of the affordances of paper. Thinking about inclusivity, what about disabled persons who can’t use their limbs, for them this affordance of a chair and paper may be invalid. Yes, therefore Norman considered affordance with respect to the object and the user. For the same object, affordance could be different for different archetypes of users.

Photo by Keiron Crasktellanos on Unsplash

Now to make the affordance more clear and specific, especially distinguish it from clues and signals, Don Norman introduced the term “ Signifiers”. Let’s understand it through an example of a traffic signal. For a visually abled person, their surroundings afford to view, obviously right? The same goes for a traffic signal, plus here it acts as a signifier (social signifier as it’s been a social creation and interpretation) to give the drivers a visual clue to stop, slow down or go ahead resulting in a perceived affordance. Another example could be of Google search page. In the video given below, spot the signifiers (what are the elements that are explicitly illustrating the action you can perform?)

signifiers on the google.com page

These are all the signifiers that Google is using to help the users discover and understand its perceived affordances and achieve the goal -

1. The blinking cursor on the text field
2. The mouse cursor change and shadows behind on hover of the “Google search” and “I’m feeling lucky” buttons.
3. Hover states of the listed languages in blue color
4. Tooltip on hover of the mic and camera icon
5. And all over, the mouse cursor change from default(selection arrow) to pointer(hand icon) to text(blinking cursor) as per the placement.

“Affordances determine what actions are possible. Signifiers communicate where the action should take place. We need both.” — Don Norman, UX researcher, professor, and author of “The design of everyday things”

Signifiers guide and communicate the way to navigate and interact with the puzzling systems around. But since it's communication it can divert to miscommunication (accidental or misleading signifiers) when used conflicting with the affordance. For example, a pull label on the door that affords to push only misleads the users.

Same way every visual element you see right now reading this article on medium, is signaling its perceived affordance. Imagine what if this sentence gets in red color, or in a light shade of grey, or visualize this text in a button-like structure. It would generate an utterly different set of perceptions. And different perceptions hence lead to varied emotions. And coming to the point then we the emotional beings would act differently. This is why signifiers should be used thoughtfully.

To make for the well-visible and understandable affordance in your designs, here are some ways -

1. do UX research to understand the user’s abilities, and see what they can or cannot do.
2. in research, find out the user’s mental model, what is their current way of working, and make the functionalities fit the same.
3. give visual, auditory, haptic, or any sensory signifier to affordance mainly perceived ones. (signifiers that appeal to multiple senses support the disabled hence making the product inclusive.)
4. use tried and tested design principles to make for the intuitiveness of affordance. (for example, search or hamburger icon is widely known and heuristic principles help to improve usability hence usefulness or affordance)

So it’s crucial for affordances and signifiers to be leveraged rightly in order for the user to discover and understand the functionality, feel favorable emotions, and hence act aptly. Otherwise, a product would work in conflict with users’ intuition, becoming error-prone, giving cognitive friction, and failing drastically in long run, don’t let that happen.

Use this piece to inform and back your design decisions✌️

Now you may brainstorm on how to solve the questions I asked at the start💡💡

Reach out to me on LinkedIn :)