Gestaltgesetze

Stell dir eine Speisekarte vor, auf der alle Gerichte, Preise und Beschreibungen in gleichen Abständen untereinanderstehen. Du weißt nicht, welcher Preis zu welchem Gericht gehört und wo die Vorspeisen enden. Auf einer zweiten Karte stehen genau dieselben Texte, aber mit etwas mehr Luft zwischen den Gerichten und einer fetten Überschrift pro Abschnitt. Plötzlich ist alles klar, obwohl kein Wort dazugekommen ist.

Einfach erklärt

Die Gestaltgesetze beschreiben, wie unser Gehirn einzelne Elemente automatisch zu Gruppen und Formen zusammenfasst. Wir sehen nicht zwölf einzelne Punkte, sondern drei Reihen. Wir sehen nicht vier Striche, sondern ein Quadrat. Das passiert, ohne dass wir darüber nachdenken.

Ein Vergleich aus dem Alltag: Auf einem Parkplatz erkennst du sofort, welche Autos zusammen in einer Reihe stehen, auch wenn niemand Linien gezogen hat. Dein Gehirn ordnet, was nah beieinander ist und ähnlich aussieht.

Der Begriff stammt aus der Gestaltpsychologie, die Anfang des 20. Jahrhunderts in Deutschland entstand. „Gestalt“ meint hier die Form oder das Ganze. Als Startpunkt gilt eine Arbeit von Max Wertheimer aus dem Jahr 1912. Gemeinsam mit Wolfgang Köhler und Kurt Koffka prägte er die Richtung. 1923 beschrieb Wertheimer in einem Aufsatz die Prinzipien, nach denen wir Elemente gruppieren. Im Englischen spricht man von Gestalt Principles.

Die wichtigsten Gesetze für Interfaces

Für digitale Oberflächen sind vor allem diese Prinzipien nützlich:

• Nähe: Was nah beieinanderliegt, wirkt zusammengehörig. Ein Label direkt über seinem Eingabefeld gehört sichtbar dazu.
• Ähnlichkeit: Was gleich aussieht, etwa in Farbe, Form oder Größe, wirkt verwandt. Alle Links in derselben Farbe signalisieren dieselbe Funktion.
• Geschlossenheit: Unvollständige Formen ergänzen wir im Kopf zu einem Ganzen. Deshalb funktionieren viele reduzierte Logos und Icons.
• Gemeinsame Region: Elemente in einem gemeinsamen Rahmen oder auf einer gemeinsamen Fläche wirken als Gruppe. Dieses Prinzip wurde erst 1992 von Stephen Palmer beschrieben und ist die Grundlage für Karten-Layouts.

Die Prinzipien wirken nicht gleich stark. Ein gemeinsamer Rahmen kann zum Beispiel stärker sein als die Nähe: Elemente in einem Kasten wirken zusammengehörig, auch wenn sie etwas weiter auseinanderliegen. Wie du mit solchen Mitteln Texte und Seiten gliederst, zeigt der Artikel Wie man Inhalte richtig strukturiert.

Ein Beispiel

Ein Beispiel: Ein Kontaktformular hat sechs Felder, alle mit gleichem Abstand. Die Beschriftungen stehen genau in der Mitte zwischen zwei Feldern. Testpersonen tippen ihre Telefonnummer ins Feld für die E-Mail-Adresse, weil sie das Label dem falschen Feld zuordnen.

Nach der Überarbeitung sitzt jedes Label dicht über seinem Feld, zwischen den Paaren ist mehr Platz. Name und Adresse bilden einen Block, Kontaktdaten einen zweiten. Es braucht keine zusätzlichen Linien. Die Abstände allein erledigen die Arbeit.

In der Praxis

• Abstände bewusst setzen. Der Abstand innerhalb einer Gruppe sollte deutlich kleiner sein als der Abstand zwischen Gruppen.
• Gleiches gleich gestalten. Gib Elementen mit derselben Funktion dasselbe Aussehen und unterscheide Elemente mit anderer Funktion sichtbar.
• Rahmen sparsam nutzen. Kästen und Hintergrundflächen gliedern stark, machen Layouts aber schnell unruhig. Oft reicht Weißraum.

Verwandte Begriffe

Affordance, Cognitive Load, Informationsarchitektur, Design System

Quellen

• Aurora Harley: Proximity Principle in Visual Design. Nielsen Norman Group, 2020
• Aurora Harley: The Principle of Common Region: Containers Create Groupings. Nielsen Norman Group, 2020
• Johan Wagemans u. a.: A Century of Gestalt Psychology in Visual Perception: I. Perceptual Grouping and Figure-Ground Organization. Psychological Bulletin, 2012