Über den Autor

Jon war viele Jahre visueller Designer, bevor er den Sprung zum Interaktionsdesign wagte. Er hat einen Master-Abschluss in Mensch-Computer-Interaktion von DePaul …Mehr über ihn↬

Der Wahrnehmungsprozess ermöglicht es uns, die Welt durch unsere Sinne für Sehen, Riechen, Hören, Schmecken und Berühren wahrzunehmen. Insbesondere unser visuelles System verarbeitet große Mengen an Informationen in seiner Umgebung. Anstatt Elemente getrennt wahrzunehmen, organisiert unser Gehirn Muster, Objekte und Formen zu ganzen Formen, die wir verstehen können.

Die Gestaltgruppierungsprinzipien der visuellen Wahrnehmung beschreiben diese Organisation als eine Reihe von Prinzipien, die erklären, wie wir diese große Menge visueller Reize wahrnehmen und organisieren. Die Gestaltprinzipien – Ähnlichkeit, Nähe, Schließung, Abbildung, Kontinuität und gemeinsames Schicksal – sind ein beliebtes Werkzeug, mit dem Designer Informationen visuell organisieren. Als visueller Designer und jetzt Interaktionsdesigner wende ich diese Prinzipien regelmäßig an, um Beziehungen und Unterschiede zwischen Elementen in meinen Designs zu schaffen. Wenn Sie verstehen, wie diese Prinzipien funktionieren und wie Sie sie in Ihren Entwürfen verwenden, erhalten Sie eine stärkere und ansprechendere Arbeit.

Sind Sie bereit, Ihre Designs zu verbessern? Beginnen wir mit der Ähnlichkeit.

Ähnlichkeit

Das Gestaltprinzip der Ähnlichkeit besagt, dass Elemente, die ähnlich sind, als verwandter wahrgenommen werden als Elemente, die unähnlich sind. Ähnlichkeit hilft uns, Objekte anhand ihrer Beziehung zu anderen Objekten innerhalb einer Gruppe zu organisieren, und kann durch die Attribute Farbe, Größe, Form und Ausrichtung beeinflusst werden.

Verwenden von Farbe zum Zuweisen von Beziehungen

Ähnlichkeit wird besonders durch Farbe beeinflusst. Beachten Sie im folgenden Beispiel, wie sich die farbigen Formen stark auf die Zuweisung einer Gruppierung oder Beziehung auswirken, selbst wenn verschiedene Formen enthalten sind.

Verwenden der Größe zum Zuweisen von Beziehungen

Größe ist ein weiteres nützliches Werkzeug, mit dem wir Ähnlichkeiten erstellen können. Im folgenden Beispiel heben sich die größeren Formen aufgrund der Ähnlichkeit in der Größe ab und bilden eine Gruppe, obwohl alle Formen gleich sind.

Verwenden von Shape zum Zuweisen von Beziehungen

Shape ist nützlich bei der Gruppierung nach Ähnlichkeit, hat jedoch den schwächsten Gruppierungseffekt im Vergleich zu Farbe und Größe. In dem hier gezeigten Beispiel führt die Form dazu, dass wir Elemente als Spalten von Kreisen und Quadraten interpretieren, im Gegensatz zu Reihen alternierender Kreise und Quadrate.

Verwenden der Ausrichtung zum Zuweisen von Beziehungen

Die Ausrichtung kann auch zum Gruppieren nach Ähnlichkeit verwendet werden. Durch Drehen einiger Quadrate in dieser Gruppe um 45 Grad wird eine separate Gruppierung erstellt, die als verwandt wahrgenommen wird. Sie scheinen sich im Vergleich zu den Formen um sie herum fast in eine ähnliche Richtung zu bewegen. Dies berührt tatsächlich das Gestaltprinzip des gemeinsamen Schicksals, ein Prinzip, auf das wir in einem zukünftigen Artikel eingehen werden. Aber fühlen Sie sich frei, vorwärts zu springen und es zu googeln (nachdem Sie diesen Artikel natürlich gelesen haben!). Es ist ein faszinierendes Prinzip, das häufig um Sie herum passiert.

Mehr zur Farbe

Wie bereits erwähnt, wird Ähnlichkeit besonders durch Farbe beeinflusst und kann andere Attribute überschreiben. Zum Beispiel können wir das Beispiel der Ähnlichkeit in der Form überschreiben, indem wir Farbe hinzufügen. Jetzt nehmen wir abwechselnd Reihen von roten und weißen Formen wahr, im Gegensatz zu Spalten von Kreisen und Quadraten. Probieren Sie es aus. Versuchen Sie, die Spalten von Kreisen und Quadraten zu sehen. Möglich, aber jetzt ziemlich hart, nicht wahr?

