Quick Answer
An affordance is a possible action created by the relationship between a person and an object or environment. A signifier is a perceivable cue that communicates where or how that action can happen.
In a user interface:
- A control affords activation if the user can activate it.
- Its shape, label, border, icon, position, or motion can signify that it is interactive.
The short version of affordance vs. signifier is:
Affordance is what can be done. A signifier communicates what to do.
Design teams often call a visual cue an “affordance,” but “signifier” is usually the more precise term. A raised button style, underlined link, drag handle, or “Swipe to delete” hint does not create the action by itself. It helps users perceive the available action.
Affordance vs. Signifier
| Concept | Core question | UI example |
|---|---|---|
| Affordance | What action is possible for this user? | A list item can be reordered by dragging |
| Signifier | What communicates the action? | A visible drag handle and “Reorder” label |
| Constraint | What prevents an invalid action? | The item cannot be dragged outside its group |
| Feedback | What confirms the action? | The item moves and its new position is announced |
These concepts work together, but they solve different problems.
An affordance can exist without an effective signifier. A card may be clickable, yet look like static content. A signifier can also promise an affordance that does not exist. Blue underlined text may look like a link but do nothing.
Both mismatches create friction: hidden possibility in the first case, false expectation in the second.
What an Affordance Means
The psychologist James J. Gibson introduced affordance as a relationship between an actor and the environment. The same object can afford different actions to different people, depending on their abilities, tools, and situation.
A high shelf may afford reaching for one person but not another. A keyboard shortcut may afford an action for someone using a hardware keyboard, while offering no usable path to a touch-only user.
This relational idea matters in UX. It prevents teams from treating affordance as a decorative property that can simply be “added” to a screen. The relevant question is not only, “Does the system support this action?” It is also:
- Can this user perform it with their input method?
- Is it available in the current state?
- Does permission or account status allow it?
- Can assistive technology reach and operate it?
An implementation may technically support an action without affording it to every user.
What a Signifier Means in UX
A signifier is evidence people can perceive and interpret. It points toward an available action, an interaction location, or a method of acting.
Common UI signifiers include:
- A button shape around an action label.
- Blue underlined text for a link.
- A text-field border and visible label.
- A drag handle beside a movable item.
- A chevron beside an expandable row.
- A cursor change on a desktop interface.
- Helper text that explains a required format.
- Motion that reveals an element can be swiped.
Signifiers can be deliberate or incidental. For example, a partially visible card at the edge of a carousel may unintentionally signal that more content exists horizontally.
Strong signifiers draw on conventions users already know. Consistency reduces the amount of learning required, but convention is not a substitute for accessible semantics or clear feedback.
Perceived Affordance and Signifier
“Perceived affordance” describes what users believe they can do. In practical interface critique, this often overlaps with discussion of signifiers.
The distinction remains useful:
- The affordance concerns the actual relationship and action possibility.
- The signifier is the perceivable information that helps form the user’s belief.
- The perceived affordance is the user’s interpretation of what seems possible.
Suppose a plain card opens a detail page when clicked. The action exists, so there is an affordance. If the card has no link styling, label, focus state, or other cue, the signifiers are weak. Many users may not perceive the affordance.
Now suppose a disabled button still has vivid action styling and a pointer cursor. The signifiers suggest activation, but the affordance is absent in that state.
Practical UI Examples
Button
A button affords activation. Its boundary, label, contrast, position, hover state, and pressed state signify that action.
The button still needs native semantics or an equivalent accessible implementation. A rounded rectangle drawn with a non-interactive element may look actionable but fail for keyboard and assistive-technology users.
Link
A link affords navigation. Underlining, color, meaningful link text, and placement in a navigation context can signify that destination.
Color alone is fragile. Users with color-vision differences may not perceive it, and branded text colors can be mistaken for emphasis.
Drag and Drop
A reorderable item affords movement. A handle, cursor, instruction, or slight movement can signify dragging.
Drag should not be the only method. Provide keyboard controls or explicit Move actions so the same result is available without precise pointer movement.
Text Field
A field affords text entry when it is enabled and operable. Its border, label, caret, placeholder, and focus treatment can signify input.
A placeholder alone is a weak label because it disappears during entry and may have low contrast.
Hidden Gesture
A list row may afford swipe actions, but a completely hidden gesture provides little evidence. An initial hint, partial reveal, onboarding cue, or visible alternative action can make the behavior discoverable.
How to Design Effective Signifiers
1. Start With the Intended Action
Name the action before styling the control. Ask what users need to do, in which state, and with which input methods.
2. Use Familiar Conventions
Make buttons look and behave like buttons. Make links identifiable as links. Use established component patterns unless a new interaction provides a clear benefit.
Familiarity is especially important for frequent and high-consequence actions.
3. Combine Cues
Do not rely on one subtle signal. A useful control can combine shape, text, iconography, contrast, position, and state change.
This does not mean adding decoration everywhere. It means giving each necessary action enough evidence to be understood.
4. Match the Promise to the Behavior
Every signifier creates an expectation. If an element looks draggable, it should drag. If it looks like a link, it should navigate. If it is unavailable, its state and the path to availability should be understandable.
5. Provide Feedback After Action
Signifiers help users begin. Feedback helps them know the action worked. A pressed state, loading state, success message, changed value, or moved object completes the interaction loop.
6. Test Discovery, Not Only Completion
A usability test can fail before a participant attempts the task. Observe whether people can find the action without coaching.
Useful questions include:
- Where would you click to continue?
- What do you think can be changed here?
- What do you expect this control to do?
- How would you perform the same action without a mouse?
Accessibility and Inclusive Signifiers
A signifier is only useful if the user can perceive it.
- Do not use color alone to communicate interactivity or state.
- Keep visible focus indicators for keyboard users.
- Give icon-only controls accessible names.
- Use native elements so roles and states are exposed programmatically.
- Pair pointer gestures with keyboard and touch alternatives.
- Avoid instructions based only on visual location, such as “click the green item on the right.”
- Preserve sufficient contrast for boundaries, text, and focus indicators.
Accessibility also affects the affordance itself. If a control looks clear but cannot be reached with a keyboard, the action is not meaningfully afforded to keyboard-only users.
Diagnostic Checklist
When an interaction is confusing, ask:
Common Mistakes
Calling Every Visual Cue an Affordance
A shadow, underline, or icon is usually a signifier. Precision helps teams diagnose whether the problem is missing functionality or missing communication.
Designing False Signifiers
Decorative text that looks like a link and cards that appear clickable but are not teach users to distrust the interface.
Removing Cues for Minimalism
An interface is not simpler if users must click experimentally to discover what works. Remove unnecessary decoration, but preserve the evidence required for action.
Assuming Pointer Behavior Is Universal
Hover and cursor changes are unavailable to many touch and keyboard users. Essential actions need cues and operation methods that work across input modes.
Forgetting State
A control’s affordance can change with permissions, loading, selection, or system state. Signifiers must change with it without becoming ambiguous.
Related UIXHERO References
- Browse more concepts in the UX Reference hub.
- See how a control communicates persistent state in Toggle Button UI.
- Learn how interfaces reveal secondary actions in Progressive Disclosure in UX.
External References
FAQ
What is the difference between affordance and signifier?
An affordance is an action made possible by the relationship between a person and an object or environment. A signifier is a perceivable cue that communicates the action or where to perform it.
What is a signifier in UX?
A signifier in UX is visual, auditory, tactile, or textual information that helps users understand how to interact. Button boundaries, link underlines, drag handles, labels, and focus states are common examples.
Is a button an affordance or a signifier?
A button can involve both concepts. Its ability to be activated is an affordance. Its visible shape, label, and interaction states are signifiers that communicate the action.
Can an affordance exist without a signifier?
Yes. An action can be technically possible but difficult to discover because the interface provides weak or missing cues. Hidden swipe gestures and clickable cards that look static are common examples.
Why does the distinction matter to designers?
It separates two types of failure. If the action is unavailable, the affordance needs to change. If the action exists but users cannot find or understand it, the signifiers need to improve.