{"id":3483,"date":"2023-06-20T11:18:21","date_gmt":"2023-06-20T11:18:21","guid":{"rendered":"https:\/\/davidhillmer.com\/?p=3483"},"modified":"2024-02-12T17:05:34","modified_gmt":"2024-02-12T17:05:34","slug":"gestaltprinzipien-psychologie-im-ux-design","status":"publish","type":"post","link":"https:\/\/davidhillmer.com\/en\/archive\/3483","title":{"rendered":"Die 6 Gestaltprinzipien – Kognitionspsychologie im UI\/UX Design"},"content":{"rendered":"

Takeaways<\/h2>\n\n\n\n
  1. The Gestalt principles are a series of principles that describe how people automatically structure their perception of their environment<\/li>
    \n\n
  2. People perceive objects as a whole and not as individual parts.<\/li>
    \n\n
  3. There are 6 primary Gestalt principles: Proximity, Similarity, Continuation, Closure, Simplicity, Common Fate<\/b><\/li>
    \n\n\n\n
    <\/div>\n\n\n\n

    What are the gestalt principles?<\/h2>\n\n\n\n

    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'.
    <\/p>\n\n\n\n

    <\/div>\n\n\n\n

    «The whole is more than the sum <\/strong><\/span><\/p>

    of its parts<\/strong>«<\/span><\/p><\/blockquote>\n\n\n\n

    <\/div>\n\n\n\n

    When you look at a bicycle, you don't just see wheels, pedals, a seat, handlebars, etc., but perceive the bicycle as a whole<\/em><\/p>\n\n\n\n

    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.<\/strong> 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.<\/p>\n\n\n\n

    In the following, we will explain the 6 primary Gestalt principles Proximity, Similarity, Continuation, Closure, Simplicity, Common Fate<\/em> defined and their application in UI\/UX Design explained.<\/p>\n\n\n\n

    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.<\/p>\n\n\n\n

    <\/div>\n\n\n\n

    The principle of proximity<\/h2>\n\n\n\n

    This principle states that we perceive objects that are close to another as part of a group.<\/p>\n\n\n\n

    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.<\/p>\n\n\n\n

    To form these group associations, however, the objects must share similar properties like shape, size, color, texture, etc<\/p>\n\n\n\n

    <\/div>\n\n\n\n
    \n
    \n

    Example 1<\/p>\n\n\n\n

    Here we perceive the dots as one<\/strong> Group.<\/p>\n\n\n\n

    \"\"<\/figure>\n<\/div>\n\n\n\n
    \n

    Example 2<\/p>\n\n\n\n

    Here we perceive the dots as two <\/strong>groups.<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    <\/p>\n<\/div>\n<\/div>\n\n\n\n

    <\/p>\n\n\n\n

    Application in UI\/UX and graphic design<\/em><\/p>\n\n\n\n

    The Gestalt principle of proximity is very commonly used in UX design and can be found almost everywhere. <\/p>\n\n\n\n

    In the following example, the labels are always placed close to the text field which makes the user perceive them as an associated element.<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    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.<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n
    <\/div>\n\n\n\n

    The gestalt principle of similarity<\/h2>\n\n\n\n

    The principle of similarity in Gestalt psychology describes that objects that have similar features are perceived as part of the same group \u2013 even if the individual elements are separate from each other.<\/p>\n\n\n\n

    This refers to the physical properties and visual characteristics of an object, such as its color, texture, and shape. <\/p>\n\n\n\n

    Often, we also assign the same function to the grouped objects.<\/p>\n\n\n\n

    <\/div>\n\n\n\n

    Example<\/p>\n\n\n\n

    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. <\/p>\n\n\n\n

    Often, each group of circles is also attributed a different function within a system.<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n
    <\/div>\n\n\n\n

    Anwendung im UI\/UX Design<\/em><\/p>\n\n\n\n

    In dem unten dargestellten Anmeldeformular haben die Felder und der Button dieselbe Gr\u00f6\u00dfe. <\/p>\n\n\n\n

    Aufgrund der unterschiedlichen Farbe des Buttons erkennen wir jedoch, dass die Felder eine andere Funktion haben.<\/p>\n\n\n\n

    Auch im Beschreibungstext darunter wissen wir, dass die blauen Texte Links sind w\u00e4hrend die schwarzen Texte rein informativ sind.<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n
    <\/div>\n\n\n\n

    Das Gestaltprinzip der Fortsetzung<\/h2>\n\n\n\n

    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.<\/p>\n\n\n\n

    Stell dir vor, du siehst eine Linie oder einen Pfad, der irgendwo hinter einem Objekt verschwindet und auf der anderen Seite wieder auftaucht. <\/p>\n\n\n\n

    Anstatt, dass wir annehmen, dass die Linie oder der Pfad aufh\u00f6rt, wissen wir, dass sie hinter dem Objekt weitergeht.<\/p>\n\n\n\n

    Es besagt auch, dass wenn wir eine Reihe von Formen oder Linien sehen, die in einer bestimmten Richtung gehen, wir denken, dass sie zusammengeh\u00f6ren.<\/p>\n\n\n\n

    Zum Beispiel, wenn wir eine Reihe von Punkten sehen, die eine Linie oder eine Kurve bilden, denken wir automatisch, dass diese zusammengeh\u00f6ren, auch wenn sie nicht wirklich verbunden sind.<\/p>\n\n\n\n

    \n
    \n

    Example 1<\/p>\n\n\n\n

    Wir verstehen die Reihe der Punkte als eine fortlaufende Reihe trotz \u00fcberlagertem gr\u00fcnen Objekt.<\/p>\n\n\n\n

    \"\"<\/figure>\n<\/div>\n\n\n\n
    \n

    Example 2<\/p>\n\n\n\n

    Wir nehmen die Punkte, welche eine gemeinsame Richtung verfolgen jeweils als Gruppe wahr.<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    <\/p>\n<\/div>\n<\/div>\n\n\n\n

    <\/div>\n\n\n\n

    Anwendung im UI\/UX Design<\/em><\/p>\n\n\n\n

    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.<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n
    <\/div>\n\n\n\n

    Das Gestaltprinzip der Geschlossenheit<\/h2>\n\n\n\n

    Das Prinzip der Geschlossenheit besagt, dass wir, wenn wir eine komplexe Anordnung von visuellen Elementen betrachten, dazu neigen, ein einzelnes, erkennbares Muster zu suchen. <\/p>\n\n\n\n

    Dies bedeutet, dass wir automatisch unvollst\u00e4ndige Teile eines Objektes auf Grundlage unserer Erinnerung f\u00fcllen. <\/p>\n\n\n\n

    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\u00fcgen. <\/p>\n\n\n\n

    \"\"
    Quelle: Gizmodo<\/a><\/figcaption><\/figure>\n\n\n\n

    Anwendung im UI\/UX Design<\/em><\/p>\n\n\n\n

    Das Prinzip der Geschlossenheit wird vorallem im Grafikdesign f\u00fcr z.B. Logos oder im UI (user interface) Design benutzt. <\/p>\n\n\n\n

    \n
    \n

    Example 1<\/p>\n\n\n\n

    Wir nehmen die Ecken des unvollst\u00e4ndigen Buttons bereits als Teil der Umrandung wahr, da wir die standardgem\u00e4\u00dfe Form eines Buttons erinnern.<\/p>\n\n\n\n

    \"\"<\/figure>\n<\/div>\n\n\n\n
    \n

    Example 2<\/p>\n\n\n\n

    In diesem Beispiel des Logos von Roger Federer, nehmen wir anstelle der einzelnen Elemente, die simpelsten Formen, die eines «R» und eines «F» wahr.<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    <\/p>\n<\/div>\n<\/div>\n\n\n\n

    \n
    \n

    BEISPIEL 3<\/p>\n\n\n\n

    Progressbars in Form eins Kreises sind ein weiteres gutes Beispiel f\u00fcr das Prinzip der Geschlossenheit. Der Nutzer vervollst\u00e4ndigt automatisch die Figure, weiss jedoch durch die Interaktivit\u00e4t, dass das Ziel noch nicht erreicht ist. <\/p>\n\n\n\n

    \"\"<\/figure>\n<\/div>\n\n\n\n
    \n

    <\/p>\n<\/div>\n<\/div>\n\n\n\n

    Das Gestaltprinzip der Einfachheit<\/h2>\n\n\n\n

    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\u00e4gsamer sind.<\/p>\n\n\n\n

    Zum Beispiel, wenn wir eine komplexe Form sehen, neigen wir dazu, sie als eine Kombination von einfacheren Formen zu sehen. <\/p>\n\n\n\n

    Es wird \u00fcbrigens oft auch als Prinzip der Pr\u00e4gnanz, der guten Gestalt <\/em>oder Figur-Grund-Trennung <\/em>bezeichnet (Q<\/a>uelle<\/a>).<\/em><\/p>\n\n\n\n

    \n
    \n

    Example 1<\/p>\n\n\n\n

    In diesem Logobeispiel nehmen wir nicht die einzelnen Formen oder Schattierungen wahr, sondern f\u00fcgen alle Informationen zu einem Gesamtbild der einfachsten zu verstehenden Form zusammen. <\/p>\n\n\n\n

    \"\"<\/figure>\n<\/div>\n\n\n\n
    \n

    Example 2<\/p>\n\n\n\n

    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).<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    <\/p>\n<\/div>\n<\/div>\n\n\n\n

    Anwendung im UI\/UX Design<\/em><\/p>\n\n\n\n

    Ein Takeaway von dem Gestaltprinzip der Einfachheit ist es daher, dass man bereits im Design versucht visuelle Elemente so vereinfacht wie m\u00f6glich darzustellen, um Konzepte m\u00f6glichst einpr\u00e4gsam zu vermitteln. <\/p>\n\n\n\n

    Dies hat besonders Auswirkung auf Logos, Icons und Illustrationen. <\/p>\n\n\n\n

    Zum Beispiel kann man anstatt des komplexen Quadrats im folgenden Beispiel direkt eine vereinfachte Form mit der minimalen Anzahl an Fl\u00e4chen, die man f\u00fcr das Verst\u00e4ndnis ben\u00f6tigt, verwenden.<\/p>\n\n\n\n

    \"\"
    Quelle<\/a> <\/figcaption><\/figure>\n\n\n\n

    Ein weiterer use-case w\u00e4re das Benutzen eines Schattens um ein Element herum oder das \u00dcberlagern eines Overlays bei einem Popup \u00fcber den Hauptcontent, um das Popup in den Vordergrund zu setzen.<\/p>\n\n\n\n

    In diesem Beispiel sehen wir, dass sich einerseits das Popup von der Men\u00fcleiste durch den Schatten absetzt und andererseits, dass das Menu und das Popup im Vordergrund zur Herosection sind.<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n
    <\/div>\n\n\n\n

    Das Gestaltprinzip des gemeinsamen Schicksals<\/h2>\n\n\n\n

    Dieses Prinzip besagt, dass wir dazu neigen, Objekte, die sich in die gleiche Richtung bewegen, als zusammengeh\u00f6rig zu betrachten. <\/p>\n\n\n\n

    Zum Beispiel, wenn wir eine Gruppe von V\u00f6geln sehen, die in die gleiche Richtung fliegen, neigen wir dazu, sie als eine Gruppe zu sehen.<\/p>\n\n\n\n

    In dem hier abgebildeten Beispiel sehen wir z.B. die vier rechten Bl\u00f6cke eher als eine Gruppe und den einzelnen linken Block als eine andere Gruppe, da diese unterschiedliche Ausrichtungen haben.<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    Anwendung im UI\/UX Design<\/em><\/p>\n\n\n\n

    Da das Prinzip des gemeinsamen Schicksals vorallem f\u00fcr sich bewegende Objekte anzuwenden ist, spielt es eine besondere Rolle im Motion Design. <\/p>\n\n\n\n

    Es hilft dabei zusammengeh\u00f6rige Objekte durch Bewegung\/Animation in Gruppen zu kategorisieren und hilft uns dabei die Beziehung zwischen Elementen besser zu verstehen.<\/p>\n\n\n\n

    Die wahrgenommene Zugeh\u00f6rigkeit von Objekten ist dann besonders stark, wenn die Elemente eine identische Geschwindigkeiten haben, sich zur gleichen Zeit und in die gleiche Richtung bewegen.<\/p>\n\n\n\n

    Im folgenden Beispiel einer Travelapp sehen wir bei dem Abschnitt «past trips», dass die Scrollbewegung in die gleiche Richtung geht, was die Gruppenzugeh\u00f6rigkeit der einzelnen Cards definiert und die Abgrenzung zu den oberen Elementen verst\u00e4rkt. <\/p>\n\n\n\n

    \"\"
    Quelle<\/a><\/figcaption><\/figure>\n\n\n\n
    <\/div>\n\n\n\n

    Fazit<\/h2>\n\n\n\n

    Die Gestaltprinzipien spielen eine entscheidende Rolle sowohl in der visuellen Wahrnehmung und somit auch im UI\/UX-Design.<\/p>\n\n\n\n

    Sie erkl\u00e4ren, wie wir Muster und Strukturen in allt\u00e4glichen visuellen Informationen erkennen, interpretieren und durch Gruppierungen verarbeiten. <\/p>\n\n\n\n

    Im Bereich des UI\/UX-Designs sind die Gestaltprinzipien unerl\u00e4sslich, um intuitive und benutzerfreundliche Interfaces zu gestalten.<\/p>\n\n\n\n

    Sie helfen Designern dabei, Elemente so zu organisieren, dass Benutzer leicht erkennen k\u00f6nnen, welche Elemente zusammengeh\u00f6ren und welche Funktionen sie haben.<\/p>\n\n\n\n

    <\/p>","protected":false},"excerpt":{"rendered":"

    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\u00e4he, \u00c4hnlichkeit, Fortsetzung, Geschlossenheit, Einfachheit, gemeinsames Schicksal Was sind die Gestaltprinzipien? In den 1920er Jahren entwickelte eine Gruppe deutscher Psycholog*innen […]<\/p>","protected":false},"author":2,"featured_media":3549,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[20,17],"tags":[],"_links":{"self":[{"href":"https:\/\/davidhillmer.com\/en\/wp-json\/wp\/v2\/posts\/3483"}],"collection":[{"href":"https:\/\/davidhillmer.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/davidhillmer.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/davidhillmer.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/davidhillmer.com\/en\/wp-json\/wp\/v2\/comments?post=3483"}],"version-history":[{"count":89,"href":"https:\/\/davidhillmer.com\/en\/wp-json\/wp\/v2\/posts\/3483\/revisions"}],"predecessor-version":[{"id":3914,"href":"https:\/\/davidhillmer.com\/en\/wp-json\/wp\/v2\/posts\/3483\/revisions\/3914"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/davidhillmer.com\/en\/wp-json\/wp\/v2\/media\/3549"}],"wp:attachment":[{"href":"https:\/\/davidhillmer.com\/en\/wp-json\/wp\/v2\/media?parent=3483"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/davidhillmer.com\/en\/wp-json\/wp\/v2\/categories?post=3483"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/davidhillmer.com\/en\/wp-json\/wp\/v2\/tags?post=3483"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}