22.11.2011 von Kommentar schreiben

Gestaltgesetze der Wahrnehmung und ihre Bedeutung für das Content Design

Gestaltgesetze der Wahrnehmung

Wusstest du, dass viele Webseiten, Apps und Landingpages auf eine bestimmte Art und Weise gestaltet sind und somit unsere Wahrnehmung, unser Erleben und Handeln beeinflussen?

Sie alle folgen einer Reihe von Gestaltungsregeln, die auf der Kernaussage der Gestalttheorie basieren:

“Das Ganze ist etwas anderes als die Summe seiner Teile.”

Beim Surfen verstehen wir beispielsweise eine Webseite als Ganzes. Erst danach erfassen wir einzelne Elemente wie Logo, Navigation oder Inhalt.

Wenn du die Erkenntnisse der Gestaltpsychologie kennst, kannst du sie nutzen, um die Wahrnehmung deiner Zielgruppe durch die Content- & Design-Optimierung zielführend zu beeinflussen – zum Beispiel in Richtung Kaufabschluss.

In diesem Beitrag lernst du alle wichtigen Prinzipien kennen.

Die sechs Gestaltgesetze der Wahrnehmung

  1. Prägnanz: Elemente werden niemals isoliert wahrgenommen. Sie unterscheiden sich stets von ihrem Umfeld. Ähnlichkeit: Elemente, die einander ähnlich sind, werden als zusammengehörig wahrgenommen.
  2. Nähe: Elemente, die näher aneinander liegen, werden ebenfalls als zusammengehörig wahrgenommen.
  3. Geschlossenheit: Geschlossene Strukturen werden bevorzugt. Fehlende Informationen werden gedanklich ergänzt.
  4. Gute Fortsetzung: Linien werden so wahrgenommen, als würden sie dem einfachsten Weg folgen und nicht plötzlich die Richtung wechseln.
  5. Gemeinsames Schicksal: Elemente, die sich in dieselbe Richtung bewegen, werden als Einheit wahrgenommen.

Der Ursprung der Gestaltgesetze: die Gestaltpsychologie

Die Gestaltgesetze entstammen der Gestaltpsychologie, die sich in den 1920er Jahren zu einer eigenständigen Theorie entwickelte und sich mit der menschlichen Wahrnehmung beschäftigt. Sie untersucht die kognitiven Mechanismen, die es dem Menschen ermöglichen, Phänomene wahrzunehmen und zu interpretieren.

Die Gestaltpsychologie basiert auf der wissenschaftlichen Forschung der drei deutschen Studenten Max Wertheimer, Wolfgang Köhler und Kurt Koffka. Als vierter Begründer dieser Psychologie zählt der Gestaltpsychologe Kurt Lewin. Wolfgang Metzger sei an dieser Stelle als Vertreter in der zweiten Generation erwähnt.

Diese sogenannte „Berliner Schule der Gestaltpsychologie“ ist jedoch nicht die einzige. Es existieren auch die Würzburger Schule, die Grazer Schule und die Leipziger Schule. Letztere wurde durch die Psychologen Felix Krueger und Friedrich Sander vertreten, die als Gründer der Ganzheitspsychologie gelten.

Damit hast du die wichtigsten Namen mal gehört. Weiter will ich an dieser Stelle nicht ins Detail gehen.

Was sind Gestaltgesetze, welche gibt es und wozu dienen sie?

Alles basiert auf einem einfachen Prinzip: Wenn Elemente in einer Relation stehen, werden als zusammenhängend erkannt. Die nachfolgenden Punkte beziehen sich entweder auf diese Relation oder auf die Gruppe.

1. Das Gesetz der Prägnanz

Grafische Objekte nehmen wir entweder als vordergründige Figuren oder als Hintergrund wahr. Das nennen wir Figur-Grund-Trennung. Auf diese Weise können wir das Gesehene schneller begreifen und uns leichter orientieren. Wir unterscheiden dadurch gleichzeitig zwischen Wichtigem und Unwichtigem.

Die Verwendung der verschiedenen Begriffe ist hier allerdings nicht ganz eindeutig, denn oft ist auch von der "einfachen Gestalt" bzw. "guten Gestalt" oder dem Gesetz der Einfachheit die Rede. Sie alle bewirken, und das ist entscheidend, dass wir aus einer quasi unendlich großen Zahl an Interpretationsmöglichkeiten genau diejenigen auswählten, mit denen unser Verstand möglichst wenig Arbeit hat.

