Muster webseiten

Die Lyft-Zielseite zeigt ein gutes Beispiel für das Z-Muster: Denken Sie daran, dass diese Augenbewegungen subjektiv sind und nicht alle Benutzer Seiten auf die gleiche Weise scannen. Das Wichtigste, was Sie sich merken sollten, ist, dass Ihre Zuschauer sich auf den Weg konzentrieren, dem sie folgen sollen, und sie davon zu überzeugen, auf Ihrem CTA zu konvertieren. Das Gute, das Schlechte und das Hässliche des UI-Designs. UI Scraps ist ein großartiger Blog, der das Interface-Design als Ganzes betrachtet und dann an den verwendeten Mustern bastelt. Sie können einige tolle Arbeit hier und einige wirklich schreckliche Sachen zu finden; es ist alles gründlich kritisiert, so dass Sie sehen können, warum etwas nicht funktioniert zu. Beachten Sie, dass das F-Reading-Muster eher eine grobe, generalisierte Kontur ist – nicht unbedingt eine exakte F-Form. Beachten Sie auch, dass sich das F-Pattern-Design nicht auf zwei horizontale Stiele wie eine traditionelle F-Post-Click-Zielseiten beschränkt, wie Webseiten, sollte immer einer Art organisierter visueller Hierarchie folgen. Die Chancen stehen gut, das wissen Sie schon, aber es trägt eine Wiederholung. Alles, was Sie tun können, um Ihre Zuschauer zu beeinflussen, sich auf das zu konzentrieren, was Sie bemerken möchten, ist so ziemlich der Name des Spiels. 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: Es ist wichtig zu beachten, dass Z-Pattern-Designs nicht benötigt werden, um einer traditionellen Z-Form zu entsprechen, und die Anzahl der Z-Winkel entlang des Musters kann variieren. Eine schöne Sammlung aller Zutaten, die Sie brauchen, um eine Website zu “backen”.

NPM ist eine große Quelle der Inspiration und viele der Muster hier sind sehr gut in der Tat. Am Ende können Sie das Z-Muster verwenden, um Besucher dazu zu bringen, sich auf Elemente zu konzentrieren, die sie dazu bringen, sich dem Conversion-Ziel anzunähern. Nutzen Sie die Macht der visuellen Hierarchie auf Ihren Zielseiten, um sicherzustellen, dass Besucher Ihre Nachricht absorbieren und die Aktionen ausführen, die sie ausführen sollen. Denken Sie daran, für kürzere Post-Click-Zielseiten haben wir die gesamte Seite angezeigt. Für längere Seiten haben wir nur über der Falte angezeigt. Darüber hinaus können einige der aufgeführten Marken A/B-Tests ihrer Seite mit einer alternativen Version als der unten angezeigten sein. Diese CallFire-Post-Click-Seite ist ein weiteres Beispiel, das kein traditionelles Z bildet, aber das Muster ist immer noch offensichtlich: Das Platzieren der wichtigsten Landing Page-Elemente entlang der natürlichen Augenpfade der Besucher, ob in einem F- oder Z-Muster, stellt sicher, dass Sie ein ansprechendes Zielblatterlebnis erstellen.