Erstellen einer visuellen Hierarchie: Die Kunst, Aufmerksamkeit zu erregen

"Soll ich das wegwerfen oder lesen?" Forscher fragen sich, wenn sie eine Direktwerbung untersuchen. Von oben bis unten werten sie den Brief aus und treffen nach nur 11 Sekunden eine Entscheidung.

In dieser Zeit fällt den Experimentatoren des Münchner Direktmarketing-Verbandes etwas Eigentümliches an den Augen der Probanden auf. Sie folgen keinem linearen Weg, indem sie jedes Wort nacheinander lesen, sondern springen stattdessen zu verschiedenen Stellen des Buchstabenkörpers. Was haben sie sich also angesehen?

Die Antwort ist der Schlüssel zum Erstellen einer Post-Click-Landingpage, die mithilfe einer sogenannten „visuellen Hierarchie“ konvertiert. Um es vollständig zu verstehen, müssen wir ins Deutschland 1912 zurückreisen, wo drei Psychologen begannen, die Grundlagen der Gestaltpsychologie zu legen.

Gestaltpsychologie und die Grundlage der visuellen Hierarchie

Vor mehr als einem Jahrhundert begannen die deutschen Denker Wolfgang Kohler, Max Wertheimer und Kurt Koffka zu untersuchen, wie Menschen die Welt wahrnehmen. Ihre Namen und die Theorie der „Gestaltpsychologie“ kommen Ihnen vielleicht nicht bekannt vor, aber die Botschaft, die ihre Forschung umfasst, wird:

„Das Ganze ist etwas anderes als die Summe seiner Teile“ – das heißt, das Ganze hat „eine unabhängige Existenz im Wahrnehmungssystem“, sagt Dr. Russ Dewey.

Mit anderen Worten, die drei Männer schlugen vor, dass der Mensch seine Umgebung nicht individuell und gleich wahrnimmt. Stattdessen organisieren wir sie auf spezifische Weise, um sie als Ganzes zu verstehen.

Nehmen Sie zum Beispiel das folgende Bild. Was siehst du?

Sie bemerken wahrscheinlich drei teilweise gezeichnete Kreise, aber auch ein umgedrehtes Dreieck in der Mitte, wo keines ist. Die unvollständigen Kreise bilden die Ecken des Dreiecks und dein Verstand füllt die Kanten aus. Dies wird als „illusorische Kontur“ bezeichnet und veranschaulicht genau das, was Koffka meinte, als er sagte: „Das Ganze ist anders als die Summe seiner Teile“. Dieses Bild enthält mehr als nur drei teilweise gezeichnete Kreise. Zusammen, so wie sie sind, bilden diese Kreise ein weißes Dreieck.

Aus ihren Forschungen schufen die drei Männer acht Gesetze der Wahrnehmungsorganisation – Arten, in denen Menschen Komponenten einer Gruppe als Ganzes betrachten. Einer mehr als jeder andere hat damit zu tun, wie Menschen wichtige Informationen auf Ihrer Post-Click-Landingpage finden.

Die Gesetze der Ähnlichkeit

Das Gesetz der Ähnlichkeit besagt, dass ähnliche Dinge so erscheinen, als ob sie zusammengehören. Was sehen Sie im Bild unten?

Wenn Sie "36 Kreise" oder "6 Reihen von Kreisen" oder "6 Spalten von Kreisen" sagten, sind Sie in der Minderheit. Die meisten Leute sehen drei Reihen schwarzer Kreise und drei Reihen weißer Kreise. Da jede zweite Reihe ähnlich gefärbt und geformt ist, wird sie als Teil einer eigenen Gruppe innerhalb des Ganzen gesehen.

Gleichzeitig bemerken wir aufgrund dieser Tendenz, ähnliche Dinge zu gruppieren, auch Dinge, die der Gruppe nicht ähnlich sind. Die Gestaltpsychologen nannten diese Unterschiede „Anomalien“.

Im obigen Bild gruppieren wir alle ähnlichen grünen Äpfel zusammen und der rote fällt als Anomalie auf. Unabhängig davon, ob diese Anomalie in Größe, Farbe oder Form unterschiedlich ist, zieht sie unsere Aufmerksamkeit auf sich, weil sie sich vom Rest der Gruppe unterscheidet.

Dieser Prozess der Wahrnehmungsgruppierung von Elementen kann erklären, was Experimentatoren des Münchner Direktmarketing-Verbandes in den Augen der Forscher aufgefallen sind.

Was ist eine visuelle Hierarchie?