Der Mensch ist eben ein faules Wesen. ;-)

Wir sollten beim Web- bzw. Content Design dahingehend auf eine stabile Figur-Grund-Beziehung achten, um dem Betrachter diesen Unterschied auf den ersten Blick klarzumachen. Hebt sich die Figur, zum Beispiel durch Kontrast, Farbe oder eine Kontur nicht vom Hintergrund ab, entstehen unter Umständen Missverständnisse.

Im Marketing ist die Beziehung natürlich weitaus komplexer. Denn nur selten besteht eine Webseite aus einem Hintergrund und einer einzigen Figur. Viel wahrscheinlicher ist das Zusammenspiel mehrerer Elemente oder Details eines Layouts, zum Beispiel die Gestaltung interaktiver Elemente wie Links.

Die folgende Grafik zeigt das Navigationsmenü einer Website, das auf unterschiedliche Art und Weise gestaltet ist. Rechts bestehen Hintergrund, ergo die Rahmenlinie und Inhalt, also der Link-Text, aus derselben Form in derselben Farbe – nämlich schwarzen Strichen. Diese Gestaltung erleichtert die Figur-Grund-Wahrnehmung nicht wirklich. Anders auf der linken Seite, wo Figur und Grund deutlicher voneinander getrennt sind.

 

Figur-Grund-Beziehung am Beispiel einer Website-Navigation

Auch das ist übrigens keine gestalterische "Musterlösung", aber mir geht es hier nur darum, dir den Unterschied zu erklären.

Dasselbe Prinzip gilt auch für Hyperlinks innerhalb eines Textes, die sich visuell vom regulären Fließtext unterscheiden sollten. Hättest du aufgrund der (fehlenden) Gestaltung geahnt, dass du die ausgeschriebene Web-Adresse rechts anklicken kannst?

 

Gestaltung von Text-Links

Schon allein mit solch banalen optischen Reizen kannst du die Aufmerksamkeit deiner Zielgruppe steuern. Aber eben nur die Aufmerksamkeit. Liegt dein Fokus auf einer bestimmten Handlung, brauchst du weitere Gestaltgesetze.

2. Das Gesetz der Ähnlichkeit

Ähnliche Elemente nehmen wir oft als zusammengehörend wahr. Diese Ähnlichkeit kann durch Form, Farbe, Größe, Textur, Position, Symmetrie etc. verursacht werden. Je mehr Gemeinsamkeiten verschiedene Elemente aufweisen, desto stärker wird eine Einheit wahrgenommen.

 

Gruppierung ähnlicher Elemente

Durch eine klare Struktur versteht deine Zielgruppe schneller, welche Funktion die einzelnen Elemente deiner Webseite erfüllen und in welchem Kontext sie gruppiert sind – denke zum Beispiel an Links, Buttons, Farbe, Pfeile usw..

Auch Icons fallen in diese Kategorie. Schließlich nutzen wir diese Symbole, um damit bestimmte Funktionen zu kennzeichnen. Ein bekanntes Beispiel hierfür ist Adobe. Das Unternehmen gibt allen Produkten ein Icon im selben Stil und erzeugt so eigene Marken. Mittlerweile assoziiert jeder diese Icons mit Adobe.

 

Adobe Icon Brands

Und wahrscheinlich kannst du auch den folgenden Icons ihre jeweilige Funktion zuweisen, oder?

3. Das Gesetz der Nähe

Nahe beieinander liegende Elemente, werden als zusammengehörend wahrgenommen. Diese Regel ist mit eine der stärksten, weshalb du sie bei der Gestaltung immer berücksichtigen solltest. Zusammengehörige Informationen, sei es textlich oder visuell, sollten daher nur geringe Abstände voneinander haben und dadurch visuell eine Einheit bilden. Die folgende Grafik zeigt entsprechend angeordnete Elemente:

 

Beispiel für das Gesetz der Nähe

Welche Quadrate (die sinnbildlich für verschiedene Bereiche einer Website stehen, siehe auch das nächste Bild) nimmst du als Einheit wahr? Welche Rolle spielen die horizontalen und vertikalen Abstände?

Verstehst du jetzt auch, warum "Whitespace" keine Platzverschwendung, sondern ein wichtiges Gestaltungselement darstellt?

Werbung

4. Das Gesetz der Geschlossenheit

