Affordances: An S-Tier Behavioral Designer’s Guide

There is a door near you right now that you have pushed when you should have pulled. Maybe it had a flat metal plate where a handle should be, or a handle on the side that swings away from you. You hit it, it didn’t budge, and for half a second you felt stupid. You were not stupid. The door lied to you.

Donald Norman got so annoyed by these doors that the design world now calls them “Norman doors.” His point was never really about doors. It was about a deeper question that sits underneath every interface, every product, and every button on every screen: how does an object tell you what you can do with it? A good chair says “sit on me” without a sign. A good handle says “pull me.” A bad door says nothing, or worse, says the wrong thing.

That silent conversation between an object and the action it invites has a name. It is called an affordance, and it is one of the most quietly powerful ideas in all of design. It explains why a raised button begs to be pressed, why a slider asks to be dragged, and why an entire generation of flat, minimalist apps accidentally hid their own controls from the people trying to use them.

Here is the part most design blogs skip. Affordance did not start in design at all. It started with a perceptual psychologist named James Gibson, who was studying how pilots land planes and how animals move through the world. Norman borrowed the word, changed its meaning, spent the next two decades trying to clean up the confusion he caused, and eventually invented a second word, signifier, to fix his own mistake. The story of affordance is the story of one of the most useful concepts in design being half-misunderstood by almost everyone who uses it, including the man who popularized it.

By the end of this guide, you will understand what an affordance actually is, why the difference between a real affordance and a perceived one decides whether your product gets used, and how this perceptual primitive sits underneath every motivational design choice you will ever make. Affordance is the layer almost no one talks about, because it works so well when it is right that it becomes invisible. Let’s make it visible.

⚡ Speed Run Notes

Table of Contents

Author Credibility: Yu-kai Chou

Yu-kai Chou created the Octalysis Framework after studying gamification since 2003 — years before the term entered mainstream vocabulary. As a Human-Systems Architect & Behavioral Designer, his framework has been applied by LEGO, Microsoft, Porsche, Coca-Cola, Salesforce, and MrBeast, impacting over 1.5 Billion Users.

Chou has taught the Octalysis methodology at Harvard, Stanford, Yale, Tesla, Google, BCG, and IDEO.

His work has been cited by Harvard, Stanford, MIT, Forbes, Wall Street Journal, Wired, US Department of Energy, NIST, NSF, NCBI, US Department of Education, ClinicalTrials.gov, and Google Scholar — with 3,700+ more academic publications. Explore his books here.

TEDxLausanne · Gamification to Improve Our World17 min

What Are Affordances?

An affordance is an action that an object or environment makes possible for a particular actor. A flat surface at knee height affords sitting. A cup with a handle affords grasping. A vertical slot affords inserting a coin. The word captures a relationship, not a property of the object alone. A staircase affords climbing to an able-bodied adult and affords almost nothing to someone in a wheelchair. The affordance lives in the fit between what the object is and what the actor can do.

That last point is the one people miss. We talk about affordances as though they belong to the object, as in “a button has a click affordance.” But the button does not click itself. The affordance only exists when you pair the object with an actor capable of the action. This is why the cleanest modern definition, from Anthony Chemero, frames affordances as relations between an actor’s abilities and features of the environment, rather than features baked into the object. Hold onto that. It is the difference between a designer who decorates objects and one who designs for people.

In everyday product work, affordance answers a deceptively simple question: when someone looks at this thing, do they know what they can do with it? Not whether they want to. Not whether it serves their goal. Just whether the possible action is legible at all. A door that affords pushing but looks like it affords pulling has plenty of affordance and terrible communication. That gap between what is possible and what looks possible is the entire reason this concept matters to designers, and it is exactly the gap Norman would spend twenty years trying to name precisely.

The Origin: Gibson and Ecological Psychology

James J. Gibson was not a designer. He was a perceptual psychologist who spent World War II studying how pilots judge distance and orientation while landing aircraft. That work pushed him toward a radical idea about perception itself, which he laid out fully in his 1979 book The Ecological Approach to Visual Perception, after first sketching the concept in a 1977 essay called “The Theory of Affordances.”

