Gestaltgesetze im Interface: Nähe, Ähnlichkeit und Geschlossenheit

Ein Beispiel: Ein kleines Team baut eine App, mit der Sportvereine ihre Trainingszeiten verwalten. Die Einstellungsseite ist schnell gebaut. Zwölf Zeilen stehen untereinander, alle mit demselben Abstand: Name, E-Mail, Passwort ändern, Push-Benachrichtigungen, E-Mail-Benachrichtigungen, Erinnerung vor dem Training, Sprache, dunkles Design, Datenschutz, Daten exportieren, Abmelden, Konto löschen. Jede Zeile hat dieselbe Schrift, dieselbe Farbe, denselben Pfeil am Rand.

Im ersten Test passiert etwas Seltsames. Eine Testperson sucht minutenlang nach den Benachrichtigungen, obwohl sie direkt vor ihr stehen. Eine andere tippt auf „Konto löschen“, weil sie dachte, dort ginge es nur um das Abmelden. Kein Text ist falsch, keine Funktion fehlt. Das Problem ist ein anderes: Die Seite sagt nicht, was zusammengehört.

Genau darum geht es bei den Gestaltgesetzen. Sie beschreiben, wie das Gehirn einzelne Elemente automatisch zu Gruppen zusammenfasst. Wer sie kennt, kann Layouts gliedern, ohne ein einziges Wort hinzuzufügen. In diesem Artikel lernst du die drei wichtigsten Prinzipien für Interfaces kennen: Nähe, Ähnlichkeit und Geschlossenheit. Zu jedem gibt es ein Vorher-nachher-Beispiel, und am Ende wird die Einstellungsseite Schritt für Schritt überarbeitet.

Was Gestaltgesetze sind

Die Gestaltgesetze stammen aus der Gestaltpsychologie, einer Forschungsrichtung, die Anfang des 20. Jahrhunderts in Deutschland entstand. „Gestalt“ bedeutet hier so viel wie Form oder Ganzes. Die zentrale Idee: Wir nehmen nicht lauter Einzelteile wahr, sondern sofort Muster und Gruppen. Zwölf Punkte in drei Reihen sehen wir als drei Reihen, nicht als zwölf Punkte.

Ein wichtiger Text dazu ist ein Aufsatz von Max Wertheimer aus dem Jahr 1923 mit dem Titel „Untersuchungen zur Lehre von der Gestalt II“. Darin beschreibt er mehrere Faktoren, nach denen wir Elemente gruppieren, unter anderem Nähe, Gleichheit (heute meist Ähnlichkeit genannt) und Geschlossenheit. Spätere Forschung hat weitere Prinzipien ergänzt. Eine kompakte Definition findest du auch im Glossar unter Gestaltgesetze.

Für die Arbeit an Interfaces ist eine Unterscheidung hilfreich. Gestaltgesetze beantworten die Frage: Was gehört zusammen? Davon getrennt ist die Frage: Was ist wichtig, und was sehe ich zuerst? Darum kümmert sich die visuelle Hierarchie, also die Rangordnung von Elementen über Größe, Kontrast und Position. Beides greift ineinander, aber dieser Artikel bleibt bei der ersten Frage. Eine Seite kann eine klare Hierarchie haben und trotzdem unverständlich sein, wenn niemand erkennt, welcher Preis zu welchem Produkt gehört.

Warum ist das so wichtig? Jede Gruppe, die das Auge selbst bilden muss, kostet Aufmerksamkeit. Diese geistige Arbeit heißt Cognitive Load, auf Deutsch kognitive Last. Gut gruppierte Layouts nehmen den Menschen Arbeit ab, weil das Gehirn die Ordnung ohnehin herstellen will. Wie stark sich Unordnung auf das Arbeitsgedächtnis auswirkt, erklärt der Artikel Kognitive Last: Warum weniger im Interface oft mehr ist.

Nähe: Abstand ist Information

Das Gesetz der Nähe besagt: Elemente, die nah beieinanderliegen, wirken zusammengehörig. Elemente mit größerem Abstand wirken getrennt. Das klingt banal, ist aber vermutlich das mächtigste Werkzeug, das du beim Gestalten von Layouts hast. Aurora Harley von der Nielsen Norman Group (NN/g), einem bekannten Forschungs- und Beratungsunternehmen für Usability, schreibt, dass Nähe konkurrierende Signale wie gleiche Farbe oder Form überstimmen kann.