Bin ich der Einzige, der im folgenden Beispiel Kreise, Dreiecke und Quadrate sieht, wo eigentlich keine sind? ;-)

 

Beispiele für Geschlossenheit in der Gestaltung

Zur Erklärung: Die Wahrnehmung des Menschen ist darauf ausgerichtet, in allem was wir sehen, Zusammenhänge zu entdecken. Aufgrund dieser Konditionierung erkennen wir sogar dort geschlossene Formen, wo eigentlich keine sind. Auf Basis unserer Erfahrung vervollständigen wir einzelne zu verbundenen Elementen, indem wir sie geistig zu Formen zusammensetzen, die nicht wirklich existieren. Dadurch tricksen wir sozusagen unser Gehirn aus und gaukeln ihm eine Geschlossenheit vor, die leichter zu begreifen ist.

Das hat zur Folge, dass wir auf einer Webseite zuerst nach bekannten Mustern suchen, um Informationen schneller zu verarbeiten. Das kann beispielsweise die Unterscheidung von Header, Body und Sidebar sein, wie der Online-Shop von otto.de zeigt, aber auch die Gliederung bzw. Gruppierung einzelner Informationseinheiten (z.B. "Produktdarstellung", "Produkteigenschaften" und "Verkaufsmodalitäten").

 

Produktseite auf otto.de

5. Das Gesetz der Kontinuität

Objekte, die entlang uns bekannter Formen angeordnet sind (etwa einer durchgehenden Linie oder einem Kreis), nehmen wir im Vergleich zu anderen Figuren eher als zusammenhängend wahr. Wichtig dabei sind die Ausrichtung der Elemente an einer deutlich erkennbaren Form sowie die gleichmäßige Verteilung und die Größenverhältnisse.

Das denkbar einfachste Beispiel hierfür sind Textzeilen. Nur durch die Anordnung von Wörtern auf einer gedachten Linie und die Wiederholung dieser Anordnung in weiteren Zeilen wird ein Text lesbar.

Überleg doch mal selbst, was passiert, wenn wir auf diese Anordnung verzichten würden...

WORDS EVERYWHERE!

Denk daran, wenn du das nächste Daten visualisierst oder Infografiken gestaltest. Es ist wirklich nicht schwer... möglichst einfache Formen in eine einfache Struktur bringen et voilà: schon können deine Nutzer die Informationen in ihrer Ganzheit schneller wahrnehmen!

Schau dir dieses Diagramm mal an:

 

Gesetz der guten Fortsetzung in Diagrammen

Die Informationen sind in der rechten Darstellung dank der sogenannten "guten Fortsetzung" einfacher zu erfassen als links. Insgesamt wirken hier viele Aspekte der Gestaltpsychologie zusammen: Zum einen können wir durch Form, Farbe und Nähe die Balken von den Achsen unterscheiden. Zum anderen entsteht durch die Anordnung der unterschiedlich großen Balken eine gute Kurve, durch die wir sie in Relation setzen und ihre Bedeutung deuten können.

Auch Online-Shops greifen gerne auf diese Struktur zurück. Am häufigsten erkenne ich eine solche "gute Gestalt" beim Check-out-Prozess (siehe Bild unten): Hier kommt die Kontinuität durch die horizontale Anordnung, die Nummerierung sowie die farbliche Markierung zustande. Der Nutzer weiß sofort, in welchem Schritt des Prozesses er sich gerade befindet.

 

Statusanzeige im Check-out-Prozess

6. Gesetz des gemeinsamen Schicksals

Die sechste und in dieser Liste letzte Theorie aus der Gestaltpsychologie ist relevant für bewegte oder aufeinander aufbauende Bilder. Es besagt, dass wir Objekte, die sich gleichzeitig bewegen (daher auch der Begriff der "gemeinsamen Bewegung"), als zusammengehörig wahrnehmen.

Beim Design interaktiver Webseiten können wir uns diese Erkenntnis zunutze machen, um etwa Informationen so lange zu verstecken, bis sie innerhalb des Kontexts relevant werden. Der Online-Händler Cyberport beispielsweise verwendet diesen Trick bei seinen Tooltips innerhalb von Formularen. Das macht Sinn, denn die dort hinterlegten Informationen sind erst ab einem bestimmten Zeitpunkt relevant für den Nutzer und würden vorher wohl eher ablenken als die Conversion fördern.

 

Tooltip in Formularen

