Das menschliche Gehirn ist verdrahtet, um Struktur, Logik und Muster zu sehen. Es hilft uns, die Welt zu verstehen. In den 1920er Jahren entwickelte eine Gruppe deutscher Psychologen Theorien darüber, wie Menschen die Welt um sich herum wahrnehmen, sogenannte Gestaltprinzipien.
Was sehen Sie zum Beispiel, wenn Sie sich dieses Bild ansehen?,
Quelle: Das inspirierte Auge
Wenn Sie wie die meisten Menschen sind, sehen Sie wahrscheinlich ein Dreieck. Aber in Wirklichkeit, alles, was da ist, sind drei weiße “ pac Männer.“Wir sehen das Dreieck, weil unser Gehirn die mehrdeutigen visuellen Informationen aufnimmt und in etwas organisiert, das für uns Sinn macht—etwas Vertrautes, Geordnetes, Symmetrisches und das wir verstehen.
Wenn dieser kognitive Prozess einsetzt, springen unsere Gedanken davon, alle Elemente als einzelne und nicht verwandte Komponenten zu verstehen, um die gesamte Form als Ganzes zu sehen., Und als Ergebnis nehmen wir Formen und Objekte wahr, in denen keine geschaffen wurden.
Um diesen Vorgang weiter zu veranschaulichen, sehen Sie sich das GIF unten an. Ihr Gehirn sieht einen Hund laufen, aber es ist nichts anderes als eine Reihe von sich bewegenden Punkten.
Quelle: Gizmodo
Dies sind einfache Beispiele, aber sie zeigen die Arten von Verknüpfungen unser Gehirn die ganze Zeit machen, um schnell Sinn für die Welt zu machen.
Was sind die Gestaltungsprinzipien?,
Diese Verknüpfungen werden als Gestaltprinzipien der visuellen Wahrnehmung bezeichnet und beschreiben, wie unser Gehirn standardmäßig eine Struktur erstellt. Aber warum ist das Verständnis für Web-und Mobile-Design wichtig?
Warum sollten die Designer kümmern sich um die Gestalt-Prinzipien
Tolle Designer verstehen die mächtige Rolle, die Psychologie spielt in der visuellen Wahrnehmung. Was passiert, wenn jemandes Auge auf Ihre Designkreationen trifft? Wie reagiert ihr Geist auf die Botschaft, die Ihr Stück teilt?, – Laura Busche, Markeninhaltsstratege bei Autodesk
Denken Sie eine Minute lang über dieses Zitat nach. Wenn die Leute Ihre Entwürfe zum ersten Mal sehen, wie erleben sie sie? Um zu verstehen, was UI-Design funktioniert, müssen Sie die Psychologie der menschlichen Wahrnehmung verstehen.
Das Grundgesetz, das ein Gestaltprinzip regelt, ist, dass wir dazu neigen, unsere Erfahrungen regelmäßig, ordentlich und erkennbar zu ordnen. Dies ermöglicht es uns, in einer komplexen und chaotischen Welt einen Sinn zu schaffen., Und ein solides Verständnis dafür, wie diese Prinzipien funktionieren, wird Ihnen auf drei Arten helfen.
- Sie helfen Ihnen festzustellen, welche Designelemente in einer bestimmten Situation am effektivsten sind. Zum Beispiel, wenn visuelle Hierarchie, Hintergrundschattierung, Farbverläufe zu verwenden, und wie ähnliche Elemente zu gruppieren und unterscheiden verschiedene.
- Diese psychologischen Prinzipien haben die Kraft, unsere visuelle Wahrnehmung zu beeinflussen, wodurch Designer unsere Aufmerksamkeit auf bestimmte Fokuspunkte lenken, uns dazu bringen können, bestimmte Maßnahmen zu ergreifen und Verhaltensänderungen herbeizuführen.,
- Und schließlich helfen Ihnen die Gestalt-Prinzipien auf höchstem Niveau, Produkte zu entwerfen, die das Problem des Kunden lösen oder die Bedürfnisse des Benutzers auf eine Weise erfüllen, die schön, angenehm und intuitiv zu bedienen ist.
In diesem Artikel werden wir sieben Gestaltgesetze oder-prinzipien diskutieren, die direkt für modernes Design gelten, und einige Beispiele dafür teilen, wie sie im UI-Design verwendet werden. Dies ist keine erschöpfende Liste, aber Sie werden schnell feststellen, dass sich viele der Prinzipien überschneiden und dass sie alle fließend zusammenarbeiten. Jetzt tauchen wir ein.,
- Figure-ground
- Similarity
- Proximity
- Common region
- Continuity
- Closure
- Focal point
Principle #1: figure-ground
Das figure-ground-Prinzip besagt, dass Menschen Objekte instinktiv entweder im Vordergrund oder im Hintergrund wahrnehmen. Sie stehen entweder prominent in der Front (die Figur) oder in den Rücken (der Boden) zurücktreten.,
Quelle: Ein Zwerg namens Warren
Im Bild oben sieht Ihr Auge sofort einen weißen Apfel auf schwarzem Hintergrund.
Diese Bestimmung erfolgt in den meisten Fällen schnell und unbewusst. Abbildung / Boden lässt uns wissen, worauf wir uns konzentrieren sollten und was wir in einer Komposition sicher ignorieren können. – Steven Bradley, Webdesigner
Wenn Menschen Ihre Website oder mobile App verwenden, ist eines der ersten Dinge, die sie auf jedem Bildschirm tun, zu bestimmen, welche ist die Figur und welche ist der Boden.,
Beispiele für das Figur-Boden-Prinzip
Die Basecamp-Homepage enthält eine Reihe von Grafiken, Texten, Formularen und anderen Informationen. Und aufgrund des Figur-Boden-Prinzips können Sie sofort erkennen, dass Sie sich auf den Inhalt in den weißen Vordergrundbereichen konzentrieren sollten.
AngelList verwendet die Figur-Grund-Prinzip auf zwei Arten weiter unten. Zuerst sitzen der Text und das Logo auf der linken Seite der Seite deutlich über dem Hintergrundbild. Zweitens steht der weiße Text im Menü rechts über dem schwarzen Hintergrund.,
Prinzip #2: Ähnlichkeit
Das Prinzip der Ähnlichkeit besagt, dass, wenn Dinge einander ähnlich zu sein scheinen, wir sie gruppieren. Und wir neigen auch dazu zu denken, dass sie die gleiche Funktion haben.
Zum Beispiel scheint es in diesem Bild zwei separate und unterschiedliche Gruppen zu geben, die auf der Form basieren: die Kreise und die Quadrate.
Quelle: Creative Beacon
Eine Vielzahl von Design-Elementen, wie Farbe und Organisation, kann verwendet werden, um ähnliche Gruppen zu etablieren., Im Bild unten zum Beispiel, obwohl alle Formen gleich sind, ist es klar, dass jede Spalte eine eigene Gruppe darstellt:
Quelle: Andy Rutledge
Beispiele für das Ähnlichkeitsprinzip
GitHub verwendet das Ähnlichkeitsprinzip auf zwei Arten auf der folgenden Seite. Erstens verwenden sie es, um verschiedene Abschnitte zu unterscheiden. Sie können sofort feststellen, dass der graue Abschnitt oben einen anderen Zweck erfüllt als der schwarze Abschnitt, der ebenfalls getrennt und anders als der blaue Abschnitt ist.,
Zweitens verwenden sie auch die Farbe Blau, um Links von normalem Text zu unterscheiden und zu kommunizieren, dass der gesamte blaue Text eine gemeinsame Funktion hat.
Prinzip #3: Nähe
Das Prinzip der Nähe besagt, dass Dinge, die nahe beieinander liegen, mehr verwandt zu sein scheinen als Dinge, die weiter voneinander entfernt liegen.
Source: Andy Rutledge
die Nähe ist so mächtig, dass es überschreibt ähnlichkeit der Farbe, Form, und andere Faktoren, kann unterscheiden zwischen einer Gruppe von Objekten.,
Source: Steven Bradley
Beachten Sie die drei Gruppen von schwarzen und roten Punkten oben? Die relative Nähe der Objekte hat einen noch stärkeren Einfluss auf die Gruppierung als die Farbe.
Beispiele für das Näherungsprinzip
Die Nähe jedes Bildes und seines entsprechenden Textes kommuniziert, dass sie miteinander verwandt sind.
Und Vice verwendet es, um zwischen den Bildern, Überschriften, Beschreibungen und anderen Informationen für jede seiner Geschichten zu unterscheiden.,
Prinzip #4: gemeinsame Region
Das Prinzip der gemeinsamen Region ist stark mit der Nähe verbunden. Es besagt, dass Objekte, die sich innerhalb derselben geschlossenen Region befinden, als gruppiert wahrgenommen werden.
Quelle: Smashing Magazine
Das Hinzufügen von Rändern oder anderen sichtbaren Barrieren ist eine großartige Möglichkeit, eine wahrgenommene Trennung zwischen Objektgruppen zu schaffen—auch wenn sie die gleiche Nähe, Form, Farbe usw. haben.,
Beispiele für das Common Region-Prinzip
Im folgenden Beispiel von Pinterest wird das Common Region—Prinzip verwendet, um jeden Pin—einschließlich Foto, Titel, Beschreibung, Beitrag und anderer Details-von allen anderen Pins zu trennen.
Und es wird im folgenden Facebook—Beispiel verwendet, um zu kommunizieren, dass die Kommentare, Likes und Interaktionen mit diesem bestimmten Beitrag verknüpft sind-und nicht die anderen Beiträge, die ihn umgeben.,
Prinzip #5: Kontinuität
Das Prinzip der Kontinuität besagt, dass Elemente, die auf einer Linie oder Kurve angeordnet sind, mehr verwandt sind als Elemente, die sich nicht auf der Linie oder Kurve befinden.
Quelle: Smashing Magazine
Im obigen Bild scheinen die roten Punkte in der gekrümmten Linie mehr mit den schwarzen Punkten auf der gekrümmten Linie als mit den roten Punkten auf der geraden horizontalen Linie zusammenzuhängen., Das liegt daran, dass Ihr Auge natürlich einer Linie oder Kurve folgt, was es zu einem stärkeren Signal der Verwandtschaft macht als die Ähnlichkeit der Farbe.
Beispiele für das Kontinuitätsprinzip
Amazon verwendet Kontinuität, um mitzuteilen, dass jedes der folgenden Produkte ähnlich und miteinander verwandt ist.
Zweig verwendet es, um den dreistufigen Prozess zur Verwendung ihrer App zu erklären.
Und Credit Karma verwendet es, um die Vorteile zu veranschaulichen, die ihre Dienste bieten.,
Prinzip #6: closure
Das Prinzip des closure besagt, dass wir beim Betrachten einer komplexen Anordnung visueller Elemente tendenziell nach einem einzigen, erkennbaren Muster suchen.
Mit anderen Worten, wenn Sie ein Bild mit fehlenden Teilen sehen, füllt Ihr Gehirn die Lücken aus und erstellt ein vollständiges Bild, damit Sie das Muster immer noch erkennen können.
Quelle: Eduard Volianskyi
Wenn Sie sich das Bild oben ansehen, sehen Sie höchstwahrscheinlich ein Zebra, obwohl das Bild nur eine Sammlung schwarzer Formen ist., Ihr Verstand füllt die fehlenden Informationen aus, um basierend auf Ihrer Erfahrung ein erkennbares Muster zu erstellen.
Beispiele für das Closure-Prinzip
Das Closure-Prinzip wird häufig in Logo-Designs bei einer Vielzahl von Unternehmen wie IBM, NBC, Zendesk und Funding Circle verwendet.
Prinzip #7: Schwerpunkt
Der Brennpunkt-Prinzip besagt, dass alles, was sticht optisch erfassen und zu halten die Aufmerksamkeit des Betrachters zuerst.,
Quelle: Smashing Magazine
Wenn Sie sich das obige Bild ansehen, ist das erste, was Sie bemerken, das rote Quadrat, weil es anders ist als alle schwarzen Kreise um es herum. Es ist der erste Punkt von Interesse, der Ihre Aufmerksamkeit erregt, und von dort aus bewegt sich Ihre Aufmerksamkeit auf andere Teile des Bildes.
Beispiele für das Fokuspunktprinzip
Twilio verwendet das Fokuspunktprinzip, um Ihr Auge auf ihre Call-to-Action-Taste zu lenken.,
Und im folgenden Beispiel kombiniert Instacart das Fokuspunktprinzip mit dem Figure-Ground-Prinzip, um Ihr Auge auf den weißen Vordergrund und dann auf die grüne Schaltfläche“ find stores “ zu lenken.
Letzte Gedanken
Wenn Sie verstehen, wie der menschliche Geist funktioniert, ist es einfacher, die Aufmerksamkeit der Menschen auf den richtigen Ort zu lenken. Wenn Sie diese Prinzipien auf dem neuesten Stand halten, können Sie den Benutzer im Mittelpunkt Ihres Produktentwicklungsprozesses halten., Wenn Sie mehr über die Gestaltprinzipien der visuellen Wahrnehmung erfahren möchten, empfehlen wir Ihnen, die folgenden Ressourcen zu lesen.,
Weiterführende Links:
- Einfachheit, Symmetrie und Mehr: Gestalttheorie Und Die Gestaltungsprinzipien, die Es gebar
- Design-Prinzipien: die Visuelle Wahrnehmung Und den Prinzipien Der Gestalttherapie
- The Designer ‚ s Guide to Gestalt Theory
- Andy Rutledge fünf-teilige Serie, die auf Gestalt-Wahrnehmung:
- Teil 1: Figur-Grund-Beziehungen
- Teil 2: die Ähnlichkeit
- Teil 3: die Nähe, Einheitliche Verbundenheit und Gute Fortsetzung
- Teil 4: Gemeinsame Schicksal
- Teil 5: Verschluss
Möchten Sie mehr erfahren?,
Um zu erfahren, wie UserTesting Ihnen helfen kann, Ihre Kunden durch On-Demand-Human Insight zu verstehen, kontaktieren Sie uns hier.