Share
Heute werden wir das "F Pattern Layout" untersuchen. Anstatt zu versuchen, den visuellen Fluss des Betrachters zu erzwingen, gibt das F-Layout dem natürlichen Verhalten der meisten Web-Surfer nach, und es stützt sich auf wissenschaftliche Studien. Dieses Tutorial führt Sie durch die Grundlagen des F-Layouts, warum es funktioniert und wie Sie Ihr eigenes erstellen können.
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 zweite einer Serie, in der wir die Vielfalt der Layout-Paradigmen untersuchen werden, die in der Welt des Webdesigns vorhanden sind. Das Ziel: besser zu verstehen, warum Sie ein Layoutkonzept einem anderen vorziehen. In dieser Serie werden wir auch das Z-förmige Layout, 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.
Das F-Layout stützt sich bei seinem Gründungskonzept auf verschiedene Eyetracking-Studien. Diese wissenschaftlichen Studien zeigen, dass Web-Surfer den Bildschirm in einem "F" -Muster lesen - die oberen, oberen linken und linken Seiten des Bildschirms am meisten sehen ... nur gelegentlich einen Blick in Richtung der rechten Seite des Bildschirms. Diese Eyetracking-Studien sprechen sich dafür aus, die wichtigsten Elemente Ihrer Website (Branding, Navigation, Aufruf zum Handeln) auf der linken Seite des Designs zu platzieren.
Werfen wir einen Blick auf eine Heatmap mit Webdesigntuts + als Beispiel:
Diese Heatmap zeigt die abstrakte F-Form, auf die sich der Benutzer allgemein hingezogen fühlt. Hot Spots (rot / orange / gelb) zeigen an, wo die Aufmerksamkeit des Benutzers am längsten bleibt. Gestatten Sie mir, Sie durch das allgemeine Verhaltensmuster zu führen:
Nehmen wir uns einen Moment Zeit, um dieses Muster in ein Drahtgitter mit Barebones zu verwandeln:
Nehmen Sie sich einen Moment Zeit, um einige wichtige Verhaltensmuster festzustellen. Das Lesen geschieht weitgehend auf dieselbe Weise, wie ein Buch gelesen wird: von oben nach unten, von links nach rechts; Sidebar-Inhalte werden häufig unterhalb der "Falte" abgewiesen und in der Regel nur kurz gescannt. Der Hauptteil der Aufmerksamkeit bleibt in der Hauptinhaltsspalte, in der sich in diesem Fall die Artikelliste befindet.
Eine genaue Prüfung zeigt eine visuelle Hierarchie, die Sie logischerweise erwarten könnten:
Lassen Sie uns als Übung die Erstellung eines Designs mit dem F-Layout durchgehen. Lassen Sie uns zunächst die grobe Platzierung unserer Hauptinhaltselemente mit einer Drahtmodellmethode skizzieren:
Beachten Sie, dass wir versuchen, unser primäres "Mission Statement" so nahe wie möglich an den oberen Rand der Seite zu bringen, um den Zweck der Site schnell zu kommunizieren. Wir geben auch dem Wunsch der Besucher nach, Inhalte zu "scannen", indem wir unser Design in zwei Hauptspalten unterteilen ... eine für unseren primären Inhalt, die andere für Zusatzinformationen (die Seitenleiste)..
Als Nächstes fügen wir dem Design einige tatsächliche Inhalte hinzu, um zu sehen, wie es aussieht:
Es ist rau, aber die wichtigsten Zutaten sind da. Sie werden feststellen, dass die Hauptabsicht der Website jetzt innerhalb weniger Sekunden kommuniziert wird. Die oberste Zeile des Inhalts erfüllt nun die Pflicht, den Besucher "zu orientieren". Wenn Ihre Navigation hier ist, wissen sie auch, wohin sie gehen können.
Unter der obersten Reihe verwenden wir Bilder und "eingängige" Schlagzeilen, um die Aufmerksamkeit eines Surfers zu gewinnen. Selbst wenn sie nur daran interessiert sind, den Inhalt zu scannen, besteht eine gute Chance, dass sie etwas Interessantes finden.
Wir versuchen auch, die zweite Reihe des "F" zu nutzen, indem wir hier eine Anzeige oder einen "Aufruf zum Handeln" platzieren (# 4)..
Lassen Sie uns nun das ursprüngliche F-Layout überlagern, um zu sehen, wie wir zusammenpassen:
Nicht schlecht, richtig? Vielleicht möchten wir uns mit den Details beschäftigen (Styling, Phrasierung der Überschriften usw.), aber größtenteils lassen wir zu, dass das F-Muster-Scanning-Verhalten unser Design bestimmt.
Hierbei ist zu beachten, dass die Höhe jeder der beiden Reihen über dem "F" variabel sein kann. Einige Designer entscheiden sich möglicherweise dafür, sie so dünn wie möglich zu halten, um Benutzer zu ermutigen, sofort mit dem Scannen zu beginnen. andere entscheiden sich möglicherweise dafür, es zu einem viel dominanteren Teil des Designs zu machen.
Was passiert, wenn Sie den Surfer aus dem "Scanmuster" herausbrechen wollen? Sicherlich profitieren Sie nicht von einem gelangweilten Benutzer, wenn er anfängt, alles abzuschwächen. Fügen Sie also ein "umständliches" Element im Scanbereich hinzu, um den Benutzer zu interessieren.
Diese Technik des "Brechens der Erwartungen" des Layouts kann nützlich sein, wenn Sie sehr lange vertikale Inhaltsbereiche haben, die sich langweilig oder langweilig anfühlen, wenn Sie an den ersten Überschriften vorbei blättern. Wenn Sie dem Betrachter einen kurvenreichen Ball werfen, können Sie die Benutzer auf Ihrer Website bewegen, indem Sie visuell interessante Elemente 1000, 2000 und sogar 3000 Pixel unterhalb der Falte bereitstellen.
Das F-Layout funktioniert, weil es Web-Surfern erlaubt, Inhalte auf natürliche Weise zu scannen. Das Layout fühlt sich angenehm an, weil die Menschen ihr ganzes Leben lang von links nach rechts gelesen haben. Die Auswirkungen dieses Verhaltensmusters sind jedoch etwas zweischneidiges Schwert:
Wenn das alles so klingt, als würden Sie eine Website eher so gestalten, als wäre ein Werbetreibender ein Designer, dann hätten Sie Recht. Die meisten Sites, die stark auf das F-Layout angewiesen sind, sind auch auf Werbung oder andere "Call-to-Action" -Pitchings in der Seitenleiste angewiesen, um Einnahmen oder eine andere Art der Einbindung von Benutzern zu erzielen. Das ist nicht unbedingt eine schlechte Sache (hey, gibt es diese Anzeigen dort in unserer Seitenleiste ?!), aber es unterstreicht die Beziehung zwischen Inhalt und Seitenleiste… der Inhalt ist König, die Seitenleiste ist normalerweise dazu da, um Sie einzubeziehen in etwas, das Sie auf eine andere Ebene bringt.
Was bedeutet das für eine Sidebar? Eine effektive Beziehung zwischen Inhaltsspalte und Sidebar-Spalte in einem Design verwendet die Seitenleiste auf zwei Arten:
Also was kam zuerst? Wurde das F-Layout als Reaktion auf das Scannen von Websites im F-Pattern entwickelt, oder haben Web-Surfer damit begonnen, Seiten im F-Pattern zu scannen, als Reaktion auf so viele Sites, die auf diese Weise entworfen wurden ... Meine persönliche Vermutung ist, dass es sich um ein wenig von beiden. Ja, die Leute haben immer von oben nach unten und von links nach rechts gelesen. Die Verbreitung des zweispaltigen Website-Layouts ermutigt jedoch die Besucher der Website, ihre Art und Weise zu scannen.
Die einfache Tatsache ist, dass das F-Pattern durch Nachforschungen unterstützt wird. Wenn Sie also möchten, dass sich Ihr Layout eng an das Layout anpasst, sollten Sie zumindest darüber nachdenken, wie Besucher auf Ihre Website reagieren, wenn sie "F-Scan" bevorzugen. das Netz.
Bevor ich diese tatsächlich aufliste, lohnt es sich zu erwähnen, dass fast alle Websites, die im traditionellen 2-Spalten-Layout eines Blogs verwendet werden, ein "F-Pattern" -Layout verwenden. Daher ist es fast zu vorhersehbar, um mehr Websites anzuzeigen, die den Standard verwenden F-Muster.
Was wir sind In diesen Beispielen wird gezeigt, wie sich jedes dieser Designs beim Manipulieren des F-Muster-Augenflusses hervorhebt. Beachten Sie, dass die effektivsten Designs diejenigen sind, die das F-Muster-Scanning-Verhalten vorwegnehmen und dann zu ihrem Vorteil nutzen.
DesignSnack.com sagt Ihnen nicht nur, worauf es bei den "F" ankommt, sondern bringt Sie auch dazu, bevor Sie überhaupt scrollen. 
Die Website LAtimes.com ist eine meiner bevorzugten Zeitungsseiten. Sie möchten feststellen, wie stark sie die Layouterwartungen durchbrechen, sobald Sie mit dem Scrollen nach unten beginnen. 
Kickstarter liefert ein wirkungsvolles Leitbild an der Spitze, aber sie brechen aus der Gussform, indem sie die Seitenleiste vollständig zugunsten reiner Scan-alicious-Güte unter der Falte weglegen. 
Phototuts (oder eine der Sites im Tuts + -Netzwerk) hängen stark vom Augenfluss des F-Musters ab. Beachten Sie diese Seitenleiste dort. Ist es langweilig? Nein… jedes Sidebar-Widget enthält ein wenig benutzerdefiniertes Design, das es interessant und relevant macht. Oh, und beachten Sie, wie scannbar die Überschriften sind. Manchmal ist ein einfaches, geradliniges Entwurfsmuster der beste Ansatz. 
CollegeHumor ist vielleicht der letzte Ort, an den Sie sich für eine formale Designstunde erinnern, aber werfen Sie einen guten Blick auf die Titelseite. Sie legen es auf THICK im oberen Teil des F-Anteils ... so sehr, dass Sie dies als FFFFF-Layout bezeichnen könnten. Die Begründung dafür ist einfach: Wenn Sie den Wunsch eines Benutzers, Ihren Inhalt auf der Suche nach etwas Verlockendem schnell zu überfliegen, nicht übertreffen können, können Sie ihm auch beitreten. 
GigaOm ist eine weitere Website, die sich durch "das Brechen der Layout-Erwartungen" auszeichnet. Scrollen Sie beim Besuch der Website nach unten, um zu sehen, wie sie interessante Inhalte bis hin zur Fußzeile liefern. 
Die Produkttour von SquareSpace zeigt, dass Sie die Sidebar nicht auf der rechten Seite benötigen. Tatsächlich können Sie die Tatsache nutzen, dass die Benutzer zum Stamm der F tendieren, indem Sie dort eine Unternavigation platzieren. 
Ich habe CreativeSessions zum letzten Mal gespeichert, weil sie etwas völlig anderes machen. Sie verwenden im Wesentlichen den oberen Teil des F als großen Teaser (beachten Sie, dass dort oben kein Branding oder keine Nachricht vorhanden ist). Auf diese Weise ermutigen Sie Sie, tatsächlich zu lesen, was sich unterhalb der Falte befindet. Es hat Nachteile, sich zu sehr auf das "F-Muster" als Designgrundlage zu verlassen. Zum einen können sich Designs, die zu nah am F-Layout bleiben, langweilig und vorhersehbar anfühlen. Um dies zu verhindern, müssen Sie als Designer ein gewisses Maß an Innovation auf den Tisch bringen. Gut entworfene Sidebar-Widgets, eingängige Überschriften und ansprechende Bilder sind alles nützliche Tricks, aber Sie möchten wahrscheinlich noch einen Schritt weiter gehen.
Wenn Sie unter die ersten beiden Reihen des "F" tauchen, wird es für einen Designer oft eine Herausforderung, die Dinge interessant zu halten. Ich habe festgestellt, dass viele Designer die besten 600px einer Website an ihre Kunden verkaufen. Dies ist alles in Ordnung und gut (es ist das, was die Besucher zuerst sehen), aber die Lehren des F-Layouts sind, dass es auch wichtig ist, Dinge zu behalten interessant, wenn Sie nach unten scrollen.
Genauso wie ein Song mit einem gleichmäßigen Beat Kopfschmerzen verursachen kann, kann eine Seite oft langweilig und repetitiv werden, wenn Sie nicht ab und zu ein interessantes Element einsetzen. Den Rhythmus eines Designs zu brechen, indem Sie sich wiederholende Elemente einschränken, ist eine wichtige Technik, die Sie in Ihre Websites integrieren möchten, um Ihre Arbeit auf die nächste Stufe zu bringen.
Schauen Sie sich auch den Beitrag "Z-Layout" an!
Hast du deine eigenen Gedanken oder Kommentare? Teilen Sie sie weiter unten!
Accentsconagua