Erforschung der Gestaltungsprinzipien des Designs

Veröffentlicht: 2022-03-11

Hören Sie sich die Audioversion dieses Artikels an

Negativraum ist seit langem ein fester Bestandteil guten Designs. Leerraum um Elemente eines Designs herum zu lassen, ist das erste, was einem normalerweise in den Sinn kommt. Aber dann gibt es Designs, die diesen weißen Raum verwenden, um auf ein Element zu schließen, das eigentlich nicht vorhanden ist (der zwischen dem E und X versteckte Pfeil im FedEx-Logo fällt sofort als Beispiel ein).

Negativraum ist eines der Schlüsselelemente und Prinzipien des Designs — Das „E“ und „x“ im FedEx-Logo bilden einen Pfeil innerhalb des negativen Raums zwischen ihnen.

Das menschliche Gehirn ist außergewöhnlich gut darin, die Lücken in einem Bild zu füllen und ein Ganzes zu schaffen, das mehr ist als die Summe seiner Teile. Deshalb sehen wir Gesichter in Dingen wie Baumblättern oder Bürgersteigrissen.

Dieses Prinzip ist eine der wichtigsten Grundideen hinter den Gestaltprinzipien der visuellen Wahrnehmung. Der einflussreichste frühe Vorschlag, der über die Theorie geschrieben wurde, wurde von Max Wertheimer in seinen Gestaltgesetzen der Wahrnehmungsorganisation von 1923 veröffentlicht, obwohl Wolfgang Kohlers Diskussion von Physical Gestalten von 1920 auch viele einflussreiche Ideen zu diesem Thema enthält.

Unabhängig davon, wer zuerst die Ideen vorgeschlagen hat (es gibt Essays, die bis ins Jahr 1890 zurückreichen), sind Gestaltprinzipien eine wichtige Sammlung von Ideen, die jeder Designer lernen muss, und ihre Umsetzung kann nicht nur die Ästhetik eines Designs erheblich verbessern, sondern auch seine Funktionalität und Benutzerfreundlichkeit.

Einfach ausgedrückt basiert die Gestalttheorie auf der Idee, dass das menschliche Gehirn versucht, komplexe Bilder oder Designs, die aus vielen Elementen bestehen, zu vereinfachen und zu organisieren, indem es die Teile unbewusst zu einem organisierten System anordnet, das ein Ganzes und nicht nur ein einzelnes Bild erzeugt Reihe unterschiedlicher Elemente. Unser Gehirn ist darauf ausgelegt, Strukturen und Muster zu sehen, damit wir die Umwelt, in der wir leben, besser verstehen können.

Es gibt sechs individuelle Prinzipien, die gemeinhin mit der Gestalttheorie in Verbindung gebracht werden: Ähnlichkeit , Fortsetzung , Schließung , Nähe , Figur/Grund , und Symmetrie & Ordnung (auch Pragnanz genannt ). Es gibt auch einige zusätzliche, neuere Prinzipien, die manchmal mit Gestalt in Verbindung gebracht werden, wie zum Beispiel gemeinsames Schicksal.

Ähnlichkeit

Es liegt in der Natur des Menschen, ähnliche Dinge zu gruppieren. In Gestalt werden ähnliche Elemente unabhängig von ihrer Nähe zueinander visuell gruppiert. Sie können nach Farbe, Form oder Größe gruppiert werden. Ähnlichkeit kann verwendet werden, um Elemente miteinander zu verbinden, die in einem Design möglicherweise nicht direkt nebeneinander liegen.

Natürlich können Sie Dinge unterschiedlich gestalten, wenn Sie sie von der Masse abheben möchten. Deshalb werden Buttons für Calls-to-Action oft andersfarbig gestaltet als der Rest einer Seite – damit sie auffallen und die Aufmerksamkeit des Besuchers auf die gewünschte Aktion lenken.