Zusätzlich kann Farbe die Größe überschreiben. Wenn wir dem Beispiel der Ähnlichkeit in der Größe Farbe hinzufügen, erstellen wir zwei voneinander getrennte Gruppierungen. Jetzt nehmen wir die großen roten Quadrate als eine Gruppe und das einzelne große weiße Quadrat als separate, nicht verwandte (und einsame) Gruppe wahr.

Diese beiden Beispiele veranschaulichen, wie stark Farbe beim Zuweisen von Beziehungen zwischen Elementen sein kann. Versuchen Sie, Farbe in Ihrer Arbeit zu verwenden, um Elemente zu unterscheiden, und Sie werden erstaunt sein, wie viel stärker Ihre Gruppierungen sind.

Ähnlichkeit in der Praxis

Wenn wir entwerfen, können wir Ähnlichkeit verwenden, um Organisation und Assoziationen zu vermitteln, indem wir zeigen, welche Elemente miteinander verwandt sind oder nicht. Zum Beispiel sind die beiden unten auf der Website von Salon gezeigten Abschnitte nach ihren relativen Größen gruppiert. Wir nehmen deutlich zwei getrennte Gruppen wahr, mit Top-Storys auf der linken und den meistgelesenen auf der rechten Seite. Obwohl beide Abschnitte die gleiche Funktion bieten – Artikel zum Lesen anzeigen -, weist die Gruppierung nach Größe der linken Gruppierung mehr Hervorhebung zu, wodurch Sie die Aufmerksamkeit auf ihre Top-Storys lenken können.

Im Gegensatz dazu weist das Fehlen von Größenunterschieden in diesem Beispiel von Amazon keinem Abschnitt eine besondere Bedeutung zu. Trotzdem wird Ähnlichkeit immer noch durch die Verwendung von Wiederholungen ähnlicher Größe und Form erreicht, wodurch wir Reihen von Elementen wahrnehmen.

Verwendung ähnlicher Farben

Wir wissen, dass Farbe ein starker Indikator für Ähnlichkeit ist und dabei hilft, Inhalte zu organisieren und verständlich zu machen. In diesem Beispiel von Cars.com , ähnliche Farbgebrauch hilft uns zu unterscheiden, was eine Überschrift, eine Körperkopie und einen Verbindungstext ist. (Vollständige Offenlegung: Ich arbeite bei Cars.com als Interaktionsdesigner.) Durch die Verwendung unterschiedlicher Farben für jedes dieser Elemente erwarten wir, dass sie ähnlich funktionieren und sich im Fall des blauen Linktextes ähnlich verhalten.

Nähe

Das Gestaltprinzip der Nähe besagt, dass Elemente, die näher beieinander liegen, als verwandter wahrgenommen werden als Elemente, die weiter voneinander entfernt sind. Wie bei der Ähnlichkeit hilft uns die Nähe, Objekte anhand ihrer Beziehung zu anderen Objekten zu organisieren. Nähe ist das stärkste Prinzip, um die Verwandtschaft von Objekten anzuzeigen und uns zu helfen, Informationen schneller und effizienter zu verstehen und zu organisieren.

Die folgenden Beispiele für Kreise zeigen, wie Nähe genutzt werden kann, um Objekte als verwandt wahrzunehmen. Wie wir hier sehen, sind die Kreise ausgebreitet, zeigen keine Beziehung, wobei jeder als separates Objekt wahrgenommen wird.

Wenn die Kreise jedoch in räumliche Nähe zueinander gezogen werden, erhalten sie eine Beziehung und werden nicht mehr als separate Objekte wahrgenommen.

White Space

White space ist ein unschätzbares Werkzeug, um Nähe zu schaffen. Wenn wir dieselbe Gruppe von Kreisen verwenden und Leerzeichen hinzufügen, können wir die Dinge anders wahrnehmen. Auf der linken Seite führt die Nähe der Formen dazu, dass wir die beiden Gruppen als Spalten wahrnehmen, jede für sich. Auf der rechten Seite führt die Nähe der Formen dazu, dass wir die beiden Gruppen als Reihen wahrnehmen, wiederum jede für sich. Verwenden Sie Leerzeichen in Ihren Designs, um Gruppierungen zu stärken und sie von anderen Elementen zu unterscheiden.

Die Kraft der Nähe

