Takeaways
- Die Gestaltprinzipien sind eine Reihe von Prinzipien, die beschreiben, wie Menschen die Wahrnehmung ihrer Umwelt automatisch strukturieren
- Menschen nehmen Objekte in der Ganzheit und nicht als einzelne Teile wahr.
- Es gibt insgesamt 6 Haupt-Gestaltprinzipien: Nähe, Ähnlichkeit, Fortsetzung, Geschlossenheit, Einfachheit, gemeinsames Schicksal
Was sind die Gestaltprinzipien?
In den 1920er Jahren entwickelte eine Gruppe deutscher Psycholog*innen unter Leitung von Max Wertheimer eine Reihe von Theorien darüber, wie Menschen die Welt um sich herum wahrnehmen.
Hierbei geht es vorallem um die visuelle Wahrnehmung.
Diese Prinzipien sind heute als die Gestaltprinzipien bekannt.
Die Hauptannahme der Gestaltpsychologie ist, dass der menschliche Verstand Objekte zuerst in ihrer Gesamtheit betrachtet, bevor die einzelnen Objektteile wahrgenommen werden.
Diese Annahme wird von den Gestaltpsycholog*innen in der Aussage «The whole is more than the sum of its parts» oder auf deutsch «Das Ganze ist mehr als die Summer der einzelnen Teile» zusammengefasst.
«The whole is more than the sum
of its parts«
Hier ein Beispiel dazu:
Wenn man ein Fahrrad betrachten, sieht man nicht nur Räder, Pedale, einen Sitz, einen Lenker usw., sondern nimmt das Fahrrad in der Gesamtheit als ein vollständiges Objekt mit einem bestimmten Zweck wahr.
Selbst wenn ein Teil des Fahrrads fehlt oder verdeckt ist, erkennen wir es in der Regel immer noch als Fahrrad, weil wir das Objekt als Ganzes interpretieren und nicht als eine Ansammlung von Einzelteilen.
Im folgenden werden die 6 Hauptprinzipien Nähe, Ähnlichkeit, Fortsetzung, Geschlossenheit, Einfachheit, gemeinsames Schicksal erklärt und deren Anwendung im UI/UX Design genauer beleuchtet.
Bevor wir starten, sollte noch angemerkt werden, dass oftmals mehrere Prinzipien innerhalb eines Designs Anwendung finden, jedoch in diesem Guide immer nur ein Prinzip anhand pro Beispiel erklärt werden wird.
Das Gestaltprinzip der Nähe
Dieses Prinzip besagt, dass wir Objekte, die nahe beieinander liegen, als Teil einer Gruppe wahrnehmen.
Zum Beispiel, wenn wir eine Gruppe von Punkten sehen, die nahe beieinander liegen, und eine andere Gruppe von Punkten, die weiter entfernt sind, neigen wir dazu, die nahe beieinander liegenden Punkte als eine Gruppe zu sehen.
Um diese Gruppenzuordnung zu bilden, müssen die Objekte allerdings ähnliche Eigenschaften wie Form, Größe, Farbe, Textur usw. teilen.
BEISPIEL 1
Hier werden die Kreise als eine Gruppe wahrgenommen.
BEISPIEL 2
Hier werden die Kreise als zwei Gruppen wahrgenommen.
Anwendung im UI/UX und Graphic-Design
Das Gestaltprinzip der Nähe wird im UX-Design sehr häufig angewendet und ist nahezu überall zu finden.
Im folgenden Beispiel werden die Beschriftungen stets in der Nähe des Textfeldes platziert, sodass der Benutzer sie als ein zusammenhängendes Element wahrnehmen kann.
Bei diesen beiden Logos kann man die einzelnen Symbole, wie bei dem Unilever Logo, sowie die einzelnen Buchstaben bei dem IBM auf Grund der Nähe der einzelnen Elemente zu einander als eigenständige Gruppen identifizieren.
Das Gestaltprinzip der Ähnlichkeit
Das Ähnlichkeitsprinzip in der Gestaltpsychologie beschreibt, dass Objekte, die ähnliche Merkmale aufweisen, als Teil derselben Gruppe wahrgenommen werden – selbst, wenn die einzelnen Elemente getrennt von einander sind.
Dies bezieht sich auf die physischen Eigenschaften und visuellen Merkmale eines Objekts, wie beispielsweise dessen Farbe, Textur und Form.
Oftmals schreiben wir den gruppierten Objekten ebenfalls die selbe Funktion zu.
BEISPIEL
In diesem Beispiel nehmen wir die linken 6 schwarzen Kreise als eine Gruppe und die rechten 3 grünen Kreise als eine andere Gruppe wahr.
Oftmals wird der jeweiligen Gruppe an Kreisen auch eine unterschiedliche Funktion innerhalb eines Systems zugesprochen.
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.
BEISPIEL 1
Wir verstehen die Reihe der Punkte als eine fortlaufende Reihe trotz überlagertem grünen Objekt.
BEISPIEL 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.
BEISPIEL 1
Wir nehmen die Ecken des unvollständigen Buttons bereits als Teil der Umrandung wahr, da wir die standardgemäße Form eines Buttons erinnern.
BEISPIEL 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).
BEISPIEL 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.
BEISPIEL 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.