Affordances & Signifiers
CanonicalConfidence
Cognitive Load
Low
Evidence
production validated
Impact
component
Ethical Guardrail
Never rely on hidden gestures or invisible interactions. Every interactive element must have both a real affordance and a visible signifier.
Design Intent
People do not read instructions. They look at an object or interface and instantly understand what actions are possible based on its perceived and actual properties. Affordances are the possible actions; Signifiers are the visible cues that communicate those affordances.
Psychology Principle
People look at an object or interface and instantly understand what actions are possible based on perceived and actual properties.
Description
Make every interactive element instantly understandable through clear affordances (what it does) and signifiers (how it looks).
When to use
Every interactive element in every interface -- buttons, links, sliders, cards, drag targets, etc.
Example
Figma Component: Blue border + drag handle (signifier) + actual draggable behavior (affordance) + immediate shadow lift on hover.
Autonomy Compatibility
Behavioral Objective
Users instantly understand and correctly interact with every element without hesitation or error.
- Reduced cognitive load on every screen
- Higher first-try success rate
- Fewer support questions and frustration moments
Target Actor
role
Everyday user
environment
Novel or fast-moving interfaces
emotional baseline
Expect interfaces to be self-explanatory
ai familiarity
medium
risk tolerance
low
Execution Model
affordance_definition
Define exactly what real actions the element supports.
Element looks interactive but does nothing.
signifier_design
Make the affordance visually obvious.
User does not recognize the element as interactive.
consistency_and_feedback
Ensure signifiers are consistent across the entire product.
Same element type has different signifiers in different places.
Failure Modes
False affordance -- looks clickable but isn't
Remove or clearly disable the visual cue
Missing signifier for a real affordance
Add clear label, icon, or hover state
Overloaded signifiers create visual noise
Use subtle consistent cues only
Cultural or accessibility differences
Support multiple signifier styles -- color + shape + label
Signifiers become invisible on certain devices
Test across all target screen sizes and themes
Agent Decision Protocol
Triggers
- User hesitates or mis-interacts with a new element
- Error rate spikes on interactive components
- User asks 'How do I click this?' or 'What does this do?'
Escalation Strategy
L1: Diagnose false affordance or missing signifier via behavioral_signals
L2: Nudge -- add a tooltip or subtle hover state to clarify the element
L3: Restructure -- redesign the signifier to match platform conventions
L4: Constrain -- enforce design system consistency audit across all screens
L5: Yield -- flag for human UX designer review
Example
User hovers over a card but does nothing -> agent adds a subtle lift shadow + 'Tap to open' label.
Behavioral KPIs
Primary
- First-interaction success rate
- Time to first correct action on new screens
- Error rate on interactive elements
Risk
- User confusion reports or support tickets
- Mis-taps or accidental actions
Trust
- User-reported 'this just makes sense'
- Autonomy Dial usage when agent suggests UI elements
Behavioral Signals
false_affordance
element_hovered=true AND interaction_attempted=true AND interaction_success=false
click_on_non_interactive_element=true AND repeat_count > 1
missing_signifier
interactive_element_visible=true AND element_hovered=false AND dwell_time > 10s
task_completion=false AND correct_element_never_interacted=true
clear_signifier
element_hovered=true AND interaction_success=true AND time_to_interact < 2s
first_interaction_success=true AND error_rate < 5%
Decay Monitoring
Revalidate when
- New interaction paradigms emerge
- Design system evolves or new devices are supported
- User base includes more novice or diverse accessibility needs
Decay signals
- Rising mis-interaction rates
- Users ignoring or misusing elements
- Feedback that 'the interface used to be clearer'
Pattern Relationships
Supports
Amplifies
Requires
Conflicts with