Affordance

UX method

When the interface tells you what it lets you do

Stemming from cognitive psychology, affordance refers to the ability of an object to suggest its own use. An object is said to be affordant when its affordance is high. This fundamental principle can be summed up by saying that the more affordant an object is, the less effort the human brain has to make to interpret how to use it. In a way, working on the affordance of your interface means making it as intuitive as possible.

This concept has logically spread to the field of HCI. The affordance of an interface element therefore refers to the fact that its use is perfectly clear to a user. A button that looks like a button has good affordance. A link that blends into ordinary text does not have good affordance. In digital interface design and UX, it's perception that counts. That makes affordance a central concept in UX.

What is it for?

  • Designing intuitive interfaces where interactive elements are identified effortlessly;
  • Avoiding the use of elements that suggest a behaviour running counter to the user's intuition;
  • Checking that a design respects the visual conventions established by users' habits and practices.

What's the need?

  • Making an interface easier to get to grips with by respecting standards
  • Reducing navigation errors caused by ambiguous components
  • Assessing a design based on what its constituent elements convey

Affordance in digital aesthetics

Designers of operating systems play with affordance. If we go back a few years, skeuomorphism bet everything on strong visual affordance, copying the appearance of the real world onto our screens. Remember the bookshelf in iOS 6! Later, flat design offered a different approach, more distant from the visual codes of the real world. That required a little learning. In that particular case, affordance was less at the centre of the aesthetic. As for liquid glass, that’s yet another story. Transparency as a guiding principle offers something that doesn’t really concern itself with affordance.

Affordance and UX design

Mastering the concept of affordance has a direct impact on your users’ experience.

When they browse your interface or use your service, users constantly project the consequence of an action. If the interface’s behaviour is not aligned with this projection, the error rate will rise. The time needed to reach their goal will increase, or the user may simply fail to do what they want. Perceived usefulness suffers and frustration grows. If a competitor offers an equivalent service with more consistency (and therefore less friction), users will prefer the alternative to your solution.

The affordance of your designs must be fed by benchmarking. Indeed, a large part of what makes up your users’ frame of reference (their mental models) does not depend on you at all. It is the combined set of services they are used to that shapes their understanding of your interface.

Frequently asked questions

Interaction design

Interaction design defines what a user can do and how a product responds to actions: flows, states, transitions, feedback.

Read more about Interaction design

Interface design

UI design shapes the visual layer of a product: layout, colours, typography, components. It turns the experience into tangible, interactive elements.

Read more about Interface design

Micro-interactions

Micro-interactions turn a functional product into an enjoyable one: a like animation, real-time form validation, a loading indicator.

Read more about Micro-interactions

Curious to learn more about us?

Everyone talks about user experience, service design, ergonomics...
It's not always clear, and you'd like to find out, or sharpen what you already know.

Let's talk