Gibson’s claim was that animals do not perceive raw sense data and then compute meaning from it. They perceive opportunities for action directly. A frog does not see a small dark moving dot and reason its way to “edible insect.” It perceives “catchable food” as an immediate fact of the world. A cliff edge does not register as a gradient of light that the brain calculates into danger. It is perceived directly as “fall-off-able,” and the animal stops. Gibson called these directly-perceived action possibilities affordances, and he meant them as objective facts of the animal-environment system. The cliff affords falling whether or not the animal notices.

This is the crucial and frequently-forgotten root of the idea. For Gibson, an affordance exists independent of perception. The terrain affords what it affords. Perception is the act of picking up information about those affordances that is already present in the light, the texture, the layout of surfaces. He was arguing against the dominant view that the mind builds the world from fragments. The world, he said, is already full of meaning, and we are built to read it.

Gibson was also specific about what makes an affordance real, and his examples are worth keeping in mind because they discipline the loose modern usage. A surface affords support, he noted, only if it is roughly horizontal, flat, extended, and rigid relative to the animal’s weight. Water fails the rigidity test for a human and so does not afford walking, even though it affords it perfectly well for a water strider. A graspable object has to be detached and sized to the hand; a doorknob bolted to a wall affords turning but not carrying. Even his famous mailbox example carried a sting that designers forget: a post box affords letter-mailing only to someone embedded in a culture that has letters, postal systems, and the convention of posting. The moment Gibson admitted that, he had already cracked open the door Norman would later walk through, because “affordance relative to an actor who knows the convention” is no longer a pure fact of the physical world.

You can see why this was electric for psychology and why it would later cause such confusion in design. Gibson’s affordance is a fact about reality. He had almost nothing to say about how to make those facts obvious, because in nature they usually already are. A designer’s whole job, on the other hand, is to make the right action obvious. When Norman pulled the word across that border, the meaning quietly changed under his feet.

Norman’s Hijacking: How Affordance Entered Design

In 1988, Donald Norman published The Psychology of Everyday Things, later reissued under its more famous title, The Design of Everyday Things. In it he borrowed Gibson’s word and handed it to designers, and the design world has never been the same. Norman used affordance to explain why some objects are intuitive and others are baffling. The teapot you can’t tell how to hold, the light switch panel where no switch maps to any obvious light, the door that defeats you: all of it, he argued, came down to affordances that were either absent or misleading.

There was one problem. Norman did not mean what Gibson meant, and it took him years to admit it cleanly. When Norman said a screen button “affords clicking,” he was not making Gibson’s claim that clicking is an objective action possibility in the world. He was talking about how the button appears: whether it looks raised, pressable, interactive. By 1999, in an essay called “Affordance, Conventions, and Design,” he wrote the correction plainly. What he had been calling affordances were really perceived affordances, which can differ sharply from the real ones.

That distinction is worth slowing down on, because it is the most useful thing in the entire topic. On a flat screen, the real affordances are almost fixed. You can click anywhere. You can tap any pixel. The physical capability of the system does not change whether a button looks raised or flat. What changes is the perceived affordance, the user’s read of where action is invited. Norman’s insight was that on screens, designers are almost never adding or removing real affordances. They are managing perception. A flat rectangle and a beveled, shadowed rectangle afford the exact same click. One announces it and one hides it.

Norman put it sharply: a visual display is not an affordance. It is feedback that advertises an affordance. The art of the designer, he said, is making the relevant action perceivable. He had taken Gibson’s objective concept and turned it into a communication problem, and that move is responsible for both the usefulness of the term in design and the decades of muddle that followed.

