Share
I dag skal vi undersøke "F Pattern Layout". I stedet for å prøve å tvinge seerens visuelle flyt, gir F-Layout den naturlige oppførselen til de fleste web surfere, og den bruker vitenskapelige studier for å sikkerhetskopiere den. Denne opplæringen vil gå deg gjennom prinsippene i F-Layout, hvorfor det fungerer, og hvordan du kan lage din egen.
Å få en bedre forståelse av hvordan ulike oppsett kan endre brukeradferd er en av de sentrale prinsippene for å skape en effektiv brukeropplevelse.
Dette innlegget markerer det andre i en serie der vi skal undersøke det store utvalget av layoutparadigmer som eksisterer i verden av webdesign. Målet: For bedre å forstå hvorfor du kan velge ett layoutkoncept over en annen. I denne serien ser vi også på "Z" -formet layout, det åpne oppsettet, og noen ut av boksoppsettene som sikkert gir deg gode ideer. Å få en bedre forståelse av hvordan ulike oppsett kan endre brukeradferd er en av de sentrale prinsippene for å skape en effektiv brukeropplevelse.
F-Layout er avhengig av ulike eyetracking studier for det grunnleggende konseptet. Disse vitenskapelige undersøkelsene viser at nett surfere leser skjermen i et "F" mønster - se øverste, øvre venstre hjørne og venstre side av skjermen mest ... bare sporadisk å ta blikk mot høyre side av skjermen. Disse eyetrackingstudiene argumenterer for å plassere de viktigste elementene i nettstedet ditt (branding, navigasjon, kall til handling) på venstre side av designen.
La oss ta en titt på en heatmap ved hjelp av Webdesigntuts + som eksempel:
Denne varmekartet viser den abstrakte F-form som brukerens generelle gravitate mot. Hot spots (rød / oransje / gul) representerer hvor brukerens oppmerksomhet er lengst. Tillat meg å gå deg gjennom det generelle oppførselsmønsteret:
La oss ta et øyeblikk for å gjøre dette mønsteret til en barebones wireframe:
Ta deg tid til å legge merke til noen viktige atferdsmønstre; Lesing gjøres stort sett på samme måte som en bok er lest: topp til bunn, venstre til høyre; Sidebarinnholdet blir ofte avvist under "fold", og blir vanligvis bare skannet kort. Hoveddelen av oppmerksomheten forblir i hovedinnholds-kolonnen der i dette tilfellet artikkellisten er plassert.
En nær inspeksjon avslører et visuelt hierarki som du logisk kan forvente:
Som en øvelse, la oss gå gjennom utformingen av et design ved hjelp av F-Layout. Først, la oss skisse ut den grove plasseringen av våre hovedinnholdselementer ved hjelp av en wireframe-metode:
Legg merke til at vi prøver å gjøre vår primære "misjonserklæring" så nær toppen av siden som mulig i et forsøk på å formidle nettstedets formål raskt. Vi gir også inn til de besøkende ønske å "skanne" innhold ved å bryte vårt design inn i to hovedkolonner ... en for vårt primære innhold, det andre for tilleggsinformasjon (sidebaret).
Deretter la vi legge til noe faktisk innhold i designet for å se hvordan det ser ut:
Det er grovt, men de viktigste ingrediensene er der. Du vil legge merke til at hovedintensjonen til nettstedet nå kommuniseres om noen sekunder ... den øverste innholdsruten oppfyller nå sin plikt til å "orientere" besøkende; Hvis navigasjonen din er her, vet de også hvor de kan gå.
Under den øverste raden bruker vi bilder og "fengende" overskrifter for å hente en surfers oppmerksomhet ... selv om de bare er interessert i å skanne innholdet, er det en god sjanse for at de kan finne noe av interesse.
Vi prøver også å kapitalisere på andre rad av "F" ved å plassere en annonse eller "oppfordring til handling" her (# 4).
La oss nå legge over den opprinnelige F-layouten for å se hvordan vi samsvarer med:
Ikke dårlig riktig? Vi ønsker kanskje å tinker med detaljene (styling, frasering av overskriftene, etc.), men for det meste lar vi F-mønsterets skanneadferd dikte ut vårt design.
En ting å merke seg her er at høyden på hver av de to radene på toppen av "F" kan variere. Noen designere kan velge å la dem være så tynne som mulig for å oppmuntre brukerne til å begynne å skanne med en gang; andre kan velge å gjøre det til en mye mer dominerende del av designet.
Hva skjer når du vil bryte surferen ut av "skanningsmønsteret" skjønt? Du får absolutt ingen fordel av en kjedelig bruker hvis de begynner å kaste ut alt, så la oss legge til ett "vanskelig" element i skanneområdet for å holde brukeren interessert.
Denne teknikken for å "bryte forventningene" til oppsettet kan være nyttig når du har veldig lange vertikale spenner av innhold som virker kjedelig eller kjedelig når du ruller forbi de første par overskriftene. Ved å kaste betrakteren en kurveball, kan du holde brukerne bevegelige rundt på nettstedet ved å gi visuelt interessante elementer 1000, 2000, til og med 3000 piksler under folden.
F-Layout fungerer fordi det tillater surfere å skanne innhold naturlig. Oppsettet føles behagelig fordi folk har lest av topp til bunn, venstre til høyre for hele livet. Implikasjonene av dette oppførselsmønsteret er noe av et dobbeltkantet sverd selv om:
Hvis dette hele høres ut som om du designer et nettsted mer som en annonsør ville enn en designer, ville du ha rett. De fleste nettsteder som er avhengige av F-Layout, er også avhengige av annonsering eller andre "call to action" -plasser i sidefeltet for å drive inntekter eller annen form for brukerengasjement. Dette er ikke nødvendigvis en dårlig ting (hei, er de annonsene der borte i vår sidefelt ?!), men det understreker forholdet mellom innholdet og sidebjelken ... innholdet er konge, sidebaret er vanligvis der for å få deg involvert i noe som vil ta deg til et annet nivå.
Så hva betyr dette for et sidebar? Et effektivt forhold mellom innholds kolonne og sidebar kolonne i et design vil bruke sidefeltet på to måter:
Så som kom først? Var F-Layout utformet som svar på folkesøkingssteder i F-Mønsteret, eller startet surfere på nettsiden i F-mønsteret som et svar på så mange nettsteder som ble utformet på den måten ... Min personlige gjetning er at det er en litt av begge deler. Ja, folk har alltid lest topp til bunn, fra venstre til høyre; men utbredelsen av 2-kolonne-webutformingen oppfordrer absolutt besøkende på nettstedet til å skanne måten de gjør.
Det enkle faktum er at F-mønsteret støttes av forskning, så om du vil at layoutet ditt skal være nært, er det verdt å tenke på hvordan besøkende vil reagere på nettstedet ditt hvis de foretrekker å "F-scan" nettet.
Ok, så før jeg faktisk opplister disse, er det verdt å si at omtrent alt nettstedoppsett på den tradisjonelle 2-kolonnebloggoppsettet bruker en "F-Pattern" -layout, så det er nesten forutsigbart å vise deg flere nettsteder som bruker standarden F-mønster.
Hva vi er å se på i disse eksemplene er hvordan hver av disse designene utmerker seg ved å manipulere F-mønster øye-strømmen ... legge merke til at de mest effektive designene er de som forutser F-mønsterets skanneadferd, og deretter bruke det til deres fordel.
DesignSnack.com forteller deg ikke bare hva de handler om på toppen av "F", de får deg faktisk involvert før du selv begynner å rulle. 
LAtimes.com-nettstedet er en av mine favorittbladsider. Du vil legge merke til hvor tungt de "bryter oppsettets forventninger" når du begynner å rulle ned. 
Kickstarter leverer en effektiv oppgaveoppgave på toppen, men de bryter fra formen ved å dytte sidebaret helt til favør for ren skanning-ondsinnet godhet under folden. 
Phototuts (eller noen av nettstedene på Tuts + -nettverket) er sterkt avhengige av F-mønster øyenstrømmen. Legg merke til at sidebar der borte. Er det kjedelig? Nei ... hver sidebar-widget inneholder litt tilpasset design som holder den interessant og relevant. Oh, og merk hvordan skannbare overskriftene er ... noen ganger er et enkelt, rett fremmønstret mønster den beste tilnærmingen. 
CollegeHumor er kanskje det siste stedet du tenker på for en formell designleksjon, men ta en god titt på forsiden. De legger den på THICK i toppen av F-delen ... så mye at du kan kalle dette FFFFF-oppsettet. Begrunnelsen for dette er enkelt: Hvis du ikke kan slå en brukers ønske om å raskt skumme over innholdet ditt på jakt etter noe tantalizing, kan du også delta i dem. 
GigaOm er et annet nettsted som utmerker seg ved å "bryte oppsettets forventninger". Når du besøker nettstedet, blar du ned for å se hvordan de leverer interessant innhold helt ned til bunnteksten. 
SquareSpace's Product Tour viser at du ikke trenger å ha sidebjørnet på høyre side ... Faktisk kan du utnytte det faktum at brukerne vil grave seg mot F-stangen ved å plassere en undernavigasjon der. 
Jeg har reddet CreativeSessions for sist fordi de gjør noe helt annet. De bruker i hovedsak den øverste delen av F som en stor teaser (legg merke til at det ikke er merking eller melding der oppe). Ved å gjøre dette oppfordrer de deg til å faktisk lese hva som er under folden. Det er ulemper å stole for tungt på "F-Pattern" som designfunn. For det første kan design som holder seg tett til F-oppsettet kjedelig og forutsigbart ... For å bekjempe dette, må du som designer lage et visst nivå av innovasjon til bordet. Veldesignede sidebar widgets, fengende overskrifter og engasjerende bilder er alle nyttige triks, men du vil sannsynligvis vil ta det et skritt videre.
Når du dypper under de to øverste radene i "F", blir det ofte en utfordring for en designer å holde ting interessant. Jeg har funnet ut at mange designere selger topp 600px av et nettsted til sine kunder ... dette er alt bra og bra (det er det som besøkende ser først), men leksjonene i F-layout er at det også er viktig å holde ting interessant som du begynner å rulle nedover.
Akkurat som en sang som har en jevn takt kan gi deg hodepine, kan en side ofte bli kjedelig og repeterende dersom du ikke bryter med å kaste inn et interessant element nå og igjen. Å bryte rytmen til et design ved å begrense repeterende elementer er en avgjørende teknikk som du vil designe inn i nettstedene dine for å bringe arbeidet ditt til neste nivå.
Husk å sjekke ut posten "Z-Layout" også!
Har du egne tanker eller kommentarer? Del dem ned nedenfor!
Accentsconagua