uxdesign.cc – User Experience Design — Medium | Avadh Dwivedi

The properties of an object which allow it’s function.

Affordances of concrete drainage pipes

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 to refer to the actions a user perceives to be possible, distinct from those which are actually possible.

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.

Which one of the above do you perceive to be clickable?

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 at 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

Affordance in user interface design was originally published in uxdesign.cc on Medium, where people are continuing the conversation by highlighting and responding to this story.