Share
Vandaag gaan we de "F-patroonlay-out" bekijken. In plaats van de visuele stroom van de kijker te forceren, geeft de F-Layout toe aan het natuurlijke gedrag van de meeste internetgebruikers en gebruikt het wetenschappelijke studies om het te ondersteunen. In deze tutorial leer je de principes van de F-Layout, waarom het werkt en hoe je je eigen kunt maken.
Een beter begrip van hoe verschillende lay-outs het gebruikersgedrag kunnen veranderen, is een van de centrale principes voor het creëren van een effectieve gebruikerservaring.
Dit bericht markeert de tweede in een serie waarin we de grote verscheidenheid aan lay-outparadigma's in de wereld van webdesign zullen onderzoeken. Het doel: beter begrijpen waarom u het ene lay-outconcept boven het andere zou kunnen kiezen. In deze serie kijken we ook naar de "Z" -vormige lay-out, de open lay-out en enkele out-of-the-box-lay-outs die u ongetwijfeld geweldige ideeën zullen geven. Een beter begrip van hoe verschillende lay-outs het gebruikersgedrag kunnen veranderen, is een van de centrale principes bij het creëren van een effectieve gebruikerservaring.
De F-Layout vertrouwt op verschillende eyetracking-onderzoeken voor zijn fundamentele concept. Deze wetenschappelijke onderzoeken tonen aan dat websurfers het scherm in een "F" -patroon lezen - de linkerboven-, linker- en linkerkant van het scherm het meest ... slechts af en toe kijkt men naar de rechterkant van het scherm. Deze eyetracking-onderzoeken pleiten voor het plaatsen van de belangrijkste elementen van uw site (branding, navigatie, call-to-action) aan de linkerkant van het ontwerp.
Laten we een kijkje nemen naar een heatmap met Webdesigntuts + als voorbeeld:
Deze heatmap toont de abstracte F-vorm die de algemene aantrekkingskracht van de gebruiker is. Hotspots (rood / oranje / geel) geven aan waar de aandacht van de gebruiker het langst blijft hangen. Laat me je door het algemene gedragspatroon leiden:
Laten we een moment nemen om van dit patroon een barebones-draadframe te maken:
Neem even de tijd om enkele belangrijke gedragspatronen op te merken; Lezen gebeurt grotendeels op dezelfde manier als een boek wordt gelezen: van boven naar beneden, van links naar rechts; Zijbalkinhoud wordt vaak afgedaan onder de "vouw" en wordt meestal slechts kort gescand. Het grootste deel van de aandacht blijft binnen de kolom met hoofdinhoud, waar in dit geval de artikelvermelding zich bevindt.
Een nadere inspectie onthult een visuele hiërarchie die u logischerwijs kunt verwachten:
Laten we als oefening eens een ontwerp maken met behulp van de F-Layout. Laten we eerst de ruwe plaatsing van onze belangrijkste inhoudselementen schetsen met behulp van een wireframe-methode:
Merk op dat we proberen onze primaire 'mission statement' zo dicht mogelijk bij de bovenkant van de pagina te houden in een poging om het doel van de site snel te communiceren. We geven ook toe aan de wens van de bezoekers om inhoud te "scannen" door ons ontwerp in twee hoofdkolommen te splitsen ... één voor onze primaire inhoud, de andere voor aanvullende informatie (de zijbalk).
Laten we vervolgens een paar echte inhoud toevoegen aan het ontwerp om te zien hoe het eruit ziet:
Het is ruig, maar de belangrijkste ingrediënten zijn er. U zult merken dat de belangrijkste bedoeling van de site nu binnen enkele seconden wordt gecommuniceerd ... de bovenste rij inhoud voldoet nu aan zijn taak om de bezoeker te "oriënteren"; Als je navigatiesysteem hier is, weten ze ook waar ze naartoe kunnen gaan.
Onder de bovenste rij gebruiken we afbeeldingen en 'pakkende' koppen om de aandacht van een surfer te trekken ... zelfs als ze alleen geïnteresseerd zijn in het scannen van de inhoud, is de kans groot dat ze iets interessants kunnen vinden.
We proberen ook te profiteren van de tweede rij van de "F" door hier een advertentie of "call to action" te plaatsen (# 4).
Laten we nu de oorspronkelijke F-layout overlappen om te zien hoe we overeenkomen:
Niet slecht toch? Misschien willen we sleutelen aan de details (styling, frasering van de krantenkoppen, enz.), Maar voor het grootste deel laten we het F-patroon-scangedrag ons ontwerp dicteren.
Een ding om op te merken is dat de hoogte van elk van de twee rijen op de top van de "F" variabel kan zijn. Sommige ontwerpers kiezen er misschien voor om ze zo dun mogelijk te laten om gebruikers aan te moedigen meteen te beginnen met scannen; anderen zouden ervoor kunnen kiezen om er een veel dominanter deel van het ontwerp van te maken.
Wat gebeurt er als je de surfer uit het "scanpatroon" wilt breken? Je hebt zeker geen baat bij een verveelde gebruiker als ze alles beginnen te verdoven, dus laten we een "lastig" element toevoegen in het scangebied om de gebruiker geïnteresseerd te houden.
Deze techniek van 'het verbreken van de verwachtingen' van de lay-out kan handig zijn wanneer je echt lange verticale spantages hebt van content die saai of saai aanvoelen als je voorbij de eerste paar headlines bladert. Door de kijker een curveball te geven, kunt u de gebruikers op uw site laten bewegen door visueel interessante elementen 1000, 2000, zelfs 3000 pixels onder de vouw te bieden.
De F-Layout werkt omdat het web-surfers toelaat om inhoud op natuurlijke wijze te scannen. De lay-out voelt comfortabel aan omdat mensen hun hele leven van boven naar beneden, van links naar rechts hebben gelezen. De implicaties van dit gedragspatroon zijn echter iets van een tweesnijdend zwaard:
Als dit allemaal klinkt alsof u een site ontwerpt die meer lijkt op een adverteerder dan een ontwerper, heeft u gelijk. De meeste sites die sterk afhankelijk zijn van de F-layout, vertrouwen ook op advertenties of andere "call-to-actions" -hellingen in de zijbalk om de omzet te verhogen of een ander soort gebruikersbetrokkenheid. Dit is niet noodzakelijk een slechte zaak (hey, zijn die advertenties daar op onze zijbalk ?!), maar het onderstreept wel de relatie tussen de inhoud en de zijbalk ... de inhoud is koning, de zijbalk is er meestal om je te betrekken in iets dat je naar een ander niveau brengt.
Wat betekent dit voor een zijbalk? Een effectieve relatie tussen inhoudskolom en zijbalkkolom in een ontwerp gebruikt de zijbalk op twee manieren:
Dus wat was er eerst? Werd de F-Layout ontworpen als reactie op mensen die sites in het F-patroon scanden, of begonnen web-surfers pagina's in het F-patroon te scannen als reactie op zoveel sites die op die manier werden ontworpen ... Mijn persoonlijke gok is dat het een een beetje van beide. Ja, mensen hebben altijd van boven naar beneden, van links naar rechts gelezen; maar de prevalentie van de sitelay-out met 2 kolommen moedigt websitebezoekers zeker aan om te scannen op de manier waarop ze dat doen.
Het simpele feit is dat het F-patroon wordt ondersteund door onderzoek, dus of je wilt dat je lay-out er nauw aansluit, het is de moeite waard om op zijn minst te overwegen hoe bezoekers op je site reageren als ze de voorkeur geven aan "F-scan" het web.
Ok, dus voordat ik deze in de lijst zet, is het de moeite waard om te zeggen dat vrijwel elke website-instelling op de traditionele tweekoloms bloglayout een "F-patroon" -lay-out gebruikt, dus het is bijna te voorspelbaar om u meer sites te laten zien die de standaard gebruiken F-pattern.
Wat we zijn In deze voorbeelden gaat het erom hoe elk van deze ontwerpen uitblinkt in het manipuleren van de F-patroon in de ooghoek ... merk op dat de meest effectieve ontwerpen die zijn die anticiperen op het F-patroon-scangedrag en het vervolgens in hun voordeel gebruiken.
DesignSnack.com vertelt u niet alleen waar het bij de top van de "F" om draait, ze zorgen ervoor dat u erbij betrokken raakt voordat u zelfs maar gaat scrollen. 
De website LAtimes.com is een van mijn favoriete krantenwebsites. Je zult willen merken hoezeer ze "de verwachtingen ten aanzien van de lay-out breken" wanneer je eenmaal naar beneden scrolt. 
Kickstarter levert een effectieve missieverklaring bovenaan, maar ze breken uit de mal door de zijbalk volledig in het voordeel te duwen voor pure scan-alicious goedheid onder de vouw. 
Phototuts (of een van de sites op het Tuts + netwerk) vertrouwt sterk op de F-patroon oogstroom. Let daar op die zijbalk. Is het saai? Nee ... elke sidebar-widget bevat een beetje aangepast ontwerp dat het interessant en relevant houdt. Oh, en merk op hoe scannable de krantenkoppen zijn ... soms is een eenvoudig, rechttoe rechtaan ontwerppatroon de beste aanpak. 
CollegeHumor is misschien wel de laatste plaats waar je aan denkt voor een formele ontwerples, maar kijk goed naar hun voorpagina. Ze leggen het op DIK in de top van het F-gedeelte ... zozeer zelfs dat je dit de FFFFF-lay-out zou kunnen noemen. De redenering hiervoor is simpel: als je het verlangen van een gebruiker om snel over je inhoud te bladeren op zoek naar iets verleidelijkers niet kunt verslaan, kun je net zo goed meedoen. 
GigaOm is een andere site die uitblinkt in "het overtreden van de lay-outverwachtingen". Terwijl je de site bezoekt, scrol je naar beneden om te zien hoe ze interessante inhoud tot in het voettekstgedeelte opleveren. 
Met de productrondleiding van SquareSpace hoeft u de zijbalk niet aan de rechterkant te plaatsen ... u kunt zelfs profiteren van het feit dat gebruikers naar de stam van de F zullen neigen door er een subnavigatie te plaatsen. 
Ik heb CreativeSessions als laatste bewaard, omdat ze iets heel anders doen. Ze gebruiken het bovenste gedeelte van de F in essentie als een enorme teaser (merk op dat er geen branding of bericht is). Door dit te doen moedigen ze je aan om daadwerkelijk te lezen wat zich onder de vouw bevindt. Er zijn nadelen aan het te zwaar steunen op het "F-patroon" als basis voor uw ontwerp. Ten eerste kunnen ontwerpen die te dicht bij de F-layout blijven, saai en voorspelbaar aanvoelen ... om dit te bestrijden, moet u als ontwerper een bepaald niveau van innovatie naar de tafel brengen. Goed ontworpen sidebar-widgets, pakkende koppen en boeiende afbeeldingen zijn allemaal handige trucs, maar je zult waarschijnlijk een stap verder willen gaan.
Zodra je onder de bovenste twee rijen van de "F" duikt, wordt het vaak een uitdaging voor een ontwerper om dingen interessant te houden. Ik heb gemerkt dat veel ontwerpers de top 600px van een site aan hun klanten verkopen ... dit is allemaal goed en goed (het is wat bezoekers eerst zien), maar de lessen van de F-layout zijn dat het ook belangrijk is om dingen te bewaren interessant als je begint naar beneden te scrollen.
Net zoals een nummer met een vaste beat je misschien hoofdpijn bezorgt, kan een pagina vaak saai en repetitief worden als je af en toe niet eens een interessant element in de wacht sleept. Het ritme van een ontwerp doorbreken door herhalende elementen te beperken, is een cruciale techniek die je in je sites wilt ontwerpen om je werk naar een hoger niveau te brengen.
Bekijk ook zeker de "Z-Layout" -post!
Heb je eigen gedachten of opmerkingen? Deel ze hieronder!
Accentsconagua