Die Nähe ist stark genug, um andere Variationselemente zu überwältigen. Beachten Sie, dass die Nähe auch dann noch gewinnt, wenn andere Attribute wie Farbe und Form hinzugefügt werden. Wie auch immer, Farbe und Form überwältigen die Nähe hier nicht und jede Gruppierung wird immer noch als separates Element wahrgenommen.

Nähe in der Praxis

Wenn wir Informationen in unseren Entwürfen organisieren, können wir die Nähe nutzen, um Beziehungen zwischen Elementen herzustellen, um das Verständnis der dargestellten Informationen zu erleichtern. Indem wir beispielsweise diese Bilder aus dem Apple Store in unmittelbarer Nähe gruppieren, weisen wir der gesamten Gruppe eine Beziehung zu. Wir nehmen sie als verwandt wahr und erwarten, dass der Inhalt ähnlich ist.

Wenn wir jedoch die mittlere Spalte entfernen, nehmen wir plötzlich zwei separate Gruppen wahr und erwarten unterschiedliche Inhalte zwischen ihnen.

Nähe und Ähnlichkeit kombinieren

Die Gruppierung nach Nähe kann auch mit Ähnlichkeit kombiniert werden, um stärkere Beziehungen herzustellen. In diesem Beispiel von Amazon sehen wir, dass die Gruppierung nach Nähe und Ähnlichkeit in der Größe dazu führt, dass wir zwei separate Gruppierungen wahrnehmen und der linken Gruppe mehr Bedeutung zuweisen.

Nähe und Hierarchie

Nähe eignet sich hervorragend zum Organisieren hierarchischer Elemente. In diesem Beispiel von Crate & Barrel werden Optionen unter gemeinsamen Überschriften gruppiert, wodurch Beziehungen erstellt werden, die das Scannen und Finden von Informationen erheblich erleichtern.

Wenn die Überschriften entfernt und die Optionen ohne Nähe gruppiert werden, verlieren wir die erstellten Beziehungen und es wird viel schwieriger, die gewünschten Informationen schnell zu scannen und zu finden. Probieren Sie es selbst aus. Gehen Sie voran und sehen Sie, wie schnell Sie Kaffeetassen in der Gruppierung mit Überschriften im Vergleich zur Gruppierung ohne Überschriften finden können. Ein bisschen schwieriger, schnell dazu zu springen, nicht wahr?

Fazit

Wenn Sie verstehen, wie Sie Ähnlichkeit und Nähe verwenden, um die Beziehungen zwischen Elementen in Ihrer Arbeit zu beeinflussen, können Sie Designs erstellen, die eine einfachere Organisation ermöglichen und die Benutzerfreundlichkeit Ihrer Arbeit verbessern. Verwenden Sie Ähnlichkeit und Nähe, um sowohl Beziehungen als auch Unterschiede zwischen Elementen in Ihren Designs zu erstellen. Experimentieren Sie mit der Verwendung von Leerraum, Farbe, Größe, Form und Ausrichtung von Elementen und mischen Sie beide Prinzipien miteinander, um sehr starke und ansprechende Beziehungen herzustellen.

Im nächsten Teil dieser Serie werden wir uns mit Schließung und Abbildung befassen und untersuchen, wie diese beiden Gestaltprinzipien positiven und negativen Raum nutzen, um einfache, aber kraftvolle Beziehungen herzustellen.

Ressourcen und gute Lektüre

• Gestaltprinzipien auf Scholarpedia.
• „Gesetze der Organisation in Wahrnehmungsformen“: Text von Max Wertheimers bahnbrechender Arbeit von 1923.Universelle Prinzipien des Designs überarbeitet und aktualisiert: 125 Möglichkeiten, die Benutzerfreundlichkeit zu verbessern, die Wahrnehmung zu beeinflussen, die Attraktivität zu steigern, bessere Designentscheidungen zu treffen und durch Design zu lehren, von William Lidwell, Kritina Holden und Jill Butler. Rockport Pub, 2010.
• Informationsvisualisierung: Wahrnehmung für Design, von Colin Ware. Elsevier, 2012.

• Konstruktionsprinzipien: Visuelle Wahrnehmung und die Prinzipien der Gestalt
• Elemente durch Kontrast und Ähnlichkeit verbinden und trennen
• Kompositorisches Gleichgewicht, Symmetrie und Asymmetrie
• So verbessern Sie Ihren E-Mail-Workflow mit modularem Design
• Verbesserung der Benutzererfahrung mit Echtzeitfunktionen

(ml, da, og, jb, il)