Affordance

Affordance bezeichnet das wahrgenommene Handlungsangebot eines Objekts oder UI-Elements — die visuelle oder physische Eigenschaft, die kommuniziert, wie es benutzt werden kann.

Rubrik: Mediendesign & Digitale Medien · Unterrubrik: UX/UI Design · Niveau: Fortgeschritten Synonyme / Auch bekannt als: Handlungsangebot, Signifier, Perceived Affordance, Bedienhinweis

Was ist Affordance?

Der Begriff "Affordance" (vom englischen to afford — etwas anbieten, ermöglichen) wurde 1977 vom Wahrnehmungspsychologen James J. Gibson in seiner ökologischen Wahrnehmungstheorie eingeführt. Gibson beschrieb Affordances als objektive Eigenschaften der Umwelt, die unabhängig davon existieren, ob ein Organismus sie wahrnimmt oder nicht. Ein Stuhl "bietet" Sitzen an — unabhängig davon, ob jemand sitzt.

Donald A. Norman übertrug das Konzept 1988 in seinem epochalen Werk The Design of Everyday Things auf die Designpraxis und modifizierte es entscheidend: Für Design sind nicht die objektiven Affordances relevant, sondern die wahrgenommenen Affordances (Perceived Affordances) — was Nutzer glauben, tun zu können. Norman präzisierte später den Begriff Signifier für visuelle oder auditive Hinweise, die explizit kommunizieren, was getan werden soll.

Erklärung

Gibsons ursprüngliches Konzept

Gibson entwickelte seine Theorie im Kontext der Tierwahrnehmung: Ein Ast "affordet" Sitzen für einen Vogel, weil er die richtige Dicke und Stabilität hat. Wasser "affordet" Trinken für ein durstiges Tier. Diese Handlungsangebote sind direkt wahrnehmbar — keine kognitive Analyse nötig.

Für Design relevant ist diese direkte Wahrnehmbarkeit: Ein gut gestaltetes UI-Element kommuniziert seine Funktion so direkt, dass keine Nachdenken nötig ist.

Normans Übertragung auf digitales Design

Norman unterscheidet in The Design of Everyday Things:

Gute Affordances: Türknäufe bieten Drehen an, Türgriffe bieten Ziehen an. Wenn die falsche Aktion ausgeführt wird (Ziehen statt Drücken), ist das Design schuld, nicht der Nutzer.

Schlechte Affordances: Glastüren ohne Griff — schieben oder ziehen? Das Symbol sagt nichts. Glasflächen im Webdesign ohne Schatten, Rand oder andere Hinweise — ist das klickbar?

False Affordances: Elemente sehen klickbar aus, sind es aber nicht. Unterstrichener Text der kein Link ist, blaue Texte die keine Links sind, rechteckige Elemente ohne Hover-Reaktion.

Signifier vs. Affordance

In der überarbeiteten Ausgabe von The Design of Everyday Things (2013) präzisiert Norman:

• Affordance = Die tatsächliche Handlungsmöglichkeit (objektiv: ein Knopf kann gedrückt werden)
• Signifier = Das visuelle/auditive Signal, das auf die Affordance hinweist (subjektiv kommuniziert: Schatten, Gradient, Hover-Effekt, Labeltext)

Für UX-Designer ist der Signifier die Designaufgabe: Wie kommuniziere ich dem Nutzer, was möglich ist?

Affordances im digitalen Interface

Im digitalen Kontext gibt es keine physische Haptik — keine Druckpunkte, keine Materialbeschaffenheit. Affordances müssen rein visuell kommuniziert werden. Klassische digitale Signifier:

Buttons:

• Erhöhung durch Schatten (erscheint drückbar)
• Abgerundete Ecken (sanftere, einladende Form)
• Hover-Zustandsveränderung (Farbe, Schatten ändert sich = reaktiv)
• Cursor-Wechsel zu pointer

Links:

• Blaue Farbe (Web-Konvention seit den 1990ern)
• Unterstrich (ursprünglich: Hyperlink-Signifier)
• Cursor-Wechsel zu pointer

Eingabefelder:

• Rahmen/Border (abgrenzendes Rechteck = "hier tippt man rein")
• Cursor-Wechsel zu text
• Placeholder-Text (sekundärer Hinweis auf Eingabe)

Scrollbare Bereiche:

• Scrollbar (sichtbar oder on-hover)
• Text, der am unteren Rand abgeschnitten ist (impliziert Fortführung)
• Fade-Overlay am Rand

Das Flat-Design-Affordance-Problem

Flat Design (2013+ popularisiert durch iOS 7) eliminierte viele traditionelle Signifier: Keine Schatten, keine Verläufe, keine simulierten 3D-Oberflächen. Das Problem: Ohne diese Signifier ist nicht mehr klar, was klickbar ist. Studien nach iOS 7 zeigten erhöhte Confusion-Raten.