The muddle got bad enough that Norman went further. In the 2013 revised edition of The Design of Everyday Things, he introduced a new word to carry the part he actually cared about: the signifier. An affordance, he now said, is what actions are possible. A signifier is the perceptible cue that communicates where the action should happen. The flat plate on a push door is a signifier. The shadow under a button is a signifier. The little “swipe” arrow on an onboarding screen is a signifier. Affordances determine what you can do; signifiers tell you where to do it; and Norman’s blunt conclusion was that designers had been arguing about the wrong one. “We need both,” he wrote, but the one a designer controls most directly is the signifier.

The Taxonomy: Types of Affordance in HCI

Once affordance entered human-computer interaction, researchers started slicing it into more precise categories, because “the button affords clicking” was too blunt to design with. Two contributions matter most.

The first came from William Gaver in a 1991 paper at the CHI conference, the first CHI paper on affordances. Gaver’s move was to separate the affordance itself from the information available about it. Cross those two variables and you get four cases that every designer should be able to name on sight. A perceptible affordance is an action that is both possible and visibly signaled, which is the ideal. A hidden affordance is an action that is possible but gives no perceptual hint, like a keyboard shortcut nobody can discover or a screen edge you can swipe but would never guess. A false affordance is the cruelest: it looks like it invites an action that does nothing, like a faux-3D banner ad styled to look clickable, or a label that looks like a tappable link but is just text. The fourth, the correct rejection, is when there is no affordance and no signal suggesting one, which is exactly right, since you do not want false promises everywhere.

Gaver’s grid is the most practical thing in the whole topic. Most usability failures are either hidden affordances (the feature exists but no one finds it) or false affordances (the cue promises something the system won’t deliver). Naming which one you have is half the fix.

The second contribution came from Rex Hartson in 2003, written specifically to clean up the Gibson-versus-Norman confusion for interaction designers. Hartson argued that a single interface element actually carries several distinct kinds of affordance at once. A cognitive affordance helps you know something: a label reading “Delete” tells you what the button will do. A physical affordance helps you do something: a button large enough to click accurately supports the physical act. A sensory affordance helps you sense something: sufficient contrast and size let you actually see the label. A functional affordance connects the action to a purpose: the delete actually removes the file, serving your goal.

Hartson’s framing is more useful than it first looks, because most design critiques collapse these layers and argue past each other. A button can have great physical affordance (easy to hit) and terrible cognitive affordance (you have no idea what it does). A link can have perfect cognitive affordance (clear label) and broken sensory affordance (gray text on a white background that a third of users can’t read). When you can name which layer failed, you stop saying “the design is confusing” and start saying “the cognitive affordance is missing,” which is a problem you can actually solve.

What Gibson and Norman Got Right

It would be easy to treat this as a story of two men talking past each other. It is more honest to say each got hold of a different true thing, and design needs both.

Gibson got the deepest part right: perception is built for action, not contemplation. We do not look at the world and then decide what it means in some separate step. We see a chair and the sitting is already part of the seeing. This is why a well-designed object feels effortless. It is not asking you to think, it is handing your action system something it can grab immediately. Every time a designer says “don’t make me think,” they are channeling Gibson without knowing it. The goal is to make the right action perceivable so directly that no deliberation is required.

Norman got the part that turns the insight into a job. By naming the gap between real and perceived affordances, and later by separating affordance from signifier, he gave designers a precise place to stand. The problem is almost never that the action is impossible. The problem is that the cue is missing, wrong, or drowned out. Once you internalize that the system can usually do the thing, and your real work is making the doing legible, you stop blaming users for not finding features and start blaming your signifiers, which is where the blame belongs. That shift, from “the user didn’t get it” to “I didn’t signal it,” is the mark of a designer who has actually absorbed this concept rather than just memorized the word.

Where the Concept Falls Apart

Affordance is one of the most cited and most abused ideas in design. Its weaknesses are not minor footnotes. They explain why the term so often generates more heat than clarity in a design review.

1. The word became a synonym for “feature”