Brandon Jones von Tuts+ sagt, die Menschen seien keine „Seher für Chancengleichheit“. Wir haben nicht nur die Tendenz, Unterschiede zwischen Gruppen zu bemerken, sondern auch Rückschlüsse auf die Bedeutung dieser Unterschiede zu ziehen. Ordnen Sie beispielsweise die Kreise in diesem Bild:

Ohne etwas über sie zu wissen, haben Sie sie wahrscheinlich wie folgt eingestuft:

Und das liegt daran, dass der größte Kreis die meiste Aufmerksamkeit auf sich zieht, dann der zweitgrößte und so weiter. Wenden wir nun ein ähnliches Prinzip auf Wörter auf der Seite an.

Dies ist der wichtigste Satz. Dies ist der wichtigste Satz. Dies ist der wichtigste Satz. Dies ist der wichtigste Satz. Dies ist der wichtigste Satz. Dies ist der wichtigste Satz.

In diesem Auszug wurden Ihre Augen wahrscheinlich von der Anomalie angezogen. Sie haben die unformatierten Sätze gruppiert und die fett gedruckten Wörter stach hervor. Wenn Sie Größenunterschiede einführen, wird die Aufmerksamkeit an anderer Stelle gelenkt.

Dies ist der wichtigste Satz.
Dies ist der wichtigste Satz. Dies ist der wichtigste Satz. Dies ist der wichtigste Satz. Dies ist der wichtigste Satz. Dies ist der wichtigste Satz. Dies ist der wichtigste Satz.

Dieses Mal, bevor Sie die fett gedruckten Wörter innerhalb des Absatzes bemerkt haben, haben Sie wahrscheinlich die noch größeren, fetteren Wörter darüber gesehen. Wir könnten Wörter mit Farbe und Positionierung ändern, um sie noch besser hervorzuheben, aber Sie verstehen, worauf es ankommt. „Anders“ erregt Aufmerksamkeit, und Aufmerksamkeit ist das, was Sie den wichtigsten Informationen auf Ihrer Post-Click-Landingpage schenken möchten.

Mit Unterschieden im Design können Sie die Aufmerksamkeit Ihrer Besucher strategisch auf Marketingbotschaften lenken, die für die Steigerung der Conversions von zentraler Bedeutung sind – zum Beispiel Ihr Wertversprechen, die Vorteile Ihres Produkts und der Call-to-Action. Diese aufmerksamkeitsstarken Strategien bilden die „visuelle Hierarchie“.

Innerhalb dieser Hierarchie ist die wichtigste Information, wo die Augen Ihrer Besucher zuerst auf der Seite landen, und dann die zweitwichtigste Information, wo ihre Augen als nächstes landen und so weiter. Ohne es zu merken, ordnen sie diese Elemente aufgrund von Unterschieden mental von entscheidend zu unnötig.

Lesen von Stilen im und außerhalb des Webs

Sehen wir uns nun das Experiment des Münchner Direktmarketing-Verbandes an, bei dem die Probanden in nur 11 Sekunden entscheiden, ob sie einen Werbebrief wegwerfen oder lesen. Aufgrund von Designunterschieden konnten sie so schnell eine Entscheidung treffen.

Zuerst sprangen ihre Augen auf die ihrer Meinung nach wichtigsten Informationen auf der Seite: Schlagzeilen und Fotos. Als nächstes zogen Bildunterschriften, Aufzählungslisten und kurze Absätze die Aufmerksamkeit auf sich. Lange, unformatierte Kopien wurden, wenn überhaupt, zuletzt verdaut.

Seitdem haben zahlreiche Studien die Ergebnisse bestätigt, insbesondere die Forschung der Nielsen Norman Group, die das „F-förmige Muster“ hervorbrachte. Nachdem die Gruppe den Blick von 232 Probanden auf Tausenden von Webseiten verfolgt hatte, fand die Gruppe:

• Die ersten Benutzer lesen oben auf der Seite und erstellen den oberen horizontalen Balken der „F“-Form.
• Dann gehen die Leute die Seite weiter nach unten und lesen die Zwischenüberschriften, um den unteren horizontalen Balken des „F“ zu bilden.
• Schließlich scannen Benutzer die linke Seite nach unten und bilden den vertikalen Stamm des „F“.

Es sah ungefähr so ​​aus:

Der Name „F-förmig“ ist jedoch ein wenig irreführend. Wie die Forscher erklären, sind die Lesemuster der Internetnutzer nicht immer so sauber:

Offensichtlich bestehen die Scanmuster der Benutzer nicht immer aus genau drei Teilen. Manchmal lesen Benutzer einen dritten Teil des Inhalts, wodurch das Muster eher wie ein E als ein F aussieht. Andere Male werden sie nur einmal gelesen, wodurch das Muster wie ein umgekehrtes L aussieht (mit dem Querbalken oben). . Im Allgemeinen ähneln Lesemuster jedoch ungefähr einem F, obwohl der Abstand zwischen dem oberen und unteren Balken variiert.

Unabhängig davon, ob es sich um ein „F“, ein „L“, ein „E“ oder sogar ein „Z-förmiges“ Muster für weniger textlastige Seiten handelt, die Implikationen sind die gleichen: Englisch sprechende Personen lesen von links nach rechts und von oben nach unten, während Sie nach Inhaltsunterschieden suchen. Überschriften, Zwischenüberschriften, Bilder, fett gedruckte Wörter, Bildunterschriften, Listen – dies sind Elemente, die sich vom unformatierten Standardtext unterscheiden.

Schauen Sie sich die folgenden Mock-Seiten an:

Sie enthalten keine eigentlichen Wörter, aber Sie können wahrscheinlich das rechte mental besser organisieren als das linke. Der rechte trägt dem F-Muster-Lesestil Rechnung, während der linke seinen Inhalt nicht in einer visuellen Hierarchie organisiert.

Aus der Forschung wissen wir bereits, dass Textblöcke wie die auf der linken Seite selten gelesen werden. Wie stellen Sie also sicher, dass Ihre es tut?

Design mit Unterschieden im Hinterkopf

Bevor Sie mit dem Erstellen einer visuellen Hierarchie beginnen, benötigen Sie ein Ziel, sagt Peep Laja von CXL:

Sie sollten Elemente auf Ihrer Website basierend auf Ihrem Geschäftsziel einstufen. Wenn Sie kein bestimmtes Ziel haben, können Sie nicht wissen, was Sie priorisieren sollen.

Er verwendet einen Screenshot einer Williams Sonoma-Homepage, um zu demonstrieren:

Der größte Hingucker ist das riesige Stück Fleisch (das will ich machen), gefolgt von der Überschrift (sag was es ist) und dem Call-to-Action-Button (Hol es!). Der vierte Platz geht an einen Textabschnitt unter der Überschrift, der fünfte ist das kostenlose Versandbanner und die Top-Navigation an letzter Stelle. Dies ist eine gut gemachte visuelle Hierarchie.

Auf Ihrer Post-Click-Landingpage sollte es jedoch kein Navigationsmenü geben. Die Aufmerksamkeit wird also etwas anders gelenkt. Werfen wir einen Blick auf eine Post-Click-Landingpage von Simply Measured:

Wo sind deine Augen zuerst gelandet? Nächste? Zuletzt? Wenn wir raten müssten, würden wir sagen…

1. Die Überschrift: „So treffen Sie Entscheidungen im Social Marketing schneller.“
2. Die Zwischenüberschrift: „Lernen Sie, wie Sie Zeit sparen und wie ein Profi aussehen.“
3. Der fettgedruckte Text: „In dieser Anleitung erfahren Sie, wie Sie…“
4. Die Kopie mit Aufzählungszeichen unter dem fett gedruckten Text.
5. Der Call-to-Action: „Senden“.

Dies ist ein Beispiel für eine großartige visuelle Hierarchie, da sie Informationen in der für Besucher relevantesten Reihenfolge vermittelt. Zum einen kommunizieren Headline und Subheadline nutzenorientiert den USP des Angebots. Interessenten verstehen sofort, dass sie mit dem Angebot auf dieser Seite schneller lernen, soziale Entscheidungen zu treffen.

Danach, wenn sie die linke Seite der Seite im typischen F-Muster nach unten scannen, bemerken die Besucher den fettgedruckten Text, der sie zu der Aufzählungsliste führt, die genau beschreibt, was sie mit der Inanspruchnahme des Angebots erreichen können.

Schließlich scannen potenzielle Kunden etwas weiter unten und dann über die Seite, wo sie den Call-to-Action-Button sehen, der anders als die restlichen Elemente auf der Seite eingefärbt wurde, um Aufmerksamkeit zu erregen. Es zeigt ihnen, wie sie ihr Angebot in Anspruch nehmen können.

Der Fließtext wird möglicherweise vollständig gelesen, nachdem diese drei Elemente fixiert sind, aber möglicherweise nicht – deshalb ist es wichtig, Ihre wichtigsten Informationen hervorzuheben. In dieser Reihenfolge sollte Ihre visuelle Hierarchie mindestens:

1. Machen Sie mit einer Überschrift auf sich aufmerksam und teilen Sie Ihren Besuchern mit, warum sie den Rest Ihrer Seite lesen sollten.
2. Erläutern Sie kurz die Vorteile Ihres Angebots mit fett gedruckten Wörtern, Aufzählungszeichen und kleinen Absätzen.
3. Zeigen Sie ihnen mit einem Call-to-Action, wie sie das Angebot in Anspruch nehmen können.

Wie genau macht man das mit Designelementen? Sie wissen, dass „anders“ Aufmerksamkeit erregt, was wiederum Bedeutung vermittelt – aber welche Gestaltungselemente sollten Sie verwenden, wenn Sie eine visuelle Hierarchie erstellen?

Die Merkmale, die sich auf die visuelle Hierarchie auswirken

Laut dem freiberuflichen Designer und Autor Steven Bradley können fünf Merkmale manipuliert werden, um eine visuelle Hierarchie auf Ihrer Seite zu bilden:

• Größe – Wie Sie erwarten würden, haben größere Elemente mehr Gewicht
• Farbe – Der Grund dafür ist nicht vollständig geklärt, aber einige Farben werden als schwerer wahrgenommen als andere. Rot scheint am schwersten zu sein, während Gelb am hellsten zu sein scheint.
• Dichte – Das Packen von mehr Elementen in einen bestimmten Raum verleiht diesem Raum mehr Gewicht
• Wert — Ein dunkleres Objekt hat mehr Gewicht als ein helleres Objekt
• Leerraum – Positiver Raum wiegt mehr als negativer Raum oder Leerraum

Der Grad, in dem Sie diese Elemente auf Ihrer Post-Click-Landingpage verwenden, beeinflusst, wo die Augen Ihrer Besucher landen. So erstellen Sie Ihre visuelle Hierarchie:

• Größe: Ihre Überschrift sollte der größte Text auf Ihrer Seite sein. Wenn Sie eine haben, sollte die Unterüberschrift die zweitgrößte sein. Kleiner sollten die Zwischenüberschriften sein, die Sie verwenden, um Inhalte zu trennen, wenn Ihre Seite lang ist, und die kleinste sollte der unformatierte Fließtext sein.

• Farbe: Dieses Element ist für Ihren Call-to-Action am wichtigsten. Das Farbschema spielt eine große Rolle bei der Führung Ihres Besuchers zu Ihrem Button. Der Schlüssel hier ist der Kontrast. Beachten Sie, dass auf der Post-Click-Landingpage von Simply Measured die Farbe Orange nur einmal auf einer hauptsächlich blau-weißen Seite vorkommt. Das macht den CTA-Button für den Besucher überaus auffällig.

• Dichte: Schauen Sie noch einmal auf der Williams-Sonoma-Seite nach. Die Überschrift und der Call-to-Action werden beide über das vorgestellte Bild gelegt. Durch das Packen all dieser Elemente auf so kleinem Raum haben die Designer mehr Aufmerksamkeit darauf gelenkt als das Menü oder das Banner oben.

• Wert: Fett gedruckte Wörter ziehen mehr Aufmerksamkeit auf sich als unformatierte. Ihre Überschrift, Unterüberschrift und Ihr Fließtext, der die Vorteile Ihres Angebots vorstellt, sollten mehr Wert haben als der Rest des Textes auf Ihrer Seite.

• Leerraum: Erinnern Sie sich noch einmal an die Ergebnisse der Studie des Münchner Direktmarketing-Verbandes – einer der größten Aufmerksamkeitstreiber sind kleine Absätze. Wenn Sie Ihren Text in Abschnitte mit maximal drei Sätzen „aufteilen“, können Sie ihn nicht nur aufmerksamer machen, sondern auch leichter lesen und behalten.

Lesen Sie Ihre wichtigsten Informationen

Die visuelle Hierarchie hilft Besuchern, die Informationen auf Ihrer Post-Click-Landingpage zu priorisieren. Bringen Sie Ihre Besucher zum Konvertieren, indem Sie eine erstellen, die:

• Betont Ihren USP in der Überschrift
• Vermittelt die Vorteile Ihres Angebots im Fließtext
• Lassen Sie potenzielle Kunden wissen, wie Sie Ihr Angebot mit Ihrem CTA-Button beanspruchen können

Beginnen Sie schnell und einfach mit der Gestaltung Ihrer visuellen Hierarchie und melden Sie sich noch heute für eine Instapage Enterprise-Demo an.