Affordances im User-Interface-Design

Rathes Sachchithananthan — 01.Jun.2015
in Web

Im heutigen Artikel schreibe ich über das Thema „Affordances“ und deren Sinn im User-Interface-Design. Das Thema hatte ich schon öfters. An der Uni im Bachelor in „Usability Engineering“ und dann auch im Master in der Einführung zu „Grundlagen interaktiver Lehr/Lernsysteme“. Aber erst jetzt, wo ich ein User Interface ganz von vorne selber konzipiere, designe und entwickle, befasse ich mich ernsthaft auch theoretisch mit dem Thema.

In der Uni war ich immer so. Alles, was ich nicht sofort einsetzen konnte, habe ich vernachlässigt und habe meistens auch die Klausuren nur deshalb bestanden, weil mein Fachwissen aus der Praxiserfahrung recht hoch ist. So auch die Theorie, was Usability Engineering betrifft. Jetzt bin ich aber dabei für das Projekt „Aheenaam“ ein Konzept für das User-Interface einer Lernplattform zu entwickeln. Und dabei muss ich sicherstellen, dass das User-Interface von jeder Art von Person bedienbar ist. Auch von einem Laien.

Aus diesem Grund habe ich mir also Informationen zusammengesucht und verfasse hier gerade einen Artikel über eines der Themen, die ich oft bei der Recherche gefunden habe: Affordances im User-Interface-Design

Affordance – Begriffsdefinition

Das erste Mal wurde das Wort „Affordance“ im Jahre 1977 vom Wahrnehmungspsychologen James J. Gibson eingeführt. Im seinem Buch „The Ecological Approach to Visual Perception“ schreibt er in Kapitel 8 „The theory of affordances“:

„The affordances of the environment are what it offers the animal, what it provides or furnishes, either for good or ill. The verb to afford is found in the dictionary, but the noun affordance is not. I have made it up. I mean by it something that refers to both the environment and the animal in a way that no existing term does. It implies the complementarity of the animal and the environment […]“

Er führt also den Begriff mit der Definition ein, dass es sich bei „Affordances“ um das handelt, was die Umgebung einem Tier (Lebewesen) bietet. Er geht noch weiter und sagt, dass es keine Wahrnehmung von Reizen und Netzhautbildern gibt, sondern, dass Objekte und deren Verbindung zu Handlungen wahrgenommen werden.

Affordance – Don Norman

Don Norman, Professor für Kognitionswissenschaften und Informatik, überträgt diesen Begriff der „Affordances“ in die Welt der Usability und des User-Interface-Designs. In seinem Buch „Psychology of Everyday Things“ beschreibt er Affordances als die Fähigkeit eines Objekts sich selbst zu erklären. Im Idealfall erklärt sich das Objekt selbst und der User weiß ohne Zweifel, was das Objekt bei welcher Aktion wie reagiert.

Affordances: Psychology of Everyday Things
Buch von Don Norman – Psychology of Everyday Things

Wahrgenommene Affordance vs. Tatsächliche Affordance

Jedes Objekt und jedes Eingabegerät hat „Affordance“. Aber man muss diesen Begriff „Affordance“ im User-Interface-Design differenziert betrachten. Zum einen bietet jedes Objekt Handlungen an. Beispielsweise bietet ein Monitor an, dass man ihn berühren kann. Aber nicht jede Handlung führt zu einer gewissen Aktion im System. Wenn der Monitor kein Touchdisplay ist, dann kann man dieses so berühren wie man will, da tut sich nichts.

Aus diesem Grund unterscheidet man zwischen wahrgenommener Affordance (- der Monitor, der anbietet ihn zu berühren kann) und der tatsächlichen Affordance ( – Monitor hat kein Angebot, es zu berühren, ist ja kein Touchscreen).

Noman selbst erklärt die Affordance Theorie am Beispiel der Tür, welches ich hier auch verwenden möchte, um Unterschiede klar zustellen. Stellt euch eine ganz klassische Tür vor.  Wenn wir davorstehen, dann sehen wir anhand der Position der Tür am Türrahmen, ob man die Tür drücken oder ziehen muss, um diese zu öffnen.

Aber es gibt auch Türen, bei denen man nicht sofort sieht, ob die Tür gedrückt oder gezogen werden muss. Wenn die Tür in beiden Richtungen, dann ist das kein Problem, wenn nicht, dann schon. Der Mensch wird intuitiv versuchen zu drücken, aber das muss nicht immer der Fall sein. Dann hat man das Problem, dass die wahrgenommene Affordance (Tür öffnen durch Drücken) anders ist als die tatsächliche Affordance (Tür öffnen durch Ziehen).

Wie das Problem gelöst wird, dass wisst ihr. Auch wenn einige das nie verstehen werden und regelmäßig gegen Türen laufen, wenn die Affordance nicht vollständig klar ist, dann ist die Tür in der Regel beschriftet: „Drücken“ / „Ziehen“