Im UX-Design macht die Verwendung von Ähnlichkeit Ihren Besuchern klar, welche Artikel ähnlich sind. Beispielsweise würde das Ähnlichkeitsprinzip in einer Funktionsliste mit sich wiederholenden Designelementen (z. B. einem Symbol, das von 3-4 Textzeilen begleitet wird) das Durchsuchen erleichtern. Im Gegensatz dazu werden die Designelemente für Funktionen, die Sie hervorheben möchten, geändert, um sie hervorzuheben und ihnen mehr Bedeutung in der Wahrnehmung des Besuchers zu verleihen.

Selbst so einfache Dinge wie das Sicherstellen, dass Links in einem Design auf die gleiche Weise formatiert sind, beruhen auf dem Prinzip der Ähnlichkeit in der Art und Weise, wie Ihre Besucher die Organisation und Struktur Ihrer Website wahrnehmen.

Fortsetzung

Das Gesetz der Kontinuität besagt, dass das menschliche Auge beim Betrachten von Linien dem glattesten Pfad folgt, unabhängig davon, wie die Linien tatsächlich gezeichnet wurden.

ein Beispiel für das Gestaltprinzip der Kontinuität — Das Auge neigt dazu, der geraden Linie von einem Ende dieser Figur zum anderen und der gekrümmten Linie von oben nach unten zu folgen, selbst wenn die Linien in der Mitte ihre Farbe ändern.

Diese Fortsetzung kann ein wertvolles Hilfsmittel sein, wenn es darum geht, den Blick eines Besuchers in eine bestimmte Richtung zu lenken. Sie folgen dem einfachsten Pfad auf der Seite, stellen Sie also sicher, dass die wichtigsten Teile, die sie sehen sollten, in diesen Pfad fallen.

Da das Auge von Natur aus einer Linie folgt, wird das Platzieren von Gegenständen in einer Reihe in einer Reihe den Blick natürlich von einem Gegenstand zum nächsten lenken. Horizontale Schieberegler sind ein solches Beispiel, ebenso wie verwandte Produktlisten auf Websites wie Amazon.

Schließung

Closure ist eines der coolsten Gestaltprinzipien und eines, das ich bereits zu Beginn dieses Stücks angesprochen habe. Es ist die Idee, dass Ihr Gehirn die fehlenden Teile eines Designs oder Bildes ausfüllt, um ein Ganzes zu schaffen.

In seiner einfachsten Form erlaubt das Verschlussprinzip Ihrem Auge, einer gepunkteten Linie bis zu ihrem Ende zu folgen. Aber komplexere Anwendungen sind oft in Logos zu sehen, wie das für den World Wildlife Fund. Große Teile des Umrisses des Pandas fehlen, aber Ihr Gehirn hat kein Problem damit, die fehlenden Abschnitte auszufüllen, um das ganze Tier zu sehen.

Das Gestalt-Prinzip des Verschlusses wird schön im Panda-Logo des World Wildlife Fund veranschaulicht. Das Gehirn vervollständigt die weißen Formen, auch wenn sie nicht gut definiert sind.

Closure wird ziemlich oft im Logodesign verwendet, mit anderen Beispielen, darunter die für das USA Network, NBC, Sun Microsystems und sogar Adobe.

Ein weiteres sehr wichtiges Beispiel für die Schließung bei der Arbeit im UX- und UI-Design ist, wenn Sie ein Teilbild anzeigen, das vom Bildschirm des Benutzers ausgeblendet wird, um ihm zu zeigen, dass es mehr zu finden gibt, wenn er nach links oder rechts wischt. Ohne ein Teilbild, dh wenn nur Vollbilder angezeigt werden, interpretiert das Gehirn nicht sofort, dass möglicherweise mehr zu sehen ist, und daher wird Ihr Benutzer weniger wahrscheinlich scrollen (da der Abschluss bereits sichtbar ist).

Freiberuflicher UI-Designer in Vollzeit in den USA gesucht

Räumliche Nähe

