--- title: "Gestaltgesetze" url: "https://www.insideuxdesign.com/de/glossar/gestaltgesetze" language: "de" description: "Was sind Gestaltgesetze im UX-Design? Einfach erklärt mit Beispiel und Praxistipps. Erfahre, wie du Layouts mit Nähe, Ähnlichkeit und Rahmen klar gliederst." published: "2026-10-14T09:50:31+02:00" updated: "2026-10-14T13:06:56+02:00" --- # Gestaltgesetze Die Gestaltgesetze beschreiben, wie unser Gehirn einzelne Elemente automatisch zu Gruppen und Formen zusammenfasst. Im Design helfen sie, Layouts ohne zusätzliche Linien verständlich zu gliedern. - **Buchstabe:** G - **Englischer Begriff:** Gestalt Principles UX-Glossar · engl. Gestalt Principles # Gestaltgesetze Die Gestaltgesetze beschreiben, wie unser Gehirn einzelne Elemente automatisch zu Gruppen und Formen zusammenfasst. Im Design helfen sie, Layouts ohne zusätzliche Linien verständlich zu gliedern. 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](https://www.insideuxdesign.com/de/blog/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](https://www.insideuxdesign.com/de/glossar/affordance), [Cognitive Load](https://www.insideuxdesign.com/de/glossar/cognitive-load), [Informationsarchitektur](https://www.insideuxdesign.com/de/glossar/informationsarchitektur), [Design System](https://www.insideuxdesign.com/de/glossar/design-system) ## Quellen - [Aurora Harley: Proximity Principle in Visual Design. Nielsen Norman Group, 2020](https://www.nngroup.com/articles/gestalt-proximity/) - [Aurora Harley: The Principle of Common Region: Containers Create Groupings. Nielsen Norman Group, 2020](https://www.nngroup.com/articles/common-region/) - [Johan Wagemans u. a.: A Century of Gestalt Psychology in Visual Perception: I. Perceptual Grouping and Figure-Ground Organization. Psychological Bulletin, 2012](https://pubmed.ncbi.nlm.nih.gov/22845751/) ## Weitere Begriffe [ ### A/B-Test Ein A/B-Test ist ein Experiment, bei dem zwei Varianten einer Seite oder eines Elements gleichzeitig an zufällig aufgeteilte Besuchende ausgespielt werden. So entscheidest du anhand echter Daten, welche Variante besser funktioniert. ](https://www.insideuxdesign.com/de/glossar/a-b-test) [ ### Affordance Eine Affordance beschreibt, welche Handlung ein Objekt möglich macht und ob Menschen das erkennen: Ein Button lädt zum Drücken ein, ein Griff zum Ziehen. ](https://www.insideuxdesign.com/de/glossar/affordance) [ ### Barrierefreiheit Barrierefreiheit bedeutet, dass Websites, Apps und digitale Dokumente so gestaltet sind, dass alle Menschen sie nutzen können, auch mit einer Seh-, Hör-, motorischen oder kognitiven Behinderung. ](https://www.insideuxdesign.com/de/glossar/barrierefreiheit) [ ### Card Sorting Card Sorting ist eine Research-Methode, bei der Menschen Begriffe auf Karten in Gruppen sortieren. So siehst du, wie sie Inhalte gedanklich ordnen, und kannst eine verständliche Navigation planen. ](https://www.insideuxdesign.com/de/glossar/card-sorting) [ ### Cognitive Load Cognitive Load ist die geistige Anstrengung, die nötig ist, um eine Oberfläche zu verstehen und zu bedienen. Je weniger unnötige Denkarbeit ein Design verlangt, desto leichter fällt die eigentliche Aufgabe. ](https://www.insideuxdesign.com/de/glossar/cognitive-load) [ ### Dark Patterns Dark Patterns sind Gestaltungstricks, die Menschen zu Entscheidungen drängen, die sie eigentlich nicht treffen wollen, etwa versteckte Kündigungen oder vorausgewählte Zusatzoptionen. ](https://www.insideuxdesign.com/de/glossar/dark-patterns) [ ### Design System Ein Design System ist ein gemeinsamer Baukasten aus wiederverwendbaren Bausteinen und Regeln. Damit gestalten und entwickeln Teams Oberflächen, die überall einheitlich aussehen und sich gleich verhalten. ](https://www.insideuxdesign.com/de/glossar/design-system) [ ### Fitts’ Law Fitts’ Law beschreibt, wie lange es dauert, ein Ziel mit einer Bewegung zu treffen: Je größer und näher ein Ziel ist, desto schneller und sicherer erreichst du es. Im UX-Design hilft das, Buttons und Links richtig zu dimensionieren und zu platzieren. ](https://www.insideuxdesign.com/de/glossar/fitts-law) [ ### Heuristische Evaluation Bei einer heuristischen Evaluation prüfen Fachleute eine Oberfläche anhand anerkannter Faustregeln für gute Bedienbarkeit. So findest du schnell und günstig typische Schwachstellen, noch bevor echte Menschen testen. ](https://www.insideuxdesign.com/de/glossar/heuristische-evaluation) [ ### Hick’s Law Hick’s Law besagt, dass Entscheidungen länger dauern, je mehr gleichwertige Optionen zur Wahl stehen. Die Zeit wächst dabei aber deutlich langsamer als die Zahl der Optionen. ](https://www.insideuxdesign.com/de/glossar/hicks-law) [ ### Informationsarchitektur Informationsarchitektur beschreibt, wie Inhalte einer Website oder App strukturiert und benannt sind. Sie sorgt dafür, dass Menschen finden, was sie suchen, und wissen, wo sie gerade sind. ](https://www.insideuxdesign.com/de/glossar/informationsarchitektur) [ ### Jobs to be Done Jobs to be Done ist ein Denkansatz, der fragt, welche Aufgabe Menschen mit einem Produkt erledigen wollen und welchen Fortschritt sie in ihrer Situation suchen. Im Mittelpunkt stehen Kontext und Motivation statt Merkmale wie Alter oder Beruf. ](https://www.insideuxdesign.com/de/glossar/jobs-to-be-done)