Denkbar wäre auch ein sogenanntes “Accordion”, bei dem der Nutzer bestimmte Bereiche einer Webseite aktiv ein- und ausblenden kann. Mein Kompendium beispielsweise beruht auf einer solchen JavaScript-Steuerung.

 

Weitere Aspekte der Gestaltpsychologie, die du nutzen kannst

Neben der Prägnanz, Ähnlichkeit, Nähe, Geschlossenheit, Kontinuität und dem gemeinsamen Schicksal gibt es noch zahlreiche weitere psychologische Effekte und Aspekte der Gestalttheorie, die für dein Content Design wichtig sind. Natürlich lege ich dir ans Herz, dazu mein Buch zu lesen, ich will dir aber abschließend trotzdem noch drei vorstellen:

  • Interferenz-Effekt: Von einem solchen sprechen wir, wenn sich zwei Aussagen in einer Darstellung zuwiderlaufen und den Betrachter dadurch verwirren. In der Werbung ist Interferenz vielleicht ein probates Mittel, um Aufmerksamkeit zu erregen, in der Kommunikation solltest du sie hingegen vermeiden. Das bekannteste wissenschaftliche Experiment aus der Psychologie ist der Stroop-Effekt; probier's doch mal aus!

  • Der Goldene Schnitt: Der Goldene Schnitt ist eine seit der Antike bekannte Gestaltungsregel, die das Verhältnis von zwei Teilen einer Strecke beschreibt. Das Besondere dabei ist, dass die zwei Teile das gleiche Verhältnis zueinander haben, wie die größere Teilstrecke zur Gesamtstrecke. Der Goldene Schnitt kann unter vielen Aspekten betrachtet werden: mathematisch, kunsthistorisch und sogar esoterisch. Viel interessanter sind meiner Meinung nach jedoch die unterschiedlichen Gestaltungsmöglichkeiten und Anwendungsbereiche. Diese kannst du in meinem anderen Artikel nachlesen: Ist der Goldene Schnitt das ideale Seitenverhältnis? Berechnung, Beispiele, Anwendungsbereiche
  • Das Hicksche Gesetz: Du kennst sicherlich das Motto „Weniger ist mehr“. Das zugrunde liegende Modell beschreibt den Zusammenhang zwischen der Reaktionszeit und der Anzahl an Wahlmöglichkeiten. Es besagt, dass die Zeit, die wir für eine Entscheidung brauchen, mit der Anzahl der zur Verfügung stehenden Optionen steigt. Diese Regel ist ein wichtiger Aspekt der Conversion-Optimierung, denn je mehr Interaktionsmöglichkeiten ein Nutzer auf einer Website hat (Scrollen, Button klicken, Formular ausfüllen usw.), desto geringer ist dieser Theorie zufolge die tatsächliche Conversion Rate.

Fazit: Wahrnehmung ist eine Frage unserer Erfahrung

Jetzt weißt du, dass die visuelle Wahrnehmung (und damit zu einem Großteil auch der Erfolg) deines Contents vor allem von dessen Gestaltung abhängt.

Es schreit zwar jeder schnell nach kreativer Innovation, wir dürfen aber bekannte und anerkannte Normen (z.B. die Einteilung eines Layouts in Kopf-, Haupt- und Fußbereich) nicht einfach über Bord werfen. Schließlich helfen sie dem Nutzer dabei, sich schneller zu orientieren. Je einfacher wir dem Nutzer den Zugang zu unserer Website und unserem Content gestalten, desto besser. Oder etwa nicht?

Nutzt du diese psychologischen Tricks auf deiner Website? Wo hast du sie schon in Aktion erlebt?

Hat dir der Beitrag gefallen? Bewerte Ihn!
0 / 5 Sterne
Möchtest du mich unterstützen? via PayPal spenden
Gestaltgesetze der Wahrnehmung und ihre Bedeutung für das Content Design 0 0 5 0
Werbung

Newsletter abonnieren

Einen Kommentar schreiben

Schreibe deinen Kommentar

Datenschutzhinweise: Deine angegebene E-Mail-Adresse wird genutzt, um dein Profilbild vom Dienst Gravatar zu beziehen. Weitere Informationen und Hinweise zum Widerrufsrecht findest du in der Datenschutzerklärung. Durch Kommentieren erklärst du dich außerdem mit den Kommentarrichtlinien einverstanden.

Was ist die Summe aus 3 und 3?