Share
Als Webdesigner folgen wir vielen Design-Paradigmen und Layout-Prinzipien: Raster, vertikale Konsistenz, F-Layout, Z-Layout, Drittelregel, Golden-Ratio und so weiter. Die Beachtung dieser Prinzipien führt zu einem optisch ansprechenden und funktionalen Design. Lassen Sie uns nun die einfache Unterteilung einer Seite in zwei gleiche Hälften betrachten.
Obwohl dies anfangs ein bisschen dumm und offensichtlich erscheint, kann dieses grundlegende Layout sehr effektiv sein. Unsere Augen neigen dazu, einer Zick-Zack-Bewegung zu folgen, während sie durch eine Seite laufen. Wenn das Auge einer horizontal geraden Linie folgt - wie im Z-Layout - konzentriert es sich (oder versucht es). Da 90% des Webverkehrs, der auf Ihre Website kommt, keine eingehende Aufmerksamkeit auf Ihre Seite legt, zahlt es sich definitiv aus, wenn Sie Ihr Design "hautfreundlich" gestalten.
Aus den Augenverfolgungsstudien von Yahoo!
Webbenutzer haben es immer eilig. Sie haben andere Dinge zu tun, und die Schönheit und Ästhetik Ihrer Website zu schätzen, ist das Letzte, was Sie von ihnen erwarten können. Auch wenn gutes Design von großer Bedeutung ist, inspiriert es den Besucher jedoch nicht völlig, Maßnahmen zu ergreifen - indem Sie auf die Schaltfläche "Jetzt kaufen" oder "Mehr wissen" klicken.
Wir können sie nicht beschuldigen. Erinnern Sie sich noch daran, wann Sie etwas nachschlagen wollten? Sie stürmen zum ersten Suchergebnis in Google und können dann schnell die gesamte Seite durchblättern. Meistens scrollen Sie sogar ganz nach unten, ohne viel Aufmerksamkeit zu erregen. Wenn Sie nach dieser Phase entscheiden, dass die Seite Ihre Zeit wert ist, scrollen Sie nach oben und nehmen sich dann die eigentliche Anstrengung, um zu lesen und aufmerksam zu sein.
Was ist der Zweck des ersten Skimmings? Um die größtmögliche Information zu erhalten, können Sie sich auf einen ersten Blick über die Seite informieren. Wenn wir dieses Skimming-Muster irgendwie "kodifizieren", sollten wir in der Lage sein, die Aufmerksamkeit von mehr Besuchern zu erregen. Aus Beobachtungen auf Heatmaps verschiedener Standorte habe ich eine gemeinsame Tendenz festgestellt.
Sie werden feststellen, dass Sie die roten Punkte mühelos betrachten können. Aus unserer Erfahrung können wir seltsamerweise sagen, dass unsere Augen eher den geraden als den winkligen folgen sollten - da wir in geraden Linien lesen. Ich spreche von der anfänglichen Skimming-Phase und nicht von dem Teil, in dem Sie auf jedes Detail der Website achten.
Wenn Sie nicht viel Aufmerksamkeit auf sich ziehen, ist dies die natürliche Tendenz Ihrer Augen - der Zick-Zack. Wenn es nicht Elemente gibt, die einen stärkeren Kontrast und ein größeres Gewicht haben, die Sie ansprechen, würden Sie wahrscheinlich dem obigen Muster folgen. Sie werden auch bemerken, dass dieses Muster dem F-Layout ähnelt und die roten Endpunkte die Stelle sind, an der Benutzer eine kurze Pause einlegen.
Bei diesen kurzzeitigen Pausenpunkten wird eine Momentaufnahme von Ihrem Gehirn aufgenommen. In einem Zick-Zack-Layout mit Elementen, die wichtige Informationen an den „Pause-Spots“ enthalten, absorbiert das Gehirn auf natürliche Weise mehr Details, da es jeden Zick-Zack-Endpunkt als separate Elemente verbindet.
Design ist nicht nur, wie es aussieht und sich anfühlt. Design funktioniert so. -Steve Jobs
Sie können diese Funktion des Half-Split-Layouts (z. B.) verwenden, um Ihre Work Portfolio-Vorschauen oder die wichtigen Funktionen Ihres Produkts oder Services effektiv zu positionieren, damit Besucher schnell darauf aufmerksam werden. Dies führt letztendlich dazu, dass sie länger auf Ihrer Website bleiben und somit zum Handeln aufgefordert werden. Das Ergebnis? Bessere Conversion-Raten für Sie und eine bessere Benutzererfahrung für sie.
Es ist sehr einfach, Design und Layout „Zick-Zack-kompatibel“ zu machen. Tatsächlich ist es so einfach, Ihre Seite in zwei gleiche Hälften zu teilen! Die gleichen Hälften funktionieren gut, weil die Zickzack-Endpunkte mehr oder weniger zur Mitte dieser Hälften ausgerichtet sind. Überlagert eingesetzt, passen sie gut zusammen. Platzieren Sie wichtige Elemente an den roten Endpunktpositionen des Zickzacks Ihrer Seite. Dies ist das Grundkonzept des Half Split oder 1/2-Layouts.
Vor kurzem arbeitete ich an einer Landing Page "Coming Soon". Ich habe mit verschiedenen Layouts experimentiert, aber nichts hat gut funktioniert. Ich habe alles versucht - Gitter, Goldener Schnitt, F-Layout. Der Eureka-Moment kam, als ich die Seite einfach in zwei gleiche Hälften geteilt habe. Die Lösung war so einfach! Es sah elegant und ordentlich aus und erinnerte mich an die wichtige Tatsache, dass einfach nicht unbedingt schlecht ist. Haben Sie das neue Microsoft-Logo gesehen??
Einfachheit ist die entscheidende Kultiviertheit. -Leonardo Da Vinci
Sie können sehen, wie die Hälften eine schöne visuelle Hierarchie ergeben. Zuerst wird das rote Band "Coming Soon" oben bemerkt. Als Nächstes wird das Logo angezeigt. Nach dem Zig-Zag, das ich bereits erwähnt habe, schaut sich der Besucher den Bildschieberegler in der rechten Hälfte und schließlich das E-Mail-Formular an.
Lassen Sie uns nun sehen, wie gut das Split-Layout für eine Portfolio-Seite eines Web Designers funktioniert. Das Ziel einer Galerie-Seite in einem Portfolio besteht darin, potenziellen Kunden schnell Arbeit zu zeigen. Es gibt viele Möglichkeiten für sie, da diese Branche derzeit ziemlich gesättigt ist. Warum sollten sie dich bezahlen? Wenn Sie einen guten ersten Eindruck machen, können Sie die Waage in Ihre Richtung lenken. Mal sehen, was wir dagegen tun können.
Das obige Layout ist in zwei Hälften unterteilt, aber es folgt nicht dem Zick-Zack-Prinzip, das ich zuvor erwähnt habe.
Es scheint zwar ein gutes Layout und schont die Augen, aber nach den ersten beiden Elementen wird es ziemlich langweilig. Das Brechen des Flusses, um das visuelle Interesse zu erhöhen, wird helfen. Nicht nur das; Wenn Sie jedoch versuchen, das obige Layout zu überfliegen, sollten Ihre Augen das erste Bild sehen und dann zum Text des zweiten Elements springen. Da Ihre Besucher in dieser Phase nicht die Absicht haben zu lesen, springen sie an einen anderen Punkt oder verlassen Ihre Website vollständig!
Was wäre, wenn Sie so eine einfache Änderung vorgenommen hätten?
Viel interessanter, richtig? Durch einfaches Vertauschen der Positionen des Textes und des Bildes jedes Elements wird das visuelle Interesse erhöht, sodass die Besucher sich nicht langweilen. Sie können auch eine Aktionstaste nach dem Zick-Zag-Muster aufrufen.
Die Schaltfläche "Kontaktieren Sie mich" hat jetzt eine größere Wahrscheinlichkeit, von anderen Besuchern auf Sie aufmerksam zu werden (warum nicht einen A / B-Test durchführen, um das zu überprüfen?)
Design ist ein Plan, um Elemente so anzuordnen, dass sie einen bestimmten Zweck am besten erfüllen. -Charles Eames
Das Split-Layout ist mit dem neuen Timeline-Design von Facebook ins Rampenlicht getreten. Beachten Sie, wie Ihre Augen leicht von einem Posten zum anderen „fließen“.
Auch Apple folgt dem Split-Layout. Hier ist die iPad Mini-Seite. Wie einfach ist es, jedes Bild als separate Funktionen des iPad Mini zu verknüpfen? Es fühlt sich einfach richtig an.
Microsoft hat mit der kürzlich erfolgten Umbenennung viele neue Wege beschritten, hier auf der Surface-Infoseite nach einem geteilten Layout.
Stacey ist eine minimalistische Darstellung des 1/2-Layouts.
Ich liebe Quoras Homepage. Kann das Split-Layout einfacher demonstriert werden??
Consumerbarometer.com bringt es mit Animationen und einer dreieckigen Variante des Zig-Zag auf die nächste Ebene.
Was haben wir gelernt??
Dieser Artikel ist nur eine sanfte Erinnerung daran, dass die Verwendung grundlegender Layouts und grundlegender Entwurfsmethoden niemals vergessen werden sollte. In der Tat kann es Ihre Konversionsraten erhöhen, wenn es richtig verwendet wird.
Accentsconagua