Nähe bezieht sich darauf, wie nahe Elemente beieinander liegen. Die stärksten Nachbarschaftsbeziehungen bestehen zwischen überlappenden Objekten, aber auch das bloße Gruppieren von Objekten in einem einzigen Bereich kann einen starken Nachbarschaftseffekt haben.

Das Gegenteil gilt natürlich auch. Indem Sie Leerzeichen zwischen Elementen setzen, können Sie eine Trennung hinzufügen, selbst wenn ihre anderen Eigenschaften gleich sind.

Nehmen Sie zum Beispiel diese Gruppe von Kreisen:

das Gestaltprinzip der Nähe, illustriert mit Kreisgruppen — Das Einzige, was die Gruppe links von der Gruppe rechts unterscheidet, ist die Nähe der Linien. Und doch interpretiert Ihr Gehirn das Bild rechts als drei unterschiedliche Gruppen.

Beispiel für das Nähe-Gestalt-Prinzip in Aktion, die ux beeinträchtigt — Ein Beispiel für ein USPS-PDF-Formular, bei dem das Proximity-Gestalt-Prinzip die UX beeinträchtigt. Da die Feldbeschriftungen näher an den darunter liegenden Feldern liegen, würden die Leute fälschlicherweise glauben, dass dort die Informationen für „c“ stehen. und „d.“ Die Informationen sollen jedoch in den Feldern über den Textbeschriftungen bereitgestellt werden.

Im UX-Design wird Nähe am häufigsten verwendet, um Benutzer dazu zu bringen, bestimmte Dinge ohne die Verwendung von Dingen wie harten Grenzen zu gruppieren. Indem Sie ähnliche Dinge näher zusammenstellen, mit Abstand zwischen den einzelnen Gruppen, wird der Betrachter sofort die Organisation und Struktur erkennen, die Sie wahrnehmen möchten.

Figur/Grund

Das Figur/Grund-Prinzip ähnelt dem Verschlussprinzip, da es sich die Art und Weise zunutze macht, wie das Gehirn negativen Raum verarbeitet. Sie haben wahrscheinlich schon Beispiele für dieses Prinzip in Memes auf Social Media oder als Teil von Logos (wie dem bereits erwähnten FedEx-Logo) gesehen.

Ihr Gehirn unterscheidet zwischen den Objekten, die es für im Vordergrund eines Bildes hält (die Figur oder den Brennpunkt) und dem Hintergrund (der Bereich, auf dem die Figuren ruhen). Interessant wird es, wenn Vorder- und Hintergrund tatsächlich zwei unterschiedliche Bilder enthalten, wie hier:

ein Beispiel für die die Figur-Grund-Beziehung bildenden Elemente und Gestaltungsprinzipien — Einige Leute werden sofort den Baum und die Vögel sehen, wenn sie das Logo des Pittsburgh Zoo & PPG Aquarium sehen, während andere den Gorilla und den Löwen sehen, die sich anstarren.

großartiges Beispiel für das Figur-Grund-Gestalt-Prinzip — Ein weiteres großartiges Beispiel für das Figur/Grund-Gestalt-Prinzip.

Ein einfacheres Beispiel ist mit diesem Bild zu sehen, bei dem zwei Gesichter einen Kerzenhalter oder eine Vase zwischen sich bilden:

ein einfaches Beispiel für Figur-Grund-Prinzip, ein Gestaltgestaltungsprinzip — In dieser berühmten Illusion, die vom dänischen Psychologen Edgar Rubin entwickelt wurde, werden dem Betrachter normalerweise zwei Forminterpretationen präsentiert – zwei Gesichter oder eine Vase. Es ist ein weiteres hervorragendes Beispiel für das Figur/Grund-Prinzip.

Im Allgemeinen interpretiert Ihr Gehirn den größeren Bereich eines Bildes als Grund und den kleineren als Figur. Wie im obigen Bild gezeigt, können Sie jedoch sehen, dass hellere und dunklere Farben beeinflussen können, was als Figur und was als Boden betrachtet wird.