Walk into enough design critiques and you will hear someone say “let’s add a share affordance” when they mean “let’s add a share button.” The concept got so popular that it eroded into a fancy word for any capability at all. Once affordance means everything an object can do, it means nothing useful. The precise version, an action made perceivable to a specific actor, gets flattened into “stuff the product does.” McGrenere and Ho, in their 2000 paper “Affordances: Clarifying and Evolving a Concept,” documented exactly this drift and tried to pull the term back to something designers could operate on. The fact that they had to write that paper at all tells you how far the word had wandered from anything testable.

2. Real, perceived, and signifier never fully separated in practice

Norman drew the lines clearly on paper, but in daily work they blur right back together. Designers still say “affordance” when they mean signifier, still argue about whether a flat button “has” a click affordance when the real answer is that the click is always possible and only the signal is in question. The vocabulary keeps collapsing because the underlying ideas are genuinely entangled. You cannot perceive an affordance without some perceptible information, so the affordance and its signifier arrive welded together in experience. Untangling them is an analytical act, not a perceptual one, which means the confusion is structural and will keep recurring.

3. The whole concept assumes a stable physical world that screens don’t have

Gibson’s affordances came from surfaces, edges, and textures that stay put. A cliff is reliably a cliff. But a screen is a surface that can pretend to be anything, and it changes the instant you touch it. A button can be a button now and a text field a second later. Voice interfaces and gesture systems have no visible surface at all, which means they have almost no natural affordances to read. When Gibson said perception picks up information already present in the environment, he assumed the environment was honest. Digital products are under no such obligation, and that breaks the original theory’s quiet assumption that what you see is what is really there.

What’s Really Happening in the Mind

Strip away the design vocabulary and affordance is a claim about how brains work, and the modern evidence largely supports Gibson’s instinct even where it complicates his theory.

The core finding is that perception and action are not separate stages. When you see a graspable object, motor areas of your brain that plan grasping activate before you have made any decision to reach. The visual system seems to compute “what could I do with this” almost as fast as “what is this.” Your brain is constantly pre-loading possible actions onto the objects in front of you. A handle does not just look like a handle; seeing it lightly primes the hand. This is why a well-shaped control feels satisfying in a way that is hard to articulate. It matches an action your body was already half-prepared to take.

But the digital world adds a layer Gibson did not need to explain: learned convention. A teenager perceives a hamburger menu icon as “tap to open navigation” with the same immediacy that they perceive a chair as sittable, but that perception is not built into the world. It was learned. Norman’s word for this was convention, and it matters because conventions behave like affordances once they are absorbed. The brain stops deliberating and starts perceiving the action directly. This is the deep reason consistency is so valuable in interface design. Every time you reuse a familiar pattern, you are borrowing an action that the user’s brain already perceives automatically, instead of asking them to reason out a novel control from scratch.

So the honest neuroscience is a blend. Some affordances really are direct and near-universal, rooted in the body: graspable, sittable, pushable. Others are conventions so well-learned they feel direct but would be invisible to someone from another era or culture. A great designer leans on the first kind when possible and treats the second kind as a debt that must be either paid by teaching or avoided by sticking to patterns the user already owns.

Affordances vs Other Frameworks

Affordance gets sharper when you set it beside the ideas it is constantly confused with.

vs Signifiers

This is the distinction that matters most and gets botched most often. The affordance is the action that is possible. The signifier is the cue that tells you the action is there and where to perform it. A swipeable carousel affords swiping whether or not it shows dots; the dots and the peek of the next image are the signifiers that reveal the swipe. When a feature exists but no one uses it, the affordance is fine and the signifier is missing. Naming it this way tells you the fix is not “build the feature,” since the feature is already there, but “make the existing action visible.”

vs Fitts’s Law and Hick’s Law

Affordance asks whether you can tell an action is possible. Fitts’s Law asks how fast you can perform it once you know, given the target’s size and distance. Hick’s Law asks how long you will take to choose among several visible options. They operate in sequence: affordance gets the action onto your radar, Hick’s Law governs the time to pick it from the menu, and Fitts’s Law governs the time to physically reach it. A button can have perfect affordance and still fail Fitts’s Law by being too small to hit, or fail Hick’s Law by being buried among forty equally-shouting siblings. They are not rivals; they are different checkpoints on the path from intention to action.

