Blog über User Experience, Usability und Interface Design

Was ist Affordance?

Affordance beschreibt, wie gut man von einem Objekt ablesen kann, wie man es anwendet. Im Interface-Design hat die Affordance von interaktiven Elementen eine besondere Relevanz für die Usability.

Herkunft und Begriffserklärung

Der Begriff „Affordance“ wurde ursprünglich vom Psychologen James J. Gibson in den 1970er Jahren in der Wahrnehmungspsychologie geprägt.

Nach Gibsons Theorie verbinden Menschen, sowie andere Lebewesen, mit Objekten und deren wahrgenommenen Eigenschaften auch bestimmte Handlungen. Dabei sollen sich durch Evolution und Kultur bestimmte Bedeutungen für Objekte etablieren.

Ein rotes Objekt in der richtigen Größe wird beispielsweise von den entsprechenden Tieren mit Nahrung assoziiert.

Ein meschliches Beispiel ist ein Stuhl. Die Affordance eines Stuhls besteht darin, dass er von Menschen benutzt werden kann, um sich zu setzen. Dies wird durch die wahrnehmbaren Eigenschaften des Stuhls impliziert.

Für den Bereich Usability und UI-Design adaptierte Donald Norman diesen Begriff in seinem Buch „The Psychology of Everyday Things“.

Anwendung im UI Design

Im UI Design ist Affordance der Umfang, in welchem sich ein Interface-Element selbst erklären kann. Ein Element mit hoher Affordance ermöglicht es dem Benutzer, sofort zu verstehen, wie es zu benutzen ist und was es bedeutet.

Norman unterscheidet hier, wie ein Objekt verstanden wird und wie es wirklich verwendet werden kann. Ein Missverständnis zwischen wahrgenommener und tatsächlicher Affordance führt zu Irritationen und Usability-Problemen.

Affordance am Beispiel eines CTA – Button

Im Interface-Design ist der Call-to-Action (CTA)-Button ein perfektes Beispiel für ein Element, das eine hohe Affordance bieten muss. Da CTAs oft auf Conversion abzielen, ist es entscheidend, dass Benutzer diese Buttons intuitiv nutzen.

Gestaltung für klare Affordance

Visuelle Gestaltung: 

Ein Button sollte klar als solcher erkennbar sein. 

Eine farblich hervorgehobene Fläche mit kurzem Text signalisiert sofort seine Funktionalität. Für einen CTA-Button ist es wichtig, dass er in der visuellen Hierarchie dominiert. Dies erreichen Sie durch auffällige Farben und eine angemessene Größe. Gleichzeitig ist es wichtig, die Konsistenz mit anderen interaktiven Elementen zu bewahren, um ein harmonisches Gesamtbild zu schaffen.
Klare Beschriftung: 
Eine präzise und direkte Beschriftung klärt unmissverständlich, welche Aktion der Button auslöst. Verwenden Sie aktive, zielgerichtete Formulierungen, die den Benutzer zum Handeln anregen.
Intuitive Platzierung: 
Positionieren Sie den Button dort, wo Benutzer ihn natürlich erwarten. Dies hängt von den gängigen Konventionen und der Struktur Ihrer Benutzeroberfläche ab. Eine gut durchdachte Platzierung führt den Benutzer nahtlos zur gewünschten Aktion.

Fragen oder Feedback ?
Sag hallo, per Mail oder auf Linkedin!