G

Gestaltgesetze im UI/UX Design: Alle Prinzipien mit Beispielen | Cybay

Was sind Gestaltgesetze?

Gestaltgesetze sind Prinzipien aus der Wahrnehmungspsychologie, die beschreiben, wie das menschliche Gehirn visuelle Informationen zu sinnvollen Einheiten organisiert. Das Gehirn fasst einzeln wahrgenommene visuelle Reize zu Objekten zusammen und ordnet sie bekannten Kategorien zu, um ihnen Bedeutung zu verleihen. Wir erkennen so einzelne Informationen als zusammenhängendes Ganzes.

Im UI Design und UX Design werden diese Prinzipien gezielt eingesetzt, um Inhalte optisch zu gruppieren, Hierarchien zu schaffen und die Benutzerführung intuitiv zu gestalten. Die Grundidee dahinter lässt sich in einem Satz zusammenfassen: Das Ganze ist mehr als die Summe seiner Teile.

Diese Prinzipien gehen auf die gestalttheoretischen Arbeiten von Max Wertheimer, Kurt Koffka und Wolfgang Köhler zurück, die Anfang des 20. Jahrhunderts die Grundlagen der Gestaltpsychologie legten. Wertheimer formulierte 1923 erstmals die zentralen Gestaltgesetze - ein Fundament, das bis heute in der Designpraxis Bestand hat.

Gestaltgesetze im Überblick

Gesetz der Nähe

Das Gesetz der Nähe besagt, dass wir Dinge, die nahe beieinander stehen, als zusammengehörig interpretieren. Beispielsweise werden in einer Abbildung Objekte, die in unmittelbarer Nähe zueinander platziert sind, als Gruppe wahrgenommen, unabhängig von ihrer Form. Im Webdesign bedeutet dies, dass inhaltlich zusammengehörige Objekte optisch nah beieinander stehen sollten, wie Überschriften, die eng bei ihren zugehörigen Texten positioniert sind.

Gesetz der Ähnlichkeit

Das Gesetz der Ähnlichkeit besagt, dass ähnliche Objekte, wie Gestalt, Farbe oder Größe, als zusammengehörig wahrgenommen werden. In einer Abbildung können z.B. ähnliche Formen oder Farben dazu führen, dass sie als Gruppe gesehen werden. Im Webdesign sollten ähnliche Funktionen und Inhalte visuell ähnlich gestaltet werden, um ihre Zusammengehörigkeit zu verdeutlichen.

Gesetz der Geschlossenheit

Das Gesetz der Geschlossenheit beschreibt, wie das Gehirn unvollständige Formen automatisch zu geschlossenen Einheiten ergänzt. Für das Webdesign bedeutet das: Elemente wie Bilder, Textblöcke oder Karten sollten so angeordnet sein, dass sie geschlossene Formen bilden - etwa durch Rahmen, Hintergründe oder Abstände. Card-Layouts nutzen dieses Prinzip gezielt, um Inhaltsgruppen als eigenständige Einheiten wahrnehmbar zu machen.

Gesetz der Symmetrie

Das Gesetz der Symmetrie besagt, dass symmetrische Objekte als zusammengehörig wahrgenommen werden. Symmetrische Anordnungen schaffen starke Strukturen und reduzieren die wahrgenommene Komplexität. Im Webdesign sollte daher auf symmetrische Anordnungen geachtet werden, insbesondere bei mehrspaltigen Layouts, um die Übersichtlichkeit zu erhöhen.

Gesetz der guten Gestalt (Prägnanz)

Auch als Gesetz der Einfachheit bekannt: Reizmuster werden so wahrgenommen, dass die resultierende Struktur so einfach wie möglich ist. Das Gehirn sucht in komplexen Figuren nach bekannten, einfachen Formen. Im Webdesign heißt das: Klare visuelle Hierarchien, ausreichend Weißraum und eindeutige Button-States. Überladene Interfaces verstoßen gegen dieses Prinzip und erhöhen die kognitive Last der Nutzer:innen.

Gesetz der Erfahrung

