Affordances in UX Design: Types, Examples & Best Practices (2026)
Users need visual cues to understand what they can do on a screen and how to do it. These cues — called affordances — are the backbone of intuitive interface design. A well-designed affordance makes an action obvious without requiring labels, tutorials, or guesswork.
This guide explains what affordances are, breaks down the six types with real-world examples, and offers practical tips for designing affordances that reduce user errors and increase engagement.
Want to prototype and test affordances with realistic interactions? Try UXPin free — build high-fidelity prototypes with States, Variables, and Conditional Interactions that behave like the real product.
What Is an Affordance in UX Design?
An affordance is a property of an object that suggests how it can be used. The concept originates from psychologist James J. Gibson and was popularized in design by Don Norman. In everyday life, a door handle’s shape tells you whether to push or pull. A coin slot tells you to insert something.
In UI and UX design, affordances help users understand available actions without relying on labels or instructions. A button with depth and shadow affords clicking. A text field with a placeholder affords typing. When designed well, affordances reduce cognitive load and make interfaces feel intuitive.
Affordance vs. Signifier — Key Differences
- Affordance: The actual possibility of an action (a button can be clicked).
- Signifier: A cue that communicates the affordance exists (the button’s label, colour, or shadow tells you it can be clicked).
As Don Norman explains, a signifier indicates that an affordance is present. Microcopy like “Click to create an account” is a signifier that points to the affordance of a clickable button.
Six Types of Affordances in UX Design
1. Explicit Affordances
Explicit affordances use physical appearance or language to make actions obvious. High-contrast buttons that resemble real-world buttons afford clicking. Input fields labelled “Enter email address” afford text entry.
Best for: Onboarding flows, first-time users, and any action where clarity is critical.
2. Hidden Affordances
Hidden affordances reveal themselves only after a specific action — hovering, clicking, or long-pressing. Dropdown menus are a prime example: the full menu appears only when users interact with the parent element.
Design consideration: Hidden affordances reduce visual clutter and establish hierarchy, but they risk being undiscoverable. Reserve them for secondary actions, never for critical tasks.
3. Pattern Affordances
Pattern affordances leverage conventions users already recognize. A website logo in the top-left corner affords navigation home. Underlined or differently-coloured text affords a hyperlink. A hamburger icon affords a hidden navigation menu.
Key principle: Patterns provide mental shortcuts. Breaking established patterns forces users to relearn interactions — do so only with strong justification.
4. Metaphorical Affordances
These affordances use real-world objects as metaphors for digital actions. A magnifying glass icon affords search. An envelope icon affords email. A trash-can icon affords deletion.
Context matters — a magnifying glass next to an input field means “search,” but inside a document viewer, it means “zoom.”
5. Negative Affordances
Negative affordances signal that an action is not available. Greyed-out buttons, disabled form fields, and reduced-opacity elements all communicate inactivity.
Common use case: A “Submit” button remains greyed out until all required fields are completed, guiding users through the correct sequence.
6. False Affordances
False affordances appear to suggest one action but deliver another — or no action at all. Coloured, underlined text that isn’t actually a link is a false affordance.
Avoid false affordances. They cause user errors, erode trust, and lower conversion rates.
How to Design Effective Affordances
- Research your users. Understand their digital literacy, context, and expectations.
- Make affordances logical and clear. Users should intuitively understand what each element does.
- Use signifiers generously. Text labels, shadows, colour contrast, and hover effects reinforce affordances.
- Follow established conventions. Pattern affordances work because users already know them.
- Use size and prominence to signal priority. Primary actions should have the most visually prominent affordances.
- Test with real prototypes. Static mockups can’t reveal affordance problems.
Prototyping Affordances with UXPin
Affordances are inherently interactive — you can’t fully evaluate them in static mockups. UXPin lets you build high-fidelity prototypes where hover states, disabled states, dropdown reveals, and conditional interactions all behave like the final product.
With UXPin Merge, you can prototype using your actual production components, so the affordances you test in design are identical to what users experience in the shipped product. Forge, UXPin’s AI assistant, can generate interactive UI layouts from a text prompt — using real components from your design system.
Sign up for a free trial of UXPin and start testing affordances with interactive prototypes today.
Frequently Asked Questions
What is an affordance in UX design?
An affordance is a property of an interface element that suggests how it can be used. For example, a raised button with a shadow affords clicking, and a text field with a placeholder affords typing.
What is the difference between an affordance and a signifier?
An affordance is the actual possibility of an action (a button can be clicked). A signifier is the visual cue that communicates that possibility (the button’s label, colour, or shadow).
What are the main types of affordances?
There are six main types: explicit (obvious visual cues), hidden (revealed by interaction), pattern (based on conventions), metaphorical (real-world object metaphors), negative (signals inactivity), and false (misleading cues that cause errors).
Why are false affordances bad for UX?
False affordances mislead users into expecting an action that doesn’t happen. They cause user errors, erode trust, increase frustration, and lower conversion rates.
How can I test affordances in my design?
Use interactive prototyping tools like UXPin to build prototypes with realistic hover states, disabled states, and conditional interactions. Conduct usability testing to observe whether users discover and correctly interpret your affordances.
What is a negative affordance? Give an example.
A negative affordance communicates that an action is currently unavailable. The most common example is a greyed-out submit button that only becomes active after all required form fields are completed.
