Die menschliche Wahrnehmung folgt klaren Regeln. Was wir unterbewusst als ästhetisch interpretieren, lässt sich klar durch Gestaltgesetze beschreiben.
Wer kennt es nicht: Du hast eine Webseite designt, aber irgendetwas stimmt nicht. Wir nehmen unbewusst wahr, dass irgendwas nicht ganz passt. Aber was genau ist es?
Manchmal kann es schwierig sein, auf Anhieb zu erkennen, was genau das Problem ist. Insbesondere in solchen Fällen kann es super hilfreich sein, die Gestaltgesetze der Wahrnehmung zu kennen. Aber auch beim grundsätzlichen Gestalten Deiner Website kannst Du durchs Anwenden der Gestaltgesetze viel Zeit und Frustration sparen.
Daher beschreiben wir Dir in diesem Artikel die Gestaltgesetze der Wahrnehmung und erklären, wie Du sie in Deinem Webdesign-Projekt anwenden kannst.
Was sind Gestaltgesetze der Wahrnehmung?
Gestaltgesetze der Wahrnehmung beschreiben die beobachteten Muster, nach denen das menschliche Gehirn Informationen wahrnimmt und verarbeitet, damit es sich auf unbewusste Erfahrungswerte stützen kann.
Die Anzahl der Gestaltgesetze der Wahrnehmung variiert je nach Quelle zwischen 7 und 114, wobei am häufigsten die folgenden 9 grundlegende Gesetze genannt werden:
- Gesetz der Nähe
- Gesetz der Ähnlichkeit
- Gesetz der guten Gestalt (oder Einfachheit bzw. Prägnanz)
- Gesetz der guten Fortsetzung
- Gesetz der Geschlossenheit
- Gesetz des gemeinsamen Schicksals
- Gesetz der gemeinsamen Region
- Gesetz der Gleichzeitigkeit
- Gesetz der verbundenen Elemente
Max Wertheimer beschrieb in seinem Paper Untersuchungen zur Lehre von der Gestalt in 1923 die wesentlichen Gestaltgesetze und brauchte so die Wissenschaft der Gestaltpsychologie ins Rollen, die Forschungsbereiche wie Kunst und Design beeinflusste. Heute sind die Gestaltgesetze der Wahrnehmung eine unerlässliche Grundlage für das Design und das Verständnis der menschlichen Wahrnehmung.
Wie hilft mir die Anwendung der Gestaltgesetze im Webdesign und User Experience?
Im Webdesign stützt sich die Anwendung der Gestaltgesetze auf das Bestreben, die Struktur einer Webseite so intuitiv wie möglich zu gestalten. So können die unterbewussten Mechanismen der Wahrnehmung berücksichtigt werden, um dem Nutzer eine optimale User Experience zu liefern.
Die Verwendung der Gestaltgesetze in einer Webseite verbessert nicht nur die Navigation und Erfassung von Inhalten, sondern ermöglicht es auch, die Aufmerksamkeit der Nutzer auf wichtige Elemente zu lenken.
Die Kenntnis der Gestaltgesetze ist insbesondere für das responsive Design (LINK GLOSSAR) einer Webseite hilfreich. Gestaltgesetze können gezielt angewendet werden, um bei jeder möglichen Größe und Anordnung von Website-Elementen eine möglichst intuitive User Experience zu liefern. Außerdem kann man so jede Menge Zeit sparen.
Die Wichtigkeit der Gestaltgesetze beginnt bereits bei den kleinsten Elementen einer Webseite. Bereits Elemente wie die Typefaces oder die Fonts aus der Typographie, nehmen wir genau dann als angenehm und leserlich wahr, wenn sie die Gestaltgesetze befolgen. Und darauf stützt sich das Gefühl der gesamten Webseite.
1. Gesetz der Nähe
Was nah beieinander ist, gehört zusammen
Elemente mit einem geringen Abstand zueinander werden als zusammengehörig wahrgenommen. Dabei ist es egal, ob es sich um einen horizontalen, vertikalen oder anders orientierten Abstand handelt. Unsere Wahrnehmung gruppiert diese Elemente automatisch.
Das Gesetz der Nähe ist eins der wichtigsten und stärksten Gestaltgesetze und es ist oftmals sogar stärker als das Gesetz der Ähnlichkeit. Wenn also z.B. unterschiedlich geformte Objekte nahe beieinander platziert werden, werden diese also höchstwahrscheinlich als zusammengehörig wahrgenommen.
Die Wirkungskraft vom Gesetz der Nähe hängt vom Verhältnis der Objektgrößen zu deren Abständen ab. So müssen die Abstände zwischen kleinen Objekten kleiner sein, als die Abstände zwischen großen Objekten, damit sie gleichermaßen als zusammengehörig wahrgenommen werden.
Insbesondere in der Typographie ist diese Eigenschaft ausschlaggebend, da die Verwendung von Schriftgrößen in Kombination mit dem Gesetz der Nähe hervorragend für die Schaffung von Hierarchie verwendet werden kann. Je höher sich Elemente in der Hierarchie befinden, desto größer sollten die Abstände zu benachbarten Elementen sein.
Anwenden vom Gesetz der Nähe im Webdesign
Das Gesetz der Nähe ist das womöglich wichtigste Gestaltungsgesetz im Webdesign, um sinnvoll Grundlayouts zu strukturieren. Insbesondere beim Wireframing ist das Gesetz der Nähe essentiell.
Bonus: LINK WIREFRAME ARTIKEL
Das Gesetz der Nähe beginnt bereits bei der Typographie. Buchstaben, die nah nebeneinander stehen, bilden ein Wort. Nebeneinander stehende Wörter haben einen größeren Abstand als die Buchstaben der Wörter. Zeilen haben wiederum größere Abstände zueinander als die Wörter. So entsteht die Hierarchie eines Paragraphen, dann die Hierarchie mehrerer Paragraphen und zum Schluss die Hierarchie der gesamten Website inklusive Überschriften, Buttons, Bilder und allen anderen Elementen.
Wenn Du also eine Webseite baust, solltest Du die Hierarchie der Webseite bewusst im Hinterkopf behalten, da die Abstände immer darauf aufbauen.
Vermeide diesen häufigen Designfehler beim Gesetz der Nähe
Texte werden oft als komplette Elemente angesehen. Dass Buchstaben durch sukzessiv größer werdende Abstände zu Wörtern, Sätzen und Paragraphen werden, wird schnell vergessen. Die Abstände zwischen den Textbausteinen lassen sich also mit dem Gesetz der Nähe beschreiben.
Werden nun fälschlicherweise die Abstände zu umliegenden Elementen kleiner gehalten, als die Abstände zwischen den Textbausteine selbst, wird das Gesetz der Nähe gebrochen. Elemente, die nah zusammen sind, gehören zusammen. Aber wir haben uns daran gewöhnt, dass Textbausteine zusammengehört. So entsteht ein Widerspruch im Design und ein Konflikt in der Wahrnehmung, der nicht unseren Erwartungen entspricht.
Willst Du weitere Fehler in der Typographie vermeiden und die Grundlagen meistern? Dann ist dieser Artikel genau der richtige für Dich: Typographie 101 - Grundlagen der Typographie im Webdesign
2. Gesetz der Ähnlichkeit
Was ähnlich ist, gehört zusammen
Das Gesetz der Ähnlichkeit beschreibt das Auffassungsmerkmal, dass wir ähnliche Elemente tendenziell als zusammengehörig wahrnehmen. Dabei kann es sich um beliebige Eigenschaften wie Form, Farbe, Größe, Ausrichtung, Textur, Font sowie Geschwindigkeit oder Bewegungsrichtung handeln. Je mehr Gemeinsamkeiten die Elemente aufweisen, desto drastischer nehmen wir die Gruppierung wahr.
Anwendung vom Gesetz der Ähnlichkeit im Webdesign
Viele Webseiten haben einen festen und eindeutigen Style für Links. Das ist auch richtig so, denn nur so können wir uns als Nutzer an das Aussehen der Links auf einer bestimmten Webseite gewöhnen. Würde jeder Link eine komplett andere Farbe haben, müssten wir uns bei jedem farbigen Text fragen, ob es sich um einen Link oder um Dekoration handelt.
Diese Beobachtung lässt sich auf viele Abschnitte von Webseiten erweitern. Überschriften sollten immer ähnliche Fonts verwenden und wenn möglich sogar dieselbe. Es sollten nur wenige und klar festgelegte Stile für Buttons existieren, die konsistent wiederverwendet werden.
Je klarer Du die individuellen Elemente Deiner Webseite definierst, desto verständlicher ist das Endergebnis. Denn das ist genau was wir wollen: Intuitive und offensichtliche Benutzbarkeit.
3. Gesetz der guten Gestalt (oder Einfachheit bzw. Prägnanz)
Einfachheit über Komplexität
Das Gesetz der guten Gestalt besagt, dass wir eher einfache Strukturen wahrnehmen, als komplexe Strukturen. Wir zerlegen also komplexe Formen eher in einfache Teilformen, bevor wir das Objekt als Ganzes wahrnehmen.
Anwendung vom Gesetz der guten Gestalt im Webdesign und Logodesign
Insbesondere im Bereich des Logodesigns wird das Gesetz der guten Gestalt häufig angewandt. In den letzten Jahren sind geometrische und minimalistische Logos immer populärer geworden. Häufig entstehen durch kreatives Kombinieren einfacher Formen komplexe Logos mit tieferer Bedeutung.
Abhängig davon, was für uns am leichtesten zu verarbeiten ist, kann es passieren, dass unsere Wahrnehmung zuerst die einfachen Formen erfasst und erst im Anschluss das abstrakte Gesamtbild erkennt. Beim Gestalten eines modernen Logos sollte man sich also bereits im Voraus über das Gesetz der guten Gestalt im Klaren sein und ggf. die Einfachheit des Logos hinterfragen.
Im Webdesign wird das Gesetz der guten Gestalt bei Elementen wie Buttons verwendet. Viele Buttons haben eine einfache rechteckige Form, wobei die Ecken oftmals abgerundet sind. Diese Form ist sehr einfach wiederzuerkennen und somit besonders einprägsam. Außerdem haben wir uns an diese Art der Gestaltung von Buttons gewöhnt, weshalb wir diese Darstellung umso leichter wiedererkennen und auf Webseiten erwarten.
4. Gesetz der guten Fortsetzung
Durchgehende Linien sind verbunden
Das Gesetz der guten Fortsetzung besagt, dass Elemente auf einer durchgehenden Linie oder Kurve als zusammengehörig wahrgenommen werden. Unsere Wahrnehmung neigt also dazu, dem einfachsten Weg zu folgen und einen Richtungsimpuls fortzusetzen.
Wenn sich also beispielsweise zwei Linien kreuzen, so glauben wir nicht, dass die Verläufe der Linien an dieser Stelle einen Knick machen. Stattdessen glauben wir, dass zwei durchgehende Linien übereinander liegen und sich überlappen. Unser Gehirn tendiert also dazu, den einfachsten Weg fortzusetzen. Man nennt das Gesetz der guten Fortsetzung daher auch das Gesetz der Kontinuität oder das Gesetz der durchgehenden Linie.
Anwendung vom Gesetz der guten Fortsetzung im Webdesign
Das Gesetz der guten Fortsetzung wird im Webdesign oft in der Navigation angewendet. Viele Navigationsleisten enthalten mehrere horizontal angeordnete Links. Oft sind diese zentriert und nehmen nicht den gesamten horizontalen Raum ein.
Zusätzlich könnte eine solche Navigationsleiste weit links das Logo des Unternehmens enthalten und weit rechts weitere Icons für Social Media.
Gemeinsam mit dem Gesetz der Geschlossenheit wird also die Wahrnehmung geschaffen, dass alle diese Elemente zusammengehören und gemeinsam die Navigationsleiste bilden.
5. Gesetz der Geschlossenheit
Unvollständiges wird vervollständigt
Unsere Wahrnehmung bestrebt, visuell unterbrochene Strukturen zu schließen und als geschlossen wahrzunehmen. Dies ist in der Natur sinnvoll, da sonst Objekte hinter Bäumen als zwei separate Hälften wahrgenommen werden würden. Aber auch in der digitalen Welt wird dieses Gesetz viel genutzt, um leicht verständliche Designs zu schaffen.
Anwendung vom Gesetz der Geschlossenheit im Webdesign
Im Webdesign werden häufig Objekte überlagert, um so eine interessante Struktur zu schaffen. Das Gesetz der Geschlossenheit ermöglicht es unserer Wahrnehmung dabei, überlagerte Elemente zu unterscheiden und zusammengehörige Elemente zu vereinen.
Auf einer Webseite könnte beispielsweise eine 3D-Dose über einem Textblock platziert werden. Visuell wird der Textblock getrennt, aber unsere Wahrnehmung verbindet ihn dennoch und sieht ihn als ein verbundenes Element.
Aber auch simplere Ideen, wie das platzieren von Text über Bildern funktioniert nur, weil es das Gesetz der Geschlossenheit gibt. Würden Objekte in dem Bild durch die Texte zerteilt werden, könnten wir sie sonst nicht mehr als Einheit wahrnehmen.
6. Gesetz des gemeinsamen Schicksals
Gleichzeitiges Bewegen schafft Zusammenhalt
Objekte, die sich in dieselbe Richtung bewegen, werden als eine Einheit wahrgenommen. Oft schafft eine gemeinsame Bewegung einen stärkeren Zusammenhalt als andere Gestaltgesetze. Selbst wenn sich Objekte in Form, Farbe oder anderen Gestaltungsmittel unterscheiden, werden die gemeinsam bewegten Objekte als Einheit interpretiert.
Anwendung vom Gesetz des gemeinsamen Schicksals im Webdesign
Eine moderne Anwendung ist das animierte Einblenden und Ausblenden von zusammengehörigen Elementen einer Website. Beispielsweise können beim Öffnen einer Website verknüpfte Textelemente gemeinsam eingeblendet werden, um so den Zusammenhalt zu verstärken und dem Nutzer klar und deutlich zeigen, dass diese zusammengehören.
In manchen Fällen ist die Zusammengehörigkeit von Elementen einer Website nicht offensichtlich. Werden diese allerdings gemeinsam durch Animationen bewegt, wird deren Verknüpfung glasklar.
7. Gesetz der gemeinsamen Region
Umschlossenes gehört zusammen
Elemente in umschlossenen Gebieten werden als zusammengehörig empfunden. Dies kann durch eine einfache Umrandung, aber auch durch Hintergrundfarben, Texturen oder ähnliche Gestaltungsmittel umgesetzt werden.
Anwendung vom Gesetz der gemeinsamen Region im Webdesign
Das Gesetz der gemeinsamen Region wird viel im Webdesign verwendet. Dabei können Elemente wie Navigationsleisten, Menüs, Formular oder Buttons durch einfache Umrandungen zusammengefasst werden.
Die folgende Webseite von Obys Agency hat eine Navigationsleiste, in der die Abstände zwischen den Elementen sehr groß sind. Ohne die Umrandung würde man die Navigationsleiste möglicherweise nicht als verbundenes Element wahrnehmen. Die Umrandung schafft allerdings klar und deutlich einen visuellen Zusammenhalt der Elemente.
Aber auch Trennlinien schaffen visuelle Regionen, wie das folgende Beispiel von Reebok zeigt. Hier sieht man ebenfalls, dass auch Buttons diesem Gesetz folgen. Der Text in Buttons wird durch die Region des Buttons eingegrenzt und grenzt sich so von anderen Elementen der Webseite ab.
8. Gesetz der Gleichzeitigkeit
Gleichzeitiges Verändern schafft Zusammengehörigkeit
Das Gesetz der Gleichzeitigkeit beschreibt, dass Elemente, die sich gleichzeitig und gleichermaßen verändern, als zusammengehörig wahrgenommen werden.
Das Gesetz der Gleichzeitigkeit lässt sich also als eine Erweiterung des Gesetzes des gemeinsamen Schicksals betrachten. Wohingegen das Gesetz des gemeinsamen Schicksals ausschließlich Bewegung betrachtet, kann sich beim Gesetz der Gleichzeitigkeit die Form, Farbe, Textur oder andere Eigenschaften der Elemente verändern. Solange diese Veränderungen gleichzeitig passieren und sich dabei ähnlich verhalten, werden die Elemente als zusammengehörig empfunden.
Anwendung vom Gesetz der Gleichzeitigkeit im Webdesign
Die gemeinsame Animation verschiedener Elemente einer Webseite kann klar transportieren, dass sie zusammengehören.
Wenn beispielsweise ein Bild einer Galerie per Klick ausgewählt wird, könnte es sich vergrößern. Gleichzeitig könnten die anderen Bilder sich verkleinern oder gemeinsam ausgeblendet werden. Zum einen hebt sich das ausgewählte Element von der Menge der anderen Bilder ab, da es gezielt das Gesetz der Gleichzeitigkeit bricht. Da sich allerdings alle anderen Bilder auf gleiche Weise verändern, werden diese als zusammengehörig wahrgenommen.
9. Gesetz der verbundenen Elemente
Durch Linien Verbundenes gehört zusammen
Werden Elemente durch Linien, Kurven oder ähnliche Mittel verbunden, werden sie als zusammengehörig empfunden. Dies gilt sogar, wenn die Elemente einen großen Abstand haben oder sehr unterschiedlich aussehen.
Anwendung vom Gesetz der verbundenen Elemente im Webdesign
Auf Webseiten können weit entfernte Elemente mithilfe vom Gesetz der verbundenen Elemente verknüpft werden.
Ein Beispiel hierfür stellt die Website von Beyond Beauty dar, in der die Wörter “two” und “four” durch eine Linie verbunden werden. In Kombination mit dem Gesetz der Geschlossenheit und dem Gesetz der guten Fortsetzung wird eine wahrgenommene Verbindung der beiden Wörter geschaffen, obwohl sie sich sehr weit auseinander befinden.
Es ist also möglich, durch Anwendung des Gesetzes der verbundenen Elemente bestimmte Teile einer Webseite miteinander zu verbinden, auch wenn diese sonst keine starke Bindung aufweisen. Diese Strategie verwendet das Template Das Architecture.
Kombiniere die Gestaltgesetze der Wahrnehmung für ein überzeugendes Webdesign
Ein gutes Webdesign kombiniert so viele der Gestaltgesetze der Wahrnehmung wie nur möglich. Je stärker die Gestaltgesetze ausgenutzt werden, desto intuitiver ist eine Website zu verstehen.
Das Webdesign von C2 Montréal verbindet eine Vielzahl der Gestaltgesetze.
Auf den ersten Blick sieht man die unterschiedlichen Kreise, die sich auf den zweiten Blick zu einer Linie verbinden. Hier nehmen wir zunächst das Gesetz der guten Gestalt wahr und kombinieren die Kreise anschließend durch das Gesetz der guten Fortsetzung und das Gesetz der Ähnlichkeit zu einer fortlaufenden Linie.
Obwohl sich im unteren linken Bereich vor den Kreisen ein schwarzer Kasten befindet, wissen wir durch das Gesetz der Geschlossenheit, dass sich dahinter die Kreise fortsetzen.
Das Gesetz der gemeinsamen Region kommt unter anderem in dem Kasten oben links oder in der vertikalen Leiste am rechten Bildschirmrand zum Einsatz, indem diese Bereiche klar durch Hintergrundfarben eingegrenzt werden.
Öffnet man die Seite im Browser, so wird sie gekonnt animiert, wodurch die Verbindung relevanter Elemente verstärkt wird. Dabei kommt sowohl das Gesetz des gemeinsamen Schicksals, aber auch das Gesetz der Gleichzeitigkeit zum Einsatz, da hierbei mit Animationen der Position, aber auch der Form gespielt wird.
Natürlich wird auch gekonnt das Gesetz der Nähe eingesetzt, um zusammengehörige Elemente zu verbinden.
Das Gesetz der verbundenen Elemente wird auf dieser Webseite nicht eingesetzt. Die Schriftzüge “12th” und “edition” könnten allerdings mit einer Linie verbunden werden, wodurch die Verbindung der beiden Elemente vergrößert werden würde. So würde die Webseite alle Gestaltgesetze der Wahrnehmung repräsentieren.
Wenn Du die Gestaltgesetze genauso gezielt anwendest, wie die genannten Beispiele, steht Dir nichts mehr im Weg, ein hervorragendes Benutzererlebnis für deine Website-Besucher zu schaffen.
