Affordanz

Was ist eine Affordanz?

Eine Affordanz beschreibt, welche Handlung ein Gegenstand anbietet. Ein Türgriff lädt zum Ziehen ein, eine flache Platte zum Drücken. Geprägt hat den Begriff der Wahrnehmungspsychologe James J. Gibson. Donald Norman hat ihn mit seinem Buch „The Design of Everyday Things“ in die Gestaltung von Produkten und Interfaces getragen.

Im digitalen Design geht es vor allem um wahrgenommene Affordanzen: Erkennt ein Mensch auf den ersten Blick, dass er hier klicken, tippen, wischen oder ziehen kann? Norman unterschied später zwischen der Affordanz selbst und dem Signifier, also dem sichtbaren Hinweis darauf, etwa Schatten, Unterstreichungen oder Icons.

Warum Affordanzen wichtig sind

Wenn Elemente nicht verraten, was sie tun, raten Nutzer. Sie übersehen Funktionen oder klicken auf Dinge, die nichts auslösen. Beides kostet Zeit und Vertrauen. Klare Affordanzen senken die Denkarbeit, weil Menschen Erfahrungen aus anderen Produkten übertragen können. Im Shop heißt das weniger Abbrüche, in SaaS-Tools mehr genutzte Funktionen ohne Erklärvideo.

So setzt du Affordanzen in der Praxis ein

• Gestalte interaktive Elemente unterscheidbar: Buttons sehen wie Buttons aus, Links heben sich vom Fließtext ab.
• Nutze bekannte Muster statt eigener Erfindungen, etwa Häkchen für Checkboxen oder Pfeile für aufklappbare Bereiche.
• Gib Feedback bei Interaktion: Hover-, Fokus- und Aktiv-Zustände bestätigen, dass ein Element reagiert.
• Vermeide falsche Signale: Was klickbar aussieht, muss auch klickbar sein. Dekorative Elemente dürfen nicht wie Bedienelemente wirken.
• Prüf es im Test: Lass Nutzer laut beschreiben, was sie auf einem Screen anklicken würden.

Beispiel

In einem SaaS-Dashboard lassen sich Tabellenzellen direkt bearbeiten. Optisch unterscheiden sie sich aber nicht von reinem Text. Im Nutzertest exportieren Teilnehmende die Daten umständlich nach Excel, um Werte zu ändern. Ein dezenter Rahmen beim Hovern und ein Stift-Icon machen die Funktion sichtbar.