{"id":22464,"date":"2026-06-01T03:00:00","date_gmt":"2026-06-01T10:00:00","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=22464"},"modified":"2026-06-01T07:01:17","modified_gmt":"2026-06-01T14:01:17","slug":"affordances-user-interaction","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/affordances-user-interaction\/","title":{"rendered":"Affordances in UX Design: 6 Types, Real-World Examples &#038; Best Practices (2026)"},"content":{"rendered":"<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"512\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/05\/Affordances-101-1024x512.png\" alt=\"Affordances in UX Design \u2014 types, examples, and best practices\" class=\"wp-image-44590\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/05\/Affordances-101-1024x512.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/05\/Affordances-101-600x300.png 600w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/05\/Affordances-101-768x384.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/05\/Affordances-101.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<p>Every time a user lands on a new screen, they need to instantly understand what they can do and how to do it. The visual cues that make this possible are called <strong>affordances<\/strong> \u2014 and they are the backbone of intuitive interface design. A well-designed affordance makes an action obvious without requiring labels, tutorials, onboarding tours, or guesswork.<\/p>\n<p>This guide explains what affordances are, where the concept comes from, breaks down the <strong>six types of affordances<\/strong> with real-world UI examples, and provides practical design principles for creating interfaces where the right action is always the obvious one.<\/p>\n<p>Want to prototype and test affordances with realistic interactions \u2014 not flat mockups? <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noopener\">Try UXPin free<\/a> \u2014 build high-fidelity prototypes with States, Variables, and Conditional Interactions that behave like the real product.<\/p>\n<section class=\"try-uxpin-banner\">\n<div class=\"try-uxpin__container\">\n<div class=\"try-uxpin__left\">\n<p class=\"try-uxpin__heading\">Build advanced prototypes<\/p>\n<p class=\"try-uxpin__text\">Design better products with States, Variables, Auto Layout and more.<\/p>\n<p><a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noopener\"><button class=\"try-uxpin__button\">Try UXPin<\/button><\/a><\/div>\n<div><img decoding=\"async\" src=\"https:\/\/uxpin.com\/studio\/wp-content\/themes\/uxpin-juggernaut\/img\/cta-banner-signup.png\" class=\"try-uxpin__image\" alt=\"Try UXPin\"><\/div>\n<\/div>\n<\/section>\n<style>\n.try-uxpin-banner { margin: 40px 0; }\n.try-uxpin__container { display: flex; max-width: 689px; height: 210px; padding: 20px 20px 20px 24px; border: 2px solid black; border-radius: 4px; align-items: center; justify-content: space-between; background-color: white; box-shadow: 10px 10px black; }\n.try-uxpin__left { width: 54%; }\n.try-uxpin__heading { font-size: 28px !important; font-weight: bold; }\n.try-uxpin__left p { margin: 10px 0 !important; color: black !important; }\n.try-uxpin__text { margin: 0 !important; font-size: 18px !important; line-height: 22px !important; }\n.try-uxpin__button { width: 135px; height: 44px; background: black; margin: 10px 0; padding: 10px 20px; border: none; border-radius: 2px; color: white; font-size: 16px; text-align: center; cursor: pointer; }\n.try-uxpin__image { max-width: 320px !important; height: 200px; margin-right: -21px; margin-bottom: -6px; }\n@media (max-width: 760px) { .try-uxpin__container { height: auto; margin: 10px; } }\n@media (max-width: 500px) { .try-uxpin__container { flex-direction: column; } .try-uxpin__left { width: 100%; } }\n<\/style>\n<h2 id=\"what-is-an-affordance\">What Is an Affordance in UX Design?<\/h2>\n<p>An <strong>affordance<\/strong> is a property of an object \u2014 physical or digital \u2014 that suggests how it can be used. The concept was introduced by psychologist <strong>James J. Gibson<\/strong> in 1977 and later adapted for design by <strong>Don Norman<\/strong> in his landmark book <em>The Design of Everyday Things<\/em>.<\/p>\n<p>In everyday life, a door handle&#8217;s shape tells you whether to push or pull. A coin slot tells you to insert a flat, round object. These are physical affordances \u2014 the object&#8217;s form communicates its function.<\/p>\n<p>In UI and UX design, affordances work the same way. A <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/button-design\/\" target=\"_blank\" rel=\"noopener\">button<\/a> with depth and shadow affords clicking. A text field with a blinking cursor and placeholder text affords typing. A slider track with a draggable thumb affords adjustment. When designed well, affordances reduce cognitive load, minimise errors, and make interfaces feel intuitive on first contact.<\/p>\n<h2 id=\"affordance-vs-signifier\">Affordance vs. Signifier: Understanding the Difference<\/h2>\n<p>Don Norman later refined the concept by distinguishing between affordances and signifiers \u2014 a distinction that&#8217;s critical for UI designers:<\/p>\n<ul>\n<li><strong>Affordance:<\/strong> The actual possibility of an action. A button <em>can<\/em> be clicked \u2014 that&#8217;s the affordance. It exists regardless of whether the user knows about it.<\/li>\n<li><strong>Signifier:<\/strong> A cue that communicates the affordance to the user. The button&#8217;s label, colour, shadow, hover effect, or cursor change <em>tells the user<\/em> it can be clicked \u2014 that&#8217;s the signifier.<\/li>\n<\/ul>\n<p>An affordance can exist without a good signifier (a clickable area with no visual indicator), and a signifier can exist without a real affordance (styled text that looks like a link but isn&#8217;t clickable). Good design pairs a real affordance with a clear signifier. <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/microcopy-that-converts\/\" target=\"_blank\" rel=\"noopener\">Microcopy<\/a> like &#8220;Click to create an account&#8221; is an example of a signifier reinforcing the affordance of a clickable button.<\/p>\n<h2 id=\"types-of-affordances\">The Six Types of Affordances in UX Design<\/h2>\n<h3 id=\"explicit-affordances\">1. Explicit Affordances<\/h3>\n<p>Explicit affordances use visual appearance or direct language to make actions unmistakably obvious. A high-contrast button that looks raised and clickable affords clicking. An input field labelled &#8220;Enter your email address&#8221; with a visible border and placeholder text affords text entry.<\/p>\n<p><strong>Best for:<\/strong> Onboarding flows, first-time user experiences, primary calls-to-action, and any action where clarity is critical to conversion or task completion.<\/p>\n<p><strong>Design tip:<\/strong> Explicit affordances should be the default for primary actions. Use strong visual contrast, familiar shapes (pill buttons, bordered input fields), and descriptive labels.<\/p>\n<h3 id=\"hidden-affordances\">2. Hidden Affordances<\/h3>\n<p>Hidden affordances reveal themselves only after a specific trigger action \u2014 hovering, clicking, long-pressing, swiping, or right-clicking. Dropdown menus, context menus, swipe-to-delete gestures, and tooltip reveals are all hidden affordances.<\/p>\n<p><strong>Design consideration:<\/strong> Hidden affordances reduce visual clutter and establish information hierarchy, but they carry a discoverability risk. Users may never find them unless another signifier hints at their existence.<\/p>\n<p><strong>Rule of thumb:<\/strong> Reserve hidden affordances for secondary or power-user actions \u2014 never for critical tasks or primary navigation paths.<\/p>\n<h3 id=\"pattern-affordances\">3. Pattern Affordances<\/h3>\n<p>Pattern affordances leverage conventions that users already recognise from years of web and app usage. A website logo in the top-left corner affords navigation home. Underlined or differently-coloured text affords a hyperlink. A hamburger icon (\u2630) affords opening a navigation menu. A heart icon affords &#8220;favouriting&#8221; or &#8220;liking.&#8221;<\/p>\n<p><strong>Key principle:<\/strong> Pattern affordances provide mental shortcuts \u2014 they reduce learning time to near zero. Breaking established patterns forces users to relearn basic interactions, which should only be done with strong justification and user testing to validate the alternative.<\/p>\n<h3 id=\"metaphorical-affordances\">4. Metaphorical Affordances<\/h3>\n<p>Metaphorical affordances use real-world objects as visual metaphors for digital actions. A magnifying glass icon affords search. An envelope icon affords messaging or email. A trash-can icon affords deletion. A floppy disk icon (still!) affords saving.<\/p>\n<p><strong>Context matters enormously.<\/strong> A magnifying glass next to a search input means &#8220;search,&#8221; but inside a PDF viewer or map application, it means &#8220;zoom.&#8221; The surrounding UI context determines which real-world metaphor the user maps to the icon.<\/p>\n<p><strong>Design tip:<\/strong> Test metaphorical affordances with your actual users, especially across cultures. Some metaphors are culturally specific or generationally dependent (the floppy disk is increasingly unrecognisable to younger users).<\/p>\n<h3 id=\"negative-affordances\">5. Negative Affordances<\/h3>\n<p>Negative affordances signal that an action is <em>not available<\/em> \u2014 either temporarily or permanently. Greyed-out buttons, disabled form fields, reduced-opacity elements, and &#8220;not-allowed&#8221; cursor changes all communicate inactivity.<\/p>\n<p><strong>Common use cases:<\/strong><\/p>\n<ul>\n<li>A &#8220;Submit&#8221; button remains greyed out until all required fields are completed, guiding users through the correct sequence<\/li>\n<li>A premium feature is visible but dimmed, with a lock icon and &#8220;Upgrade to access&#8221; tooltip<\/li>\n<li>Unavailable menu options are shown in lighter text to maintain spatial consistency while communicating constraint<\/li>\n<\/ul>\n<p><strong>Design tip:<\/strong> Always pair a negative affordance with a reason. A greyed-out button with no explanation frustrates users. Add a tooltip or inline message explaining why the action is unavailable and what the user needs to do to enable it.<\/p>\n<h3 id=\"false-affordances\">6. False Affordances<\/h3>\n<p>False affordances appear to suggest one action but deliver another \u2014 or no action at all. Coloured, underlined text that isn&#8217;t actually a link is a false affordance. An image that looks like a button but doesn&#8217;t respond to clicks is a false affordance. A decorative element styled like a form field that doesn&#8217;t accept input is a false affordance.<\/p>\n<p><strong>False affordances are always a design failure.<\/strong> They cause user errors, erode trust, increase frustration, and directly damage conversion rates. Every element in your UI should either genuinely afford an action or clearly not look like it does.<\/p>\n<h2 id=\"how-to-design-affordances\">How to Design Effective Affordances: 8 Practical Principles<\/h2>\n<ol>\n<li><strong>Research your users.<\/strong> Understand their digital literacy, device context, and expectations. A power user and a first-time visitor need different affordance strategies.<\/li>\n<li><strong>Make primary affordances explicit.<\/strong> The most important action on any screen should have the most visually obvious affordance \u2014 strong contrast, familiar shape, descriptive label.<\/li>\n<li><strong>Use signifiers generously.<\/strong> Text labels, shadows, colour contrast, hover effects, cursor changes, and microanimations all reinforce that an affordance exists.<\/li>\n<li><strong>Follow established conventions.<\/strong> Pattern affordances work because users already know them. Don&#8217;t reinvent the hamburger menu or move the close button to the bottom of a modal.<\/li>\n<li><strong>Use size and visual weight to signal priority.<\/strong> Primary actions get the largest, highest-contrast affordance. Secondary actions get smaller, lower-contrast treatment.<\/li>\n<li><strong>Explain negative affordances.<\/strong> When an action is disabled, always communicate why and how to enable it.<\/li>\n<li><strong>Eliminate false affordances ruthlessly.<\/strong> Audit your UI for elements that look interactive but aren&#8217;t. Every false affordance is a trust erosion.<\/li>\n<li><strong>Test with interactive prototypes.<\/strong> Static mockups cannot reveal affordance problems \u2014 you need hover states, disabled states, transitions, and conditional logic to evaluate whether users discover and correctly interpret your affordances.<\/li>\n<\/ol>\n<h2 id=\"affordances-in-ai-generated-interfaces\">Affordances in AI-Generated Interfaces<\/h2>\n<p>As AI-generated UI becomes more common in 2026, affordance design takes on new importance. AI tools that generate interfaces from text prompts or images must produce elements with correct affordances \u2014 buttons that look like buttons, links that look like links, disabled states that communicate constraint.<\/p>\n<p>This is where the quality of the underlying component library matters enormously. AI tools that generate from generic pixels often produce elements with weak or inconsistent affordances. Tools like <a href=\"https:\/\/www.uxpin.com\/forge\" target=\"_blank\" rel=\"noopener\">Forge<\/a> generate from real, production-tested components that already encode correct affordance patterns \u2014 hover states, focus rings, disabled variants, and responsive behaviours are all built into the components themselves. The affordances are correct by construction, not by luck.<\/p>\n<h2 id=\"prototyping-affordances\">Prototyping and Testing Affordances With UXPin<\/h2>\n<p>Affordances are inherently interactive \u2014 you simply cannot evaluate them in static mockups. Does the hover state clearly communicate clickability? Does the disabled button explain why it&#8217;s inactive? Does the dropdown reveal feel discoverable or hidden?<\/p>\n<p><a href=\"https:\/\/www.uxpin.com\/\" target=\"_blank\" rel=\"noopener\">UXPin<\/a> lets you build high-fidelity prototypes where hover states, disabled states, dropdown reveals, conditional interactions, and microanimations all behave like the final product. With <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noopener\">UXPin Merge<\/a>, you can prototype using your actual production components \u2014 so the affordances you test in design are identical to what users experience in the shipped product. There&#8217;s no gap between prototype behaviour and production behaviour.<\/p>\n<p><a href=\"https:\/\/www.uxpin.com\/forge\" target=\"_blank\" rel=\"noopener\">Forge<\/a>, UXPin&#8217;s AI assistant, can generate interactive UI layouts from a text prompt \u2014 using real components from your design system. Because those components already have correct affordance patterns built in (hover states, focus management, disabled variants), the generated layouts have strong affordances from the first iteration.<\/p>\n<p><a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noopener\">Sign up for a free trial of UXPin<\/a> and start testing affordances with interactive, code-backed prototypes.<\/p>\n<h2 id=\"faq\">Frequently Asked Questions<\/h2>\n<h3>What is an affordance in UX design?<\/h3>\n<p>An <strong>affordance<\/strong> is a property of an interface element that suggests how it can be used. For example, a raised button with a shadow affords clicking, a text field with a blinking cursor affords typing, and a slider track with a draggable thumb affords adjustment. The concept was popularised by Don Norman and originates from psychologist James J. Gibson&#8217;s work on perception.<\/p>\n<h3>What is the difference between an affordance and a signifier?<\/h3>\n<p>An <strong>affordance<\/strong> is the actual possibility of an action \u2014 a button <em>can<\/em> be clicked. A <strong>signifier<\/strong> is the visual cue that communicates that possibility to the user \u2014 the button&#8217;s label, colour, shadow, or hover effect <em>tells you<\/em> it can be clicked. Good design pairs real affordances with clear signifiers so users understand available actions instantly.<\/p>\n<h3>What are the six types of affordances?<\/h3>\n<p>The six types are: <strong>explicit<\/strong> (obvious visual cues like buttons), <strong>hidden<\/strong> (revealed by interaction, like dropdown menus), <strong>pattern<\/strong> (based on conventions, like underlined links), <strong>metaphorical<\/strong> (real-world object metaphors, like a trash-can icon for delete), <strong>negative<\/strong> (signals that an action is unavailable, like greyed-out buttons), and <strong>false<\/strong> (misleading cues that cause user errors).<\/p>\n<h3>Why are false affordances bad for UX?<\/h3>\n<p>False affordances mislead users into expecting an action that doesn&#8217;t happen \u2014 like clicking coloured text that isn&#8217;t actually a link. They cause user errors, erode trust, increase frustration, and directly reduce conversion rates. Every false affordance in your UI is a point where users lose confidence in the interface.<\/p>\n<h3>How can I test affordances in my design?<\/h3>\n<p>Use interactive prototyping tools like <a href=\"https:\/\/www.uxpin.com\/\" target=\"_blank\" rel=\"noopener\">UXPin<\/a> to build prototypes with realistic hover states, disabled states, dropdown reveals, and conditional interactions. Then conduct usability testing to observe whether users discover and correctly interpret your affordances. Static mockups cannot reliably reveal affordance problems.<\/p>\n<h3>What is a negative affordance? Give an example.<\/h3>\n<p>A <strong>negative affordance<\/strong> communicates that an action is currently unavailable. The most common example is a greyed-out &#8220;Submit&#8221; button that only becomes active (full colour, clickable) after all required form fields are completed. Well-designed negative affordances also explain <em>why<\/em> the action is unavailable, using tooltips or inline helper text.<\/p>\n<p><script type=\"application\/ld+json\">\n{\"@context\":\"https:\/\/schema.org\",\"@type\":\"Article\",\"headline\":\"Affordances in UX Design: 6 Types, Examples & How to Design Them (2026)\",\"description\":\"Learn what affordances are in UX design, the six types (explicit, hidden, pattern, metaphorical, negative, false), real-world examples, and best practices for designing intuitive user interactions.\",\"datePublished\":\"2023-05-01\",\"dateModified\":\"2026-06-01\",\"author\":{\"@type\":\"Organization\",\"name\":\"UXPin\",\"url\":\"https:\/\/www.uxpin.com\"},\"publisher\":{\"@type\":\"Organization\",\"name\":\"UXPin\",\"url\":\"https:\/\/www.uxpin.com\",\"logo\":{\"@type\":\"ImageObject\",\"url\":\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2020\/06\/uxpin-logo.svg\"}},\"mainEntityOfPage\":\"https:\/\/www.uxpin.com\/studio\/blog\/affordances-user-interaction\/\"}\n<\/script><br \/>\n<script type=\"application\/ld+json\">\n{\"@context\":\"https:\/\/schema.org\",\"@type\":\"FAQPage\",\"mainEntity\":[{\"@type\":\"Question\",\"name\":\"What is an affordance in UX design?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"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 blinking cursor affords typing. The concept was popularised by Don Norman.\"}},{\"@type\":\"Question\",\"name\":\"What is the difference between an affordance and a signifier?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"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 tells you it can be clicked).\"}},{\"@type\":\"Question\",\"name\":\"What are the six types of affordances?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"The six types are: explicit (obvious visual cues), hidden (revealed by interaction), pattern (based on conventions), metaphorical (real-world object metaphors), negative (signals unavailability), and false (misleading cues that cause errors).\"}},{\"@type\":\"Question\",\"name\":\"Why are false affordances bad for UX?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"False affordances mislead users into expecting an action that doesn't happen. They cause errors, erode trust, increase frustration, and directly reduce conversion rates.\"}},{\"@type\":\"Question\",\"name\":\"How can I test affordances in my design?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"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.\"}},{\"@type\":\"Question\",\"name\":\"What is a negative affordance?\",\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"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.\"}}]}\n<\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Learn what affordances are in UX design, the 6 types (explicit, hidden, pattern, metaphorical, negative, false), real-world UI examples, and practical principles for designing intuitive interactions. Includes guidance on testing affordances with interactive prototypes.<\/p>\n","protected":false},"author":3,"featured_media":44590,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,4,6],"tags":[],"class_list":["post-22464","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-ui-design","category-ux-design"],"yoast_title":"","yoast_metadesc":"Affordances are properties of an object that imply how the object can be used. They help users know what they should do.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.8 (Yoast SEO v27.8) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Affordances in UX Design: 6 Types, Real-World Examples &amp; Best Practices (2026) | UXPin<\/title>\n<meta name=\"description\" content=\"Affordances are properties of an object that imply how the object can be used. They help users know what they should do.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.uxpin.com\/studio\/blog\/affordances-user-interaction\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Affordances in UX Design: 6 Types, Real-World Examples &amp; Best Practices (2026)\" \/>\n<meta property=\"og:description\" content=\"Affordances are properties of an object that imply how the object can be used. They help users know what they should do.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/affordances-user-interaction\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2026-06-01T10:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-06-01T14:01:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/05\/Affordances-101.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"UXPin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@uxpin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"UXPin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/affordances-user-interaction\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/affordances-user-interaction\\\/\"},\"author\":{\"name\":\"UXPin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"headline\":\"Affordances in UX Design: 6 Types, Real-World Examples &#038; Best Practices (2026)\",\"datePublished\":\"2026-06-01T10:00:00+00:00\",\"dateModified\":\"2026-06-01T14:01:17+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/affordances-user-interaction\\\/\"},\"wordCount\":1867,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/affordances-user-interaction\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/05\\\/Affordances-101.png\",\"articleSection\":[\"Blog\",\"UI Design\",\"UX Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/affordances-user-interaction\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/affordances-user-interaction\\\/\",\"name\":\"Affordances in UX Design: 6 Types, Real-World Examples & Best Practices (2026) | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/affordances-user-interaction\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/affordances-user-interaction\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/05\\\/Affordances-101.png\",\"datePublished\":\"2026-06-01T10:00:00+00:00\",\"dateModified\":\"2026-06-01T14:01:17+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"description\":\"Affordances are properties of an object that imply how the object can be used. They help users know what they should do.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/affordances-user-interaction\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/affordances-user-interaction\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/affordances-user-interaction\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/05\\\/Affordances-101.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/05\\\/Affordances-101.png\",\"width\":1200,\"height\":600,\"caption\":\"Affordances 101\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/affordances-user-interaction\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Affordances in UX Design: 6 Types, Real-World Examples &#038; Best Practices (2026)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\",\"name\":\"Studio by UXPin\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\",\"name\":\"UXPin\",\"description\":\"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.\",\"sameAs\":[\"http:\\\/\\\/www.uxpin.com\",\"https:\\\/\\\/x.com\\\/@uxpin\"],\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/hello\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Affordances in UX Design: 6 Types, Real-World Examples & Best Practices (2026) | UXPin","description":"Affordances are properties of an object that imply how the object can be used. They help users know what they should do.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.uxpin.com\/studio\/blog\/affordances-user-interaction\/","og_locale":"en_US","og_type":"article","og_title":"Affordances in UX Design: 6 Types, Real-World Examples & Best Practices (2026)","og_description":"Affordances are properties of an object that imply how the object can be used. They help users know what they should do.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/affordances-user-interaction\/","og_site_name":"Studio by UXPin","article_published_time":"2026-06-01T10:00:00+00:00","article_modified_time":"2026-06-01T14:01:17+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/05\/Affordances-101.png","type":"image\/png"}],"author":"UXPin","twitter_card":"summary_large_image","twitter_creator":"@uxpin","twitter_misc":{"Written by":"UXPin","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/affordances-user-interaction\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/affordances-user-interaction\/"},"author":{"name":"UXPin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"headline":"Affordances in UX Design: 6 Types, Real-World Examples &#038; Best Practices (2026)","datePublished":"2026-06-01T10:00:00+00:00","dateModified":"2026-06-01T14:01:17+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/affordances-user-interaction\/"},"wordCount":1867,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/affordances-user-interaction\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/05\/Affordances-101.png","articleSection":["Blog","UI Design","UX Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/affordances-user-interaction\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/affordances-user-interaction\/","name":"Affordances in UX Design: 6 Types, Real-World Examples & Best Practices (2026) | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/affordances-user-interaction\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/affordances-user-interaction\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/05\/Affordances-101.png","datePublished":"2026-06-01T10:00:00+00:00","dateModified":"2026-06-01T14:01:17+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"description":"Affordances are properties of an object that imply how the object can be used. They help users know what they should do.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/affordances-user-interaction\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/affordances-user-interaction\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/affordances-user-interaction\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/05\/Affordances-101.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/05\/Affordances-101.png","width":1200,"height":600,"caption":"Affordances 101"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/affordances-user-interaction\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"Affordances in UX Design: 6 Types, Real-World Examples &#038; Best Practices (2026)"}]},{"@type":"WebSite","@id":"https:\/\/www.uxpin.com\/studio\/#website","url":"https:\/\/www.uxpin.com\/studio\/","name":"Studio by UXPin","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.uxpin.com\/studio\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e","name":"UXPin","description":"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.","sameAs":["http:\/\/www.uxpin.com","https:\/\/x.com\/@uxpin"],"url":"https:\/\/www.uxpin.com\/studio\/author\/hello\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/22464","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=22464"}],"version-history":[{"count":8,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/22464\/revisions"}],"predecessor-version":[{"id":60059,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/22464\/revisions\/60059"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/44590"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=22464"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=22464"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=22464"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}