Perception and Affordance
Users do not perceive an interface objectively, but interpret it subjectively. Good usability starts with clear affordances and a design based on perceptual psychology.
Definition Affordance
An affordance describes the perceived possibility of interaction that an object offers - regardless of whether this actually exists (according to Norman, 1988).
Affordances in human-computer interaction
Digital interfaces do not have physical properties such as grip or weight. Their interaction possibilities must be conveyed visually. Affordances arise, for example, through:
- Form: A button with depth or shadow invites you to click.
- Symbolism: A recycle bin stands for deletion - even without an explanation.
- Position: Close symbols in the corner follow conventional patterns.
- Movement: Hover effects or animations indicate a reaction.
An interface is well designed when users don’t have to think about what is clickable - they see it intuitively.
Perceived vs. actual affordance
It is not enough for a button to be clickable - it must also look that way. Otherwise the interface remains invisible.
Perception in the UX Context
The human brain structures visual information according to known patterns. These design principles help with UX design:
- Nähe: If elements are close together, they are interpreted as belonging together.
- similarity: The same colors or shapes indicate the same function.
- Geschlossenheit: Incomplete shapes (e.g. borders) are perceived as whole surfaces.
- Continuity: Lines or rows lead visually through the surface.
These principles form the basis for visual hierarchy, orientation and navigability.
Design of Convincing Affordances
A narrative presentation instead of bullet points:
A good interface uses established visual conventions. A link is usually blue and underlined - and should appear that way. If this convention is broken, for example by gray text without underlining, the affordance remains hidden. Users have to guess what is interactive. This increases the cognitive load and reduces usability.
Feedback also plays an important role: a button that shows no visual or auditory reaction when clicked is perceived as unreliable - even if it works technically.
Incorrect affordances are particularly critical. If a text element looks like a link but is not, this leads to frustration. Conversely, hidden affordances - such as unmarked drag-and-drop functions - can lead to incorrect operation.
Practical Example: Link Design
A text link that looks like continuous text, without color, underlining or hover effect, is often overlooked.
Better: The link is highlighted visually (e.g. primary color, underline on hover, changed cursor) and placed contextually (e.g. within a navigation menu).
Conclusion
Affordances and perceptual patterns are not an “aesthetic extra”, but central to the ** usability** of digital products.
UX design must focus on visual clarity, semantic consistency and perceptible interaction - so that systems can be used intuitively and with few errors.
Take Home Message
Good interfaces don’t need to be explained - they show what they can do.
Last modified: 17 June 2025