Das Werkzeug, mit dem du Nähe steuerst, ist Weißraum. Gemeint ist nicht unbedingt weiße Fläche, sondern jeder leere Raum zwischen Elementen. Weißraum ist also kein Platz, der „übrig“ ist. Er ist Information: Er sagt, wo eine Gruppe endet und die nächste beginnt.

Vorher-nachher: eine Produktliste

Stell dir eine Liste mit Produkten in einem Onlineshop vor. Jedes Produkt besteht aus Bild, Name, Preis und Bewertung.

Vorher: Bild, Name, Preis und Bewertung stehen mit jeweils 24 Pixeln Abstand untereinander. Zwischen dem letzten Element eines Produkts und dem Bild des nächsten Produkts liegen ebenfalls 24 Pixel. Die Liste wirkt wie ein gleichmäßiger Strom. Ob die Bewertung „4,5 Sterne“ zum Produkt darüber oder darunter gehört, ist nicht eindeutig.

Nachher: Innerhalb eines Produkts liegen nur noch 8 Pixel zwischen Name, Preis und Bewertung. Zwischen zwei Produkten sind es 40 Pixel. Ohne Linie, ohne Rahmen und ohne neue Farbe erkennt jetzt jede Person auf einen Blick, welche Angaben zusammengehören.

Die Zahlen sind ein Beispiel, keine Norm. Entscheidend ist das Verhältnis: Der Abstand innerhalb einer Gruppe muss deutlich kleiner sein als der Abstand zwischen Gruppen. Wenn beide Werte nah beieinanderliegen, etwa 16 und 20 Pixel, verschwimmt der Unterschied, und das Auge muss wieder raten.

Ein Klassiker: das Label zwischen zwei Feldern

In Formularen siehst du das Problem besonders oft. Ein Label, also die Beschriftung eines Eingabefelds, steht genau in der Mitte zwischen zwei Feldern. Ob es zum Feld darüber oder darunter gehört, lässt sich nur raten. Die Lösung ist dieselbe wie bei der Produktliste: Das Label rückt dicht an sein Feld, und zwischen den Paaren aus Label und Feld wird mehr Platz. Wie du Formulare darüber hinaus verständlich gestaltest, zeigt der Artikel Formulare, die niemand abbricht.

Was weit weg ist, wird übersehen

Nähe hat eine Kehrseite. Ein Element, das weit entfernt vom Rest steht, gehört nicht nur zu keiner Gruppe, es wird auch leicht übersehen. Die NN/g beschreibt das an Beispielen wie einem „Überspringen“-Link, der einsam in einer oberen Ecke steht, während der Blick auf den großen Buttons in der Mitte liegt. Wer sich auf eine Aufgabe konzentriert, schaut dorthin, wo die Aufgabe stattfindet.

Für dich heißt das: Bedienelemente gehören in die Nähe dessen, was sie beeinflussen. Ein Filter, der eine Liste sortiert, steht direkt über dieser Liste und nicht in einer Seitenleiste am anderen Ende des Bildschirms. Ein „Bearbeiten“-Link steht neben dem Inhalt, den er bearbeitet.

Achtung beim Umbruch auf kleine Bildschirme

Ein Punkt, der in der Praxis gern untergeht: Responsive Layouts, also Layouts, die sich an die Bildschirmgröße anpassen, können Gruppen zerstören. Auf dem Desktop stehen zwei Links nebeneinander und wirken wie ein Paar. Auf dem Smartphone werden die Spalten untereinander gestapelt, und plötzlich liegen zwischen den beiden Links mehrere Absätze. Die NN/g nennt genau solche Fälle als typisches Problem. Prüf deshalb jede Gruppe nicht nur in der Desktop-Ansicht, sondern auch dort, wo das Layout umbricht.

Ähnlichkeit: Gleiches sieht gleich aus

Das Gesetz der Ähnlichkeit besagt: Elemente, die sich in einem sichtbaren Merkmal gleichen, wirken verwandt. Solche Merkmale sind vor allem Farbe, Form und Größe, aber auch Schriftschnitt oder Ausrichtung. Ähnlichkeit funktioniert sogar dann, wenn die Elemente über die ganze Seite verteilt sind. Das macht sie zum wichtigsten Werkzeug für Konsistenz.

