--- title: "Affordance" url: "https://www.insideuxdesign.com/de/glossar/affordance" language: "de" description: "Was ist eine Affordance im UX-Design? Einfach erklärt mit Beispiel und Praxistipps. Erfahre, wie du Buttons und Links gestaltest, die sofort erkannt werden." published: "2026-10-14T09:50:31+02:00" updated: "2026-10-14T13:08:13+02:00" --- # 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. - **Buchstabe:** A 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](https://www.insideuxdesign.com/de/ressourcen/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](https://www.insideuxdesign.com/de/blog/haeufige-usability-fehler-und-wie-man-sie-vermeidet). ## Verwandte Begriffe [Mentales Modell](https://www.insideuxdesign.com/de/glossar/mentales-modell), [Gestaltgesetze](https://www.insideuxdesign.com/de/glossar/gestaltgesetze), [Microcopy](https://www.insideuxdesign.com/de/glossar/microcopy), [Usability-Test](https://www.insideuxdesign.com/de/glossar/usability-test) ## Quellen - [Don Norman: Signifiers, not affordances. ACM Interactions, 2008](https://jnd.org/signifiers-not-affordances/) - [Kate Moran: Flat UI Elements Attract Less Attention and Cause Uncertainty. Nielsen Norman Group, 2017](https://www.nngroup.com/articles/flat-ui-less-attention-cause-uncertainty/) - [Hoa Loranger: Beyond Blue Links: Making Clickable Elements Recognizable. Nielsen Norman Group, 2015](https://www.nngroup.com/articles/clickable-elements/) ## Weitere Begriffe [ ### A/B-Test Ein A/B-Test ist ein Experiment, bei dem zwei Varianten einer Seite oder eines Elements gleichzeitig an zufällig aufgeteilte Besuchende ausgespielt werden. So entscheidest du anhand echter Daten, welche Variante besser funktioniert. ](https://www.insideuxdesign.com/de/glossar/a-b-test) [ ### ARIA ARIA ist ein W3C-Standard, der HTML um Rollen, Zustände und Eigenschaften ergänzt. So erfahren Screenreader, was ein Element ist und wie es sich gerade verhält. ](https://www.insideuxdesign.com/de/glossar/aria) [ ### Alternativtext Ein Alternativtext ist eine kurze Textfassung eines Bildes im HTML-Attribut alt. Screenreader lesen ihn vor, damit Menschen, die das Bild nicht sehen, dieselbe Information bekommen. ](https://www.insideuxdesign.com/de/glossar/alternativtext) [ ### Arbeitsgedächtnis Das Arbeitsgedächtnis hält Informationen für kurze Zeit fest, damit du mit ihnen arbeiten kannst. Es fasst nur wenig, deshalb sollten Interfaces möglichst wenig Merkarbeit verlangen. ](https://www.insideuxdesign.com/de/glossar/arbeitsgedaechtnis) [ ### Atomic Design Atomic Design ist eine Methode, Benutzeroberflächen aus kleinen, wiederverwendbaren Bausteinen aufzubauen: von einzelnen Elementen wie Buttons bis zu ganzen Seiten. ](https://www.insideuxdesign.com/de/glossar/atomic-design) [ ### BFSG Das Barrierefreiheitsstärkungsgesetz (BFSG) verpflichtet seit dem 28. Juni 2025 viele Unternehmen, bestimmte Produkte und digitale Dienstleistungen wie Onlineshops barrierefrei zu gestalten. ](https://www.insideuxdesign.com/de/glossar/bfsg) [ ### Barrierefreiheit Barrierefreiheit bedeutet, dass Websites, Apps und digitale Dokumente so gestaltet sind, dass alle Menschen sie nutzen können, auch mit einer Seh-, Hör-, motorischen oder kognitiven Behinderung. ](https://www.insideuxdesign.com/de/glossar/barrierefreiheit) [ ### Card Sorting Card Sorting ist eine Research-Methode, bei der Menschen Begriffe auf Karten in Gruppen sortieren. So siehst du, wie sie Inhalte gedanklich ordnen, und kannst eine verständliche Navigation planen. ](https://www.insideuxdesign.com/de/glossar/card-sorting) [ ### Cognitive Load Cognitive Load ist die geistige Anstrengung, die nötig ist, um eine Oberfläche zu verstehen und zu bedienen. Je weniger unnötige Denkarbeit ein Design verlangt, desto leichter fällt die eigentliche Aufgabe. ](https://www.insideuxdesign.com/de/glossar/cognitive-load) [ ### Contextual Inquiry Contextual Inquiry ist eine Research-Methode, bei der du Menschen in ihrem echten Arbeitsumfeld beobachtest und befragst. So siehst du, wie sie Aufgaben tatsächlich erledigen, nicht nur, wie sie davon erzählen. ](https://www.insideuxdesign.com/de/glossar/contextual-inquiry) [ ### Conversion Eine Conversion ist eine gewünschte Aktion auf einer Website oder in einer App, etwa ein Kauf oder eine Anmeldung. Die Conversion Rate zeigt, welcher Anteil der Besuche dazu führt. ](https://www.insideuxdesign.com/de/glossar/conversion) [ ### Dark Patterns Dark Patterns sind Gestaltungstricks, die Menschen zu Entscheidungen drängen, die sie eigentlich nicht treffen wollen, etwa versteckte Kündigungen oder vorausgewählte Zusatzoptionen. ](https://www.insideuxdesign.com/de/glossar/dark-patterns)