Evidence rating
Effect score (E): 4/5 Evidence for the underlying principle or measurement method.
Transfer score (T): 3/5 Evidence for reliable results in digital product practice.
Evidence level: High
[Plausible based on UX research] Do not infer perceived affordances from visual conventions alone; test comprehension on the actual interface.
Scale and rating rules
Effect score: 5 established · 4 robust · 3 context-dependent · 2 weak · 1 preliminary.
Transfer score: 5 practice-proven · 4 field-supported · 3 partially supported · 2 plausible · 1 hypothesis.
Without a robust scientific or normative source, E is capped at 3. Blog and agency opinions support at most T=2. If evidence conflicts, the more conservative score applies until justified otherwise.
Evidence level: High = E ≥ 4 and T ≥ 3; Moderate = E ≥ 3; Preliminary = E ≤ 2 or T ≤ 1.
Perception and Affordance
Users infer action possibilities from interface properties and the cues provided. Design can support expectations, but whether cues are understandable also depends on the person and context.
Definition Affordance
An affordance is an action possibility arising from the relationship between environmental properties and an actor’s capabilities. A perceived affordance is an action possibility the person recognizes; the two can differ.
Affordances in human-computer interaction
Digital interfaces have properties that enable or constrain actions; visible cues can also suggest which actions may be possible. Affordances and their perception should therefore be distinguished. Examples of design cues include:
- 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.
A design should make important action possibilities discoverable without assuming that all users interpret a particular visual style in the same way.
Affordance and perception
A technical interaction possibility and a perceived action possibility are not the same. Check cues with users in the relevant context.
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.
Frequently asked questions (FAQ)
What does affordance mean in UX design?
What is the difference between perceived and actual affordance?
Why are affordances important for usability?
Which design principles influence perception?
How can you improve affordances in interface design?
What are examples of false affordances?
Science corner: evidence data
- Setting
- Perception research and interaction design
- Replication status
- Mixed findings
- Evidence level
- High (E=4, T=3)
- Key sources (APA)
-
- Gibson, J. J. (1979). The ecological approach to visual perception. Houghton Mifflin.
- Norman, D. A. (1999). Affordance, conventions, and design. Interactions, 6(3), 38–43. https://doi.org/10.1145/301153.301168
- Gaver, W. W. (1991). Technology affordances. Proceedings of the SIGCHI Conference on Human Factors in Computing Systems, 79–84. https://doi.org/10.1145/108844.108856
- Hartson, H. R. (2003). Cognitive, physical, sensory, and functional affordances in interaction design. Behaviour & Information Technology, 22(5), 315–338. https://doi.org/10.1080/01449290310001592587
- Wagemans, J., Elder, J. H., Kubovy, M., Palmer, S. E., Peterson, M. A., Singh, M., & von der Heydt, R. (2012). A century of Gestalt psychology in visual perception: I. Perceptual grouping and figure–ground organization. Psychological Bulletin, 138(6), 1172–1217. https://doi.org/10.1037/a0029333
- Review date / version
- 2026-11-01 · 1.1
- Next review
- 2027-11-01 (Review cycle: 12 months)
Last modified: 1 November 2026