Affordance
An action can be available without being obvious. A product image may support zooming, but the person viewing it still needs to discover that possibility.
An affordance and the cue communicating it are different things. A magnifying-glass icon or label provides a signifier; it does not guarantee that the interaction exists or works.
What it means
The concept describes possibilities for action, rather than a button's appearance. Its usefulness depends on the person's capabilities and the context of use.
Origin of the concept
The term comes from ecological psychology and was developed in The Ecological Approach to Visual Perception, originally published in 1979. It describes opportunities for action in relation to an organism’s capabilities. Applying it to interface design requires separating an available action from the cues that help people discover it: a suggestive appearance cannot replace working behaviour.
Application in UX
Make controls recognisable and keep their behaviour consistent. A surface that looks clickable should respond; an unavailable option should communicate its state. Check keyboard operation too.
Evaluate the control in normal, disabled and error states. The same action should be identifiable without relying exclusively on colour or hovering. A stable label helps people form expectations; if an element changes function between screens, someone may infer an opportunity for action that the system no longer provides.
Application in ecommerce
A product page may support enlarging photographs, choosing a size or revealing delivery information. Clear labels help shoppers discover those actions without guessing which elements are interactive.
During navigation, shoppers need to distinguish links, filters and purchasing actions. At checkout, an expandable summary should communicate both its availability and current state. Before attributing conversion improvements to button styling, observe whether people recognise the action, can perform it and understand what will happen next.
Practical example
Imagine a product photograph that opens an enlarged view. Adding “Enlarge image” communicates the action; making the control accessible enables it. This is a design proposal, not a measured outcome.
Common mistakes
Treating affordance as decoration creates elements that appear interactive but do not respond. Other mistakes include using icons without context or hiding important actions until someone hovers. Avoid assuming a cue is obvious to everyone: previous experience, device and individual capabilities influence how an action is interpreted.