vs Mental Models

An affordance is local; it lives in a single object and the action it invites. A mental model is global; it is the user’s whole internal theory of how the system works. The two interact constantly. If a user’s mental model says “trash means recoverable,” then a delete button’s functional affordance had better match that belief, or the perceived affordance and the real consequence will diverge in a way that destroys trust. Affordances are the bricks; the mental model is the user’s map of the building. Good affordances that contradict the user’s mental model still produce errors.

vs Skeuomorphism and Flat Design

Skeuomorphism is the design philosophy that makes a digital thing imitate its physical ancestor: the notes app that looks like a yellow legal pad, the calculator with beveled plastic keys, the switch that looks like a real toggle. Set beside affordance, skeuomorphism is best understood as signifier maximalism. By copying a familiar physical object, it imports every signifier that object already carried, so the user perceives the action without learning anything new. A skeuomorphic toggle looks flippable because real toggles look flippable, and your hand already knows the move. Flat design was the swing to the opposite pole: it deleted those borrowed signifiers in pursuit of visual cleanliness. The affordances never changed, since the toggle was always tappable, but the perceptual cues that announced the action were stripped out. The decade-long argument between skeuomorphism and flat design was never really about taste. It was an argument about how many signifiers a generation of users still needed, and both camps kept mistaking a question about perception for a question about style.

vs the MDA Framework and Game Design

In games, affordance shows up as the question of whether players can read what the game lets them do. The MDA Framework talks about mechanics as the rules the designer builds, but a mechanic the player cannot perceive is a hidden affordance: present in the code, absent from the experience. The ledge you can climb has to look climbable, which is why game artists paint ledges a slightly different color and why the climbable surfaces in a modern action game glow faintly yellow. That yellow paint is a signifier layered onto a real affordance, and it is the same move as the shadow under a web button.

Affordances in the Real World

The concept earns its keep when you watch it operate across very different surfaces. The same logic governs a doorknob and a checkout flow.

Web and app interfaces

This is where affordance lives or dies for most products. On a screen, every real affordance is identical: anything is clickable, anything is tappable. So all the design work is in perceived affordance and signifiers. A primary button signals “press me” through fill color, size, and slight elevation. A link signals “click me” through underline or color contrast. A text field signals “type here” through its inset border and blinking cursor. When these signals are strong, the interface feels obvious. When a team strips them to chase a minimalist look, users start hunting for controls that are right in front of them, because the action is possible but no longer announced.

Physical product design

The classic territory, and still the clearest teacher. A door handle you wrap your hand around affords pulling and signals it at the same time; a flat plate affords pushing and signals it. Mug handles, faucet levers, scissors molded to fingers: good physical design fuses the affordance and the signifier so tightly that no instruction is needed. The Norman door is what happens when a designer chooses a handle for how it looks and forgets that the handle is also a sentence telling your hand what to do.

Voice and gesture interfaces

This is affordance’s hardest frontier. A smart speaker sitting on a counter affords an enormous range of actions and signals almost none of them. There is no surface to read, no menu of visible options, no shadow to suggest pressability. Users are left guessing what they are allowed to say, which is why voice products lean so heavily on spoken prompts and onboarding scripts. The same crisis hits gesture interfaces: a screen that responds to a three-finger swipe has a powerful affordance that is completely hidden. With no surface to carry signifiers, these systems have to teach their affordances explicitly or watch them go unused.

Games and onboarding

Games are quietly masterful at affordance because a confused player simply quits. Designers paint interactive objects in telltale colors, make destructible walls crack visibly, and outline the one ledge you can grab. A new player perceives “I can climb that” without reading a manual. This is signifier design at its most deliberate, and product onboarding borrows the exact same playbook: the pulsing dot, the coach mark, the gentle arrow that points at the action you are meant to take next. Each one is a temporary signifier bolted onto a real affordance the user has not yet learned to see.