Im Interface bedeutet Ähnlichkeit vor allem ein Versprechen: Was gleich aussieht, verhält sich auch gleich. Wenn alle Links blau und unterstrichen sind, lernen Menschen nach wenigen Sekunden, dass blauer unterstrichener Text anklickbar ist. Diese Erwartung ist wertvoll, und sie lässt sich leicht zerstören.

Vorher-nachher: Links und Hervorhebungen

Vorher: Auf einer Website sind Links blau. Zwischenüberschriften in Artikeln sind ebenfalls blau, aber nicht anklickbar. Wichtige Begriffe im Fließtext sind blau und fett, aber auch nicht anklickbar. Menschen klicken auf Überschriften und fette Wörter, es passiert nichts, und nach kurzer Zeit klicken sie auch auf echte Links seltener.

Nachher: Blau ist ausschließlich für Links reserviert. Zwischenüberschriften sind dunkelgrau und größer, Hervorhebungen im Text sind fett in der normalen Textfarbe. Jetzt bedeutet die Farbe wieder genau eine Sache.

Die NN/g empfiehlt genau das: eine Farbe für interaktive Elemente festlegen und sie nicht für Dekoration verwenden. Gleichzeitig sollte die wichtigste Aktion einer Seite, etwa „In den Warenkorb“, sich sichtbar von Nebenaktionen wie „Abbrechen“ unterscheiden. Sehen alle Buttons gleich aus, sagt die Ähnlichkeit: Diese Aktionen sind gleichwertig. Das stimmt aber meistens nicht.

Form und Größe

Farbe ist nur ein Merkmal. Auch die Form verrät, was ein Element tut. Ein Beispiel: In einem Shop sind Unterkategorien wie „Sneaker“ oder „Stiefel“ als abgerundete Pillen gestaltet, Filter wie „Größe“ oder „Preis“ als eckige Felder mit Pfeil. Schon nach kurzer Zeit verstehen Menschen, dass Pillen zu einer anderen Seite führen und eckige Felder die aktuelle Liste filtern.

Größe funktioniert genauso. Elemente gleicher Größe wirken wie Elemente gleicher Art und gleicher Wichtigkeit. Die NN/g beschreibt einen Fall, in dem ein redaktionelles Video in der Seitenleiste genauso groß war wie die Werbebanner daneben. Viele Menschen hielten es deshalb für Werbung und übersahen es. Der Inhalt war gut, aber die Ähnlichkeit hat ihn in die falsche Gruppe gesteckt.

Wenn Ähnlichkeit lügt

Ähnlichkeit wirkt immer, auch dann, wenn du sie gar nicht beabsichtigst. Drei typische Fehler:

• Gleiche Icons für verschiedene Dinge: Ein Stern steht einmal für „Favorit“ und an anderer Stelle für „Bewertung“. Menschen vermuten einen Zusammenhang, den es nicht gibt.
• Dekoration in Link-Optik: Ein farbiges Symbol, das genauso aussieht wie ein Button, aber nichts tut, sorgt für ins Leere gehende Klicks.
• Uneinheitliche Komponenten: Drei verschiedene Button-Stile für dieselbe Art von Aktion lassen Menschen rätseln, ob sich die Aktionen unterscheiden.

Gegen alle drei hilft ein festes Regelwerk für wiederkehrende Elemente. In größeren Projekten ist das ein Design System, also eine Sammlung von Komponenten und Regeln, die überall gleich eingesetzt werden. Für den Anfang reicht schon eine Liste: welche Farbe für Links, welcher Stil für die Hauptaktion, welcher für Nebenaktionen.

Geschlossenheit: Das Gehirn ergänzt, was fehlt

Das Gesetz der Geschlossenheit besagt: Unvollständige Formen ergänzen wir im Kopf zu einem Ganzen. Vier Ecken eines Quadrats reichen, damit wir ein Quadrat sehen. Ein Kreis mit einer kleinen Lücke ist für uns trotzdem ein Kreis. Das Gehirn bevorzugt geschlossene, einfache Formen und füllt Lücken selbstständig auf.

Ein oft genanntes Beispiel ist das Logo des WWF. Der Panda hat keine durchgehenden Umrisse, an vielen Stellen trennt nichts das Weiß des Fells vom weißen Hintergrund. Trotzdem sehen wir sofort einen vollständigen Panda. Die Interaction Design Foundation nutzt genau dieses Logo, um das Prinzip zu erklären.

