Affordance in user interface design
The properties of an object which allow it’s function.
Brief history
One of the top cited American psychologist James J. Gibson from the Department of Psychology at Princeton University did remarkable work on visual perception and coined the term affordance.
In his book “The Ecological Approach to Visual Perception” he explores the topic in detail, you should totally go ahead and grab your copy of the book in case you like reading books. Or you can keep on reading this gist here in the context of user experience and interface design.
What is affordance?
Affordance describes all actions that are made physically possible by the properties of an object or an environment. A bottle screw cap affords twisting. A hinged door affords pushing or pulling. A staircase affords ascending or descending.
Don Norman introduced the term perceived affordance in his book named Psychology of Everyday Things to refer to the actions a user perceives to be possible, distinct from those which are actually possible.
Here is an underlined text. At first, you might perceive it as a hyperlink but when you actually try to click it; it does not act like one. In this very case, it does not work like a hyperlink. It’s an example of how perceived and actual affordances could be distinct.
Both actual and perceived affordances must be considered in design.
Desired actions cannot be carried out if the object does not afford it, and afforded actions might not be carried out if the user does not perceive they are possible.
A user’s perception and understanding of affordances might vary according to their ability, goals, beliefs, context and past experiences. A bottle screw cap may be a mystery to a person who has not encountered one before. A staircase may afford an able-bodied person to ascend to a higher floor, but a person with poor mobility can not afford the same action.
Affordances can be deliberately constrained to enable only the correct or desired actions. A bottle screw cap cannot be tightened further when the bottle is sealed. A door with a plate instead of a handle cannot be pulled. A car steering wheel won’t turn any further when the wheels themselves are at the limit of their movement.
In the physical world, the ridges or dots of a bottle cap provides a high-grip surface, suggesting some friction should be applied. A flat plate on a door suggests the door can be pushed in that place. The steering wheel connected to the top of steering column suggests it will turn around that point.
Takeaway
While designing user interfaces and experiences, designers can use cues to suggest actions that are possible by an interface element. A stack of cards affords rearranging and shuffling for instance. An underlined text on a webpage suggests it is a hyperlink and can be clicked.
In software interfaces managing affordances is critical, a user might perceive possible actions based on the properties of interface objects. Giving incorrect visual cues can ruin user experience and lead to frustration.
Credits: Cyber-Duck, Wikipedia
Share, recommend and stay tuned for more insights on digital product design. I tweet @avadhbsd
