Wie wir Objekte wahrnehmen: Gestaltgesetze

Elemente, die nahe beieinander liegen, werden als zusammengehörend wahrgenommen.

Dieses Gesetz steht aus mehreren Gründen an erster Stelle dieser Auflistung. Zum einen ist es eines der stärksten und damit wichtigsten Gestaltgesetze. Zudem ist es ein sehr leicht verständliches. Und nicht zuletzt bildet es einen wundervollen Leitfaden, der bei der Erstellung einer Bedienoberfläche zu beachten ist.

Es gilt dabei schlicht immer, dass Objekte, die zueinander gehören auch nahe beieinander angeordnet sein müssen. So kann mit einfachsten Mitteln den Benutzer:innen diese Relation beider Objekte zueinander klar vermittelt werden.

Aus diesem Grund ist es in der Gestaltung von Oberflächen so ungemein wichtig, zwischen einzelnen Bedienelementen Platz (“Whitespace”) zu lassen. Dieser Platz ist nicht verschwendet, sondern dient ganz einfach der Usability der Anwendung. Anders formuliert sollen zusammengehörende Elemente immer möglichst nah beieinander angeordnet und dargestellt werden.

Objekte, die ähnlich aussehen, nehmen wir häufig als zusammengehörend wahr. Die Ähnlichkeit kann dabei auf verschiedene Arten erzeugt werden:

Form, Farbe, Größe, Textur, Position, Orientierung, …

Im nebenstehenden Beispiel sind die Punkte links durch ihre Farbe gruppiert. Wir nehmen die grünen und die orangenen Punkte jeweils als zusammengehörend wahr.

Im rechten Beispiel sind mehrere Ähnlichkeiten miteinander kombiniert. Die Formen ähneln sich in ihrer Form und Farbe. Dadurch entstehen 2 * 2 Gruppen. Zuerst werden die Objekte basierend auf ihrer Farbe visuell gruppiert. Im zweiten Schritt entstehen in diesen beiden Gruppen Untergruppen, die sich in ihrer Form unterscheiden (Kreis vs. Rechteck).

Klar wird speziell durch das zweite Beispiel, dass die unterschiedlichen Merkmale eines Objektes verschiedenes Gewicht bei der Unterscheidung haben. Am besten ist es, die Gruppen mit mehreren Merkmale von anderen zu separieren. So sollten sie sich bestenfalls in mehr als nur einer Merkmalsausprägung voneinander unterscheiden (z.B. Form und Farbe).

Für das Design bedeutet das, dass Objekte mit ähnlicher Bedeutung / Funktion / Inhalt auch gleich gestaltet sein sollen.

Elemente, die in einer gemeinsamen Region liegen, d.h. von anderen Elementen abgegrenzt sind, werden als eine Einheit wahrgenommen. Diese Gruppierung finden wir häufig auf E-Commerce-Seiten, wo Bilder, Text und ggf. Buttons miteinander zu einer Gruppe verbunden sind.

Diese Gruppierung muss nicht zwangsläufig durch Linien geschehen. Die Gruppierung kann auch bspw. durch einen gemeinsamen Hintergrund geschaffen werden. Im nebenstehenden Beispiel werden so viele Punkte zu einigen wenigen Gruppen verbunden.

Das unten stehende Beispiel verdeutlicht noch einmal, welche Auswirkungen das Gesetz der gemeinsamen Region haben kann.

Im Design von Oberflächen können so Elemente, die zusammengehören, mit einer hinterlegten Farbfläche, einer Konturlinie oder eines Schattens von anderen Elementen klar abgegrenzt werden.

Miteinander verbundene Objekte werden als eine Einheit wahrgenommen. Das Gesetz der Verbundenheit hat eine sehr starke Wirkung und kann unter Umständen andere Gestaltgesetze außer Kraft setzen bzw. übersteuern.

In manchen Szenarien mag es sinnvoll sein, andere Gesetze durch das Gesetz der Verbundenheit bewusst zu brechen. Damit wird automatisch ein starker Fokus auf die betroffenen Elemente gelegt. Man sollte diesen Bruch jedoch nur sehr sparsam einsetzen, da eine Oberfläche durch die übermäßige Übersteuerung verschiedener Gestaltgesetze sehr unruhig und unübersichtlich wird.