Das Figur/Grund-Prinzip kann sehr praktisch sein, wenn Produktdesigner einen Schwerpunkt hervorheben möchten, insbesondere wenn er aktiv ist oder verwendet wird – beispielsweise wenn ein modales Fenster auftaucht und der Rest der Website in den Hintergrund tritt oder wann eine Suchleiste wird angeklickt und der Kontrast zum Rest der Seite erhöht.

Abonnieren Sie den Design-Blog von Toptal und erhalten Sie unser eBook

Symmetrie und Ordnung

Das Gesetz der Symmetrie und Ordnung ist auch als Pragnanz bekannt, das deutsche Wort für „gute Figur“. Dieses Prinzip besagt, dass Ihr Gehirn mehrdeutige Formen so einfach wie möglich wahrnimmt. Beispielsweise wird eine einfarbige Version des olympischen Logos eher als eine Reihe überlappender Kreise denn als eine Ansammlung gebogener Linien gesehen.

Hier noch ein gutes Beispiel für das Gestaltgestaltungsprinzip „ Pragnanz “:

ein komplexes Beispiel für das Pragnanzprinzip, ein weiteres Gestaltprinzip

Ihr Gehirn interpretiert das Bild auf der linken Seite als Rechteck, Kreis und Dreieck, selbst wenn die Umrisse von jedem unvollständig sind, weil dies einfachere Formen sind als das Gesamtbild.

Gemeinsames Schicksal

Während das gemeinsame Schicksal ursprünglich nicht in der Gestalttheorie enthalten war, wurde es inzwischen hinzugefügt. Im UX-Design ist seine Nützlichkeit nicht zu übersehen. Dieses Prinzip besagt, dass Menschen Dinge gruppieren, die in die gleiche Richtung weisen oder sich in dieselbe Richtung bewegen.

In der Natur sehen wir das zum Beispiel an Vogelschwärmen oder Fischschwärmen. Sie bestehen aus einer Reihe einzelner Elemente, aber weil sie sich scheinbar als Einheit bewegen, gruppiert unser Gehirn sie und betrachtet sie als einen einzigen Reiz.

ein Vogelschwarm veranschaulicht das Prinzip des gemeinsamen Schicksals — Ein Vogelschwarm wird als eine Einheit betrachtet, wenn er in die gleiche Richtung fliegt und somit ein gemeinsames Schicksal teilt. (von Martin Adams auf Unsplash)

Dies ist in UX sehr nützlich, da animierte Effekte in modernem Design immer häufiger vorkommen. Beachten Sie, dass sich Elemente nicht wirklich bewegen müssen, um von diesem Prinzip zu profitieren, aber sie müssen den Eindruck von Bewegung vermitteln.

Gestaltprinzipien im UX-Design

Wie bei jedem psychologischen Prinzip kann das Lernen, die visuellen Wahrnehmungsprinzipien der Gestalt in Ihre Designarbeit zu integrieren, die Benutzererfahrung erheblich verbessern. Zu verstehen, wie das menschliche Gehirn funktioniert, und dann die natürlichen Neigungen einer Person auszunutzen, schafft eine nahtlosere Interaktion, die dazu führt, dass sich ein Benutzer auf einer Website wohl fühlt, selbst wenn es sein erster Besuch ist.

Gestaltprinzipien lassen sich relativ einfach in nahezu jedes Design integrieren und können ein Design, das willkürlich erscheint oder als würde es um die Aufmerksamkeit eines Benutzers kämpfen, schnell zu einem Design machen, das eine nahtlose, natürliche Interaktion bietet, die Benutzer zu den von Ihnen gewünschten Aktionen führt.

• • •

Weiterführende Literatur im Toptal Design Blog:

Designprinzipien: Einführung in die Hierarchie
UI-Design Best Practices und häufige Fehler
So verwenden Sie leistungsstarke Gestaltprinzipien im Design (mit Infografik)
Der umfassende Leitfaden zur Informationsarchitektur
Steigern Sie Ihre UX mit diesen erfolgreichen Prinzipien des Interaktionsdesigns