Willemers Informatik Ecke: Interface-Design HCI

Abstraktion durch das Gehirn

Das menschliche Gehirn reduziert die Daten auf das Wesentliche, die durch das Auge eindringen und versucht, die wichtigen Aspekte des Gesehenen zu melden.

Das Beispiel des Kanizsa-Dreiecks lässt uns im Vordergrund ein flächiges, weißes Dreick sehen, das auf der Spitze steht, obwohl keine Kanten da sind, die dieses Dreieck umranden.

Diese Leistung des Gehirns, das Wesentliche zu erkennen und die Fülle der visuellen Eindrücke zu ordnen, lassen sich nutzen, um ein Interface zu gestalten, das dem Anwender die Bedienung leichter zugänglich zu machen.

Gestalt-Rules

Max Wertheimer formulierte 1923 die ersten grundlegenden Gestaltgesetze.

Darin geht es um die Anordnung von Elementen. Sie kann dem Anwender signalisieren, welche Elemente zusammengehören und in welcher Reihenfolge sie zu verwenden sind.

Gesetz der Nähe (Proximity): Elemente die dicht zusammen stehen, werden als zusammengehörig empfunden. Elemente, die einen größeren Abstand haben, werden als separat empfunden.
Diese Elemente wirken senkrecht zusammengehörig.
```
x    x    x    x    x
x    x    x    x    x
x    x    x    x    x
x    x    x    x    x
x    x    x    x    x
```
Diese Elemente wirken waagerecht zusammengehörig.
```
x x x x x

x x x x x

x x x x x

x x x x x

x x x x x
```
Gesetz der guten Fortsetzung (Good continuation):
\ / \ / \/ /\ / \ / \
Man erwartet beim Verlauf einer Linie keinen Knick. Das Bild zeigt also offenbar zwei gerade Linien, die sich kreuzen.
\ / \ / \/ /\ / \ / \
Erst die Färbung zeigt, dass es auch zwei geknickte Linien sein könnten, die aneinander stoßen.
Gesetz der Ähnlichkeit (Similarity):
Ähnlichkeit bedeutet Zusammengehörigkeit. Das kann die Form, aber auch die Farbe sein.
```
x  x  x  x  x     x  o  x  o  x     x  x  x  x  x

x  x  x  x  x     x  o  x  o  x     x  x  x  x  x

x  x  x  x  x     x  o  x  o  x     x  x  x  x  x

x  x  x  x  x     x  o  x  o  x     x  x  x  x  x
```
Im ersten Rechteck ist keine direkte Zusammengehörigkeit zu erkennen. Die Form der Elemente im zweiten Rechteck assoziiert fünf Spalten, während die Farben im letzten Rechteck vier Zeilen erkennen lässt.
Gesetz der guten Gestalt, bzw. Prägnanz: Es werden einfache, klare Strukturen komplizierteren vorgezogen. Das gilt nicht nur bei Verschwörungstheoretikern, die nach einer einfachen, verborgenen Ursache für die komplexe Wirklichkeit suchen (Cui Bono), sondern auch im visuellen Bereich. Dies wirkt sich auch auf das Gesetz der Geschlossenheit aus.
Gesetz der Geschlossenheit (Closure): Wir sehen nur einen Teil, das Hirn interpretiert den Rest dazu, schließt also die Lücken. Beispiele:

Das linke Bild wird vom Gehirn zu einem Würfelrahmen vervollständigt und das rechte Bild zeigt das Kanizsa-Dreieck, das oben schon einmal gezeigt wurde. In beiden Fällen versucht das Gehirn, die aufgebrochenen Strukturen zu verbinden.
Common Fate: Elemente bewegen sich in gleiche Richtung oder suggerieren eine Bewegung in die gleiche Richtung und werden so als Gruppe identifiziert.

Weitere Gestalt-Rules sind im Laufe der Zeit hinzugekommen.

Gemeinsame Region (Common Region): Wenn Elemente von einer größeren Region umrahmt sind, ist diese Guppierung stärker als das Gesetz der Nähe.
```
x  x    x  x    x  x    x  x

   ------  ------  ------ 
x |x    x||x    x||x    x| x
   ------  ------  ------
```
Verbundenheit (Connectedness): Gruppierungskreise oder -linien. Elemente werden gruppiert, wenn sie verbunden sind.
```
x  x    x  x    x  x    x  x

x  x----x  x----x  x----x  x
```
Gleichzeitigkeit (Synchrony): Elemente ändern sich gleichzeitig und werden darum als Gruppe gesehen. Ein Beispiel sind LEDs, die gemeinsam blinken.
Symmetrische und parallele Linien werden leicht als eine Figur betrachtet.

Anwendungen im Interface-Design

In Anwendungen werden also zusammengehörige Elemente nah zusammengestellt, ggf. eingerahmt oder durch Linien verbunden.

Auf der anderen Seite sind auch Abstände hilfreich, damit zusammengehörige Dinge von anderen getrennt werden.

Closure kann genutzt werden, wenn mehrere Elmente da sind, als der Bildschirm darstellen kann. Hier werden dann Fragmente des Folgeelements dargestellt. Der Anwender erkennt, dass es ein unvollständiges Element ist, was sich vervollständigt, wenn er scrollt.

Welche Gestaltregeln haben Vorrang?

Grupping durch Nähe wirken oft stärker als Gruppierung durch Ähnlichkeit. Abstand geht also vor Ähnlichkeit.
Common Region geht vor Nähe. Umrahmungen können also helfen, zu nahe Elemente voneinander logisch zu trennen. Rahmen gehen also vor Nähe.