What is an affordance?

Imagine walking into a room and seeing a chair. Without thinking, you know you can sit on it. That’s an affordance in action—a design feature that intuitively communicates how something should be used. In technology, affordances are the unsung heroes that make apps feel familiar, gadgets feel intuitive, and interfaces feel like second nature. They’re the reason you know to swipe left on a dating app, tap a button to submit a form, or pull a door handle to open it.

Put simply: Affordances are clues. They tell users, “Here’s what you can do with me.”

A quick trip back in time: the origin of affordances

The term “affordance” was coined by psychologist James J. Gibson in the 1970s to describe how objects invite specific actions. For example, a flat surface “affords” sitting, while a handle “affords” gripping.

But it was Don Norman, a cognitive scientist and usability engineer, who brought affordances into the design mainstream. In his iconic book The Design of Everyday Things, Norman emphasized that good design shows users how to interact with objects—no instructions needed. His work laid the foundation for user-centered design, where affordances became a cornerstone.

Types of affordances (and why they matter)

Not all affordances are created equal. Let’s break down the most common types:

1. Perceived affordances
   What users think they can do. Example: A raised, 3D-looking button on a screen suggests it can be clicked.
2. Physical affordances
   Tangible cues in the real world. Example: The textured grip on a pen signals where to hold it, making writing comfortable and intuitive.
3. Digital affordances
   Virtual interactions that guide users through cues. Example: A trash can icon implies deleting a file, while a progress bar shows how much time is left for a download, both making digital actions feel clear and predictable.
4. Hidden affordances
   Features that aren’t obvious until discovered. Example: Swiping down to refresh a social media feed.
5. False affordances
   Design elements that trick users (usually bad design!). Example: An underlined word that isn’t a hyperlink.

Why affordances are your design superpower

Affordances aren’t just “nice to have”—they’re critical to creating technology that works for people. Here’s why:

• They put users first
  Affordances align with how people naturally think and behave. For example, a progress bar (a visual affordance) reduces anxiety by showing how much time a download will take.
• They cut the learning curve
  Ever used an app that felt instantly familiar? Thank affordances! When Instagram introduced “swipe up for more,” users knew what to do—no tutorial needed.
• They make technology inclusive
  Good affordances bridge gaps for diverse users. Tactile buttons on a screen reader, for instance, could help visually impaired individuals navigate apps confidently.
• They future-proof your design
  As tech evolves (think VR, haptic interfaces), affordances ensure new tools feel intuitive. For example, Meta’s VR controllers use grip textures and button placements that mirror real-world actions.

Quick tips: how to use affordances in your designs

Whether you’re coding an app, prototyping a gadget, or even designing a coffee mug, these tips will help you harness the power of affordances:

1. Know your user’s “language”
   Study how your audience already interacts with similar tools. Example: If your users are gamers, borrow affordances from joysticks or touchscreens they’re already fluent in.
   • Resource: Jakob Nielsen’s 10 Usability Heuristics
2. Combine affordance types
   Layer physical, digital, and perceived cues. Example: Apple’s Taptic Engine uses subtle vibrations (physical) + visual animations (digital) to confirm actions like sending a message.
3. Make it intuitive, not instructional
   If users need a manual to figure out your design, revisit the affordances. Great design communicates its functionality effortlessly. Example: Slack’s “@” symbol intuitively signals tagging someone—no explanation required.
4. Leverage constraints
   Sometimes, limiting options clarifies affordances. Example: A door with only a push plate (no handle) signals it should be pushed, not pulled.
5. Document your affordances
   Create a style guide for your team. Example: Google’s Material Design system standardizes buttons, shadows, and animations to ensure consistency across apps.
   • Resource: Material Design Guidelines

Real-world examples: affordances in action

Affordances are everywhere, quietly shaping how we interact with technology. Take smartphones, for example. The iconic “slide to unlock” gesture (RIP, iPhone!) was a stroke of genius—it mimicked the motion of sliding a physical latch, instantly making the action feel familiar and intuitive.

E-readers like Amazon’s Kindle also excel at leveraging affordances. The matte screen texture mimics the feel of paper, subtly inviting users to “turn pages” as they would with a physical book. This small but powerful design choice bridges the gap between digital and physical reading experiences.

In the realm of accessibility, affordances play a crucial role in empowering users. Take the Tomat Navigator, a LibreTactile project, for instance. It uses tactile feedback to help users “feel” webpage layouts, blending physical and digital affordances to create a seamless navigation experience for visually impaired individuals. These examples show how thoughtful affordances can make technology not only functional but also deeply intuitive and inclusive.

Want to dive deeper?

• Book: The Design of Everyday Things by Don Norman (the affordance bible!).
• Article: Affordances in UX Design (Interaction Design Foundation).

Wrapping up

Affordances are like silent guides—they don’t shout instructions but make interactions feel effortless. At LibreTactile, we use them to build tactile technologies that empower users, whether they’re navigating the web, gaming, or rehabilitating motor skills. The next time you design something, ask yourself and your audience: “Does this feel obvious?” If the answer is yes, you’ve nailed it.

Ready to design with empathy? Explore our projects to see UCD in action or send us a message to share your insights!