Die Industrie hat sich seitdem auf "Near Flat" oder "Flat Design 2.0" geeinigt: Schatten und Elevation bleiben als Affordanz-Hinweise erhalten, aber dezenter als im Skeuomorphismus.

Beispiele

1. Apple iPhone Homescreen: Ikonen mit abgerundeten Ecken und einem leichten Glanzlicht (iOS ≤ 6) — klassische Skeuomorphismus-Affordance. Ab iOS 7: flache Icons, klickbar durch Konvention und Position erkennbar.
2. Google Search Bar: Weißes Rechteck auf hellem Hintergrund, leicht schattiert, Lupe-Icon rechts. Mehrere overlappende Signifier kommunizieren: "Hier tippt man und startet eine Suche."
3. Spotify Play-Button: Grüner Kreis mit weißem Dreieck — universell verstanden als "Play". Das Dreieck als Play-Symbol ist eine kulturell etablierte Affordance seit Jahrzehnten physischer Mediengeräte.
4. Airbnb Datumsauswahl: Kalender-Icon im Datumsfeld ist ein expliziter Signifier: "Klick hier, um einen Datumspicker zu öffnen." Ohne Icon würde das Feld wie ein normales Textfeld wirken.
5. LinkedIn "Connect"-Button: Outlined Button (kein Fill) kommuniziert: "Dies ist eine wichtige sekundäre Aktion." Der primär gefüllte Button wäre für unmittelbarere Aktionen. Die Buttonform ist Affordance für den Aktions-Typ.

In der Praxis (Figma-Umsetzung)

Affordance im Component-System sicherstellen:

1. Jeder interaktive State muss einen hover Variant haben (zeigt Reaktivität)
2. cursor: pointer im Inspect-Panel für alle klickbaren Elemente dokumentieren
3. Buttons haben immer mindestens 2 px Schatten im Default-State

Affordance-Audit: Erstelle eine Figma-Page "Affordance Audit". Platziere alle wichtigen UI-Elemente und notiere: Welche Signifier kommunizieren die Interaktivität? Fehlen Signifier? Gibt es False Affordances?

Unterschied klickbar/nicht-klickbar: Visuelle Unterscheidung durch:

• Klickbar: Cursor-Change, Hover-State, Schatten oder Border, Primärfarbe
• Nicht-klickbar: Kein Hover-Zustand, keine Farbauszeichnung, kein Schatten

Flat Design Balance: Wenn das Design-System Flat ist: Kompensiere fehlende Schatten durch andere Signifier (Farbe, Umrandung, Position). Niemals alle Signifier gleichzeitig entfernen.

Vergleich & Abgrenzung

Affordance vs. Usability: Affordance ist ein spezifischer Aspekt von Usability — der Teil, der sich auf die intuitive Erkennbarkeit von Interaktionsmöglichkeiten bezieht. Gute Usability umfasst mehr: Effizienz, Fehlertoleranz, Lernbarkeit.

Affordance vs. Feedback: Affordance kommuniziert VOR der Interaktion ("hier kann ich klicken"). Feedback kommuniziert NACH der Interaktion ("mein Klick wurde registriert"). Beide sind notwendig für ein vollständiges Interaktionsdesign.

Häufige Fragen (FAQ)

Gilt die Blau-für-Links-Konvention noch? Als Standard: Ja. Hyperlinks ohne blaue Farbe und Unterstrich haben nachweislich niedrigere Klickraten. In stark designierten Umgebungen (z. B. Modewebsite) können abweichende Konventionen funktionieren — aber nur wenn konsistent und erkennbar. Die Deviation von etablierten Affordances erfordert starke kompensatorische Signifier.

Was ist der Unterschied zwischen Affordance und Feedback? Affordance = erwartete Handlung VOR der Interaktion. Feedback = Reaktion NACH der Interaktion. Ein Knopf, der sich gedrückt anfühlt (Affordance) und beim Loslassen einen Klick-Sound macht (Feedback) — zwei getrennte, sich ergänzende Konzepte.

Verwandte Einträge

• Fitts' Law — Größe und Erreichbarkeit von Klickzielen
• Microcopy — Texte als Signifier für Interaktivität
• Hick-Hyman-Gesetz — Komplexität und Entscheidungszeit

Weiterführend

• Norman, D. A. (2013). The Design of Everyday Things (überarbeitete Ausgabe). Basic Books. (Originalausgabe 1988 als The Psychology of Everyday Things)
• Gibson, J. J. (1977). The Theory of Affordances. In R. Shaw & J. Bransford (Hrsg.), Perceiving, Acting and Knowing. Lawrence Erlbaum.
• Lidwell, W., Holden, K. & Butler, J. (2010). Universal Principles of Design. Rockport Publishers.
• Krug, S. (2014). Don't Make Me Think, Revisited. New Riders.