Infografik Userinterfacedesign Affordance 01

Die Gebrauchseigenschaft eines Objektes

Der eindeutige Angebotscharakter der unterschiedlichen Interface Elemente unterstützt die einfache Bedienung des digitalen Produkts.

Was bedeutet Affordance?

Affordance (dt.: Angebotscharakter) ist die von einem Objekt angebotene Gebrauchseigenschaft für Menschen. Ein Button zum Beispiel, hat durch seine leicht erhöhte Gestaltung den Angebotscharakter, dass dieser gedrückt werden kann. Mit einer Wisch-Geste den Button zu bedienen gehört nicht zum Angebotscharakter. Ein Türgriff in der richtigen Grösse und an der richtigen Position suggeriert, dass dieser gedrückt werden kann.
Die Technik der Affordance wir im Digital Product Design angewendet, um die Nutzenden bei der Interaktion mit dem Produkt zu führen.
Die Bedienung eines User Interfaces basiert auf Vermutungen und Annahmen. Was passiert, wenn dieser Button gedrückt wird? Muss hier ein Doppel-Click gemacht werden? Kann hier mittels Drag and Drop etwas verändert werden? Die Nutzenden erhalten die Bestätigung (oder die Enttäuschung, das es nicht so funktioniert wie erwartet) erst nach der getätigten Aktion. Aus diesem Grund ist es wichtig, dass das User Interface den Erwartungen der Nutzenden entspricht und Design-Pattern verwendet, die die Benutzer auch von anderen, ähnlichen User Interfaces kennt.

Trends und Gewohnheiten

Der eindeutige Angebotscharakter der unterschiedlichen Interface Elemente unterstützt die einfache Bedienung des Digitalen Produkts. Der 3D-Effekt beim Button unterstützt die Bedeutung eines Knopfes, dass er gedrückt werden kann. Das Nachahmen der Interface Elemente an ältere und vertraute Gegenstände aus der realen Welt wird Skeuomorphismus genannt. Beim minimalistischen Flat-Design ist der Angebotscharakter des Buttons nicht mehr durch die Ähnlichkeit zum realen Objekt gegeben. Es wird davon ausgegangen, das nie Nutzenden gelernt haben, dass ein Button auch ohne Schlagschatten ein Button ist.

Pattern

Der Angebotscharakter bei Design-Pattern basiert auf Konventionen. Beim Logo oben links auf einer Website erwarten die Nutzenden, dass es klickbar ist, und einem zurück auf die Startseite bringt. Dies Übereinkunft ist eine  ungeschrieben Regel. Wird diese Missachtet, kann dies Verwirrung oder Frustration bei den Nutzenden auslösen. Ein anderes Beispiel: Die drei Striche, die zusammen als Icon ein Hamburger-Menu darstellen. Für viele Nutzende ist mittlerweile klar, was sich dahinter versteckt. Dies musste aber von allen zuerst gelernt werden. Deshalb ist es wichtig, dass Gestalter und Entwickler sicherstellen, dass die Nutzenden einer App die verwendeten Pattern kennen.

Metaphern

Während sich das Thema Angebotscharakter hauptsächlich auf einzeln User Interface Elemente wie z.B. Buttons, editierbares Textfelder, sortierbare Tabellen, etc. bezieht, werden Metaphern eher bei ganzen User Interfaces oder einzelnen Aufgaben eingesetzt. Beispiele dafür sind:
  • eCommerce-Seiten, die auf der Metapher «Supermarkt» basieren, wo Nutzende ihre Produkte in Warenkörbe legen und anschliessend zur Kasse gehen …
  • 
klassische Steuer-Elemente (Power, Play, Pause, Stop) auf einem Küchengerät

Icons im iPhone Dock

Jedes dieser Icons steht für eine bestimmte App. Der altmodische Telefonhörer fürs Telefonieren, der Brief fürs Mailprogramme, die Noten für die Musik-App und der analoge Kompass? Je jünger die Nutzenden sind, umso unwahrscheinlicher ist es, dass diese je mit einem solchen echten Gegenstand interagiert haben.

Aus der Praxis

Der Einsatz von Metaphern kann Helfen, abstrakte Ideen zu kommunizieren. Dabei geht man das Risiko ein, das ein gewisser Anteil von Nutzenden die Metapher aber nicht versteht. Was z.B. die drei Striche hinter dem Hamburger-Menu bedeuten musste jeder Nutzende zuerst lernen und verstehen.