Takeaways
- The Gestalt principles are a series of principles that describe how people automatically structure their perception of their environment
- People perceive objects as a whole and not as individual parts.
- There are 6 primary Gestalt principles: Proximity, Similarity, Continuation, Closure, Simplicity, Common Fate
What are the gestalt principles?
In the 1920s, a group of German psychologists led by Max Wertheimer developed a series of theories on how people perceive the world around them.
This is primarily about visual perception.
Diese Prinzipien sind heute als die Gestaltprinzipien bekannt.
The main assumption of Gestalt psychology is that the human mind first looks at objects as a whole before perceiving the individual parts of the object.
This assumption is summarized by the Gestalt psychologists in the statement 'The whole is more than the sum of its parts'.
«The whole is more than the sum
of its parts«
When you look at a bicycle, you don't just see wheels, pedals, a seat, handlebars, etc., but perceive the bicycle as a whole
When you look at a bicycle, you don't just see wheels, pedals, a seat, handlebars, etc., but perceive the bicycle as a complete object with a specific purpose. mit einem bestimmten Zweck wahr.
Even if a part of the bicycle is missing or obscured, we usually still recognize it as a bicycle because we interpret the object as a whole, not as a collection of individual parts.
In the following, we will explain the 6 primary Gestalt principles Proximity, Similarity, Continuation, Closure, Simplicity, Common Fate defined and their application in UI/UX Design explained.
Before we start, it should be noted that it is often the case that multiple principles are applied within a single design. However, for simplicity reasons, in this guide we will only focus on one principle per example.
The principle of proximity
This principle states that we perceive objects that are close to another as part of a group.
For example, when we see a group of dots that are close to another and another group of dots that are farther away, we tend to see the dots that are close together as a group.
To form these group associations, however, the objects must share similar properties like shape, size, color, texture, etc
Example 1
Here we perceive the dots as one Group.
Example 2
Here we perceive the dots as two groups.
Application in UI/UX and graphic design
The Gestalt principle of proximity is very commonly used in UX design and can be found almost everywhere.
In the following example, the labels are always placed close to the text field which makes the user perceive them as an associated element.
In these two logos, you can identify the individual symbols, as in the Unilever logo, as well as the individual letters in the IBM due to the proximity of the individual elements to each other as independent groups.
The gestalt principle of similarity
The principle of similarity in Gestalt psychology describes that objects that have similar features are perceived as part of the same group – even if the individual elements are separate from each other.
This refers to the physical properties and visual characteristics of an object, such as its color, texture, and shape.
Often, we also assign the same function to the grouped objects.
Example
In this example, we perceive the six black circles on the left as one group and the three green circles on the right as another group.
Often, each group of circles is also attributed a different function within a system.
Anwendung im UI/UX Design
In dem unten dargestellten Anmeldeformular haben die Felder und der Button dieselbe Größe.
Aufgrund der unterschiedlichen Farbe des Buttons erkennen wir jedoch, dass die Felder eine andere Funktion haben.
Auch im Beschreibungstext darunter wissen wir, dass die blauen Texte Links sind während die schwarzen Texte rein informativ sind.
Das Gestaltprinzip der Fortsetzung
Das Prinzip der Fortsetzung besagt, dass unser Auge Linien, Kurven oder eine Abfolge von Objekten verfolgt, um eine Beziehung zwischen den Elementen zu bestimmen und diese zu Gruppieren.
Stell dir vor, du siehst eine Linie oder einen Pfad, der irgendwo hinter einem Objekt verschwindet und auf der anderen Seite wieder auftaucht.
Anstatt, dass wir annehmen, dass die Linie oder der Pfad aufhört, wissen wir, dass sie hinter dem Objekt weitergeht.
Es besagt auch, dass wenn wir eine Reihe von Formen oder Linien sehen, die in einer bestimmten Richtung gehen, wir denken, dass sie zusammengehören.
Zum Beispiel, wenn wir eine Reihe von Punkten sehen, die eine Linie oder eine Kurve bilden, denken wir automatisch, dass diese zusammengehören, auch wenn sie nicht wirklich verbunden sind.
Example 1
Wir verstehen die Reihe der Punkte als eine fortlaufende Reihe trotz überlagertem grünen Objekt.
Example 2
Wir nehmen die Punkte, welche eine gemeinsame Richtung verfolgen jeweils als Gruppe wahr.
Anwendung im UI/UX Design
Beim Navigieren auf einer Webseite oder in einer App kannst du leicht den Unterschied zwischen der Haupt- und der Nebennavigation erkennen. Das liegt daran, dass wir die linke Hauptnavigation als eine senkrechte Linie wahrnehmen und die rechte Nebennavigation als eine andere senkrechte Linie sehen.
Das Gestaltprinzip der Geschlossenheit
Das Prinzip der Geschlossenheit besagt, dass wir, wenn wir eine komplexe Anordnung von visuellen Elementen betrachten, dazu neigen, ein einzelnes, erkennbares Muster zu suchen.
Dies bedeutet, dass wir automatisch unvollständige Teile eines Objektes auf Grundlage unserer Erinnerung füllen.
Im folgenden Beispiel sehen wir nicht eine Vielzahl von Punkten und Formen sondern ein sich bewegenden Hund, weil wir basierend auf der mentalen Representation eines Hundes die einzelnen Formen zusammenfügen.
Anwendung im UI/UX Design
Das Prinzip der Geschlossenheit wird vorallem im Grafikdesign für z.B. Logos oder im UI (user interface) Design benutzt.
Example 1
Wir nehmen die Ecken des unvollständigen Buttons bereits als Teil der Umrandung wahr, da wir die standardgemäße Form eines Buttons erinnern.
Example 2
In diesem Beispiel des Logos von Roger Federer, nehmen wir anstelle der einzelnen Elemente, die simpelsten Formen, die eines «R» und eines «F» wahr.
BEISPIEL 3
Progressbars in Form eins Kreises sind ein weiteres gutes Beispiel für das Prinzip der Geschlossenheit. Der Nutzer vervollständigt automatisch die Figure, weiss jedoch durch die Interaktivität, dass das Ziel noch nicht erreicht ist.
Das Gestaltprinzip der Einfachheit
Dieses Prinzip besagt, dass wir dazu neigen, visuelle Informationen auf die einfachste Weise zu interpretieren und dass einfache Strukturen im Vergleich zu komplexeren Strukturen vorzugsweise wahrgenommen werden und einprägsamer sind.
Zum Beispiel, wenn wir eine komplexe Form sehen, neigen wir dazu, sie als eine Kombination von einfacheren Formen zu sehen.
Es wird übrigens oft auch als Prinzip der Prägnanz, der guten Gestalt oder Figur-Grund-Trennung bezeichnet (Quelle).
Example 1
In diesem Logobeispiel nehmen wir nicht die einzelnen Formen oder Schattierungen wahr, sondern fügen alle Informationen zu einem Gesamtbild der einfachsten zu verstehenden Form zusammen.
Example 2
Nach dem Figur-Grund Gestaltprinzip vereinfachen wir komplexe Informationen in dem wir sie in Vordergrund und Hintergrund trennen. Hier sehen wir entweder den Hintergrund (schwarz) oder den Vordergrund (weiss).
Anwendung im UI/UX Design
Ein Takeaway von dem Gestaltprinzip der Einfachheit ist es daher, dass man bereits im Design versucht visuelle Elemente so vereinfacht wie möglich darzustellen, um Konzepte möglichst einprägsam zu vermitteln.
Dies hat besonders Auswirkung auf Logos, Icons und Illustrationen.
Zum Beispiel kann man anstatt des komplexen Quadrats im folgenden Beispiel direkt eine vereinfachte Form mit der minimalen Anzahl an Flächen, die man für das Verständnis benötigt, verwenden.
Ein weiterer use-case wäre das Benutzen eines Schattens um ein Element herum oder das Überlagern eines Overlays bei einem Popup über den Hauptcontent, um das Popup in den Vordergrund zu setzen.
In diesem Beispiel sehen wir, dass sich einerseits das Popup von der Menüleiste durch den Schatten absetzt und andererseits, dass das Menu und das Popup im Vordergrund zur Herosection sind.
Das Gestaltprinzip des gemeinsamen Schicksals
Dieses Prinzip besagt, dass wir dazu neigen, Objekte, die sich in die gleiche Richtung bewegen, als zusammengehörig zu betrachten.
Zum Beispiel, wenn wir eine Gruppe von Vögeln sehen, die in die gleiche Richtung fliegen, neigen wir dazu, sie als eine Gruppe zu sehen.
In dem hier abgebildeten Beispiel sehen wir z.B. die vier rechten Blöcke eher als eine Gruppe und den einzelnen linken Block als eine andere Gruppe, da diese unterschiedliche Ausrichtungen haben.
Anwendung im UI/UX Design
Da das Prinzip des gemeinsamen Schicksals vorallem für sich bewegende Objekte anzuwenden ist, spielt es eine besondere Rolle im Motion Design.
Es hilft dabei zusammengehörige Objekte durch Bewegung/Animation in Gruppen zu kategorisieren und hilft uns dabei die Beziehung zwischen Elementen besser zu verstehen.
Die wahrgenommene Zugehörigkeit von Objekten ist dann besonders stark, wenn die Elemente eine identische Geschwindigkeiten haben, sich zur gleichen Zeit und in die gleiche Richtung bewegen.
Im folgenden Beispiel einer Travelapp sehen wir bei dem Abschnitt «past trips», dass die Scrollbewegung in die gleiche Richtung geht, was die Gruppenzugehörigkeit der einzelnen Cards definiert und die Abgrenzung zu den oberen Elementen verstärkt.
Fazit
Die Gestaltprinzipien spielen eine entscheidende Rolle sowohl in der visuellen Wahrnehmung und somit auch im UI/UX-Design.
Sie erklären, wie wir Muster und Strukturen in alltäglichen visuellen Informationen erkennen, interpretieren und durch Gruppierungen verarbeiten.
Im Bereich des UI/UX-Designs sind die Gestaltprinzipien unerlässlich, um intuitive und benutzerfreundliche Interfaces zu gestalten.
Sie helfen Designern dabei, Elemente so zu organisieren, dass Benutzer leicht erkennen können, welche Elemente zusammengehören und welche Funktionen sie haben.