Das Gesetz sollte angewandt werden, wenn Objekte, die eine logische Einheit bilden mteinander zu verbinden und so diese Einheit auch visuell klar hervorzuheben.

Dieses Gesetz erinnert stark an die Theorie der Geone aus meinem letzten Blog-Eintrag. Die Geon-Theorie besagt vereinfacht, dass komplexe Figuren in möglichst simple Einzelteile zerteilt werden. Das Gesetz der Prägnanz besagt etwas sehr ähnliches.

Wir nehmen grafische Objekte häufig mit Vordergrund und Hintergrund wahr. Dabei trennen wir das Gesehene in mehrere Ebenen auf. So können wir auch komplexe visuelle Reize schnell verarbeiten. Dieses Phänomen ist auch als Figur-Grund-Wahrnehmung bekannt. Dabei werden Gestalten wahrgenommen, die sich durch ein bestimmtes Merkmal (Prägnanztendenz) unterscheiden.

Die menschliche Wahrnehmung versucht dabei also, eine Figur in möglichst einfache Strukturen zu zerlegen. So werden häufig Kreise, Dreiecke, Rechtecke, etc. als einfache, prägnante Formen oder “gute Gestalten” erkannt. Diese guten Gestalten werden besonders einfach wiedererkannt.

Im nebenstehenden Beispiel wird so ein Kreis und ein Rechteck bzw. ein Dreieck und ein Rechteck sichtbar. Welche der jeweils beiden Formen dabei im Vorder- bzw. Hintergrund wahrgenommen wird, ist von Mensch zu Mensch verschieden.

So sollte also in der grafischen Oberflächengestaltung darauf geachtet werden, die Elemente in möglichst einfachen Formen zu gruppieren und darzustellen, um das Auge der Benutzer:innen nicht unnötig zu belasten. Außerdem ist wichtig, die wichtigsten Elemente mit den prägnantesten Formen zu versehen. So “springen” sie den Benutzer:innen förmlich ins Auge.

Die menschliche Wahrnehmung versucht immer, Objekte zu gruppieren und möglichst als Einheit zu sehen. Dieses Gesetz steht dabei nicht im Widerspruch zum Gesetz der Prägnanz, sondern erweitert es in gewisser Weise.

Im nebenstehenden Beispiel erkennen wir, dass dieses Gesetz häufig in Logos eingesetzt wird. Die hier dargestellten Logos des WWF und des Zentralrats der Juden in Deutschland sind nur zwei von vielen Beispielen. Tatsächlich sind beim WWF-Logo lediglich schwarze Flecken gezeichnet. Unsere Wahrnehmung verbindet diese Flecken, die einzeln schwer zu verarbeiten sind, zu einem Pandabären. Die Erkennung eines einzelnen Objektes fällt uns viel leichter, als die vielen kleinen Objekte einzeln verarbeiten zu müssen. Beim Logo des Zentralrats der Juden in Deutschland sind lediglich Linien dargestellt. Unser Auge vervollständigt diese Linien zu einer dreidimensionalen Darstellung eines Davidsterns. Auch die unteren Beispiele verdeutlichen, dass wir am liebsten einzelne, geschlossene (und prägnante) Formen wahrnehmen. Im linken Beispiel sind lediglich Linien abgebildet, doch wir alle “sehen” einen Kreis. Dasselbe gilt für das Kanizsa-Dreieck. Hier erkennen wir ein weißes Dreieck, wo lediglich Linien und Kreissegmente gezeichnet sind.

Für das Oberflächendesign bedeutet das, dass wir Funktionen und Informationen durch Umrandungen oder Farbflächen leicht voneinander trennen können. Diese Einfassungen können dabei auch nur unvollständig und angedeutet sein und werden dennoch sofort von den Benutzer:innen wahrgenommen und erkannt.

Die menschliche Wahrnehmung versucht immer, Objekte zu gruppieren und möglichst als Einheit zu sehen. Dieses Gesetz steht dabei nicht im Widerspruch zum Gesetz der Prägnanz, sondern erweitert es in gewisser Weise.

