--- title: "Affordance" url: "https://www.insideuxdesign.com/en/glossar/affordance" language: "en" description: "What is an affordance in UX design? A plain-language explanation with an example and practical tips. Learn how to design buttons and links people spot at once." published: "2026-10-14T09:50:31+02:00" updated: "2026-10-14T13:08:45+02:00" --- # Affordance An affordance describes what action an object makes possible and whether people can recognize it: a button invites you to press it, a handle invites you to pull. - **Buchstabe:** A UX glossary # Affordance An affordance describes what action an object makes possible and whether people can recognize it: a button invites you to press it, a handle invites you to pull. Picture a glass door with a big handle. You pull it, but the door only opens inward. The handle told you “pull me” when pushing would have been right. Doors like this are so common that they have their own nickname: *Norman doors*, named after design researcher Don Norman. The same thing happens on screens when text looks like a button but does nothing, or when a button is so flat that nobody notices it. ## Explained simply An affordance describes what actions an object makes possible. A chair affords sitting, a button affords pressing, a slider affords sliding. What matters for design is whether people can actually recognize that possibility. The term comes from American psychologist James J. Gibson. He introduced it in 1966 and explained it in detail in his 1979 book on visual perception. For Gibson, an affordance was a relationship between an environment and a living being: a high step is a place to sit for an adult but an obstacle for a toddler. Don Norman brought the term into design in 1988 with the book now known as “The Design of Everyday Things.” He mainly meant the *perceived* possibilities for action. You can find more about the book in the resource [The Design of Everyday Things](https://www.insideuxdesign.com/en/ressourcen/the-design-of-everyday-things). ## Affordances and signifiers Because designers often used the term loosely, Norman later introduced a second one: the **signifier**, a perceivable cue that shows where and how you can act. The affordance is the possibility, the signifier is the hint. On a touchscreen, you could theoretically tap anywhere. Only shape, color, shadow, or labels tell you where tapping actually does something. Problems come from two directions. A **hidden** affordance exists but can’t be seen, like a swipe menu with no visual hint. A **false** affordance promises an action that doesn’t exist, like a heading styled as a button. A 2017 eyetracking study by the Nielsen Norman Group found that participants needed about 22 percent more time on average to find clickable elements on pages with weak clickability cues. ## An example Here’s an example. A banking app shows the “Send transfer” button as gray text with no border, the same size as the body copy. Many people tap next to it or scroll up and down looking for it. After the redesign, the button is a colored shape with rounded corners and strong contrast. Plain text, on the other hand, is never highlighted in color anymore. Without a single line of explanation, it’s now clear what’s tappable and what isn’t. ## In practice - **Make clickable things visible.** Buttons need a recognizable shape, and links need a distinct color or underline that sets them apart from body text. - **Don’t make false promises.** Don’t style non-clickable elements like buttons or links, or people will tap and get nothing. - **Stick to conventions.** Familiar patterns are strong signifiers. For more typical pitfalls, read [Common Usability Mistakes and How to Avoid Them](https://www.insideuxdesign.com/en/blog/common-usability-mistakes-and-how-to-avoid-them). ## Related terms [Mental Model](https://www.insideuxdesign.com/en/glossar/mental-model), [Gestalt Principles](https://www.insideuxdesign.com/en/glossar/gestalt-principles), [Microcopy](https://www.insideuxdesign.com/en/glossar/microcopy), [Usability Testing](https://www.insideuxdesign.com/en/glossar/usability-testing) ## Sources - [Don Norman: Signifiers, not affordances. ACM Interactions, 2008](https://jnd.org/signifiers-not-affordances/) - [Kate Moran: Flat UI Elements Attract Less Attention and Cause Uncertainty. Nielsen Norman Group, 2017](https://www.nngroup.com/articles/flat-ui-less-attention-cause-uncertainty/) - [Hoa Loranger: Beyond Blue Links: Making Clickable Elements Recognizable. Nielsen Norman Group, 2015](https://www.nngroup.com/articles/clickable-elements/) ## More terms [ ### A/B Testing An A/B test is an experiment that shows two versions of a page or element at the same time to randomly split groups of visitors. It lets you decide with real data which version works better. ](https://www.insideuxdesign.com/en/glossar/a-b-testing) [ ### Accessibility Accessibility means designing websites, apps and digital documents so that everyone can use them, including people with visual, hearing, motor or cognitive disabilities. ](https://www.insideuxdesign.com/en/glossar/accessibility) [ ### Card Sorting Card sorting is a research method in which people sort terms written on cards into groups. It shows you how they mentally organize content, so you can plan navigation that makes sense to them. ](https://www.insideuxdesign.com/en/glossar/card-sorting) [ ### Cognitive Load Cognitive load is the mental effort it takes to understand and use an interface. The less unnecessary thinking a design demands, the easier the actual task becomes. ](https://www.insideuxdesign.com/en/glossar/cognitive-load) [ ### Dark Patterns Dark patterns are design tricks that push people into decisions they don’t actually want to make, like hidden cancellation options or preselected add-ons. ](https://www.insideuxdesign.com/en/glossar/dark-patterns) [ ### Design System A design system is a shared toolkit of reusable building blocks and rules. It helps teams design and build interfaces that look and behave consistently everywhere. ](https://www.insideuxdesign.com/en/glossar/design-system) [ ### Fitts’ Law Fitts’ Law describes how long it takes to hit a target with a movement: the bigger and closer the target, the faster and more reliably you reach it. In UX design, it helps you size and place buttons and links. ](https://www.insideuxdesign.com/en/glossar/fitts-law) [ ### Gestalt Principles The Gestalt principles describe how your brain automatically groups individual elements into wholes and shapes. In design, they help you structure layouts clearly without extra lines or borders. ](https://www.insideuxdesign.com/en/glossar/gestalt-principles) [ ### Heuristic Evaluation In a heuristic evaluation, experts review an interface against established rules of thumb for good usability. It helps you find typical weak spots quickly and cheaply, even before real people test the product. ](https://www.insideuxdesign.com/en/glossar/heuristic-evaluation) [ ### Hick’s Law Hick’s Law states that decisions take longer the more equally likely options there are. Decision time grows much more slowly than the number of options, though. ](https://www.insideuxdesign.com/en/glossar/hicks-law) [ ### Information Architecture Information architecture describes how the content of a website or app is structured and labeled. It helps people find what they’re looking for and understand where they are. ](https://www.insideuxdesign.com/en/glossar/information-architecture) [ ### Jobs to be Done Jobs to be Done is a way of thinking that asks what task people want to get done with a product and what progress they’re trying to make in their situation. It focuses on context and motivation rather than traits like age or job title. ](https://www.insideuxdesign.com/en/glossar/jobs-to-be-done)