Gesetz der Ähnlichkeit & der Nähe

Schwarzweisse-punkte-gesetz-der-naehe

Diese Gesetze sind ein Teil der Gestaltpsychologie. Als Gestaltpsychologie wird eine Richtung innerhalb der Psychologie bezeichnet, welche die menschliche Wahrnehmung als Fähigkeit beschreibt, Strukturen und Ordnungsprinzipien in Sinneseindrücken auszumachen. Ganz unabhängig davon, ob es sich um Landschaften, Gesichter, Autos, Koalabären — oder eben Websites handelt.

In diesem Artikel werde ich zum einen auf das Gesetz der Ähnlichkeit und zum anderen das Gesetz der Nähe eingehen. Darüber hinaus werde ich mich in einem weiterführenden Artikel mit dem Gesetz der guten Gestalt und dem Gesetz der guten Fortsetzung beschäftigen. All diese Gesetze sind Basis für die Gestaltung eines guten User Interfaces und dadurch auch Grundlage meiner Arbeit.

Das Gesetz der Ähnlichkeit

Das Gesetz der Ähnlichkeit besagt, dass wir ähnliche Elemente als zusammengehörig wahrnehmen. Es spielt dabei keine Rolle, auf welche Eigenschaft sich die Ähnlichkeit bezieht. Es kann beispielsweise die Farbe, Form, Textur, Größe, Geschwindigkeit, Bewegungsrichtung etc. als Gruppe wahrgenommen werden. Je mehr Gemeinsamkeiten ein Element hat, umso deutlicher nehmen wir die Gruppierung wahr.

weisse-punkte-blauer-hintergrund

Als Beispiel haben wir eine Grafik mit Punkten. Jeder Punkt hat denselben Abstand zum anderen. In der Grafik verändere ich zuerst nur die Farbe einiger Elemente und unser Auge verarbeitet dies sofort zu einer Gruppierung. In einem nächsten Schritt ändere ich die Form. Obwohl die Farbe hier wieder einheitlich ist, sehen wir die Zusammengehörigkeit. Diesen Effekt erzielen wir allein durch die Veränderung einer einzigen Eigenschaft.

Genau diese Wirkung auf unsere Wahrnehmung können wir im Web zu unserem Vorteil nutzen. Die Summe aller „Ähnlichkeiten“ auf einer Website ergibt eine Konsistenz. Diese Konsistenz, also die einheitliche Gestaltung verschiedener Elemente, gibt den Userinnen und Usern innerhalb einer Anwendung halt und hilft ihnen unterbewusst dabei, durch die Website zu navigieren.

Das Gesetz der Ähnlichkeit ermöglicht es uns zudem auch, Zusammengehörigkeiten über größere Distanzen zu erkennen. Wenn in unterschiedlichen Webshops der Button „zum Warenkorb hinzufügen“ immer das gleiche Aussehen hat, wird er von den Benutzerinnen und Benutzern auch sofort als solcher erkannt. Dabei ist es egal, ob er in einer Liste von Artikeln auf einer Page oder ob er über eine bestimmte Seite hinaus angezeigt wird.

Versuchen wir uns an einem Beispiel mit Radiobuttons: Wie man in der Grafik sieht, nimmt unsere Wahrnehmung die Gruppierung deutlicher wahr, je mehr Gesetze wir verwenden.

weisser-text-blauer-hintergrund

Das Gesetz der Ähnlichkeit ist in erster Linie nicht dafür zuständig, Gruppierungen zu erstellen. Vielmehr eignet es sich dazu eine Konsistenz darzustellen. Um Gruppierungen hingegen besser wahrnehmbar zu machen, eignet sich das Gesetz der Nähe.

Das Gesetz der Nähe

Elemente, die räumlich näher beieinander liegen, werden als zusammengehörig wahrgenommen. Unsere Wahrnehmung gruppiert diese Elemente automatisch. Im folgenden Beispiel sieht man, wie sich dieses Gesetz mit einfachen Punkten, deren Abstand zueinander variiert, zeigen lässt.

orange-punkte-pinker-hintergrund

Nur durch leichte Anpassungen der Abstände der Punkte zueinander, gruppiert unser Gehirn diese Punkte entweder zu einer vertikalen oder zu einer horizontalen Einheit. Dieses Gesetz ist eines der stärksten und wichtigsten Gesetze in der Gestaltung und sollte daher immer berücksichtigt werden.

Anhand dieses einfachen Beispiels können wir zeigen, dass sich die Headline im oberen Bereich genau in der Mitte der zwei Textelemente befindet. Unsere Wahrnehmung kann somit die Zusammengehörigkeit nicht erkennen. Einfacher für die Betrachterinnen und Betrachter ist die untere Variante: Hier ist klar ersichtlich, dass der Text eine Headline des zweiten Textbocks ist.

Headline-Textelemente-orange-pink

Zugegeben, durch reine Logik wissen wir, dass die Headline natürlich zum zweiten Textblock gehört. Jedoch ist es übersichtlicher, wenn wir das Gesetz der Nähe anwenden. Darüber hinaus gibt es viele weitere Situationen, in denen das Erkennen dieser Zugehörigkeiten nicht so einfach ist, wie im gezeigten Beispiel. Beispielsweise ist es uns auf diese Weise möglich, bei einer ausklappbaren Navigation mit mehreren Navigationspunkten, die wiederum mehrere Unterpunkte haben, die zusammengehörigen Links zu gruppieren und somit für eine bessere Übersicht zu sorgen.

Kategorisierungen-pink-orange

Im zweiten Beispiel wird das Gesetz der Nähe dazu genutzt, um eine Kategorisierung innerhalb einer Auswahl zu erzeugen. Für unsere Wahrnehmung ist es so leichter, verschiedene Thematiken zu unterscheiden.

Demnach bedeutet das, dass wir auch Leerräume (Weißraum) als Information wahrnehmen.

Für mich als Designer heißt das also, dass ich auch mit „Nichts“ Informationen vermitteln kann — dies aber natürlich nur mit gezielter Überlegung.

Zusammenfassend ist zu sagen, dass es wenig sinnvoll ist, Informationen auf einer Website endlos zu verdichten, nur um auf diese Weise möglichst viele Inhalte auf möglichst kleinen Raum zu bringen.

Durch die Berücksichtigung dieser beiden wichtigen Gesetze der Gestaltpsychologie sind wir in der Lage gute und vor allem für Userinnen und User verständliche Websites zu gestalten.

Learnings

Was besagt das Gesetz der Ähnlichkeit?

Dass wir ähnliche Elemente als zusammengehörig wahrnehmen. 

Ob Farbe, Form, Textur oder Größe: Die Eigenschaften, auf die sich die Ähnlichkeit bezieht, spielt dabei keine Rolle.

Was beeinflusst die Wahrnehmung der Konsistenz?

Je mehr Gemeinsamkeiten ein Element hat, umso deutlicher nehmen wir die Konsistenz wahr – auch über größere Distanzen.

Worauf basiert das Gesetz der Nähe?

Es besagt, dass Elemente, die räumlich näher beieinander liegen, als zusammengehörig wahrgenommen werden.

Wofür kann es genutzt werden?

Das Gesetz der Nähe kann auch zur Kategorisierung innerhalb einer Auswahl genutzt werden.

Es ist eines der stärksten und wichtigsten Gesetze in der Gestaltung und sollte daher im (Web–)Design immer berücksichtigt werden.

Veröffentlicht am: 27.11.2018

Bild von Fabian Happacher

Autor

Fabian Happacher

User Experience; Design; Information Architecture

fabian.happacher@verdino.com

mehr Infos über Fabian