Design Principles
Affordances & Signifiers
An element's appearance should signal how to use it — buttons should look clickable, links like links.
Where it comes from
The concept of affordances comes from the psychologist James Gibson and was brought into design by Don Norman in The Design of Everyday Things. Norman later sharpened the idea, distinguishing an affordance (what's possible) from a signifier (the visible cue that tells you so).
Why it matters for your website
Design should communicate function without explanation. Norman's work on affordances and signifiers says an object's appearance should signal how to interact with it. When interactive elements don't look interactive — or static ones look like they do something — users have to guess, and guessing leads to mistakes and exits.
The web makes this harder than the physical world, because nothing on a screen has inherent physical properties — a button affords clicking only because we've all agreed it looks like a button. Every interactive element relies on learned visual conventions to announce what it does, and breaking those conventions breaks the communication.
The failure runs in both directions. An interactive element that doesn't look interactive goes unused; a static element styled like a control gets clicked in vain. Both leave the user guessing — and guessing, on a page they can leave in one tap, usually ends in leaving.
Wrong vs right
A 'button' that's just coloured text with no button-like styling, so users don't realise they can click it.
A clearly styled button — shape, fill, affordance cues — that visibly invites the click.
An underlined word that looks like a link but isn't, or a card that looks clickable but does nothing.
Interactive styling reserved strictly for interactive elements, so appearance reliably signals function.
A swipeable or draggable element with no visible cue that it can be swiped or dragged.
A visible signifier — a handle, an arrow, a hint of motion — that reveals the hidden interaction.
Understanding Affordances & Signifiers
An affordance is a relationship between an object and a user: what the object makes possible. A button affords pressing, a link affords clicking, a slider affords dragging. Norman's crucial refinement is that affordances alone aren't enough — users also need signifiers, the perceptible cues that reveal which affordances exist and how to use them. Appearance, in short, has to communicate function.
On screen, this is entirely a matter of learned convention, because pixels have no real physical affordances. An element 'looks clickable' only because it resembles the things we've learned are clickable — a raised shape, a distinct colour, an underline. The designer's job is to make interactive elements wear those signifiers clearly, and to make sure non-interactive elements don't accidentally borrow them.
When the signal is wrong, users guess — and guessing is expensive. An interactive element that doesn't look interactive is invisible; a decorative element that looks interactive is a broken promise — and both cost clicks and confidence. Getting affordances and their signifiers right is what lets a design communicate without instructions. It connects to signifiers, the law of similarity, and self-evident design.
How Kweri checks it
Kweri can catch some concrete affordance problems — interactive elements styled so they don't look interactive, or static elements that mimic clickable controls — by reasoning about common conventions for what 'looks clickable'. What it can't always judge is whether a given styling reads as interactive to your specific users, which depends on context and convention. So Kweri flags likely mismatches between appearance and function, and prompts you to make interactive elements clearly signify their interactivity, while finer calls remain a matter of design judgement and testing.
FAQ
What is an affordance in design?
An affordance is what an object makes possible for a user — a button affords pressing, a link affords clicking. In digital design, an element should visually signal the actions it affords, so users know how to interact with it without instruction.
What's the difference between an affordance and a signifier?
An affordance is what's possible; a signifier is the visible cue that tells users so. Norman drew this distinction because an element can be clickable, but unless a signifier announces it, users won't know — making the affordance effectively invisible.
Why do interactive elements need to look interactive?
Because users decide what they can do based on appearance. An element that's clickable but doesn't look it goes unused, while a static element styled like a control gets clicked in vain. Both leave users guessing, which causes errors and exits.
Who came up with affordances?
The psychologist James Gibson originated the concept; Don Norman brought it into design in The Design of Everyday Things and later refined it by distinguishing affordances from signifiers.
How do affordances apply to web design?
Since screen elements have no physical properties, affordances rely entirely on learned visual conventions. Buttons, links, and controls must wear recognisable signifiers, and non-interactive elements must avoid mimicking them, so appearance reliably communicates function.
Related principles
Signifiers are the visible cues that tell users where and how an action can be taken.
Always tell users what's happening, with clear feedback delivered in good time.
Good design externalises the knowledge users need to act — it puts it in the world, not in their heads. A product that requires memorisation is a product that requires training.
Attribution & sources
Identified by Don Norman (concept from James Gibson). Catalogued from Don Norman — Signifiers, Not Affordances (jnd.org).
Affordances originate with Gibson and were brought into design by Norman, who later distinguished them from signifiers; the linked article is the primary source.
See Affordances & Signifiers on your own site
Run a free Kweri audit — a plain-English review of your site’s speed, accessibility, SEO and design, ranked by what to fix first. No login, no jargon.
Run a free audit →