Geschlossenheit in Icons

Im Interface begegnet dir Geschlossenheit vor allem in Icons. Viele Icons bestehen aus wenigen Linien, die erst im Kopf zu einem Objekt werden: ein Briefumschlag aus einem Rechteck und zwei schrägen Strichen, ein Zahnrad aus einem Kreis mit ein paar Zacken. Diese Reduktion funktioniert, weil das Gehirn die fehlenden Details ergänzt.

Die Grenze ist allerdings schnell erreicht. Wenn zu viel weggelassen wird, gibt es nichts mehr zu ergänzen, und das Icon wird zum Rätsel. Ein guter Test: Zeig das Icon fünf Menschen ohne Beschriftung und frag, was sie sehen. Wenn die Antworten weit auseinandergehen, ist das Icon zu abstrakt. Eine sichtbare Textbeschriftung neben dem Icon ist in den meisten Fällen die sicherste Lösung.

Geschlossenheit im Layout

Geschlossenheit wirkt auch auf größere Flächen. Wenn mehrere Elemente an einer gemeinsamen Kante ausgerichtet sind, entsteht für das Auge eine unsichtbare Linie. Stehen vier Karten in einem Raster mit gleichen Abständen, sehen wir eine geschlossene Fläche, obwohl kein Rahmen sie umgibt. Deshalb wirken sauber ausgerichtete Layouts ruhig: Das Auge findet Formen, die es ohnehin sucht.

Vorher: Auf einer Landingpage sind Texte, Bilder und Buttons mal links, mal mittig, mal leicht eingerückt ausgerichtet. Jedes Element steht für sich. Die Seite wirkt unruhig, obwohl nicht viel darauf zu sehen ist.

Nachher: Alle Elemente eines Abschnitts beginnen an derselben linken Kante. Das Auge verbindet die Anfänge zu einer gedachten Linie, und der Abschnitt wirkt wie ein geschlossener Block. Es wurde nichts entfernt, nur ausgerichtet.

Geschlossenheit erklärt auch, warum ein am Rand angeschnittenes Element den Eindruck erweckt, dass dort noch etwas weitergeht. In einer horizontal scrollbaren Reihe von Karten zeigt eine halb sichtbare Karte am rechten Rand: Hier ist noch mehr. Ist die Reihe dagegen genau am Kartenrand zu Ende, wirkt sie vollständig, und niemand kommt auf die Idee zu wischen.

Ein Prinzip, das du kennen solltest: gemeinsame Region

Neben den drei klassischen Gesetzen gibt es ein jüngeres Prinzip, das in Interfaces ständig vorkommt: die gemeinsame Region. Der Psychologe Stephen Palmer hat es 1992 beschrieben. Elemente, die innerhalb einer gemeinsamen Begrenzung liegen, etwa in einem Rahmen oder auf einer farbigen Fläche, wirken als Gruppe. Palmer zeigte in seinen Versuchen, dass dieser Effekt sogar stärker sein kann als Nähe oder Ähnlichkeit.

Das ist die Grundlage für Karten-Layouts. Eine Karte fasst Bild, Titel und Details eines Rezepts, eines Produkts oder eines Artikels in einem Kasten zusammen. Selbst wenn die Abstände innerhalb der Karte nicht perfekt sind, ist klar, was zusammengehört. Die NN/g beschreibt eine Rezept-App, in der lange Titel die Abstände durcheinanderbrachten, sodass Bewertungen den falschen Rezepten zugeordnet wurden. Erst Karten haben das Problem gelöst.

Trotzdem lohnt sich Zurückhaltung. Zu viele Rahmen und farbige Kästen machen eine Seite unruhig, und die NN/g warnt vor einem weiteren Effekt: Breite farbige Balken quer über die Seite können wie ein Seitenende wirken, sodass Menschen nicht weiterscrollen. Oft reicht Weißraum. Rahmen und Flächen sind dann sinnvoll, wenn Weißraum allein nicht genügt, etwa bei Inhalten unterschiedlicher Länge in einem Raster.

Wenn Prinzipien gegeneinander arbeiten

In echten Layouts wirken alle Prinzipien gleichzeitig, und manchmal widersprechen sie sich. Ein Beispiel: In einer Navigationsleiste stehen fünf Links. Der fünfte, „Suche“, ist genauso gestaltet wie die anderen, steht aber mit großem Abstand ganz rechts. Ähnlichkeit sagt: Er gehört dazu. Nähe sagt: Er gehört nicht dazu. Welches Signal gewinnt, hängt davon ab, wie stark die Unterschiede sind.

