Power Duo: Affordances and Signifiers in UX Design

Welcome to the intersection of psychology and design, where affordances and signifiers shape the user experience. Their effective use can make the difference between a product that delights users and one that frustrates them.

Understanding affordances

Affordance refers to the relationship between an object and the actions a person can take with that object.

For example, a smartphone screen affords interactions like swiping, tapping, pinching, and scrolling. Affordances are the basic features of an object that tell the user what actions are possible with it, and how to use it.

Did you know? (Text version)

The concept of affordances originated in the field of psychology and was first introduced by psychologist James J. Gibson. Gibson proposed  the theory of  affordances (PDF)  while studying perception and action in ecological psychology. He used the term to describe the actionable properties between the world and an actor (a person or animal). This concept has since been widely applied in various fields, including design and human-computer interaction.

Signifiers, the visual cues

Signifiers are visual cues that indicate the presence of an affordance. They are added to an interface to help users understand what actions are possible, and how to perform them. Signifiers can include labels, icons, and other visual cues that provide additional information about the functionality of an object or interface.

By effectively utilizing affordances to provide inherent functionality and signifiers to communicate intended use, designers can ensure a seamless and enjoyable user experience.

More learning resources:

Design Principles - Affordance (User Experience Design) by Philip Hanna

Affordances in mobile UI design by Frank Spillers