Design
November 3, 2020

Affordance - UI Design

Affordance describes all actions that are made physically possible by the properties of an object or an environment.

Brief Overview


James J. Gibson from the Department of Psychology at Princeton University coined the term affordance after doing work on visual perception.

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.

Affordances

Are properties of objects which show users the actions they can take. Users should be able to perceive affordances without having to consider how to use the items. For instance, a button can be designed to look as if it needs to be turned or pushed.

Perceived Affordance

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.

Perceived Affordance

The two texts above would be perceived as links by many people because of the name and style, however they link nowhere.

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 of affordances might vary according to their ability, context, goals, beliefs, 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.

Examples

  • A button that changes colour implies more functionality
  • Commonly used icons used by Apple and Google imply the same outcome
  • The ridges or dots of a bottle cap provides a high-grip surface, suggesting some friction should be applied.
  • A bottle screw cap cannot be tightened further when the bottle is sealed.
  • A door with a plate instead of a handle can’t be pulled.
  • A flat plate on a door suggests the door can be pushed in that place.
  • A car steering wheel can’t turn any farther when the internals are fully extended.

Conclusion

While designing user interfaces and experiences, designers must suggest accurate actions that are possible by an interface element. Using a visual cue, like an underlined text on a website, suggests it is a hyperlink and can be clicked.

Ambiguous Design Cues

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 have potentially damaging effects.

Ready to Level up your website?

We'll learn about you, your business, and your customers. Then we will improve the conversion and user satifaction of your website.
Book a meeting