Das Gesetz der Erfahrung besagt, dass wir bei der visuellen Wahrnehmung auf bereits erlernte Erfahrungen zurückgreifen. Dies ermöglicht es uns, unvollständige Informationen zu ergänzen. Im Webdesign sollten die Erfahrungen der Zielgruppe berücksichtigt werden, indem bekannte Muster und Konventionen verwendet werden, wie beispielsweise die Platzierung des Warenkorbs oben rechts auf der Webseite. Wer diese Erwartungen bricht, erzeugt Reibung. Welche weiteren Prinzipien gutes Interface-Design ausmachen, zeigen die 8 goldenen Regeln für Interface Design.

Gesetz der Fortsetzung (Kontinuität)

Unsere Wahrnehmung neigt dazu, Linien und Muster als kontinuierlich wahrzunehmen, auch wenn sie unterbrochen sind. Im Webdesign sollten Layouts harmonische, fließende Linien und Leseflüsse bieten. Schrittweise Prozesse wie Checkouts oder Onboarding-Flows profitieren besonders von diesem Prinzip: Ein klar ausgerichteter, linear aufgebauter Stepper signalisiert Nutzer:innen, wo sie sich im Prozess befinden und wohin es geht.

Zwei weitere Gestaltgesetze, die im UI/UX-Design relevant sind

Der klassische Kanon der Gestaltgesetze wird in der Designpraxis häufig um zwei weitere Prinzipien ergänzt, die in modernen Interfaces eine wichtige Rolle spielen:

Gesetz des gemeinsamen Schicksals

Elemente, die sich gleichartig bewegen oder verändern, werden als zusammengehörig wahrgenommen. Im UI-Design zeigt sich das bei Mikrointeraktionen: Wenn ein Filterchip und die zugehörige Trefferanzahl gleichzeitig aktualisiert werden, signalisiert das ihre Zusammengehörigkeit. Akkordeons, die verbundene Inhalte gemeinsam ein- und ausblenden, nutzen dasselbe Prinzip.

Figur-Grund-Trennung

Die Wahrnehmung trennt automatisch Vordergrund von Hintergrund. Kontrast und Flächen steuern, worauf der Fokus liegt. Im Webdesign bedeutet das: Kontrastreiche Call-to-Actions vor ruhigem Hintergrund, Modale mit abgedunkeltem Hintergrund, ausreichender Helligkeitskontrast für Lesbarkeit - auch im Sinne der Barrierefreiheit nach WCAG-Richtlinien.

Gestaltgesetze auf einen Blick

Gesetz Kernaussage Webdesign-Beispiel
Nähe Nahe Elemente wirken zusammengehörig Labels direkt am Formularfeld
Ähnlichkeit Ähnliche Elemente werden gruppiert Einheitliche Button-Farben
Geschlossenheit Lücken werden mental ergänzt Card-Layouts mit Rahmen
Symmetrie Symmetrie wirkt harmonisch und strukturiert Mehrspaltige Layouts
Prägnanz Einfachste Interpretation wird bevorzugt Klare Hierarchien, Weißraum
Erfahrung Bekannte Muster werden erwartet Warenkorb oben rechts
Kontinuität Linien werden als fließend wahrgenommen Linearer Checkout-Stepper
Gemeinsames Schicksal Gleichartige Bewegung signalisiert Einheit Synchrone Filter-Animationen
Figur-Grund Vordergrund hebt sich vom Hintergrund ab Kontrastreiche CTAs

Fazit zu den Gestaltgesetzen

Die Gestaltgesetze bieten wertvolle Einblicke in die Wahrnehmungsprozesse des menschlichen Gehirns und sind ein unverzichtbares Fundament für die Gestaltung benutzerfreundlicher Interfaces. Durch ihre gezielte Anwendung können Designer:innen Inhalte so strukturieren, dass Nutzer:innen sie intuitiv erfassen, ohne bewusst nachdenken zu müssen.

Dabei gilt: Die Prinzipien wirken am stärksten, wenn sie kontextsensitiv eingesetzt werden. Zu viele gleichzeitig angewendete Gesetze können sich widersprechen und die Wirkung abschwächen. Entscheidend ist immer die Frage, welche Gruppierung oder Hierarchie für die jeweilige Aufgabe der Nutzer:innen am sinnvollsten ist.

FAQ: Gestaltgesetze

