Affordances vs. Signifiers: The Invisible Language of Design

Don Norman’s Legacy in UX

The concept of Affordance was originally introduced by James J. Gibson in perceptual psychology, but it was Don Norman who adapted it to design in his seminal book The Design of Everyday Things. For Norman, good design is one that doesn’t need instruction manuals: the user knows what to do just by looking at the object.

If a user pulls a door that they should push, the error is not the user’s, but the designer’s for putting an incorrect Signifier (a handle instead of a push plate).

1. Affordance: The Potential Capability

Affordance is a technical and physical relationship between an object (physical or digital) and the user. It represents everything that “can be done” with that object.

• In the physical world: A gap in a wall has the affordance of “putting your hand in.” A chair has the affordance of “sitting down.”
• In the digital world: A button has the affordance of “being pressed.” A slider has the affordance of “moving horizontally.”

2. Signifier: The Communication Signal

However, affordance is often invisible or ambiguous. This is where the Signifier comes in. It is the visual (or auditory, or haptic) clue that screams at us: “Hey, you can press me!” or “You can slide me!”.

• Web Example: A blue button with a soft shadow (elevation) is a powerful signifier. The shadow tells us the button is “above” the surface and can be pressed down.
• Mobile App Example: A red dot over an icon tells us there is new content to see. The dot is the signifier of the notification action.

Why they are Critical for User Experience

User frustration is often born from a mismatch between these two concepts:

A. Invisible Affordances (The Button that doesn’t look like a button)

If you design a button that looks like plain text, you have removed the signifier. The affordance exists (it can be clicked), but the user doesn’t know it. This leads to missed clicks and lack of discoverability.

B. False Signifiers (Visual Deception)

If something looks like a link (classic underlined blue text) but nothing happens when clicked, you have a false signifier. This breaks user trust in the interface and generates mental fatigue as they try to figure out what works and what doesn’t.

C. Shadow and Relief (Schematic Signifiers)

In modern interface design (like Material Design or Apple’s HIG), shadows and gradients are not just aesthetics: they are signifiers of depth and interactivity. They help us understand which elements are in the foreground and which are static.

The Case of Touch Screens

On mobile devices, where there is no cursor that changes shape when hovering, visual signifiers are even more critical. The user “taps to test.” Good mobile design uses color, size, and position to clearly indicate where interaction is possible without the user having to guess.

Mentor’s Tips

• Don’t assume the user knows: Whenever you add a feature (affordance), ask yourself: “How does the user know this is here?”. If the answer isn’t visually obvious, you need a better signifier.
• Follow standards: Use icons and patterns people already know. Don’t try to reinvent the “Menu” or “Search” icon. Familiarity is the fastest signifier that exists.
• Try the “Squint Test”: Squint your eyes while looking at your interface. Can you still tell which elements are buttons and which are just text? A good signifier survives even a lack of sharpness.
• Consistency: If you use blue for links, never use blue for static text. This avoids creating false signifiers.

Useful Resources and Tools

• Don Norman Office: The Design of Everyday Things
• NNGroup: Affordances and Signifiers
• UX Collective: Visual affordances in UI design
• Laws of UX: Jakob’s Law (On the importance of familiarity).

cognitive-load-management fitts-law