UX-Glossar
Affordance
Eine Affordance beschreibt, welche Handlung ein Objekt möglich macht und ob Menschen das erkennen: Ein Button lädt zum Drücken ein, ein Griff zum Ziehen.
Stell dir eine Glastür mit einem großen Griff vor. Du ziehst daran, aber die Tür geht nur nach innen auf. Der Griff hat dir „Zieh mich“ signalisiert, obwohl Drücken richtig gewesen wäre. Solche Türen gibt es so oft, dass sie im Englischen einen eigenen Spitznamen haben: Norman Doors, benannt nach dem Designforscher Don Norman.
Im Digitalen passiert dasselbe, wenn ein Text wie ein Button aussieht, aber nichts tut, oder wenn ein Button so flach ist, dass niemand ihn bemerkt.
Einfach erklärt
Eine Affordance (deutsch etwa: Angebotscharakter) beschreibt, welche Handlungen ein Gegenstand möglich macht. Ein Stuhl bietet Sitzen an, ein Knopf Drücken, ein Schieberegler Verschieben. Entscheidend für das Design ist, ob Menschen diese Möglichkeit auch erkennen.
Der Begriff stammt vom US-Psychologen James J. Gibson. Er führte ihn 1966 ein und beschrieb ihn 1979 ausführlich in seinem Buch über visuelle Wahrnehmung. Für Gibson war eine Affordance eine Beziehung zwischen Umgebung und Lebewesen: Eine hohe Stufe ist für Erwachsene eine Sitzgelegenheit, für ein Kleinkind ein Hindernis.
Don Norman brachte den Begriff 1988 mit seinem Buch, das heute als „The Design of Everyday Things“ bekannt ist, ins Design. Er meinte damit vor allem die wahrgenommenen Handlungsmöglichkeiten. Mehr zum Buch findest du in der Ressource The Design of Everyday Things.
Affordance und Signifier
Weil der Begriff im Design oft unscharf verwendet wurde, hat Norman später einen zweiten eingeführt: den Signifier, also ein wahrnehmbares Zeichen, das zeigt, wo und wie du handeln kannst. Die Affordance ist die Möglichkeit, der Signifier der Hinweis darauf. Auf einem Touchscreen kannst du theoretisch überall tippen. Erst Form, Farbe, Schatten oder Beschriftung zeigen dir, wo Tippen tatsächlich etwas bewirkt.
Probleme entstehen in zwei Richtungen. Eine versteckte Affordance gibt es zwar, sie ist aber nicht erkennbar, etwa ein Wisch-Menü ohne jeden Hinweis. Eine falsche Affordance verspricht eine Handlung, die es nicht gibt, etwa eine Überschrift im Button-Stil. Eine Eyetracking-Studie der Nielsen Norman Group von 2017 zeigte, dass Testpersonen auf Seiten mit schwachen Klick-Hinweisen im Schnitt rund 22 Prozent länger brauchten, um klickbare Elemente zu finden.
Ein Beispiel
Ein Beispiel: Eine Banking-App zeigt den Button „Überweisung senden“ als grauen Text ohne Rahmen, gleich groß wie der Fließtext. Viele tippen daneben oder scrollen suchend auf und ab.
Nach der Überarbeitung ist der Button eine farbige Fläche mit abgerundeten Ecken und deutlichem Kontrast. Reiner Text ist dagegen nie mehr farbig hervorgehoben. Ohne einen Satz Erklärung ist jetzt klar, was antippbar ist und was nicht.
In der Praxis
- Klickbares sichtbar machen. Buttons brauchen eine erkennbare Form, Links eine eindeutige Farbe oder Unterstreichung, die sich vom Fließtext abhebt.
- Keine falschen Versprechen. Gestalte nicht klickbare Elemente nicht wie Buttons oder Links, sonst tippen Menschen ins Leere.
- Konventionen nutzen. Bekannte Muster sind starke Signifier. Mehr typische Stolperfallen beschreibt der Artikel Häufige Usability-Fehler und wie man sie vermeidet.
Verwandte Begriffe
Mentales Modell, Gestaltgesetze, Microcopy, Usability-Test