Muster landingpage

Viele SaaS-Zielseiten folgen diesem Muster, um ihre Apps über die wichtigsten Vorteile zu kommunizieren. Hootsuite verwendet ein F-Muster auf ihrer Zielseite, um die wichtigsten Elemente (über der Falte) hervorzuheben: Genau wie F-Muster muss das Z-Muster kein exaktes Z-Muster sein. Die horizontalen Linien müssen nicht genau horizontal sein – sie können auch abgewinkelt werden. Darüber hinaus können mehrere Z es auf der gesamten Seite vorhanden sein. Stellen Sie einfach sicher: BigCommerce verwendet auch das F-Muster auf ihrer Zielseite (über der Falte): Wenn wir das selbst sagen, ist diese aktuelle Landing Page unserer Marke großartig zu zeigen, nicht zu erzählen. Wir waren alle dabei, Websites zu verlangsamen und sofort wegzunavigieren – aber was bedeutet das für Vermarkter? Sicher, wir könnten mit einem Haufen Text erklären, aber die Animation auf der rechten Seite dieser Seite macht wirklich deutlich, warum schnell ladende Landing Pages ein Muss sind. Das Design dieser Zielseite folgt einem effektiven F-Muster – und es ist schwer, die Augen von der abfallenden Conversion-Rate in der Animation zu nehmen. Die drei oben abgebildeten Heatmaps sind von User Eye-Tracking-Studien von drei verschiedenen Websites abgeleitet. Erwähnenswert ist auch, dass das F-Muster nicht einem strengen horizontalen Muster mit zwei Stielen folgen muss (siehe Heatmap rechts oben). Wenn Sie die wichtigsten Landing Page-Elemente entlang der natürlichen Augenpfade der Besucher platzieren, ob in einem F- oder Z-Muster, stellen Sie sicher, dass Sie ein ansprechendes Zielblatterlebnis erstellen. Beachten Sie den Mangel an visueller Hierarchie – es folgt weder einem F- noch einem Z-Muster – was das Generieren von Conversions erschwert. Denken Sie darüber nach: Wenn Sie auf diese Seite kämen, würden Sie konvertieren? Wissen Sie überhaupt, worauf Sie sich bekehren sollen, was das Angebot ist, und ist es Ihnen sofort bekannt? Was würden Sie tun, um die Hierarchie und das Gesamtlayout zu korrigieren? Letztlich geht es bei Design aber darum, menschenaufihre Ziele zu lenken. F- und Z-Muster sind ohne Zweifel mächtige Werkzeuge, aber noch mächtiger ist die Idee, eine visuelle Hierarchie zu etablieren, um Menschen durch eine Seite zu führen.

Laut Jakob Nielsen scannen Nutzer Webinhalte in einem F-förmigen Muster. Je nachdem, welche Art von Informationen Sie kommunizieren möchten, müssen Sie Ihre Seite möglicherweise so gestalten, dass sie anderen Mustern folgt als nur der F-förmigen. Sowohl die F- als auch die Z-Muster sind sehr gut dokumentiert und wurden von Designern auf Seiten im Internet sehr gut genutzt. In Ermangelung eines anderen absichtlich erzeugten Flusses sind dies die Muster, denen die Augen der Menschen folgen werden. Und das ist äußerst nützliches Wissen, das man beim Zusammenstellen einer Seite haben kann. Aber es stellt sich heraus, dass dies nicht das einzige Muster ist, dem wir folgen. Zum Beispiel: Das Z-Muster-Layout wird in der Regel auf Seiten verwendet, die nicht inhaltsstark sind. Sein Design imitiert die Route, die das menschliche Auge zurücklegt, wenn es liest – von links nach rechts, zickzack von oben nach unten: Das Wichtigste, was man sich hier merken sollte, ist, dass die Augenbewegung des Benutzers oben links beginnt und sich über die Seite bewegt, bevor er die Seite herunterscannt, um nach einem Element zu suchen, das er ansprechend findet.

0