What are affordances in UX?
Affordances in UX are the cues in an object or interface that suggest what you can do with it, such as a raised button that looks pressable.
also calledperceived affordances · action possibilities
A door handle says "pull". A flat metal plate says "push". You never read a manual for either, because the shape of the thing tells you what to do. Affordances are that quiet conversation between an object and the person standing in front of it, and good interface design is mostly about not breaking it.
- An affordance is what something can be used for, and the visible hint is a signifier.
- On screens, cues like shading, underlines and icons do the work physical shape does in real life.
- False affordances, where something looks clickable but is not, damage trust fast.
- Test with real people, because you can no longer see your own interface the way a newcomer does.
Where the word comes from
The psychologist James J. Gibson coined "affordance" to describe what an environment offers an animal: a flat surface affords walking, a branch affords perching. Don Norman later brought the idea into design in his book The Design of Everyday Things, and it spread through the interface world from there.
Norman eventually noticed that designers were using the word loosely, so he started separating two things. An affordance is what an object can actually do. A signifier is the visible hint that tells you it can do it. In screen design, almost everything you work on is really a signifier, because a screen has no physical shape to push against.
What affordances look like on a screen
On a flat glass display, nothing is truly pressable until the software says so. So designers borrow cues from the physical world and from convention:
- Shading, borders or a filled background make a rectangle look like a button.
- Underlined or colored text suggests a link.
- A text field with a visible box and a blinking cursor invites typing.
- A drag handle made of three small lines hints that an item can be moved.
- A cursor that changes to a pointing hand confirms that something is clickable.
None of these are laws of nature. They work because people have learned them, which is why a button that looks like plain text can sit on a page for months before anyone notices it.
Why they matter more than they seem to
When affordances are clear, people act without thinking. They do not hover around the screen wondering what is safe to click. When they are unclear, you get hesitation, missed features and support tickets that start with "I couldn't find...".
There is a flip side too. A false affordance promises something the element cannot deliver, like a heading styled in the same blue as your links, or a card that looks tappable but does nothing. Users tap it, nothing happens, and they quietly trust the rest of the interface a little less.
How to check yours
A simple routine works well. First, squint at the screen or blur it slightly and ask what still looks interactive. Second, look for anything interactive that has no visual cue, such as an icon with no border sitting beside a heading. Third, look for the opposite, decoration that accidentally looks clickable.
Then watch someone use it. Five minutes of a stranger poking at your prototype tells you more than a week of reading your own mockups, because you already know what everything does and they do not.
Where designers go wrong
The most common mistake is chasing a minimal look until the cues disappear. Flat, borderless buttons can look elegant and still leave people guessing. Another is inconsistency: if links are underlined on one page and plain on another, users have to relearn the rule every time.
The opposite problem exists as well. Not everything needs to shout. Navigation items that people already expect to be clickable can be quiet. The goal is not maximum signalling, it is matching the cue to how much doubt a person is likely to have.
Affordances: your questions, answered
What is an example of an affordance in UI design?
A button with a subtle shadow and a filled background is the classic example. It suggests that you can press it. Similar cues include underlined blue text for links and a text box with a visible outline that invites typing.
What is the difference between an affordance and a signifier?
An affordance is what an object actually allows you to do, while a signifier is the visible clue that communicates it. A door that can be pushed has the affordance of pushing, and a flat plate on it is the signifier that tells you so.
What is a false affordance?
A false affordance is a cue that suggests an action the element cannot perform. Examples include a non-clickable card with hover effects, or a heading styled like a link. People try it, nothing happens, and they lose a bit of confidence in the interface.
Who invented the term affordance?
The psychologist James J. Gibson introduced the word in his work on perception, to describe what an environment offers to a living creature. Don Norman later adapted it for product and interface design, which is how most designers now know it.
Do flat design and affordances conflict?
They can, because flat styling removes shadows and borders that used to signal interactivity. It does not have to, though. Color, position, spacing, icons and consistent patterns can all carry the signal, as long as you check with real users that they still read as clickable.
More quick answers
Are affordances part of usability?
Yes. Clear affordances help people work out what to do without instructions, which supports learnability and reduces errors.
What are the four types of affordances?
Some authors split them into physical, cognitive, sensory and functional affordances. It is a teaching framework rather than a standard, so treat the labels as a way to think, not a rule.
How do affordances relate to intuitive design?
Interfaces feel intuitive largely because their affordances match what people already expect. When cues and conventions line up, users rarely need to stop and think.
What is a perceived affordance?
It is an action that a person believes is possible based on what they see. On a screen, perceived affordance matters more than the technical one, since people only act on what looks possible.
Can affordances differ between cultures or ages?
Yes. Many cues are learned conventions, so someone who has never used a hamburger menu may not know what it opens. Test with the people you actually design for.
Intuitive design in UX is an interface people can use correctly without instructions, because it matches what they already know and expect.
Usability in UX is how easily and satisfyingly specific users can reach their goals with a product, measured by learnability, efficiency and error rates.
Consistency in UX means similar elements look and behave the same way across a product, so users can apply what they learned in one place everywhere else.
Heuristics in UX are broad rules of thumb for good interface design, used to judge a product and spot usability problems without running a full user study.
A mental model in UX is a person's internal belief about how a system works, which shapes what they expect to happen when they use it.
UI elements in UX are the individual building blocks of an interface, such as buttons, text fields, menus and icons, that people see and interact with.
Found this useful? A GitHub star helps other designers find it.