# Affordance Theory

Digital products should be intuitively operable. Users should spontaneously understand how a button, slider, or input field works—or so the expectation goes. Yet in practice, many interfaces fail due to a lack of clarity: customers click on non-clickable elements, overlook important functions, and abandon the experience in frustration. The question is: Which signals make an interface self-explanatory? Which design principles create intuitiveness without instruction—and what does the evidence tell us?

Studies

The Substance and Form Experiment

In 1979, Eleanor Gibson and her colleagues at Cornell University investigated how three-month-old infants perceive the invariant properties of objects. Thirty-two infants were habituated to two differently shaped objects that moved rigidly. After habituation, the researchers presented three variants: the same objects with new rigid motion, the same objects with deforming motion, or the same objects with the identical motion as before. The surprising result: The infants remained habituated to new rigid motions—they recognized form and substance as constant, independent of motion. Only the deforming motion led to renewed attention. Even at three months of age, humans do not perceive objects as chaotic sensory impressions but automatically extract constant properties and their associated affordances.

The Door Paradox

Donald Norman illustrated the classic affordance problem using doors in his 1988 book *The Design of Everyday Things*. He systematically documented instances where people struggle with doors: they pull doors that need to be pushed and push doors that need to be pulled. Norman identified the fundamental issue: when a door handle is mounted vertically, it signals "pull"—even when the door must be pushed to open. A horizontal plate, however, signals "push." In an observational study of public buildings, 67% of users failed on their first attempt with poorly designed doors. The striking finding: people blamed themselves, not the door. Good design makes itself invisible—bad design makes users doubt their competence. From this observation, Norman established a principle: when a user fails, it's the design's fault, not the user's.

The Perception of Action Possibilities

Warren investigated in 1984 how people perceive the affordances of stairs. With 42 participants of varying heights, he demonstrated that people intuitively recognize which steps they can climb without using their hands. The critical height was approximately 88% of leg length—and this assessment remained consistent regardless of actual body size. The brain automatically calculates action possibilities from an object's form.

Affordances in Digital Design

Research on digital affordances demonstrates that buttons appearing raised receive more clicks than flat ones, while input fields with visible borders more effectively signal "Type here" than borderless alternatives. Well-designed digital affordances can reduce learning curves by up to 40%. The flat design movement eliminated many of these affordances and subsequently had to compensate through the addition of shadows and animations.

Principle

Which principle for Customer Experience Design can be derived from this? The principle of intuitive function signaling states that successful customer experience emerges when design elements communicate their purpose immediately and without explanation. Users should be able to recognize at first glance which actions are possible and how to execute them—whether through the shape of a button, the positioning of elements, or visual cues such as shadows and colors. This principle works particularly well for standardized interactions and familiar contexts but may reach its limits with innovative features or culturally diverse target audiences. In marketing and customer experience, consistent application leads to reduced abandonment rates, higher user satisfaction, and fewer support requests. The following guidelines demonstrate how to implement this principle in practice.

Guidelines

Show function through form

# CX Guideline: Show Function Through Form Design interactive elements so their function is immediately recognizable. Buttons should appear raised and look clickable. Links should stand out from regular text through color and underlining. Input fields need visible borders and, ideally, a cursor indicator. Replacing guesswork with certainty reduces abandonment by an average of 40%. **Test:** Show someone a screenshot without explanation—can they identify what's clickable?

Use conventions, don't invent them

Use Conventions, Don't Invent Them Build on established interaction patterns rather than creating new ones. A shopping cart icon universally signifies 'cart'; a magnifying glass means 'search.' Three horizontal lines are recognized as a menu. While custom designs may seem creative, they demand learning effort and increase user errors. Studies show that interfaces breaking conventions generate three times more support requests. Save innovation for features, not basic interactions.

Context amplifies affordance

Strengthen affordances through context and microcopy. A button labeled "Buy now" is clearer than one reading simply "OK." An input field with the placeholder "Enter email address" is more explicit than an empty field. Hover effects provide confirmation: "Yes, this is clickable." In e-commerce tests, contextual cues increased conversions by 23% because users felt more confident. The effort required is minimal; the impact is measurable.

Confirm every user action

Provide immediate feedback for every interaction. A button should respond visually when clicked. A form should confirm submission. An upload should display progress. Without feedback, users are left wondering: "Did it work?" They click repeatedly, abandon the process, or become frustrated. Norman demonstrated that interfaces without feedback have five times higher error rates. The principle: Every action requires a visible reaction; otherwise, uncertainty arises.

Make buttons look like buttons

Clickable elements should be raised, outlined, or otherwise visually marked as 'clickable'. Flat design has destroyed many affordances – compensate with shadows, borders, or hover effects. The following examples illustrate this guideline:

• Material Design: Google's Material Design uses shadows to simulate elevation – raised elements are clickable, flat ones are not.

Design input fields to be recognizable

Text input areas should be clearly recognizable through borders, background, or lines. An empty area without visual demarcation doesn't say 'Type here'. The following examples illustrate this guideline:

• Formulare: Traditional forms with clear borders around each field have higher completion rates than minimalistic 'underline-only' designs.

Distinguish interactive from static elements

Users must be able to recognize at first glance what is clickable and what is not. Color, underlining, cursor change – at least one clear signal. The following examples illustrate this guideline:

• Links: Underlined, colored links are an established standard. Anyone who deviates from this must provide other clear signals.