Hvordan øyeskanning påvirker visuelt hierarki i UX Design
Mens tusenvis av kunst, fra greske vaser til italiensk kapell, har formet vår forståelse av hva skjønnhet er, er den relativt nylige teknologien bak øyesporing en ny dynamikk for hvordan vi visuelt oppfatter verden. Mer spennende, denne spennende nye vitenskapen hjelper oss bedre å forstå - og bedre utforme - nettsteder som er både effektive og estetiske.
Webdesign (som visuell kunst) følger mange av de samme reglene som mer tradisjonelle kunstformer. I denne artikkelen skal vi kortfattet skissere betydningen av visuell organisering, og forklare hvordan funnene av øyesporing kan forbedre utformingen av webgrensesnitt.
Opprette visuell organisasjon
Det er ingen overraskelse at hvordan et nettsted ser ut, påvirker suksess, men det er viktig å finne årsakene til hvorfor. I hans papir Kommuniserer med visuelt hierarki , Luke Wroblewski, forfatter og senioransvarlig for produktdesign på Yahoo!, Forklarer at den visuelle presentasjonen av et webgrensesnitt er viktig for:
Veiledning
Et godt laget grensesnitt kan lede brukere fra en handling til den neste uten å føle seg overbærende. Uansett hva du tenker på deres forretningspraksis, er det ingen tvil om at uber er et eksempel på en utrolig jevn, men strukturert nettside. Verdi proposisjoner er øverst på rullen, etterfulgt av en morsom glidebryter for å lære om forskjellige bilalternativer, og etterbehandling med det logiske neste trinnet for å finne ritt i byen din.
Kommunikasjon
Ved å passe ellers i motsetning til deler av informasjon, kan brukergrensesnittet danne koblinger i brukerens sinn, kommunisere meldinger uten å si noe. Se på den populære designwebsiden Abduzeedo : De brede kategoriene er øverst, utvalgt innhold i midten og detaljerte kategorier i bunnteksten.
Å skape følelsesmessig innvirkning
Ikke gjør feilen ved å tenke på nettstedet ditt er bare et mekanisert verktøy. Nettsteder har potensial til å lage følelsesmessige forbindelser, og hvis din ikke gjør det, vil dine konkurrenters vilje. Faktisk kan folk faktisk være mer tilbøyelige til å tilgi grensesnittets mangler hvis du produserer en positiv følelsesmessig respons . MailChimp er et perfekt eksempel på et nettsted med et grensesnitt som er brukbart, lyst og faktisk morsomt å bruke.
Det forutsigbare menneskelige øye
Noen ganger ser det ut til at øynene dine har sinn av seg selv. Evolutionsårene har gitt oss instinkter til å oppdage gjenstander og bevegelser som vi anser viktige, om noen er sexy tur over gaten, eller en koselig tegneserie bjørn reklame honning. Mens den relative vekten vi legger på det som er viktig, kan variere fra person til person, er den ene konstanten mekanismene de oppfører seg på. I stor skala følger flertallet de samme trenderne når de ser på en nettside.
Av disse trendene er det to som vi skal diskutere i detalj. I en artikkel om visuelle prinsipper , Alex Bigman, Design Writer for 99Designs, viser hvordan, for kulturer som leser fra venstre til høyre, er disse to mønstrene de vanligste - og mest nyttige - når du designer et nettsteds layout.
Den første, F-Pattern, brukes mest for tekst (men kan tilpasses til andre formål). Den andre, Z-mønsteret, kan brukes til enhver visuell layout. Vi vil forklare de forskjellige fordeler og ulemper for hvert under.
F-mønster
F-mønsteret er synetrenden som dukker opp på sider som er tungt lastet med tekst, typisk blogger, nyhetskilder, artikler, etc.
Når de står overfor en blokk med ord, vil de fleste lesere først skanne en vertikal linje ned til venstre på teksten, vanligvis etter søkeord eller interessepunkter i avsnittets første setninger. Til slutt finner leseren noe de liker, og begynner å lese normalt, danner horisontale linjer. Sluttresultatet er noe som ser ut som bokstavene F eller E.
Jakob Nielson fra Nielson Norman Group gjennomførte en lesbarhetsstudie basert på 232 brukere som skannet tusenvis av nettsteder. Fra sin forskning registrerte han hva han mener er de praktiske implikasjonene av F-mønsteret:
- Brukere vil sjelden lese hvert ord i teksten.
- De to første avsnittene er de viktigste og bør inneholde kroken din.
- Start avsnitt, underposisjoner og punktpunkter med fristende søkeord.
Som alltid er det øverste venstre hjørnet det viktigste, som det er der alle venstre-til-høyre lesekulturer begynner. Brukeren vil vanligvis lese horisontalt over toppteksten, så her er et bra sted for en navigeringslinje og / eller en oppfordring. Deretter skanner brukeren vertikalt ned til venstre, til de kommer over innhold som interesserer dem. Til slutt slutter brukeren på høyre side av siden, et flott sted med en oppfordring eller reklame. Bare la ikke sidebaret overvelde innholdet.
Men F-mønsteret er ikke en mal - det er egentlig ikke en eksakt praksis, men mer av en løs guide utarbeidet av trenderne til flertallet av brukerne. Vær oppmerksom på dette fordi F-mønsteret mister sin effektivitet etter de øverste rader av F.
Kickstarter bruker et kortoppsett for å vise funksjonsprosjekter og ikke bli visuelt kjedelig etter de første 500 pikslene.
På den andre siden, Izettle tar en mer konvensjonell tilnærming til F-mønsteret på deres hjemmeside. Imidlertid klarer de å unngå et templert utseende ved å legge over primærkopien ("Utvikle bedriften din med iZettle") og oppfordring på et stort bakgrunnsbilde. Vi anser dette som et minimum for å tilpasse dette lesemønsteret til grensesnittoppsettet.
Z-mønster
I tillegg er Z-mønster det enkleste og mest universelle mønsteret, populært brukt på en nettside som er basert på tekst. Leseren skanner først horisontalt over toppen, dart ned og tilbake til venstre, og skanner deretter horisontalt igjen over bunnen.
Det er viktig å forstå det allsidige Z-mønsteret , da den adresserer kjernewebstedkravene som hierarki, merkevarebygging og oppfordringer til handling. Dens skjønnhet er i sin enkelhet, og en ideell utforming for områder som er fokusert rundt en oppfordring. For mer komplisert eller overdreven innhold kan Z-mønsteret imidlertid være for enkelt.
Tror Z-mønsteret er riktig for siden din? Her er noen gode fremgangsmåter for å optimalisere fordelene:
- Bakgrunn - Hold bakgrunnen der den tilhører: i bakgrunnen. Du vil ikke distrahere leseren din.
- Punkt # 1 - Som utgangspunkt er dette generelt hvor du vil plassere logoen.
- Punkt nr. 2 - Mens hovedoppkallingen skal komme senere, er dette et bra sted for en sekundær call-to-action, som skiller mellom en horisontal navigasjonslinje. (En fin grafikk eller bilde skyveknapp hjelper til med å skille mellom toppen og bunnen av siden, og oppfordrer leseren til å holde seg på den forutsigbare banen til Z-Mønsteret.)
- Punkt # 3 - Dette er et fint sted å tiltrekke seg oppmerksomhet for andre lenker, eller alternativt å lede brukerens syn til sluttmål: Punkt 4.
- Punkt nr. 4 - Som "målstrekk" er dette det perfekte stedet for hovedoppkallingen.
Det første du vil gjøre, er å prioritere elementene på siden din for deg selv, slik at du vet de mest og minst viktige. Derfra er det bare et enkelt spørsmål om å tildele dem til de riktige "hot spots".
Dessuten kan Z-mønsteret gjentas og utvides gjennom hele siden. Bare ta en titt på hvordan Evernote zig-zags nedover gjennom call-to-action og salgspoeng.
DropBox tar en visuelt enklere tilnærming til dette zig-zag mønsteret ved å fjerne alle bakgrunnsbilder. I stedet er mer funksjonalitet innebygd i oppsettet, siden en "Lær mer" -oppringning bidrar til å koble hver del av viklingsmønsteret ettersom øyet ditt går nedover på siden. Dette hjelper også informerte lesere til neste relevante side uten å måtte lese hele kopien først.
Sikt i fremsyn
Flott grensesnitt design bør være som en usynlig hånd som styrer leserne sammen med tankens hastighet. Den viktige takeaway fra F-Pattern og Z-Pattern trender er at du kan plassere ditt viktigste innhold der leseren vil "snuble på" det naturlig, i motsetning til å prøve å tvinge dem til å se på dem.
Subtilitet er en stor fordel for et hvilket som helst sidelayout, og disse mønstrene kan gjøre forskjellen mellom å foreslå noe for leseren din mot å skyve den ned i halsen.
Utvalgt bilde, bruker menneskelig øye bilde via Shutterstock.