Im nebenstehenden Beispiel erkennen wir, dass dieses Gesetz häufig in Logos eingesetzt wird. Die hier dargestellten Logos des WWF und des Zentralrats der Juden in Deutschland sind nur zwei von vielen Beispielen. Tatsächlich sind beim WWF-Logo lediglich schwarze Flecken gezeichnet. Unsere Wahrnehmung verbindet diese Flecken, die einzeln schwer zu verarbeiten sind, zu einem Pandabären. Die Erkennung eines einzelnen Objektes fällt uns viel leichter, als die vielen kleinen Objekte einzeln verarbeiten zu müssen. Beim Logo des Zentralrats der Juden in Deutschland sind lediglich Linien dargestellt. Unser Auge vervollständigt diese Linien zu einer dreidimensionalen Darstellung eines Davidsterns. Auch die unteren Beispiele verdeutlichen, dass wir am liebsten einzelne, geschlossene (und prägnante) Formen wahrnehmen. Im linken Beispiel sind lediglich Linien abgebildet, doch wir alle “sehen” einen Kreis. Dasselbe gilt für das Kanizsa-Dreieck. Hier erkennen wir ein weißes Dreieck, wo lediglich Linien und Kreissegmente gezeichnet sind.

Für das Oberflächendesign bedeutet das, dass wir Funktionen und Informationen durch Umrandungen oder Farbflächen leicht voneinander trennen können. Diese Einfassungen können dabei auch nur unvollständig und angedeutet sein und werden dennoch sofort von den Benutzer:innen wahrgenommen und erkannt.

Der Mensch neigt dazu, einzelne Elemente an einer gedachten Linie oder Kurve zu gruppieren. Wir versuchen also, die einzelnen Elemente in einen Bezug zueinander zu bringen, um sie leichter miteinander vergleichen zu können. Sobald eine solche Gruppierung gelingt, nehmen wir die Objekte automatisch als zusammenhängend wahr.

Bei den beiden Balkendiagrammen im nebenstehenden Beispiel fällt sofort auf, dass im unteren Beispiel die absoluten Werte, die dargestellt werden, deutlich besser miteinander verglichen werden können. Zudem wirkt dieses Diagramm im Vergleich zum oberen deutlich ruhiger. Das obere Diagramm stellt allerdings deutlich besser die Verteilung der Werte auf die einzelnen Bereiche A bis E dar. So haben beide Darstellungsformen ihre Stärken und man muss sich bei der Erstellung solcher Diagramme immer über den erzielten Nutzen klar sein.

Im rechten Beispiel sehen wir ein Kreuz.Tatsächlich sind hier nur Quadrate zu sehen, doch die Rauten werden durch unsere Wahrnehmung automatisch zu Linien ergänzt.

Für das Design von Oberflächen bedeutet das, dass wir zusammengehörige Elemente auf einer (gedachten) Linie anordnen. So können z.B. Hierarchien sehr gut abgebildet werden. Ein Beispiel dafür ist eine komplexe Baumnavigation.

Selbst unterschiedliche Objekte bilden eine zusammengehörende Gruppe, wenn sie sich in die gleiche Richtung und/oder im gleichen Rhythmus bewegen. Genau genommen besteht das Gesetz des gemeinsamen Schicksals aus zwei eigenen Gesetzen: Dem Gesetz der gleichen Bewegung und dem Gesetz der Gleichzeitigkeit.

Das Gesetz der Gleichzeitigkeit besagt, dass Objekte, die sich gleichzeitig verändern als eine zusammengehörende Gruppe wahrgenommen werden. Im unteren Beispiel verändert sich so die Farbe von einigen Elementen zur gleichen Zeit.

Das Gesetz der gleichen Bewegung besagt, dass Elemente, die sich gleichzeitig in eine Richtung bewegen, als Einheit wahrgenommen wird. Es stellt somit eine Erweiterung des Gesetzes der Gleichzeitigkeit dar. Im Beispiel unten ist dies durch eine Drehung dargestellt.

Da beide Gesetze sich sehr ähneln, werden sie häufig unter dem Gesetz des gemeinsamen Schicksals zusammengefasst. Für das Design bedeutet das, dass Elemente, die bspw. gleichzeitig erscheinen oder ihr Aussehen verändern, zusammengehören. Dieses Gesetz muss auch sparsam eingesetzt werden, da ein übermäßiger Einsatz eine Applikation schnell unruhig und unübersichtlich macht.

Gesetz der Gleichzeitigkeit

Gesetz der gleichen Bewegung