Accessibility

Affordance is also where accessibility quietly succeeds or fails, because an affordance only exists relative to an actor’s abilities. A color-only signifier, say a button distinguished from text by hue alone, carries no affordance for a colorblind user, and a hover-only control carries none for a touch user. Designing affordances honestly means asking which actor can actually perceive and perform the action, and making sure the signifier survives in more than one sensory channel. Hartson’s sensory affordance is the layer that decides whether the rest of the design reaches everyone or only the people who happen to perceive the way the designer does.

E-commerce and conversion

Nowhere does affordance turn into money faster than a checkout flow. Every drop in a conversion funnel has an affordance question hiding behind it. Shoppers who cannot tell that the quantity field is editable, that the promo code box exists, or that the gray “Place Order” button is actually active will abandon a cart they fully intended to buy. The classic failure is the disabled-looking primary button: teams style it in a muted tone for visual calm and accidentally signal “not clickable,” so motivated buyers hesitate at the last step. The classic fix is almost insultingly simple, which is why it is so easy to miss. Make the one action you want most into the loudest signifier on the screen, give every interactive field a visible boundary, and remove competing cues that pull the eye elsewhere. None of this adds desire. The shopper already wanted the product. Affordance work simply stops a present intention from dying at a control the buyer could not read.

The Elephant in the Room

Here is the uncomfortable truth the design world spent the 2010s relearning the hard way: the prettiest interfaces are often the ones that hide their own affordances.

When flat design swept through software, it stripped away the gradients, shadows, bevels, and textures that had been doing the silent work of signaling “this is a button, this is pressable, this is a control.” The result looked clean and modern and was frequently impossible to use. Users could not tell which text was a tappable link and which was just a label. Ghost buttons, which are thin outlines with no fill, left people unsure whether anything was even there to press. The real affordances had not changed at all. Every element was still perfectly clickable. The signifiers had been deleted in the name of aesthetics, and an entire industry discovered that beauty and usability had quietly come apart.

This is the elephant because it keeps happening, and it happens to good designers. The pull toward visual minimalism is strong, and stripping signifiers always makes a mockup look more elegant. The mockup is the trap. A static mockup never has to be used, so a missing signifier costs nothing in the picture and everything in the product. The discipline is to remember that a signifier is not decoration you can shave off. It is the part of the design that tells a human being what to do. Remove it and you have not simplified the interface; you have hidden it.

The deeper version of the elephant is darker. Once you understand that perceived affordance can be detached from reality, you can weaponize the gap. You can make a thing look clickable that is not, or hide an action you would rather the user not take. That is the bridge from honest affordance design into manipulation, and it is where this perceptual idea collides with ethics.

How to Apply Affordances with the Octalysis Framework

Here is the reframe that makes affordance click into place for behavioral designers. Affordance is not a Core Drive. It is the visibility gate that sits underneath all of them.

The Octalysis Framework maps the eight Core Drives that make a person want to act: purpose, accomplishment, ownership, social pressure, curiosity, and the rest. Affordance operates one layer below all of that. It does not decide whether someone wants to press the button. It decides whether they can see that the button is pressable at all. The most motivated user in the world, fully activated by Core Drive 1 (Epic Meaning & Calling) and Core Drive 2 (Development & Accomplishment), still gets stuck at a control they cannot find. Motivation pushes; affordance is the door. If the door is invisible, the push goes nowhere.

This is why affordance is the unglamorous prerequisite to every motivational design move. You can build the most beautiful reward loop ever conceived, but if the action that triggers it is a hidden affordance, the loop never starts. Get the affordance right and you have not motivated anyone yet. You have simply cleared the path so that motivation can do its job.

The image below shows the Octalysis Framework with the game techniques arranged around each of the 8 Core Drives. Affordance is what makes any of these techniques perceivable to the user in the first place. It is the layer that turns a designed mechanic into a visible, takeable action.