Affordances haben kulturelle Rahmenbedingungen

Das obige Beispiel mit der Tür zeigt sofort einen Punkt, den man bedenken muss. Was ist, wenn man einer Kultur entstammt, wo es nur Schiebetüren gibt? (Ich denke gerade dabei an den Film „13 Assassins“, den ich gestern mal wieder gesehen habe). Eine Person aus dieser Kultur wird nicht versuchen die Tür intuitiv zu drücken, sondern zu schieben und steht vor einem Problem, wenn er versucht die Tür zu öffnen und da keine Beschriftung drauf ist.

Eine weitere kulturelle Rahmenbedingung ist die Schrift und Leserichtung in den verschiedenen Kulturen. Wir lesen zwar von links nach rechts, aber es wird auch andersrum gelesen und auch von oben nach unten.

Affordances optimal gestalten – 4 Grundprinzipien

Man muss bei der Entwicklung des User-Interface-Designs also gut drauf achten, dass die Affordances gut ausgearbeitet und optimal gestaltet sind.  Norman beschreibt vier Prinzipien, die man auf jeden Fall beachten sollte, wenn man ein Interface gestaltet. So erreicht man, dass Benutzer das User-Interface intuitiv benutzen können.

  1. Konventionen beachten und nicht verletzen
    Es gibt im Web und auch im Interface-Design Konventionen wie bestimmte Dinge zu gestalten sind und zu entwickeln sind. Dass diese Punkte Konventionen sind, hat schon einen Grund. Daher sollte man diese – auch wenn diese so abwegig und kompliziert erscheinen – nicht verletzen. Es ist einfach unmöglich Erwartungen der Benutzer von heute auf morgen einfach zu kippen
  2. Beschriftungen und Icons
    Die Objekte sollten soweit wie möglich beschriftet werden und auch mit Icons versehen werden. So weiß der Benutzer sofort, was er mit dem Objekt machen kann. Auch wenn es auf dem ersten Blick selbsterklärend erscheint, sollte man Beschriftungen benutzen. So vermeidet man einfach Fehler durch Ansichten, die man selbst nie gehabt hätte.
    Bei den Icons muss man aber beachten, dass diese alleine nicht ausreichend sein können. Denn diese sind kulturspezifisch und können dementsprechend in anderen Kulturen anders verstanden werden
  3. Einsatz von Metaphern
    Setzt in euren Interfaces Metaphern ein. Das bedeutet, dass ihr mit eurem User-Interface-Design dafür sorgen sollt, dass der User damit etwas verbindet, das er aus dem realen Leben bereits kennt und auch etwas anfangen kann. Bestes Beispiel dafür ist die „Büro“-Metapher, die es in den Betriebssystemen gibt: „Arbeitsplatz“, „Papierkorb“, „Ordner“ usw.
    Stellt aber sicher, dass die Metapher verstanden wird! Sonst bringt diese Metapher nur weitere Probleme ein
  4. Kontinuität
    Objekte in euren User-Interfaces sollten immer einheitlich sein. Das dient nicht nur der Schönheit des User-Interfaces, sondern auch dem Wiedererkennungswert. Wenn dem User ein Objekt auffällt, welches er bereits verwendet hat, dann wird er vom dem Objekt auch diesmal dieselbe Funktionalität erwarten.

Was ich für meine Projekte auf jeden Fall weiß: Bei der Konzipierung des bevorstehenden User-Interfaces werde ich mir bei jedem Element genau überlegen, was es tun soll, was der Benutzer erwarten wird und wie ich die Erwartung des Benutzers lenke. Wie ich also Affordances gestalte.

Vorher muss ich aber Basis-Fragen klären wie wer überhaupt der Benutzer ist. Das ist aber eine andere Geschichte.

Was sagt ihr dazu? Benutzt ihr auch wie ich die Prinzipien nur unterbewusst oder habt ihr euch mal ernsthaft damit befasst und denkt euch bei jedem Element etwas?

Rathes Sachchithananthan

Rathes Sachchithananthan

Hi, ich bin Rathes. Gründer dieses Blogs. Darüber hinaus habe ich Aheenam gegründet, eine Agentur für digitale Lösungen. Dort konzipiere und entwickle ich die digitale Weiterentwicklung meiner Kunden. Ich brenne für das Thema "Tamilen und Tamil Eelam" und bin ein Microsoft-Fanboy. Du findest mich auch auf diversen sozialen Netzwerken

Web und die Welt — Gott kann auch mal drin vorkommen

Ein Blog über das Web und die Welt. Wir schreiben über viele interessante Themen wie z.B. das Web, Tamil Eelam oder über Fotografie. Vielleicht ist auch was für dich dabei?