• Startseite
  • UX Leistungen und Services
  • Über mich
  • Blog
  • Kontakt
Youitive
  • Startseite
  • UX Leistungen und Services
  • Über mich
  • Blog
  • Kontakt

Konzepten

  • Home
  • Blog
  • Konzepten
  • Gestaltgesetze Cheat Sheet – 8 Regeln und Tipps für dein Konzept

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

  • Autor Björn Frieling
  • Kategorien Konzepten
  • Date 5. Juli 2020

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.

In der Abbildung ist das Gestaltgesetz der Nähe dargestellt

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.

Die Abbildung zeigt das Gestaltgesetz der Ähnlichkeit. Die weißen und schwarzen Punkte werden als einzelne Gruppen wahrgenommen.

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.

Formen werden von deinem Nutzer schnell erkannt, wenn diese bekannten geometrischen Formen ähneln.

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.

Strukturen werden in der Wahrnehmung oft fortgesetzt, auch wenn es farblich vielleicht unterschiedlich dargestellt wird.

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.

Rahmen können deinem Nutzer helfen bestimmte Bereiche auseinander zu halten und gemeinsame Elemente besser zu erkennen.

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.



Die ist ein Fehler

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.

Verbunde Elemente werden als Gruppe wahrgenommen. Dazu reicht oft auch ein kleiner Strich aus.

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.

Tag:Konzept, Methode, Psychologie, Regeln, Usability, UX, UX Tipps

  • Teilen:
author avatar
Björn Frieling

Previous post

A/B Tests – Einfach und effizient an wertvolle Daten kommen
5. Juli 2020

Next post

12 Tipps für Barrierefreiheit in deinem Konzept
29. November 2020

You may also like

Das Bild zeigt einige Bilder welche auf einem Tisch gelegt wurden. Diese sind wie in dem Gesellschaftsspiel Memory angeordnet. Normalerweise können Menschen sich 7±2 dieser Bilder merken.
Usability Richtlinie: Die 7 ± 2 Regel
25 Juli, 2021
Titelbild zum Thema Dark UX - Es zeigt die dunkle silhoutte eines Mannes
Dark UX und Dark Patterns
23 Mai, 2021
Das Bild zeigt die Startseite von https://www.youitive.de wie sie ein Farbenblinder wahrnehmen würde
12 Tipps für Barrierefreiheit in deinem Konzept
29 November, 2020

Search

Kategorien

  • Agile
  • Allgemein
  • Konzepten
  • Nutzungskontextanalyse
  • Strategie
  • User Research

Neuste Artikel

Das Bild zeigt einige Bilder welche auf einem Tisch gelegt wurden. Diese sind wie in dem Gesellschaftsspiel Memory angeordnet. Normalerweise können Menschen sich 7±2 dieser Bilder merken.
Usability Richtlinie: Die 7 ± 2 Regel
25Jul2021

Was ist die 7 ± 2 Regel? Bei der 7 ± 2 Regel spricht man bei User Experience und Usability davon, dass deinem Nutzer nur 7 Items ± 2 gleichzeitig präsentiert werden sollten. Diese Regel findet vor allem häufig Anwendung …

Die Abbildung zeigt einen Standardaufbau der Priorisierungsmatrix mit den 4 Quadranten und deren Beudeutung. Alle Funktionen welche rechts oben sind, sollte höhere priorisiert werden. Links oben und rechts unten werden Funktionen eingetragen, welche dann vielleicht später umgesetzt werden sollten. Funktionen welche links unten stehen, sollte nicht umgesetzt werden.
Priorisierungsmatrix – Im Team UX Entscheidungen treffen
26Jun2021

Eine Priorisierungsmatrix hilft dir und deinem Team UX Entscheidungen für neue Funktionen zu treffen. In agilen Teams ist die Priorisierung meist Aufgabe des Product Owners, allerdings kannst du ihn dabei gut unterstützen. Sollte dein Team nicht konstant von außen priorisiert …

Titelbild zum Thema Dark UX - Es zeigt die dunkle silhoutte eines Mannes
Dark UX und Dark Patterns
23Mai2021

Was ist Dark UX - Definition Unter Dark UX versteht man, das Ausnutzen bestimmter Patterns und Richtlinien, um aktiv die Kunden- und Nutzerentscheidung zu sabotieren. Dabei verwendest du für dein Interaktionsdesign die gleichen Prinzipien, Gesetze, Richtlinien und Inidikatoren wie bei …

UX Online Kurs

Du willst mehr über UX lernen? Dann kannst du über folgenden Link an meinem Online Kurs teilnehmen.

Zum Udemy Kurs

  • AGB
  • Impressum
  • Datenschutzerklärung

+49 176 848 592 65
info@youitive.de

Wir nutzen Cookies um dein Nutzererlebnis zu steigern. Bitte klicke auf 'Akzeptieren' um den vollen Funktionsumfang der Website zu nutzen. Ohne Cookies kann es zu Funktionseinschränkungen (längere Ladezeiten kommen).
Akzeptieren Ablehnen

Weitere Informationen
Datenschutz

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
immer aktiv
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Non-necessary
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.
SPEICHERN & AKZEPTIEREN