Share
Das Z-Layout ist eine großartige Möglichkeit, um mit jedem Webdesign-Projekt zu beginnen, da es die Kernanforderungen für effektive Websites erfüllt: Branding, Hierarchie, Struktur und Handlungsaufforderung. Während das klassische "Z-Layout" nicht die perfekte Lösung für jede einzelne Website ist, ist es sicherlich ein Layout, das effektiv genug ist, um in das Arsenal von Layoutern eines Webdesigners aufgenommen zu werden.
Ein besseres Verständnis dafür, wie unterschiedliche Layouts das Nutzerverhalten verändern können, ist eine der zentralen Prinzipien für die Schaffung einer effektiven Benutzererfahrung.
Dieser Beitrag ist der erste einer Reihe, in der wir die Vielfalt der Layout-Paradigmen untersuchen werden, die in der Welt des Webdesigns vorhanden sind. Das Ziel: besser verstehen Warum Möglicherweise wählen Sie ein Layoutkonzept aus. In dieser Serie werden wir auch das "F" -förmige Muster, das offene Layout und einige Out-of-the-Box-Layouts betrachten, die Ihnen sicherlich gute Ideen geben werden. Ein besseres Verständnis dafür, wie unterschiedliche Layouts das Nutzerverhalten ändern können, ist eine der zentralen Prinzipien für die Schaffung einer effektiven Benutzererfahrung.
Die Prämisse des Z-Layouts ist eigentlich ziemlich einfach: Den Buchstaben Z auf der Seite überlagern. Platzieren Sie die Elemente, die der Leser zuerst sehen soll, am oberen Rand des Z. Das Auge folgt natürlich dem Pfad des Z, daher ist es das Ziel, Ihren "Aufruf zum Handeln" am Ende zu platzieren. Auf dem gesamten Pfad können Sie Informationen einschließen, die sich auf den Aufruf zur Aktion aufbauen. Schauen wir uns das Diagramm an:
Beachten Sie, dass wir die wichtigsten Punkte entlang des Pfads nummeriert haben. Diese geben die Reihenfolge an, in der ein Leser den Seiteninhalt wahrscheinlich sehen wird. Mal sehen, wie dies in ein tatsächliches Layout übersetzt wird:
Lassen Sie uns nun das Z-Diagramm über das Layout legen:
Einfach, richtig? Dieses Layout ist sicherlich nicht kompliziert - aber es verlagert das Auge schnell und effektiv in einer logischen Reihenfolge von Punkt 1 zu Punkt 4 und endet mit einem starken Aufruf zum Handeln. Es gibt jedoch noch ein paar Dinge, die wir tun können, um dieses Layout aufzupeppen ... also fügen wir dem Design ein paar Dinge hinzu:
Hier sehen Sie, dass der neue "Anmelden" -Button in der Navigation mehr hervorsticht; Der "Slider", den wir im Leaderboard-Bereich hinzugefügt haben, hilft, die Aufmerksamkeit des Benutzers in der Bildmitte zu halten. Die 2 Symbole neben den Inhaltsblöcken in Punkt 3 helfen auch, diese visuell interessanter zu machen. Auch hier ist das so einfach, wie es sein kann, aber einfach kann gut sein, wenn es um das Design von Websites geht! Sie können beliebig vielschichtigere Ebenen erstellen, ohne dabei die Möglichkeiten eines einfachen, effektiven Layouts zu übersehen.
Das Z-Layout muss nicht unbedingt die endgültige konkrete Lösung für alle Standorte sein, aber wie ich bereits erwähnt habe, ist es oft ein toller Ausgangspunkt für jedes Designprojekt, da es die 4 der großen Prinzipien eines effektiven Designs aufgreift:
Es funktioniert, weil die meisten westlichen Leser eine Site auf dieselbe Weise scannen, als würden sie ein Buch scannen - von oben nach unten, von links nach rechts. Von diesem einfachen Fundament aus können Sie fast überall hingehen: Fügen Sie der Aktion mehrere Aufrufe hinzu, verkleinern Sie die Höhe des Z, erweitern Sie es, und machen Sie, was immer Sie möchten, was für das Ziel der Site sinnvoll ist.
Werfen wir einen Blick auf einige großartige Site-Designs, die das Z-Layout als Grundstruktur verwenden. In diesen Beispielen sollten Sie beachten, wie sich das Z-Layout anpassen kann. Der Aufruf zum Handeln ist möglicherweise nicht immer derselbe (einige Websites möchten Sie möglicherweise mehr zu ihrem Portfolio bringen, als Sie möchten, um sich anzumelden "Anmelden"); Der Inhalt entlang des Pfads kann sich deutlich von unserem Beispiel unterscheiden. Zu beachten ist, wie der Storytelling-Aspekt übertragen wird: 1, 2, 3, Action! Durch Bewegen des Auges entlang des Z-Pfads wird die Wahrscheinlichkeit erhöht, dass ein Betrachter das tut, was er möchte.
Versuchen Sie, während Sie diese Beispiele anzeigen, den Z-Pfad zu finden, dem der Designer folgen soll.
Evernote sieht auf den ersten Blick komplex aus, aber bei näherer Betrachtung zeigt sich ein Z-Pfad, der mit der Schaltfläche "Download" endet. 
Die Website von Daina Reed ist viel einfacher und liefert ein paar schnelle Informationen. Anschließend wird eine Aktion "Get in Touch" angezeigt. 
Der Pfad in CodeMonkey beginnt beim Logo und endet bei "Erste Schritte".. 
Aufgrund der Duo-Chrom-Palette ist es hier etwas schwieriger zu sehen, aber das Z-Layout bildet den allgemeinen Rahmen. 
Dieses Beispiel endet mit einem hellen, fetten Preis. 
Wahrscheinlich eine der klarsten Anwendungen des Z-Layouts. Das Blue Acorn-Design trifft jeden Punkt entlang des Pfads. 
Das Design von Campaign Monitor vermischt das Layout, aber die Schritte 1, 2, 3, 4 sind alle intakt. Es ist wichtig zu wissen, dass das Z-Layout nicht das einzige Layout-Paradigma ist, das es gibt. Es gibt ungefähr so viele Layouts wie Buchstaben im Alphabet. Das Z-Layout ist eines der wichtigsten Layouts, da es so einfach als Grundlage zu verwenden ist. Sie sollten jedoch immer Ihrem Instinkt vertrauen, wenn Sie eine endgültige Layoutentscheidung treffen möchten.
… Unabhängig von einem bestimmten Layout-Design betrachten Betrachter eher zuerst die größten, hellsten und kontrastreichsten Elemente auf einer Seite.
Es gibt eine Reihe interessanter Studien zum Eyetracking, die darauf schließen lassen, dass der Versuch, Augenbewegungen auf einer Website vorherzusagen, so unberechenbar ist wie das Senden von 1.000 Kindern in einen Süßwarenladen. Mehrere Studien haben auch gezeigt, dass das "F" -förmige Layout (das wir als nächstes in dieser Serie besprechen werden) bei der Steuerung der Augenbewegung eines Betrachters über eine Seite wirksamer ist. Die einfache Wahrheit ist, dass Zuschauer unabhängig von einem bestimmten Layoutdesign eher zuerst die größten, hellsten und am stärksten kontrastierenden Elemente auf einer Seite betrachten. Behalte dies im Kopf; Wenn Sie einen Zuschauer durch das Z-Layout führen möchten, sollten Sie ihm nicht mehr Gelegenheit geben, auf dem Weg abgelenkt zu werden, als dies bereits der Fall ist.
Wo das Z-Layout wirklich strahlt, sind Designprojekte, bei denen Einfachheit und Handlungsaufforderung die wichtigsten Prinzipien sind. Der Versuch, ein Z-Layout für eine komplizierte Inhaltsstruktur zu erzwingen, wird wahrscheinlich nicht gut funktionieren, aber wenn Sie das Z-Muster so gestalten, dass ein Rahmen für eine sehr einfache Website gebildet wird, kann dies zu einer gewissen Ordnung führen, die die Conversion-Rate erhöht.
Überprüfen Sie den "F" -förmigen Musterpfosten!
Oh! Sehen Sie sich hier eine Liste der Lagervorlagen an, die das Z-Layout verwenden.
Accentsconagua