Gestaltgesetze Cheat Sheet – 8 Regeln und Tipps für dein Konzept

Einführung

In der Wahrnehmungspsychologie wurden einige Gesetze gefunden, die dir bei deinem Konzept helfen können. Diese Gestaltgesetze ermöglichen es dir, die Wahrnehmung deiner Nutzer zu steuern und die Usability und damit die UX deiner Website zu erhöhen. Auch sind sie wichtig für ein gutes visual Design auf deiner Website. Im Folgenden zeige ich dir 8 dieser Gestaltgesetze und jeweils einen praktischen Tipp, wann diese zum Einsatz kommen.

Gestaltgesetz der Nähe

Wenn Elemente visuell nahe beieinander liegen, werden sie als gemeinsam (Gruppe) wahrgenommen.

Tipp: Achte auf deine Abstände. Zum Beispiel sollte eine Überschrift immer näher am darauffolgenden Inhalt liegen, als zum vorherigen.

Gestaltgesetze der Ähnlichkeit

Elemente die ähnlich aussehen werden als Gruppe verstanden.

Tipp: Elemente die ähnlich oder gleich aussehen, sollten sich auch gleich Verhalten.

Gestaltgesetz der guten Gestalt

Elemente die eine geometrische Form darstellen, werden auch als solche erkannt.

Tipp: Achte bei Abbildungen und in deinem Layout darauf, geometrische Formen zu Nutzen die bekannt sind. Diese werden durch deinen Nutzer leichter erfasst.

Gestaltgesetz der guten Fortsetzung

Elemente die sich fortsetzen lassen (zum Beispiel Linien), werden von deinem Nutzer automatisch fortgesetzt.

Tipp: Vor allem wenn du mehrere Spalten nutzt, achte auf genügend Abstand zueinander. Ansonsten liest dein Nutzer ggfs. in der anderen Spalte weiter und ist verwirrt.

Gestaltgesetz des gemeinsamen Schicksals

Zwei oder mehrere sich gleichzeitig in eine Richtung bewegende Elemente werden als eine Einheit oder Gestalt wahrgenommen.

Tipp: Achte bei Animationen darauf, dass nur zusammengehörige Elemente sich gleichzeitig bewegen.

Gestaltgesetz der gemeinsamen Region

Elemente innerhalb eines Rahmens werden als gemeinsam wahrgenommen.

Tipp: Grenze einzelne Regionen deiner Website visuell ab. Kacheln sollten bspw. einen Rahmen haben.

Gestaltgesetz der Gleichzeitigkeit

Elemente, die sich gleichzeitig verändern, werden als zusammengehörig empfunden.

Tipp: Gerade Feedback solltest du unmittelbar darstellen. Da dieses dann von deinem Nutzer als zusammengehörig zu seiner Interaktion wahrgenommen wird.

Gestaltgesetz der verbundenen Elemente

Wenn Elemente miteinander verbunden sind, werden diese als zusammengehörig wahrgenommen.

Tipp: Gerade wenn du einen Prozess darstellen willst (Progress Bars, Checkout Prozesse, usw.) solltest du die einzelnen Schritte visuell miteinander verbinden.

Fazit

Durch die Gestaltgesetze kannst du dein Layout optimieren und die Wahrnehmung der einzelnen Elemente auf deiner Seite optimieren. Einige Bereiche können dadurch schneller erfasst werden. Auch die Dialogprinzipien wie Lernförderlichkeit durch gleichzeitiges Feedback können davon profitieren.