Was sind die Gestaltgesetze einfach erklärt?

Gestaltgesetze sind Prinzipien aus der Wahrnehmungspsychologie, die beschreiben, wie das menschliche Gehirn visuelle Informationen zu sinnvollen Einheiten zusammenfasst. Sie erklären, warum wir bestimmte Elemente als zusammengehörig wahrnehmen - und sind deshalb ein zentrales Werkzeug im UI/UX-Design.

Wie viele Gestaltgesetze gibt es?

Es gibt keinen weltweit verbindlichen Kanon. Der klassische Kern umfasst sieben Gesetze: Nähe, Ähnlichkeit, Geschlossenheit, Symmetrie, Prägnanz, Erfahrung und Kontinuität. In der modernen Designpraxis werden diese häufig um weitere Prinzipien wie das Gesetz des gemeinsamen Schicksals und die Figur-Grund-Trennung ergänzt.

Warum sind Gestaltgesetze im UX Design wichtig?

Weil sie erklären, wie Nutzer:innen Interfaces intuitiv lesen und verstehen. Wer Gestaltgesetze kennt und anwendet, kann Layouts so gestalten, dass Inhalte ohne Erklärung verständlich sind - das reduziert kognitive Last, verbessert die Usability und erhöht die Conversion.

Wer hat die Gestaltgesetze entwickelt?

Die Grundlagen der Gestaltpsychologie wurden Anfang des 20. Jahrhunderts von den deutschen Psychologen Max Wertheimer, Kurt Koffka und Wolfgang Köhler erarbeitet. Wertheimer formulierte 1923 erstmals die zentralen Gestaltgesetze der visuellen Wahrnehmung.

Können wir euch bei benutzerfreundlichem Interface Design unterstützen?

Gutes UI/UX-Design basiert auf einem tiefen Verständnis dafür, wie Menschen visuelle Informationen verarbeiten. Unsere Expert:innen setzen Gestaltprinzipien gezielt ein, um Interfaces zu gestalten, die Nutzer:innen intuitiv führen und Conversion-Ziele unterstützen.

Kontaktiert uns für ein unverbindliches Erstgespräch.

Branding

Gestaltgesetze in eurem Design verankern

Gutes Interface-Design entsteht nicht zufällig: Es folgt Prinzipien, die Nutzer:innen intuitiv führen und Conversion-Ziele unterstützen. Wir übersetzen Wahrnehmungspsychologie in konkretes UX/UI-Design, das messbar wirkt.

Kreation & UX entdecken

Passendene Blogartikel

Dark Patterns und Confirmshaming: Manipulation im digitalen Zeitalter

Dark Patterns und Confirmshaming sind weiter verbreitet, als man gemeinhin glauben mag, und sie werden zu einem immer größeren rechtlichen Risiko. Was hinter diesen manipulativen Designmustern steckt, wie ihr sie erkennt und warum ethisches Design langfristig die bessere Strategie ist.

UX & Usability Mythen: Warum die 3 Klick Regel falsch ist!

Die 3-Klick-Regel ist einer der Mythen, die sich im Bereich UX und Usability hartnäckig halten. Sie besagt, dass jede Information auf einer Website nie mehr als 3 Klicks entfernt sein sollte, um Frustration bei den Nutzern zu vermeiden. In diesem Artikel erkläre ich, was es mit diesem Mythos auf sich hat und warum er als Usability-Regel ungeeignet ist.

Typografie im Web: Was ist die richtige Schriftgröße für eine Website?

Welche Schriftgröße für den Fließtext sollte ich für meine Website wählen? Bis vor einigen Jahren wäre die Antwort wohl 16px gewesen. Denn das ist der Wert, den man oft liest und dazu auch Browserstandard. Mit einem festen Wert lässt sich die Frage nicht beantworten! Zumindest nicht aus ergonomischer Sicht. Deswegen werde ich mit entsprechenden DIN-Normen als Grundlage erklären, welche Faktoren für die Wahl der Schriftgröße die entscheidende Rolle spielen. Dazu sei gesagt, dass neben der Schriftgröße noch viele andere Faktoren zur Lesbarkeit beitragen. Ich beschränke mich aber in diesem Beitrag auf die Schriftgröße.