Für die Praxis lässt sich das vereinfachen: Begrenzungen wie Rahmen und Flächen wirken meist am stärksten, dann folgt Nähe, dann Ähnlichkeit. Das ist eine Faustregel aus den Beobachtungen der NN/g, kein Naturgesetz. Wichtiger als die Rangfolge ist ein anderer Grundsatz: Lass die Prinzipien dasselbe sagen. Wenn zwei Elemente zusammengehören, sollten sie nah beieinanderstehen, sich ähneln und, falls nötig, eine gemeinsame Fläche teilen. Wenn sie nicht zusammengehören, sollten sie sich in mindestens einem dieser Punkte deutlich unterscheiden.

Ein schneller Test hilft, Widersprüche aufzuspüren. Mach einen Screenshot deines Layouts und mach ihn stark unscharf, zum Beispiel mit einem Weichzeichner in einem Bildbearbeitungsprogramm. Welche Blöcke bleiben erkennbar? Wenn die Gruppen im unscharfen Bild andere sind als die, die du beabsichtigt hast, sendet das Layout gemischte Signale.

Die Einstellungsseite Schritt für Schritt überarbeiten

Zurück zur Vereins-App vom Anfang. Zwölf gleich gestaltete Zeilen mit gleichen Abständen: Das Layout verletzt kein einziges Gestaltgesetz, es nutzt nur keines. So lässt sich die Seite in vier Schritten verbessern.

Schritt 1: Inhalte sortieren. Bevor sich am Layout etwas ändert, braucht es die Gruppen. Das Team sortiert die zwölf Einträge auf Karteikarten und landet bei vier Themen: „Konto“ (Name, E-Mail, Passwort ändern), „Benachrichtigungen“ (Push, E-Mail, Erinnerung vor dem Training), „Darstellung“ (Sprache, dunkles Design) und „Daten und Datenschutz“ (Datenschutz, Daten exportieren). Abmelden und Konto löschen bleiben als Sonderfälle übrig. Dieses Sortieren ist im Kleinen das, was Card Sorting im Großen ist: eine Methode, mit der Teams herausfinden, wie Menschen Inhalte gruppieren würden.

Schritt 2: Nähe einsetzen. Innerhalb einer Gruppe rücken die Zeilen enger zusammen. Zwischen den Gruppen entsteht deutlich mehr Abstand, und jede Gruppe bekommt eine kleine Überschrift. Schon jetzt finden Menschen die Benachrichtigungen sofort, weil sie nur noch vier Blöcke statt zwölf Zeilen überfliegen müssen.

Schritt 3: Ähnlichkeit gezielt brechen. Alle Schalter für Benachrichtigungen sehen gleich aus, das ist richtig, denn sie funktionieren gleich. „Abmelden“ und „Konto löschen“ sind dagegen keine Einstellungen, sondern Aktionen mit Folgen. Sie bekommen eine eigene Gestaltung: Abmelden als einfacher Textbutton, Konto löschen in einer Warnfarbe und mit einer Rückfrage vor dem endgültigen Löschen. Die Ähnlichkeit zu den übrigen Zeilen ist bewusst aufgehoben.

Schritt 4: Gemeinsame Region und Geschlossenheit. Jede Gruppe liegt auf einer leicht abgesetzten Fläche mit abgerundeten Ecken. „Konto löschen“ steht ganz unten und für sich allein, mit großem Abstand zum Rest. Alle Texte beginnen an derselben Kante, sodass die Flächen als ruhige, geschlossene Blöcke wirken.

Vorher: zwölf gleich aussehende Zeilen, gleich verteilt, ohne Überschriften

Nachher: vier beschriftete Gruppen auf eigenen Flächen, darunter zwei klar abgesetzte Aktionen, die gefährlichste ganz am Ende

Kein Text wurde umgeschrieben, keine Funktion kam dazu. Und trotzdem wäre der Fehlklick auf „Konto löschen“ jetzt deutlich unwahrscheinlicher. Ob die Überarbeitung wirklich funktioniert, zeigt am Ende ein kurzer Usability-Test mit drei bis fünf Menschen.

Gruppen auch für Screenreader sichtbar machen

