Gestaltungsregeln bei Werbemitteln und Websites: Was funktioniert denn am besten?

Ob es sich um ein Plakat, eine Zeitschrift, eine Website oder ein Werbebanner handelt, die Forschung kommt bei den Gestaltungsregeln immer wieder auf die gleichen Erkenntnisse. Diese Erkenntnisse können wir auch mithilfe von Eye Tracking oder gar eigenen Erfahrungen bestätigen. Diese Best Practices für die Gestaltung, was also genau funktioniert und wie gut es funktioniert, das stellen wir euch hier vor.

Das Auge anziehen

Das Auge braucht zwischen 0.04 und 1.3 Sekunden, um ein Produkt oder eine Marke auf einem Bild wahrzunehmen. Durch einen Eye-Catcher und eine hohe Reizdichte erzielt man, dass der Leser die Werbung wahrnimmt und einsteigt. Diese Phase dauert ca. 3 Sekunden. In den darauffolgenden 7 Sekunden wird der Blickverlauf durch Text, Formen und Farben geführt. Handelt es sich um eine Werbung mit Low-Involvement-Produkten, dann wird sie ca. 1.5 Sekunden lang angeschaut (davon etwa 20% Headline, 70% Bilder, 10% Text).

Gestaltungsregel: Gesichter als Blickfang

Ein Gesicht, egal ob Mann, Frau, schön, hässlich, echt, gezeichnet zieht den Blick auf sich. Sogar ein Strichmännchen funktioniert. Das Gesicht wird meist als erstes angeschaut und wirkt stärker als Eye-Catcher als ein Ganzkörperbild oder ein Bild von Sachen. Ein echtes Gesicht wirkt ausserdem stärker als ein gezeichnetes Gesicht oder ein Comic. Mit Bildern kann man das Auge führen. Die Bildwahrnehmung passiert automatisch sowie unkritisch und entspricht in der Verweildauer dem Lesen von 10 Wörtern (1.5-2.5 Sekunden).

Das liegt daran, dass das menschliche Gehirn über ein separates visuelles Areal verfügt, das vornehmlich darauf spezialisiert ist, menschliche Gesichter zu verarbeiten. Zusätzlich werden menschliche Gesichter aufgrund ihrer motivationalen Relevanz besonders schnell und effizient verarbeitet. Eye Tracking-Studien bestätigen dies.

Gestaltungsregel: Blickverlauf nach dem Gesicht

Nachdem das Gesicht betrachtet wurde, wandert der Blick auf den Text, der neben dem Gesicht steht oder dorthin wo das Gesicht hinschaut. Das Auge versucht sich zu orientieren, daher sollte die wichtigste Botschaft gleich neben dem Gesicht stehen und zum Weiterlesen verführen.

Bilder von Personen mit direktem Blick in die Kamera sind eher weniger zielführend. Schliesslich geht es auf einer Website nicht um möglichst lange und intensive Blicke zwischen dem User und einem Bild. Der Blick soll zum nächsten Element geführt werden. Ein Gesicht, das auf den nachfolgenden Text oder CTA blickt, führt also den Blick des Users dahin. Es liegt in unserer Natur, den Blicken anderer Menschen zu folgen.

Gestaltungsregeln: Formen

Spezielle Formen (unruhige Layouts) ziehen den Blick auf sich. Dabei handelt es sich um eine Orientierungsreaktion unseres Gehirns. Schräge Formen wirken daher stärker als grade; runde Formen wirken stärker als eckige. Genauso ein fett gedruckter, unterstrichener Text. Grossschreibung ist eher zu vermeiden: Das Hirn braucht länger, um es zu erkennen und lesen, dadurch wird der restliche Text weniger gelesen. Ausserdem klingt das im Web auch oft nach Anschreien. Vergleiche dazu auch die verschiedenen Schriftauszeichnungen und deren Bedeutungen.

Gestaltungsregeln: Farben

Erregende Farben wie Rot, Orange oder Gelb ziehen den Blick auf sich und eignen sich zum Führen des Blickverlaufes. Angenehme Farben wie Blau, Violett, Grün laden zum Verweilen ein, das Auge bleibt länger darauf haften. Kontraste einsetzen ist eine gute Idee.

Eine hohe Reizdichte fördert das Hinsehen, man versucht automatisch, sich zu orientieren und schaut so lange hin, bis ein Muster erkannt wird.

Gestaltungsregeln: Textlänge und -richtung

Lange Texte werden häufiger gelesen. Sie wirken wichtiger und glaubwürdiger. Dies wiederum erhöht die Verweildauer und den Response. Es sollte dabei aber trotzdem einfache, gesprochene und am besten positive Sprache genutzt werden. Strukturierte Blocksatz-Texte lesen sich besser.

Gelesen wird gemäss Lesegewohnheit von links oben nach rechts unten. Der Anfang (links oben) und der Schluss (rechts unten) werden wiederum am Stärksten betrachtet (egal ob es sich um Bild, Text oder Logo handelt). Der Blickverlauf ist abhängig vom Ziel des Lesers, z.B. haben Leute, die browsen mehr Fixationen als Leute, die lesen. Anzeigen auf der rechten Seite werden erst nach 10 Sekunden stärker angeschaut. Vor allem Website-Besucher lesen kaum jedes Wort, sondern scannen nach den wichtigsten Inhalten.

Das Blickbewegungsmuster wird als F-Pattern bezeichnet: Der obere Bereich (Above the Fold) wird besonders intensiv fixiert, dann bewegt sich der Blick ähnlich eines «F» links-lastig über den Rest der Seite. Im F-Pattern wird wiederholt und länger geschaut. Wichtig: Nicht für alle Websites gilt dieses Blickmuster, sondern eher bei textlastigen und bei Suchergebnissen wie bei Google.

Bei einem Shop mit Produkt- und Kategorieseiten oder bei anderen Seiten mit wenig Text, dafür vielen Bildern (und CTAs) handelt es sich bei der Blickrichtung eher um ein Z-Pattern. Das heisst, es gibt in den linken und rechten Ecken eine Fixation, alles dazwischen wird nur kurz überflogen. Es wird im Zickzack über die Seite gebrowst.

Wie wir durch das F-Pattern sehen, ist Above the Fold extrem wichtig auf einer Website. Also der Bereich, der sofort sichtbar ist beim Öffnen einer Website. Diesem Teil soll beim Erstellen von Websites besondere Aufmerksamkeit geschenkt werden, es ist der wohl wichtigste Teil. Das heisst aber natürlich nicht, dass man den Rest der Seite vernachlässigen kann.

Im zweiten Teil zu den Gestaltungsregeln verraten wir euch, welche Texte, Wörter und Ausdrücke im Marketing am besten funktionieren.