Gestaltprinzipien – oder: „Mein Shop ist doch hübsch – warum kauft denn keiner?“

Optimization Geschrieben von Johannes Fröhlich

Der Shop sieht eigentlich ziemlich gut aus. Die frische, moderne Gestaltung sollte die Zielgruppe ansprechen. Die Produkte sind gut und nicht zu teuer. Es gibt keine Fehler, durch die Besucher vom Bestellen abgehalten würden und über Marketing-Maßnahmen strömen die Leute auf die Seite. Aber leider wird nicht gekauft. Ein Grund könnte sein, dass die Prinzipien der Gestalt nicht beachtet werden.

Johannes Fröhlich

Specialist Conversion Optimization & UX

Gestaltprinzipien – oder: „Mein Shop ist doch hübsch – warum kauft denn keiner?“

Wenn der erste Eindruck einer Webseite positiv ist und man „das Design“ als gelungen empfindet, liegt das meistens nicht an modischen Erscheinungen wie einer modernen Schrift oder „Flat Design“. Stattdessen wirken eine oder mehrere Gestaltprinzipien.
Ursprünglich wurden von Max Wehrtheimer zu Beginn des 20. Jahrhunderts sechs Prinzipien formuliert. Im Laufe der Zeit fand man noch Weitere und ergänzte die Bestehenden. Die grundlegenden vier Ideen dahinter sind, dass das Gehirn zuerst versucht das Gesamtbild vor den Details zu erkennen, Lücken zu füllen, Ähnlichkeiten und Unterschiede zu begreifen und Ungewissheiten auszuschließen.
Wie wir bestimmte Dinge auf Webseiten wahrnehmen, kann so funktionieren, wie in den folgenden Gestaltprinzipien beschrieben:

Das Prinzip der Erfahrungen

Das Prinzip der Erfahrung

Die Erfahrungen eines Besuchers beeinflussen die Wahrnehmung der Elemente. Das abgebildete Kontroll-Element wirkt trotz der abstrakten Darstellung für erfahrene Benutzer wie ein Schalter, um etwas an oder aus zu schalten. Unerfahrene Benutzer erkennen das Element erst, wenn es visuell an einen realen Schalter erinnert.

 

Das Prinzip der Prägnanz

Das Prinzip der Prägnanz

Durch eine einfache Struktur werden Elemente einprägsamer, weil bevorzugt einfache Formen wahrgenommen werden. Statt einem unförmigen Objekt sehen wir ein Quadrat, ein Dreieck und einen Kreis. Das Gleiche lässt sich auch auf komplexe Darstellung, wie das Layout einer Webseite, oder eines Formulars anwenden. Vereinfacht man die Gestaltung, kann der Besucher die einzelnen Teile der Seite einfacher erkennen.

 

Das Prinzip der Nähe

Das Prinzip der Nähe

Elemente mit geringen Abständen zueinander werden als zusammengehörig wahrgenommen. Der Block auf der linken Seite scheint nicht zu der anderen Gruppe zu gehören. Wir beschließen automatisch, dass es sich bei den vier Blöcken auf der rechten Seite um eine Gruppe handelt. Sogar der etwas verschobene rechte Block scheint dazuzugehören, obwohl er aus dem Raster fällt. Genau so könnte es z.B. auch bei Fehlermeldungen sein, die etwas abseits vom eigentlichen Element und dessen Beschriftung stehen. Sie werden dann nicht mehr sofort mit der Gruppe identifiziert.

 

Das Prinzip der Ähnlichkeit

Das Prinzip der Ähnlichkeit

Elemente, die sich ähnlich sehen, werden als zusammengehörig empfunden. Dinge, die sich nicht ähneln, erscheinen eher getrennt. Auch wenn der Abstand zwischen den Spalten im Bild etwas größer ist, als zwischen den Zeilen, sieht man optisch trotzdem eine Gruppe Kreise und eine Gruppe Quadrate. Bei einer Liste aus Produkten im Shop kann dies ebenfalls passieren. Sind die Bilder zu den Produkten zu weit von den Beschreibungen entfernt, sieht man eine Zeile mit Bildern und eine Zeile mit Texten. Die Assoziation der Bilder wird deutlich erschwert. Ein weiteres Beispiel wären auch Formulare, deren Felder aus Platzgründen sehr nah zusammenliegen. Hier sieht der Besucher ein riesiges Raster aus Rechtecken, aber die eigentliche Gruppierung von Beschreibung, Feld und Erklärung wird nicht wahrgenommen.

 

Das Prinzip der Fortsetzung

Das Prinzip der Fortsetzung

Nach unserer Wahrnehmung folgen Linien immer dem einfachsten Weg. Wenn sich zwei Linien kreuzen, wird davon ausgegangen, dass es sich um zwei gerade Linien statt zwei geknickte handelt. Dass der Verlauf eines Flusses, eines Zauns, oder des Horizonts nicht abrupt abknickt, ist ein Instinkt, dem wir auch auf Webseiten, oder Benutzeroberflächen folgen. Folgen wir der geraden Linie im Bild, gehen wir davon aus, dass sie nach der geschwungenen Linie immer noch gerade weiterläuft und nicht nach oben abknickt. Wichtig wird dies in Benutzeroberflächen zum Beispiel bei der Visualisierung von Prozessen oder Diagrammen. Ordnet man die Balken in einem Diagramm nach der Größe, kann man sie viel einfacher vergleichen, als wenn die Balken unsortiert nebeneinanderstehen. Auf einer Webseite ist deshalb auch ein einheitliches Raster wichtig. Besucher können dann erwarten, wo das nächste Element beginnt, wenn sie nach unten scrollen. Sind die Elemente dagegen verschoben und wahllos angeordnet, wirkt die Seite schnell unruhig und chaotisch.

 

