9 min 
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
- 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.
- Nähe: Elemente, die näher aneinander liegen, werden ebenfalls als zusammengehörig wahrgenommen.
- Geschlossenheit: Geschlossene Strukturen werden bevorzugt. Fehlende Informationen werden gedanklich ergänzt.
- Gute Fortsetzung: Linien werden so wahrgenommen, als würden sie dem einfachsten Weg folgen und nicht plötzlich die Richtung wechseln.
- 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.
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?
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.
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.
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:
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?
4. Das Gesetz der Geschlossenheit
Bin ich der Einzige, der im folgenden Beispiel Kreise, Dreiecke und Quadrate sieht, wo eigentlich keine sind? ;-)
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").
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:
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.
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.
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.
WERBUNG
Content Design (2. Auflage)
Robert Weller, Ben Harmanus
Mit diesem Buch lernst du die Konzeption und audiovisuelle Gestaltung von Content holistisch zu betrachten und zielgerichtet umzusetzen.
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?
Möchtest du weiterhin investigative, inspirative und inhaltlich tiefgründige Fachartikel mit journalistischen Anspruch erhalten? Dann unterstütze mich dabei – jeder Beitrag, schon ab 1 Euro, ist eine wertvolle Hilfe, um die Zukunft von toushenne.de zu sichern.
unterstützen
Robert ist Gründer von toushenne.de, Autor des Bestsellers „Content Design“ sowie Content Stratege bei der Unternehmensberatung konversionsKRAFT. Daneben lehrt er Content-Marketing an der FH JOANNEUM sowie Content Design an der ZHAW. Mit über zehn Jahren Erfahrung aus dem Agenturgeschäft, E-Commerce- & SaaS-Unternehmen sowie zahlreichen Freelance-Projekten mit führenden Marken wie Adobe, Bike24 und contentbird, entwickelt er wirksame Strategien für die Optimierung des Content ROI.
