In UX, the affordance of a design element is what the user thinks he can do with that element. It is based on what the user can perceive of the component.

Updated on November 19th, 2022


Examples include buttons that appear clickable because of design choices and door handles that clearly indicate whether you're dealing with a push or pull mechanic.

Who came up with affordances?

When looking at the history of the term affordance, both Don Norman and James Gibson come to mind. James Gibson was the first to talk about affordances. He did so on multiple occasions.

  • In 1966, he first mentioned affordances in a book called The Senses Considered as Perceptual Systems.

  • Then, in 1979, he used affordances to describe how an animal analyses its environment before interacting with it. He did so in his second book, The Ecological Approach to Visual Perception.

Don Norman also talks about affordances. He does so in his famous book The Design of Everyday Things. He mentions how good use of affordances helps users naturally understand objects without needing labels or any further explanation.

For UX designers, this is important to remember when working on a design. Some users can understand a design element, while others do need extra help. It means that affordance is not a property of a product but rather depends on the relationship between the design element and the specific user.

What are the types of affordances?

In UX, we talk about several types of affordances. Understanding the basics, as mentioned above, should be a good starting point.

However, if you want to learn more about affordances, being able to differentiate between different types is an excellent next step. Here's a brief overview of affordance types.

  • An explicit affordance is when it's visually self-explanatory what a design element can do. This is often based on real-life properties, such as a primary action button that appears clickable.

  • Hidden affordances remain invisible until users need to interact with the design component. Examples include the tooltip that appears on hover.

  • Negative affordances help users understand in what order they have to complete tasks. You notice this, for example, with a confirmation button that remains inactive until all form requirements have been met.

  • False affordances miscommunicate design element behavior. For example, an element that looks like it is clickable by affordance while it isn't clickable.

Useful resources

The Design of Everyday Things - Wikipedia



Page link

Want to learn more about Affordance?

Learn together with other UX designers in our community. Join by picking one of the options below.


  • Same as annual, but billed monthly.


Choose plan


Save 18% compared to monthly

  • 1️⃣ Join our Discord community

  • 2️⃣ Monthly UX Master Classes

  • 3️⃣ Office hours in the community


Choose plan


One purchase. Join forever.

  • Support the development and upkeep of UX Dictionary


Choose plan

Once you choose your plan, you'll be redirected to our Stripe page. After that, you'll be redirected to our dashboard. You can cancel, pause, or upgrade at any time.