{"id":6883,"date":"2026-11-02T11:47:46","date_gmt":"2026-11-02T11:47:46","guid":{"rendered":"https:\/\/www.originux.com\/resources\/?p=6883"},"modified":"2026-11-02T11:47:48","modified_gmt":"2026-11-02T11:47:48","slug":"what-is-affordance-in-ux-examples-and-best-practices","status":"publish","type":"post","link":"https:\/\/www.originux.com\/resources\/blog\/what-is-affordance-in-ux-examples-and-best-practices\/","title":{"rendered":"What Is Affordance in UX? Examples and Best Practices"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_81 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.originux.com\/resources\/blog\/what-is-affordance-in-ux-examples-and-best-practices\/#What_Is_Affordance_in_UX\" >What Is Affordance in UX?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.originux.com\/resources\/blog\/what-is-affordance-in-ux-examples-and-best-practices\/#Why_Affordance_Matters\" >Why Affordance Matters<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.originux.com\/resources\/blog\/what-is-affordance-in-ux-examples-and-best-practices\/#Affordance_vs_Signifier\" >Affordance vs Signifier<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.originux.com\/resources\/blog\/what-is-affordance-in-ux-examples-and-best-practices\/#Types_of_Affordance\" >Types of Affordance<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.originux.com\/resources\/blog\/what-is-affordance-in-ux-examples-and-best-practices\/#Real-World_Examples\" >Real-World Examples<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.originux.com\/resources\/blog\/what-is-affordance-in-ux-examples-and-best-practices\/#How_to_Design_Clear_Affordances\" >How to Design Clear Affordances<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.originux.com\/resources\/blog\/what-is-affordance-in-ux-examples-and-best-practices\/#Affordance_Best_Practices\" >Affordance Best Practices<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.originux.com\/resources\/blog\/what-is-affordance-in-ux-examples-and-best-practices\/#Common_Mistakes_to_Avoid\" >Common Mistakes to Avoid<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.originux.com\/resources\/blog\/what-is-affordance-in-ux-examples-and-best-practices\/#Final_Thoughts\" >Final Thoughts<\/a><\/li><\/ul><\/nav><\/div>\n\n<p class=\"wp-block-paragraph\">You walk up to a door with a flat metal plate at hand height. You push it without thinking. Now picture a door with a long handle. You pull it. No sign told you what to do. The shape of the door did the talking. That quiet hint is called affordance. This guide explains what it is, the main types, and how to use it well.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"What_Is_Affordance_in_UX\"><\/span><strong>What Is Affordance in UX?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Affordance is the quality of an object that suggests how it can be used. A chair suggests sitting. A button suggests pressing. A slider suggests dragging. The term comes from psychologist James J. Gibson. Design thinker Don Norman later brought it into design in his book <em>The Design of Everyday Things<\/em>. In digital design, affordance tells users what is clickable, tappable, draggable, or typeable. Screens are flat, so designers must create these hints with color, shape, shadow, text, and motion.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Why_Affordance_Matters\"><\/span><strong>Why Affordance Matters<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Clear affordance makes a product feel natural. Users do not need a manual. They look at the screen and know what to do. It also cuts mistakes, since a button that looks like a button gets pressed, while a link that looks like plain text gets missed. For businesses, this means higher click rates on key actions, fewer support questions, and smoother paths to sign-ups and sales.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Affordance_vs_Signifier\"><\/span><strong>Affordance vs Signifier<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">These two terms are often mixed up. An affordance is the possible action itself. A touchscreen can be tapped. A text field can take typing. A signifier is the visible clue that points to that action, such as a raised, colored shape on a button or a blinking cursor in a field. Norman added the idea of signifiers because many designers used \u201caffordance\u201d when they meant the visible cue. The affordance is what you can do. The signifier shows you can do it. Good design needs both.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Types_of_Affordance\"><\/span><strong>Types of Affordance<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Explicit affordance:<\/strong> The cue states the action in text or an icon, like a button labeled \u201cBuy now.\u201d<\/li>\n\n\n\n<li><strong>Hidden affordance:<\/strong> The action exists, but nothing shows it. Swiping left to delete an email is one case. Use these for extras, not core tasks.<\/li>\n\n\n\n<li><strong>False affordance:<\/strong> The cue suggests an action that does not exist. Underlined text that is not a link is a common case. These mislead users and cause frustration.<\/li>\n\n\n\n<li><strong>Pattern affordance:<\/strong> The cue relies on habits from other products. A hamburger icon opens a menu, and a magnifying glass opens search.<\/li>\n\n\n\n<li><strong>Negative affordance:<\/strong> The cue shows an action is not available. A grayed-out button tells users they cannot press it yet.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Real affordance is what a design can actually do. Perceived affordance is what the user thinks it can do. Good design makes the two match.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Real-World_Examples\"><\/span><strong>Real-World Examples<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Buttons.<\/strong> A filled color, rounded corners, and a soft shadow make a button look pressable. A hover or pressed state makes the cue stronger.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Links.<\/strong> Blue, underlined text is the classic sign of a link. Other styles work too, but links still need a clear difference from body text.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Text fields.<\/strong> A visible border and a label invite typing. A cursor inside confirms it.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Sliders and toggles.<\/strong> A handle on a track suggests dragging. A switch that slides from off to on shows a clear change of state.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Scroll cues.<\/strong> A card cut off at the screen edge hints that more content sits beyond it.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Drag handles.<\/strong> Six dots beside a list item signal that it can be moved.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Disabled buttons.<\/strong> A faded \u201cSubmit\u201d button shows a form is not ready. It turns bold once the fields are valid.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_to_Design_Clear_Affordances\"><\/span><strong>How to Design Clear Affordances<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Start by learning what your users already know. Habits differ by age, region, and tech skill, so research and testing show what works for your audience. Then use familiar patterns. Do not reinvent common controls, since people expect your product to behave like the others they use.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Make interactive items look interactive. Use color, shape, depth, and contrast to set clickable items apart from static ones, and keep these styles consistent. Add clear labels too. \u201cSave draft\u201d is clearer than a lone icon, so pair icons with text when space allows.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Design every state: hover, focus, active, and disabled. These small changes confirm that an item is live and that the action worked. Light motion can help as well. A button that dips slightly when pressed feels real, and a menu that slides in shows where it came from. Keep motion short and subtle.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Finally, test with real people. Watch where they tap, where they hesitate, and which static items they try to click. Their behavior shows where your cues work and where they fail.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Affordance_Best_Practices\"><\/span><strong>Affordance Best Practices<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Make key actions the most obvious, with strong color, size, and contrast.<\/li>\n\n\n\n<li>Keep styles consistent so users learn your cues once.<\/li>\n\n\n\n<li>Avoid false affordances. Every cue should be honest.<\/li>\n\n\n\n<li>Do not rely on color alone. Pair it with shape, an underline, an icon, or text for users with color blindness or low vision.<\/li>\n\n\n\n<li>Size touch targets at about 44 by 44 pixels, with space between them.<\/li>\n\n\n\n<li>Do not hide core actions behind hidden gestures. Offer a visible route to the same task.<\/li>\n\n\n\n<li>Design for each input type. Touch screens have no hover, so a cue that works with a mouse may fail on a phone.<\/li>\n\n\n\n<li>Support keyboard and screen reader users with clear focus outlines, proper labels, and a logical order.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Common_Mistakes_to_Avoid\"><\/span><strong>Common Mistakes to Avoid<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Flat design that goes too far is a frequent problem. When buttons, links, and labels all look alike, users cannot tell what to press. False affordances are another. A card that looks clickable but does nothing makes users feel tricked. Some teams hide key actions behind hover, which touch users cannot use. Others use vague icons with no labels, so a symbol clear to the team means nothing to a visitor. Inconsistency also hurts. When the same action looks different from page to page, users must relearn the cue each time.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Final_Thoughts\"><\/span><strong>Final Thoughts<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Affordance is the quiet language between a product and its users. It tells people what they can do before they try. When cues are clear, users move with confidence. When they are weak, users hesitate and leave. Start with what your users know and use familiar patterns. Make interactive items look interactive, show every state, and test with real people. When design speaks clearly, users simply act, and that is the mark of a good experience.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>You walk up to a door with a flat metal plate at hand height. You push it without thinking. Now picture a door with a long handle. You pull it. No sign told you what to do. The shape of the door did the talking. That quiet hint is called affordance. This guide explains what&hellip; <a class=\"more-link\" href=\"https:\/\/www.originux.com\/resources\/blog\/what-is-affordance-in-ux-examples-and-best-practices\/\">Continue reading <span class=\"screen-reader-text\">What Is Affordance in UX? Examples and Best Practices<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-6883","post","type-post","status-publish","format-standard","hentry","category-blog","entry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>What Is Affordance in UX? Examples and Best Practices<\/title>\n<meta name=\"description\" content=\"Learn what affordance means in UX, the main types, and how clear cues tell users what to tap, click, or swipe. See real examples and simple design tips.\" \/>\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.originux.com\/resources\/blog\/what-is-affordance-in-ux-examples-and-best-practices\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"What Is Affordance in UX? Examples and Best Practices\" \/>\n<meta property=\"og:description\" content=\"Learn what affordance means in UX, the main types, and how clear cues tell users what to tap, click, or swipe. See real examples and simple design tips.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.originux.com\/resources\/blog\/what-is-affordance-in-ux-examples-and-best-practices\/\" \/>\n<meta property=\"og:site_name\" content=\"OriginUX Studio\" \/>\n<meta property=\"article:published_time\" content=\"2026-11-02T11:47:46+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-11-02T11:47:48+00:00\" \/>\n<meta name=\"author\" content=\"master.origin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"master.origin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.originux.com\/resources\/blog\/what-is-affordance-in-ux-examples-and-best-practices\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.originux.com\/resources\/blog\/what-is-affordance-in-ux-examples-and-best-practices\/\"},\"author\":{\"name\":\"master.origin\",\"@id\":\"https:\/\/www.originux.com\/resources\/#\/schema\/person\/735b211d8a21c6181bb758144923ef3c\"},\"headline\":\"What Is Affordance in UX? Examples and Best Practices\",\"datePublished\":\"2026-11-02T11:47:46+00:00\",\"dateModified\":\"2026-11-02T11:47:48+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.originux.com\/resources\/blog\/what-is-affordance-in-ux-examples-and-best-practices\/\"},\"wordCount\":1077,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.originux.com\/resources\/#organization\"},\"articleSection\":[\"Blog\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.originux.com\/resources\/blog\/what-is-affordance-in-ux-examples-and-best-practices\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.originux.com\/resources\/blog\/what-is-affordance-in-ux-examples-and-best-practices\/\",\"url\":\"https:\/\/www.originux.com\/resources\/blog\/what-is-affordance-in-ux-examples-and-best-practices\/\",\"name\":\"What Is Affordance in UX? Examples and Best Practices\",\"isPartOf\":{\"@id\":\"https:\/\/www.originux.com\/resources\/#website\"},\"datePublished\":\"2026-11-02T11:47:46+00:00\",\"dateModified\":\"2026-11-02T11:47:48+00:00\",\"description\":\"Learn what affordance means in UX, the main types, and how clear cues tell users what to tap, click, or swipe. See real examples and simple design tips.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.originux.com\/resources\/blog\/what-is-affordance-in-ux-examples-and-best-practices\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.originux.com\/resources\/blog\/what-is-affordance-in-ux-examples-and-best-practices\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.originux.com\/resources\/blog\/what-is-affordance-in-ux-examples-and-best-practices\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.originux.com\/resources\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"What Is Affordance in UX? Examples and Best Practices\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.originux.com\/resources\/#website\",\"url\":\"https:\/\/www.originux.com\/resources\/\",\"name\":\"OriginUX Studio\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.originux.com\/resources\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.originux.com\/resources\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.originux.com\/resources\/#organization\",\"name\":\"OriginUX Studio\",\"url\":\"https:\/\/www.originux.com\/resources\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.originux.com\/resources\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.originux.com\/resources\/wp-content\/uploads\/2022\/05\/origin-logo.png\",\"contentUrl\":\"https:\/\/www.originux.com\/resources\/wp-content\/uploads\/2022\/05\/origin-logo.png\",\"width\":120,\"height\":120,\"caption\":\"OriginUX Studio\"},\"image\":{\"@id\":\"https:\/\/www.originux.com\/resources\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.originux.com\/resources\/#\/schema\/person\/735b211d8a21c6181bb758144923ef3c\",\"name\":\"master.origin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/secure.gravatar.com\/avatar\/356acc98edd1351e180a192318e3335999f553b20c01c8a00391239e394d4727?s=96&d=mm&r=g\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/356acc98edd1351e180a192318e3335999f553b20c01c8a00391239e394d4727?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/356acc98edd1351e180a192318e3335999f553b20c01c8a00391239e394d4727?s=96&d=mm&r=g\",\"caption\":\"master.origin\"},\"sameAs\":[\"https:\/\/www.originux.com\"],\"url\":\"https:\/\/www.originux.com\/resources\/author\/master-origin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"What Is Affordance in UX? Examples and Best Practices","description":"Learn what affordance means in UX, the main types, and how clear cues tell users what to tap, click, or swipe. See real examples and simple design tips.","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.originux.com\/resources\/blog\/what-is-affordance-in-ux-examples-and-best-practices\/","og_locale":"en_US","og_type":"article","og_title":"What Is Affordance in UX? Examples and Best Practices","og_description":"Learn what affordance means in UX, the main types, and how clear cues tell users what to tap, click, or swipe. See real examples and simple design tips.","og_url":"https:\/\/www.originux.com\/resources\/blog\/what-is-affordance-in-ux-examples-and-best-practices\/","og_site_name":"OriginUX Studio","article_published_time":"2026-11-02T11:47:46+00:00","article_modified_time":"2026-11-02T11:47:48+00:00","author":"master.origin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"master.origin","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.originux.com\/resources\/blog\/what-is-affordance-in-ux-examples-and-best-practices\/#article","isPartOf":{"@id":"https:\/\/www.originux.com\/resources\/blog\/what-is-affordance-in-ux-examples-and-best-practices\/"},"author":{"name":"master.origin","@id":"https:\/\/www.originux.com\/resources\/#\/schema\/person\/735b211d8a21c6181bb758144923ef3c"},"headline":"What Is Affordance in UX? Examples and Best Practices","datePublished":"2026-11-02T11:47:46+00:00","dateModified":"2026-11-02T11:47:48+00:00","mainEntityOfPage":{"@id":"https:\/\/www.originux.com\/resources\/blog\/what-is-affordance-in-ux-examples-and-best-practices\/"},"wordCount":1077,"commentCount":0,"publisher":{"@id":"https:\/\/www.originux.com\/resources\/#organization"},"articleSection":["Blog"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.originux.com\/resources\/blog\/what-is-affordance-in-ux-examples-and-best-practices\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.originux.com\/resources\/blog\/what-is-affordance-in-ux-examples-and-best-practices\/","url":"https:\/\/www.originux.com\/resources\/blog\/what-is-affordance-in-ux-examples-and-best-practices\/","name":"What Is Affordance in UX? Examples and Best Practices","isPartOf":{"@id":"https:\/\/www.originux.com\/resources\/#website"},"datePublished":"2026-11-02T11:47:46+00:00","dateModified":"2026-11-02T11:47:48+00:00","description":"Learn what affordance means in UX, the main types, and how clear cues tell users what to tap, click, or swipe. See real examples and simple design tips.","breadcrumb":{"@id":"https:\/\/www.originux.com\/resources\/blog\/what-is-affordance-in-ux-examples-and-best-practices\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.originux.com\/resources\/blog\/what-is-affordance-in-ux-examples-and-best-practices\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.originux.com\/resources\/blog\/what-is-affordance-in-ux-examples-and-best-practices\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.originux.com\/resources\/"},{"@type":"ListItem","position":2,"name":"What Is Affordance in UX? Examples and Best Practices"}]},{"@type":"WebSite","@id":"https:\/\/www.originux.com\/resources\/#website","url":"https:\/\/www.originux.com\/resources\/","name":"OriginUX Studio","description":"","publisher":{"@id":"https:\/\/www.originux.com\/resources\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.originux.com\/resources\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.originux.com\/resources\/#organization","name":"OriginUX Studio","url":"https:\/\/www.originux.com\/resources\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.originux.com\/resources\/#\/schema\/logo\/image\/","url":"https:\/\/www.originux.com\/resources\/wp-content\/uploads\/2022\/05\/origin-logo.png","contentUrl":"https:\/\/www.originux.com\/resources\/wp-content\/uploads\/2022\/05\/origin-logo.png","width":120,"height":120,"caption":"OriginUX Studio"},"image":{"@id":"https:\/\/www.originux.com\/resources\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.originux.com\/resources\/#\/schema\/person\/735b211d8a21c6181bb758144923ef3c","name":"master.origin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/356acc98edd1351e180a192318e3335999f553b20c01c8a00391239e394d4727?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/356acc98edd1351e180a192318e3335999f553b20c01c8a00391239e394d4727?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/356acc98edd1351e180a192318e3335999f553b20c01c8a00391239e394d4727?s=96&d=mm&r=g","caption":"master.origin"},"sameAs":["https:\/\/www.originux.com"],"url":"https:\/\/www.originux.com\/resources\/author\/master-origin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.originux.com\/resources\/wp-json\/wp\/v2\/posts\/6883","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.originux.com\/resources\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.originux.com\/resources\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.originux.com\/resources\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.originux.com\/resources\/wp-json\/wp\/v2\/comments?post=6883"}],"version-history":[{"count":1,"href":"https:\/\/www.originux.com\/resources\/wp-json\/wp\/v2\/posts\/6883\/revisions"}],"predecessor-version":[{"id":6884,"href":"https:\/\/www.originux.com\/resources\/wp-json\/wp\/v2\/posts\/6883\/revisions\/6884"}],"wp:attachment":[{"href":"https:\/\/www.originux.com\/resources\/wp-json\/wp\/v2\/media?parent=6883"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.originux.com\/resources\/wp-json\/wp\/v2\/categories?post=6883"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.originux.com\/resources\/wp-json\/wp\/v2\/tags?post=6883"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}