Where affordance touches the Core Drives most directly is in feedback and clarity. Core Drive 3 (Empowerment of Creativity & Feedback) depends on the user perceiving that an action is available and then seeing that it worked: a button that visibly depresses, a toggle that slides, a state that changes. Strong signifiers also quietly reduce Core Drive 8 (Loss & Avoidance). When a user can clearly see what each control does, the fear of clicking the wrong thing drops, and hesitation turns into action. Affordance does not generate desire, but it removes the friction and fear that would otherwise strangle the desire already present.

The White Hat / Black Hat fork

Affordance design splits cleanly along the ethical line that runs through all of Octalysis. The White Hat use is honest legibility: you make the valuable action obvious, you signal clearly what each control does, and you let the user move with confidence. A well-signified “unsubscribe” link is White Hat affordance, because the action is real and you made it easy to find even though it costs you.

The Black Hat use is the false and hidden affordance turned into a tactic. A “subscribe” button styled in glowing color while the “no thanks” option is rendered as faint, unsignified gray text is a deliberate affordance imbalance: both actions are possible, but only one is made perceivable. A close button hidden until you hunt for it is a hidden affordance used on purpose. This is the doorway from affordance design into dark patterns, and the test is simple: if a user saw every affordance equally clearly, would they still be glad they acted? White Hat affordance can survive that test. Black Hat affordance depends on the user never seeing the option you buried.

Practical Steps

Turning all of this into design practice comes down to a short, repeatable discipline.

1. Separate the action from its signal. For every important action, ask two questions in order: is this action actually possible (the affordance), and does the user have a clear cue that it is there and where to do it (the signifier)? Most “confusing UI” problems are a present affordance with a missing signifier.
2. Hunt for hidden affordances. List the actions your product supports but does not visibly signal: the swipe no one discovers, the long-press menu, the shortcut. Each is a feature you already paid to build and are getting no value from. Add a signifier or accept that it is invisible.
3. Hunt for false affordances. Look for anything that looks actionable but is not: decorative elements styled like buttons, labels that look like links, images that look tappable. Each one spends a little user trust every time it disappoints.
4. Lean on convention before invention. A familiar pattern is an affordance the user’s brain already perceives automatically. Reusing it borrows free legibility. Inventing a novel control means you now owe the user a teaching moment, so only spend that debt when the payoff is real.
5. Check every signifier across sensory channels. If the only thing marking an action is color, or hover, or a faint contrast, confirm it survives for users who cannot perceive that channel. An affordance that only some actors can perceive is only partly designed.
6. Run the honesty test. Before shipping, ask whether the most valuable-to-you action and the most valuable-to-the-user action are signified with equal clarity. If you have brightened one and buried the other, you have drifted from affordance design into manipulation.

Affordances Were the Beginning, Not the End

Affordance is the rare design idea that is most powerful exactly when you cannot see it working. A door you open without thinking, a button you press without hunting, a control that feels obvious: that is affordance doing its job so well it vanishes. The concept started as Gibson’s claim about how animals read a physical world full of meaning, became Norman’s tool for diagnosing why everyday objects defeat us, and matured into a working vocabulary of perceived affordances, signifiers, and the four-way grid every interface designer should carry in their head.

But notice where it stops. Affordance tells you whether a person can perceive and perform an action. It says nothing about whether they will care to. That is the boundary where this concept ends and motivational design begins. Clear the affordance, and you have built a door someone can see and open. Whether they walk through it depends on what is on the other side, and that question belongs to the Core Drives. Affordance gets the action onto the table. Octalysis decides whether anyone reaches for it.

Frequently Asked Questions

What is an affordance in simple terms?

An affordance is an action that an object lets you take. A handle affords pulling, a button affords pressing, a chair affords sitting. The idea, from psychologist James Gibson, is that we perceive objects partly in terms of what we can do with them, not just what they look like.

What is the difference between an affordance and a signifier?