Gestaltgesetze beschreiben visuelle Wahrnehmung. Menschen, die nicht oder kaum sehen, nutzen oft einen Screenreader, also eine Software, die Inhalte vorliest. Für sie sind Abstände und Farbflächen unsichtbar. Eine Gruppe, die nur durch Weißraum entsteht, existiert für einen Screenreader nicht.

Die WCAG, die internationalen Richtlinien für barrierefreie Webinhalte, regeln das im Erfolgskriterium 1.3.1 („Info and Relationships“). Es verlangt, dass Informationen, Strukturen und Beziehungen, die durch die Gestaltung vermittelt werden, auch technisch erkennbar sind. Für deine Gruppen heißt das:

• Überschriften über Gruppen sind echte Überschriften im Code, etwa h2 oder h3, nicht nur fetter Text.
• Zusammengehörige Formularfelder wie die Benachrichtigungsschalter stehen in einem fieldset mit einer legend als Gruppenname.
• Listen von gleichartigen Elementen, etwa die Einträge einer Navigation, sind im Code auch als Liste ausgezeichnet.
• Unterschiede, die nur über Farbe vermittelt werden, bekommen zusätzlich einen Text oder ein Symbol. Das verlangt WCAG-Kriterium 1.4.1.

Die gute Nachricht: Wer seine Gruppen visuell sauber angelegt hat, hat den schwierigsten Teil schon erledigt. Die Struktur im Code bildet dann nur ab, was im Layout bereits sichtbar ist.

Fazit

Nähe, Ähnlichkeit und Geschlossenheit sind keine Stilregeln, sondern Beschreibungen dessen, was das Gehirn ohnehin tut. Es gruppiert, was nah beieinanderliegt, verbindet, was gleich aussieht, und ergänzt, was unvollständig ist. Du kannst dich dagegen nicht entscheiden, nur dafür, ob dein Layout diese Neigung nutzt oder gegen sie arbeitet.

Für den Einstieg reichen drei Fragen an jedes Layout: Sind die Abstände innerhalb von Gruppen deutlich kleiner als zwischen Gruppen? Sieht alles, was gleich funktioniert, auch gleich aus, und alles andere anders? Sind Formen und Icons vollständig genug, um sie eindeutig zu erkennen? Wenn du diese Fragen mit Ja beantworten kannst, verstehen Menschen dein Interface schneller, ohne dass du ein Wort dazuschreiben musst. Eine kompakte Übersicht über diese und weitere Wahrnehmungsprinzipien bietet die Sammlung Laws of UX.

Checkliste

• Inhalte sind vor dem Gestalten in sinnvolle Gruppen sortiert.
• Abstände innerhalb einer Gruppe sind deutlich kleiner als zwischen Gruppen.
• Labels stehen dicht an ihrem Feld, Bedienelemente nah an dem, was sie beeinflussen.
• Gruppen bleiben auch auf kleinen Bildschirmen erhalten.
• Eine Farbe ist für Links und interaktive Elemente reserviert.
• Die Hauptaktion unterscheidet sich sichtbar von Nebenaktionen, riskante Aktionen sind abgesetzt.
• Gleiche Icons und Formen stehen immer für dieselbe Bedeutung.
• Icons sind eindeutig erkennbar oder haben eine sichtbare Beschriftung.
• Rahmen und Flächen werden nur eingesetzt, wo Weißraum nicht reicht.
• Der Unschärfe-Test zeigt die beabsichtigten Gruppen.
• Gruppen sind im Code mit Überschriften, Listen oder fieldset ausgezeichnet.

Quellen

• Max Wertheimer: Untersuchungen zur Lehre von der Gestalt II. Psychologische Forschung 4, 1923 (englische Übersetzung, Classics in the History of Psychology)
• Stephen E. Palmer: Common Region: A New Principle of Perceptual Grouping. Cognitive Psychology, 1992
• Aurora Harley: Proximity Principle in Visual Design. Nielsen Norman Group, 2020
• Aurora Harley: Similarity Principle in Visual Design. Nielsen Norman Group, 2020
• Aurora Harley: The Principle of Common Region: Containers Create Groupings. Nielsen Norman Group, 2020
• Mads Soegaard: The Laws of Figure/Ground, Prägnanz, Closure, and Common Fate. Interaction Design Foundation
• W3C: Understanding Success Criterion 1.3.1: Info and Relationships