The Invisible Language of Web Design: Affordances That Speak Without Words
Discover how Don Norman's timeless design principles from "The Design of Everyday Things" can transform your web interfaces from confusing to intuitive.
Savira Azaria
Chief Product Officer
Have you ever approached a door and instinctively known whether to push or pull? Or picked up your phone and immediately understood how to unlock it? This intuitive understanding comes from what Don Norman calls affordances in his groundbreaking book "The Design of Everyday Things."
In web design, affordances are the invisible language that tells users what they can do and how to do it. When done right, they make interfaces feel natural and effortless. When done wrong, they leave users frustrated and confused.
What Are Affordances?
Affordance:
The relationship between a physical object and a person that determines how the object could possibly be used.
— Don Norman, "The Design of Everyday Things"
In web design, affordances aren't just about what's possible—they're about what users perceive as possible. A button should look clickable. A link should look different from regular text. A form field should clearly indicate where to type.
The Classic Door Problem
Norman's famous door example perfectly illustrates good vs. bad affordances. The problem: when you can't tell if you should push or pull a door just by looking at it.
Bad Design: "Norman Door"
Flat handle gives no visual clue. Users have to guess, leading to the embarrassing "push when you should pull" moment.
Good Design: Clear Affordances
Vertical handle clearly suggests pulling motion. No confusion, no frustration.
Key Insight:
Good affordances eliminate guesswork. Users should know what to do immediately, without trial and error or reading instructions.
Web Affordances in Action
The same principles apply to web interfaces. Compare these button designs:
Poor Affordance
Looks like plain text
Better Affordance
Has background, no hover feedback
Excellent Affordance
Clear button style, feedback, proper states
Signifiers: The Communication Layer
While affordances are about what's possible, signifiers are about communication—they tell users where the action should take place.
Examples of Good Signifiers:
- Underlined text signals a link
- Cursor change on hover indicates clickability
- Button shadows suggest they can be "pressed"
- Form field borders show where to type
- Loading spinners communicate "wait"
Practical Guidelines for Web Affordances
Do This
- Make buttons look like buttons (with clear boundaries)
- Use consistent styling for similar elements
- Provide immediate feedback for user actions
- Make clickable areas large enough for easy targeting
- Use familiar icons and conventions
- Show disabled states clearly
- Use color AND other visual cues (not just color)
Avoid This
- Making non-clickable elements look clickable
- Using the same style for different functions
- Providing no feedback after user actions
- Creating tiny click targets
- Using unclear or inconsistent icons
- Hiding important functionality
- Relying solely on color to convey meaning
The Invisible Made Visible
Great web design, like great product design, is often invisible. Users don't consciously think about affordances—they just know what to do. When you successfully apply Norman's principles, your interface becomes intuitive and delightful to use.
Remember the Golden Rule:
"Good design is actually harder to notice than poor design, in part because good designs fit our needs so well that the design is invisible."
— Don Norman
Savira Azaria
Chief Product Officer
UX/UI designer and product strategist dedicated to creating user-centric digital experiences. Advocates for intuitive design and seamless user journeys.