Share
Idag ska vi undersöka "F Pattern Layout". I stället för att försöka tvinga betraktarens visuella flöde, lägger F-Layout in på de flesta websurfars naturliga beteenden och det använder vetenskapliga studier för att säkerhetskopiera det. Denna handledning kommer att gå igenom principerna för F-Layout, varför det fungerar och hur du kan skapa din egen.
Att uppnå bättre förståelse för hur olika layouter kan ändra användarbeteende är en av de centrala principerna för att skapa en effektiv användarupplevelse.
Denna post markerar den andra i en serie där vi ska undersöka det stora utbudet av layoutparadigmer som finns i världen av webbdesign. Målet: För att bättre förstå varför du kanske väljer ett layoutkoncept över en annan. I den här serien tittar vi också på den "Z" -formade layouten, den öppna layouten och några ur lådans layouter som säkert ger dig några bra idéer. Att uppnå bättre förståelse för hur olika layouter kan ändra användarbeteende är en av de centrala principerna för att skapa en effektiv användarupplevelse.
F-Layout är beroende av olika eyetrackingstudier för det grundläggande konceptet. Dessa vetenskapliga studier visar att websurfare läser skärmen i ett "F" -mönster - se toppen, övre vänstra hörnet och vänstra sidor på skärmen mest ... bara enstaka ögonblick mot skärmens högra sida. Dessa eyetrackingstudier argumenterar för att placera de viktigaste delarna av din webbplats (branding, navigation, call to action) på vänster sida av designen.
Låt oss ta en titt på en värmekarta med Webdesigntuts + som exempel:
Denna värmekarta visar abstrakt F-form som användarens generella gravitation mot. Hot spots (röd / orange / gul) representerar var användarens uppmärksamhet längs längst. Låt mig gå igenom det allmänna beteendemönstret:
Låt oss ta en stund att vända det här mönstret till en rakbenad trådram:
Ta en stund att märka några viktiga beteendemönster. Läsning görs i stor utsträckning på samma sätt som en bok läses: topp till botten, vänster mot höger; Sidofältets innehåll avvisas ofta under "fold", och brukar bara skannas kort. Huvuddelen av uppmärksamheten stannar kvar i huvudinnehållskolumnen, där i detta fall artikeln finns.
En noggrann inspektion visar en visuell hierarki som du logiskt kan förvänta dig:
Låt oss gå som en övning genom att skapa en design med F-Layout. Låt oss först skicka ut den grova placeringen av våra huvudinnehållselement med hjälp av en wireframe-metod:
Observera att vi försöker göra vårt primära "uppdragsinfordran" så nära toppen av sidan som möjligt i ett försök att kommunicera webbplatsens syfte snabbt. Vi ger också in till besökarnas önskan att "skanna" innehåll genom att bryta vår design till två huvudkolumner ... en för vårt primära innehåll, det andra för tillhörande information (sidofältet).
Låt oss sedan lägga till ett visst innehåll till designen för att se hur det ser ut:
Det är grovt, men de viktigaste ingredienserna finns där. Du kommer märka att huvudsyftet med webbplatsen nu kommuniceras inom några sekunder ... den översta raden av innehåll uppfyller nu den skyldighet att "orientera" besökaren; Om din navigering är här, vet de också var de kan gå.
Nedanför den övre raden använder vi bilder och "catchy" rubriker för att fånga en surfers uppmärksamhet ... även om de bara är intresserade av att skanna innehållet, finns det en bra chans att de kommer att kunna hitta något av intresse.
Vi försöker också att kapitalisera på andra raden av "F" genom att placera en annons eller "call to action" här (# 4).
Låt oss nu lägga över den ursprungliga F-layouten för att se hur vi matchar:
Inte dåligt rätt? Vi kanske vill tinker med detaljerna (styling, frasering av rubrikerna etc.), men för det mesta tillåter vi att F-mönsterskanningsbeteendet dikterar vårt design.
En sak att notera här är att höjden på var och en av de två raderna ovanpå "F" kan vara variabel. Vissa designers kan välja att lämna dem så tunna som möjligt för att uppmuntra användare att börja skanna direkt. andra kan välja att göra den till en mycket mer dominerande del av designen.
Vad händer när du vill bryta surferen ur "skanningsmönstret" men? Du kan verkligen inte dra nytta av en uttråkad användare om de börjar tråkiga allting, så låt oss lägga till ett "besvärligt" element inom skanningsområdet för att hålla användaren intresserad.
Denna teknik för att "bryta förväntningarna" av layouten kan vara användbar när du har riktigt långa vertikala spänningar av innehåll som känns tråkiga eller tråkiga när du rullar förbi de första parrubrikerna. Genom att kasta betraktaren en curveball kan du hålla användarna rörliga runt din webbplats genom att ge visuellt intressanta element 1000, 2000, till och med 3000 pixlar under veckan.
F-Layout fungerar eftersom det gör det möjligt för websurfare att skanna innehåll naturligt. Layouten känns bekväm eftersom människor har läst uppifrån och ned, vänster till höger för hela livet. Implikationerna av detta beteendemönster är något av ett dubbelkantigt svärd men:
Om det här låter som om du utformar en webbplats mer som en annonsör skulle än en designer, skulle du ha rätt. De flesta webbplatser som är starka beroende på F-Layout är också beroende av reklam eller andra "call to action" -platser i sidofältet för att driva intäkter eller något annat användarengagemang. Det här är inte nödvändigtvis en dålig sak (hej, är de annonserna där borta i vårt sidofält ?!), men det understryker förhållandet mellan innehållet och sidofältet ... innehållet är kung, sidobaret är vanligtvis där för att få dig inblandad i något som tar dig till en annan nivå.
Så vad betyder detta för ett sidofält? Ett effektivt förhållande mellan innehållskolumn och sidofältet i en design kommer att använda sidofältet på ett av två sätt:
Så vilken kom först? Var F-Layout utformad som svar på scanningssidor för personer i F-mönstret, eller började surfare på webben skanna sidor i F-mönstret som svar på så många webbplatser som utformades på så sätt ... Min personliga gissning är att det är en lite av båda. Ja, folk har alltid läst topp till botten, åt vänster mot höger; men förekomsten av 2-kolonnens webbplatslayout uppmuntrar verkligen webbplatsbesökare att skanna hur de gör det.
Det enkla faktumet är att F-Pattern stöds av forskning, så oavsett om du vill att din layout ska följa nära eller inte, är det värt att åtminstone överväga hur besökare ska reagera på din webbplats om de föredrar att "F-scan" webben.
Okej, så innan jag faktiskt listar dessa är det värt att säga att nästan alla webbsidor på den traditionella 2-kolonnens blogglayout använder en "F-Pattern" -layout, så det är nästan för förutsägbart att visa dig fler webbplatser som använder standarden F-mönster.
Vad vi är kommer att titta på i dessa exempel är hur var och en av dessa mönster utmärker sig vid att manipulera F-mönstrets ögonflöde ... märker att de mest effektiva mönster är de som förutser F-mönsterskanningsbeteendet och använder sedan det till deras fördel.
DesignSnack.com berättar inte bara vad de handlar om högst upp på "F", de får dig faktiskt involverad innan du ens börjar rulla. 
LAtimes.com-webbplatsen är en av mina favoritblad. Du kommer att vilja märka hur mycket de "bryter layoutförväntningarna" när du börjar rulla ner. 
Kickstarter levererar ett effektivt uppdragsdeklaration högst upp, men de bryter från formen genom att döda sidofältet helt i favör för ren skanning och god godhet under veckan. 
Phototuts (eller någon av platserna på Tuts + -nätverket) är starkt beroende av F-mönstret ögonflöde. Ta reda på det där sidofältet där borta. Är det tråkigt? Nej ... varje sidobar widget innehåller lite anpassad design som håller den intressant och relevant. Åh, och notera hur skannbart rubrikerna är ... ibland är ett enkelt, rakt framåtmönster det bästa sättet. 
CollegeHumor kan vara den sista platsen du tänker på för en formell designlektion, men ta en bra hård titt på deras första sida. De lägger den på THICK i toppen av F-porten ... så mycket att du kanske kallar det här FFFFF-layouten. Skälet till detta är enkelt: Om du inte kan slå en användares önskan att snabbt skumma över ditt innehåll på jakt efter någonting tantalizing, kan du också gå med dem. 
GigaOm är en annan webbplats som utmärker sig vid "bryta layoutförväntningarna". När du besöker webbplatsen bläddrar du ner för att se hur de levererar intressant innehåll hela vägen till sidfoten. 
SquareSpaces produktturné visar att du inte behöver ha sidofältet på högra sidan. Faktum är att du kan utnyttja det faktum att användarna kommer att gravida mot F-stången genom att placera en undernavigering där. 
Jag har sparat CreativeSessions för sist eftersom de gör något helt annat. De använder i huvudsak den övre delen av F som en stor teaser (märker att det inte finns någon branding eller ett meddelande där uppe). Genom att göra detta uppmanar de dig att faktiskt läsa vad som ligger under veckan. Det finns nackdelar med att förlita sig för mycket på "F-Pattern" som din designgrund. För en, kan design som håller sig för nära till F-layouten känna sig tråkig och förutsägbar ... för att bekämpa detta måste du som designer skapa en viss innovationsnivå vid bordet. Väl utformade sidobar widgets, catchy rubriker och engagerande bilder är alla användbara knep, men du kommer sannolikt vilja ta det ett steg längre.
När du dyker upp under de två främsta raderna av "F" blir det ofta en utmaning för en designer att hålla sakerna intressanta. Jag har funnit att många designers säljer de bästa 600px-platserna till sina kunder ... det här är bra och bra (det är det besökarna först ser), men lektionerna i F-layouten är att det är också viktigt att hålla saker intressant när du börjar rulla ner.
Precis som en sång som har ett jämnt slag kan ge dig huvudvärk kan en sida ofta bli tråkig och repetitiv om du inte stör om att kasta in ett intressant element nu och igen. Att bryta rytmen i en design genom att begränsa repetitiva element är en viktig teknik som du vill utforma till dina webbplatser för att få ditt arbete till nästa nivå.
Var noga med att kolla in "Z-Layout" -posten också!
Har du egna tankar eller kommentarer? Dela dem nedanför!
Accentsconagua