An affordance is the action that is possible. A signifier is the visible cue that tells you the action is there and where to perform it. A flat screen button always affords clicking; the color, shadow, and shape are the signifiers that make the click obvious. Donald Norman added the word “signifier” in 2013 to fix years of people confusing the two.

Who came up with the concept of affordances?

James J. Gibson coined “affordance” in his work on ecological perception, fully developed in his 1979 book The Ecological Approach to Visual Perception. Donald Norman later borrowed the term for design in his 1988 book The Design of Everyday Things, where he applied it to everyday objects and interfaces.

What is the difference between Gibson’s and Norman’s definition?

Gibson meant an objective action possibility that exists in the world whether or not anyone notices it. Norman meant a perceived affordance, meaning how actionable something looks to a user. Norman admitted the difference in 1999, noting that on a screen the real affordances barely change while the perceived ones are everything a designer manages.

What are false and hidden affordances?

From William Gaver’s 1991 analysis: a hidden affordance is an action that is possible but gives no perceptual hint, like an undiscoverable swipe. A false affordance looks like it invites an action that actually does nothing, like text styled to look like a clickable link. Both cause errors, one by being invisible and the other by lying.

Why did flat design cause usability problems?

Flat design removed the shadows, gradients, and bevels that had signified “this is a button, this is pressable.” The real affordances were unchanged, since everything was still clickable, but the signifiers were gone, so users could no longer tell which elements were interactive. It was a signifier problem dressed up as an aesthetic choice.

How do affordances apply to voice and gesture interfaces?

They are the hardest case, because there is no visible surface to carry signifiers. A smart speaker affords hundreds of commands and signals almost none of them, so users guess what they can say. Voice and gesture systems have to teach their affordances explicitly through prompts and onboarding, since they cannot show them the way a screen can.

Is affordance a Core Drive in the Octalysis Framework?

No. Affordance is not a Core Drive; it is the visibility gate beneath all of them. Core Drives decide whether someone wants to act; affordance decides whether they can perceive how to act in the first place. It connects most directly to Core Drive 3 (Empowerment of Creativity & Feedback) and quietly lowers Core Drive 8 (Loss & Avoidance) by making controls clear enough that users stop fearing the wrong click.

References

1. Gibson, J. J. (1977). The Theory of Affordances. In R. Shaw & J. Bransford (Eds.), Perceiving, Acting, and Knowing: Toward an Ecological Psychology (pp. 67–82). Lawrence Erlbaum.
2. Gibson, J. J. (1979). The Ecological Approach to Visual Perception. Houghton Mifflin, Boston.
3. Norman, D. A. (1988). The Psychology of Everyday Things (later reissued as The Design of Everyday Things). Basic Books.
4. Norman, D. A. (1999). Affordance, Conventions, and Design. Interactions, 6(3), 38–43.
5. Norman, D. A. (2008). Signifiers, Not Affordances. Interactions, 15(6), 18–19.
6. Norman, D. A. (2013). The Design of Everyday Things: Revised and Expanded Edition. Basic Books.
7. Gaver, W. W. (1991). Technology Affordances. Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (CHI ’91), 79–84.
8. McGrenere, J., & Ho, W. (2000). Affordances: Clarifying and Evolving a Concept. Proceedings of Graphics Interface 2000, 179–186.
9. Hartson, R. (2003). Cognitive, Physical, Sensory, and Functional Affordances in Interaction Design. Behaviour & Information Technology, 22(5), 315–338.
10. Chemero, A. (2003). An Outline of a Theory of Affordances. Ecological Psychology, 15(2), 181–195.

Related Reading

• The Octalysis Framework: The 8 Core Drives of Gamification
• Fitts’s Law: The Speed-Accuracy Math Behind Every Button
• Hick’s Law: Why More Options Slow People Down
• The MDA Framework: Mechanics, Dynamics, Aesthetics
• Dark Patterns: When Design Manipulates Instead of Helps
• The Behavioral Framework Library: Psychological Models Every Designer Should Know

WOULD YOU LIKE YU-KAI CHOU TO WORK WITH YOUR ORGANIZATION?