So verwenden Sie das F-Muster, um die Conversions zu steigern

Es ist wichtig, Ihre Post-Click-Landingpage so zu erstellen, dass sie alle wichtigen Post-Click-Landingpage-Elemente enthält, aber ebenso wichtig ist ihre Reihenfolge und Position – das Layout Ihrer Post-Click-Landingpage.

Bei der Gestaltung Ihres Post-Click-Landingpage-Layouts ist es wichtig zu berücksichtigen, wie Ihre Besucher Ihre Seite am wahrscheinlichsten sehen. Unsere Tendenz, von oben nach unten zu lesen, ist ein guter Anfang, um Besucher dazu zu bringen, sich auf das zu konzentrieren, was Sie von ihnen erwarten. Wenn Sie wissen, wohin ihr Blick wahrscheinlich wandert, können Sie eine visuelle Hierarchie erstellen und Ihren CTA an den besten Orten platzieren, an denen sie konvertieren können.

Auch hierfür wurden umfangreiche Untersuchungen durchgeführt. Im Jahr 2006 führte die Nielsen Norman Group eine der bisher nützlichsten und am häufigsten zitierten Eye-Tracking-Studien durch. Während der Studie untersuchten sie, wie 232 Benutzer Tausende verschiedener Webseiten angesehen haben. Die Ergebnisse kamen zu dem Schluss, dass das Hauptleseverhalten der Benutzer über die verschiedenen Websites und Aufgaben hinweg relativ konsistent war. Benutzer lesen in einem F-Muster-Layout.

Was ist das F-Muster?

Das F-Muster ist die Art und Weise, wie sich unsere Augen bewegen, wenn wir Inhalte online lesen. In Sekundenschnelle bewegen sich unsere Augen mit außergewöhnlicher Geschwindigkeit über den Text der Website und andere visuelle Elemente und scannen die Seite in dieser Reihenfolge:

• Zuerst oben auf der Seite, um wichtige Schlagzeilen zu lesen
• Gehen Sie dann auf der linken Seite der Seite nach unten, um Ziffern oder Aufzählungspunkte anzuzeigen.
• Zum Schluss noch einmal quer über die Seite, um fett gedruckten Text oder Zwischenüberschriften zu lesen

Die drei folgenden Heatmaps stammen aus Eye-Tracking-Studien von Benutzern von drei verschiedenen Websites. Der Farbschlüssel lautet wie folgt:

• Rot = meistgesehen und am meisten fixiert
• Gelb = einige Ansichten, aber weniger Fixierung
• Blau = am wenigsten gesehen und kaum Fixierungen
• Grau = kaum Ansichten und keine Fixierungen

Beachten Sie, dass das F-Reading-Muster eher ein grober, verallgemeinerter Umriss ist – nicht unbedingt eine exakte F-Form. Beachten Sie auch, dass sich das F-Pattern-Design nicht auf zwei horizontale Stiele wie ein traditionelles F beschränkt.

Manchmal lesen Benutzer nur über eine horizontale Linie, wodurch das Muster wie ein umgekehrtes L aussieht. Manchmal lesen sie einen dritten Abschnitt der Seite, wodurch das Design eher wie ein E als ein F aussieht. Und , wenn Ihre Post-Klick-Zielseite länger ist, sollten Sie mehr als zwei Stämme einschließen, um eine visuelle Hierarchie zu erstellen, der die Nutzer eher folgen.

Wie das F-Muster auf Post-Click-Landingpages angewendet wird

Es ist wichtig, Webseiten mit einem absichtlichen Fluss zu gestalten. Ohne etwas, das speziell darauf ausgerichtet ist, die Aufmerksamkeit Ihrer Zuschauer zu erregen, bewegen sich ihre Augen auf natürliche Weise über eine inhaltsreiche Seite im F-Pattern-Design.

Das F-Pattern-Design funktioniert am besten für Seiten, die viel Text enthalten – wie Blog-Posts, Suchergebnisseiten, längere Verkaufsseiten usw. Das bedeutet jedoch nicht, dass Sie keine Kurzform-Post-Click-Landingpages mit erstellen können das F-Muster-Layout.

Mit den Erkenntnissen aus Eye-Tracking-Studien können Sie jede Post-Click-Landingpage strategisch so gestalten, dass die wichtigsten Elemente genau dort liegen, wo Ihre Besucher sich am ehesten darauf konzentrieren.

Denken Sie daran, dass die Augen der Betrachter fast immer in der oberen linken Ecke der Seite beginnen, bevor sie den Rest der Seite scannen. Wenn also Ihre Post-Click-Landingpage beschäftigt ist und Sie möchten, dass Besucher ein bestimmtes Element auf Anhieb bemerken – wie einen Countdown für Ihr Angebot – platzieren Sie es in diesem Bereich oben links. Gestalten Sie dann den Rest Ihrer Post-Click-Landingpage mit einer klaren visuellen Hierarchie und einem Flow, der Ihre Zuschauer zu Ihrem CTA führt.

Eine Post-Click-Landingpage, die das F-Muster ignoriert

Pest Exterminator hat diese Post-Click-Landingpage erstellt und folgt nicht dem F-Layout. Es fehlt jegliche visuelle Hierarchie:

Wohin geht Ihre Aufmerksamkeit zuerst? Das Bild? Der Rabatt? Das Ein-Form-Feld? Die drei Angebote ganz unten?

Ihre Augen werden nicht von einem bestimmten Ort angezogen. Es passiert zu viel, um Ihre Aufmerksamkeit in verschiedene Richtungen zu lenken. Jedes Element wurde so formatiert, dass es so viel Aufmerksamkeit wie möglich auf sich zieht, wodurch sie alle miteinander konkurrieren. Daher ist es für Besucher schwierig, das Hauptziel der Seite zu identifizieren, und Pest Exterminator wird wahrscheinlich Schwierigkeiten haben, Conversions zu generieren.