Das Prinzip der Geschlossenheit

Das Prinzip der Geschlossenheit

Wenn wir eine komplexe Anordnung von Elementen sehen, versuchen wir ein einziges wiedererkennbares Muster zu suchen. Im Bild erkennen wir sofort ein Dreieck, obwohl es nicht vollständig dargestellt ist — dabei ist es eigentlich nur eine Linie. Auf Webseiten könnte das der weiße Hintergrund eines Produkts sein. Besucher erwarten automatisch, dass es auf einem Boden liegt, auch wenn dieser nicht dargestellt wird. Ein Produkt ohne Schatten kann deshalb unnatürlich wirken, weil ein entscheidendes Element fehlt, um die Illusion aufrechtzuerhalten.

 

Das Prinzip der Synchronität

Das Prinzip der Synchronität

Wenn sich Elemente in die gleiche Richtung bewegen, scheinen sie zusammenhängender als stillstehende Objekte oder solche, die sich in eine andere Richtung bewegen. Wie im Bild sichtbar, müssen sich die Objekte noch nicht mal bewegen. Schon das Andeuten einer Bewegung (hier durch einen Pfeil) genügt, um zu erkennen, dass die Objekte irgendwie zusammengehören. Auf Webseiten sind dies Elemente, die gemeinsam erscheinen. Zum Beispiel als Login-Formular, das sich herunterschiebt, wenn auf „Anmelden“ geklickt wird. Die Bewegung fällt sofort ins Auge und die gemeinsam bewegten Elemente lassen es als Gruppe erscheinen.

 

Das Prinzip des Fokuspunkts

Das Prinzip des Fokus-Punkts

Durch die Betonung eines Elements durch Hervorhebung, oder große Unterschiede zu anderen Elementen, kann die Aufmerksamkeit des Besuchers auf dieses Element gelenkt werden. Wie im Bild kann man den Fokus des Besuchers gezielt auf ein bestimmtes Element richten, indem man den Kontrast zu anderen Elementen verstärkt. Das könnte zum Beispiel durch eine andere Perspektive, durch größere Darstellung oder eine auffallende Farbe erreicht werden. Natürlich können nicht Dutzende Produkte fokussiert werden. Sobald nämlich alle Produkte wichtig sein sollen, ist keines mehr wichtig, weil der Fokuspunkt verloren geht.

 

Das Prinzip der gemeinsamen Region

Das Prinzip der gemeinsamen Region

Elemente werden als Teil einer Gruppe wahrgenommen, wenn sie in der gleichen, abgeschlossenen Region liegen. Trotz der Nähe gehört der Punkt im Rechteck nicht zu dem Punkt außerhalb. Das Rechteck schließt die Elemente ein und gruppiert sie. Auf Webseiten wird dieses Prinzip besonders gerne in Formularen verwendet. So können Felder gruppiert werden, um z.B. die Lieferadresse, von der Rechnungsadresse zu unterscheiden. Aber auch für die Präsentation von Produkten lässt sich das Prinzip einsetzen. Zwei Produkte können durch einen Hintergrund oder eine Umrahmung gruppiert werden. Hierdurch werden sie automatisch als Einheit wahrgenommen und betont. Ein neuer Fokuspunkt ist entstanden.

 

Das Prinzip der Verbundenheit

Das Prinzip der Verbundenheit

Durch eine visuelle Verbindung scheinen Elemente eher zusammengehörig als Elemente ohne Verbindung. Die Linien berühren nicht die Kreise und Quadrate. Trotzdem scheint es eine Verbindung zu geben. Dieses Prinzip kann sehr gut in einer Fortschrittsanzeige im Checkout-Prozess verwendet werden. Durch eine Verbindung wirken die Schritte des Checkouts zusammengehörig und Besucher wissen sofort, wie lange die Bestellung noch dauern wird.

 

Das Prinzip der Parallelität

Das Prinzip der Parallelität

Parallel angeordnete Elemente scheinen eher eine Gruppe zu bilden als Elemente, die wild verteilt sind. Auf Produktseiten kommt es häufiger vor, dass Informationen ohne Zusammenhang wild platziert werden. Zusätzlich gibt es dann noch eine Seitenleiste mit weiteren Produkten oder eine Zeile mit verwandten Produkten. Ordnet man die Informationen parallel zueinander an, erkennt der Besucher sofort, wann es sich um das Produkt handelt und welche Informationen nützliche Hilfsmittel sind.

 

Ein schöner Shop reicht nicht. Er muss auch benutzbar sein.

Die Gestaltprinzipien können die Benutzung einer Webseite erleichtern, denn sie erklären, wie wir die Welt wahrnehmen. Werden sie nicht eingehalten, kann dies eine unüberwindbare Hürde für Besucher bedeuten. Im Grunde reicht es, einen Schritt vom Bildschirm zurückzutreten und zu erkennen, dass da etwas nicht stimmt. Auch wenn der Shop noch so hübsch aussieht, kann es durchaus sein, dass Besucher nicht kaufen, weil wichtige Dinge falsch wahrgenommen werden.