Sehen wir uns nun einige Post-Click-Landingpage-Beispiele an, die dem F-Reading-Muster folgen.

Beachten Sie, dass wir bei kürzeren Post-Click-Landingpages die gesamte Seite angezeigt haben. Bei längeren Seiten haben wir nur "above the fold" angezeigt. Darüber hinaus können einige der aufgeführten Marken A/B-Tests ihrer Seite mit einer alternativen Version als der unten angezeigten durchführen.

Post-Click-Landingpages, die dem F-Layout folgen

Dovico

Die obige Post-Click-Landingpage von Dovico verwendet Best Practices für das Webdesign von F-Pattern. Beachten Sie, wie sich jede wichtige Komponente genau entlang der F-Pattern-Route befindet, auf die Besucher beim Betrachten dieser Seite natürlich hinschauen:

1. Betrachter schauen zuerst in die obere linke Ecke der Seite, wo sie das Firmenlogo entdecken.
2. Entlang des ersten horizontalen Stiels gelangen sie dann zum lächelnden Gesicht der Frau. Besonders interessant ist hier, dass der F-Winkel zu ihrem Gesicht hin abfällt und nicht direkt zu den Telefonnummern führt.
3. Wenn Sie die linke Seite der Seite nach unten zum nächsten horizontalen Stamm bewegen, konzentrieren sich die Zuschauer auf die Überschrift und die Unterüberschrift.
4. Schließlich setzen sie das F-Muster den vertikalen Stamm hinunter fort, wo sie zur CTA-Schaltfläche gelangen, die das Hauptziel der Post-Click-Landingpage ist.

Eine solche Platzierung der wichtigsten Post-Click-Landingpage-Elemente entlang des F-Layouts trägt dazu bei, die Seite von Dovico zu optimieren und Besucher davon zu überzeugen, auf das Angebot zu reagieren.

Dynamischer Ertrag

Die Post-Click-Landingpage von Dynamic Yield folgt ebenfalls dem F-Pattern-Layout, aber da ihr Name und ihr Logo das kleinste Ding über der Falte sind, beginnen die Augen des Betrachters wahrscheinlich an einer anderen Stelle:

1. Sie werden wahrscheinlich zuerst von der Seitenüberschrift angezogen, da die Schrift größer und ein Teil davon fett ist.
2. Als nächstes bewegen sie sich entlang des ersten Stiels zum rechten Bild, wodurch der erste horizontale Stiel vervollständigt wird.
3. Beim Scannen des vertikalen Stiels werden die Zuschauer die Zwischenüberschrift lesen.
4. Weiter unten wird die hellblaue CTA-Schaltfläche wahrscheinlich die Aufmerksamkeit des Besuchers auf sich ziehen.
5. Nach dem CTA-Button fungieren die Kunden-Badges als zusätzlicher Stamm und die Seite wird in ähnlicher Weise unterhalb des Falzes fortgesetzt.

Die gemeinsame Chiropraktik

Da F-Muster-Designs nicht immer einer traditionellen F-Form folgen müssen, beachten Sie, dass die Post-Click-Landingpage von The Joint Chiropractic einige horizontale Stämme hat:

1. Ähnlich wie bei Dynamic Yield beginnt die Überschrift das F-Pattern (und setzt sich rechts mit der Form fort).
2. Zweitens fällt das Leitbild (in größerer Schrift als der Rest der Kopie) auf den nächsten Stamm.
3. Schließlich bilden die Ikonographie und die kühnen Vorteile von The Joint Chiropractic die letzten Stämme des Musters.

Trotz der höheren Anzahl von Stämmen wurde die Seite unter Berücksichtigung der Best Practices für das Webdesign von F-Pattern erstellt – was es den Besuchern erleichtert, mitzumachen und sich auf die wichtigsten Teile der Post-Click-Landingpage zu konzentrieren.

Der Boston Globe

Die Post-Click-Landingpage von Boston Globe folgt keiner typischen F-Form, was ihnen letztendlich hilft, Besucher davon zu überzeugen, bei der Werbeaktion zu konvertieren:

1. Beginnend in der oberen linken Ecke sehen die Besucher zuerst das Logo der Zeitung.
2. Direkt unter dem Logo befindet sich die Überschrift, gefolgt vom Bild entlang desselben horizontalen Stiels.
3. Weiter unten am vertikalen Stiel fixieren sich die Besucher auf die hellgrüne CTA-Schaltfläche.
4. Wenn sie sich entscheiden, weiter unten auf dem vertikalen Stamm fortzufahren, erfahren sie, was sie bei der Anmeldung für den unbegrenzten Zugang erwarten können.

Sie sind an der Reihe, das F-Muster zu verwenden

Das Einbeziehen aller notwendigen Post-Click-Landingpage-Elemente ist für Conversions wichtig, aber ihr Layout ist genauso wichtig.

Das F-Muster-Design hilft Ihnen, eine visuelle Hierarchie und einen bewussten Fluss aufzubauen, damit sich Besucher auf bestimmte Elemente konzentrieren können. Wenn Sie sie dazu bringen können, dem gewünschten Pfad zu folgen, wird es weniger wahrscheinlich, dass sie abspringen und stattdessen engagierter sind und auf Ihrer Seite aktiv werden.

Mit diesen Beispielen im Hinterkopf sind Sie an der Reihe, das F-Layout in die Praxis umzusetzen. Erstellen Sie Ihre eigene professionelle Post-Click-Landingpage mit Instapage, fordern Sie noch heute eine Enterprise-Demo an.