Hvordan øjenskanning påvirker det visuelle hierarki i UX Design
Mens årtusinder af kunst, fra græske vaser til italienske kapeller, har formet vores forståelse af, hvad skønhed er, er den forholdsvis nylige teknologi bag øjensporing tilføjet en ny dynamik til, hvordan vi visuelt opfatter verden. Mere til det punkt hjælper denne spændende nye videnskab os bedre til at forstå - og bedre design - hjemmesider, der er både effektive og æstetiske.
Webdesign (som billedkunst) følger mange af de samme regler som mere traditionelle kunstformer. I denne artikel beskriver vi kortfattet betydningen af visuel organisation, og forklarer, hvordan resultaterne af øjensporing kan forbedre layoutet af webgrænseflader.
Oprettelse af visuel organisation
Det er ingen overraskelse, at hvordan et website ser ud, påvirker dets succes, men det er vigtigt at fastslå årsagerne til det. I hans papir Kommunikerer med det visuelle hierarki , Luke Wroblewski, forfatter og chef for produktdesign på Yahoo !, forklarer, at den visuelle præsentation af en webgrænseflade er afgørende for:
Vejledning
En veloprettet grænseflade kan lede brugere fra en handling til den næste uden at føle sig overbærende. Uanset hvad du tænker på deres forretningspraksis, er der ingen tvivl om det Uber er et eksempel på en utrolig glat, men struktureret hjemmeside. Værdiforslag er øverst på rullen, efterfulgt af en sjov skyder for at lære om forskellige bilindstillinger og afslutte det logiske næste trin for at finde rides i din by.
Meddelelse
Ved at matche ellers i modsætning til informationsstykker kan en brugerflade danne links i brugerens sind, kommunikere beskeder uden at sige noget. Se på det populære designwebsted Abduzeedo : De brede kategorier er øverst, featured indhold i midten og detaljerede kategorier i footer.
At skabe følelsesmæssige konsekvenser
Gør ikke fejlen ved at tænke på dit websted er simpelthen et mekaniseret værktøj. Websites har potentiale til at skabe følelsesmæssige forbindelser, og hvis din ikke gør det, vil dine konkurrenters vilje. Faktisk kan folk faktisk være mere tilbøjelige til at tilgive din grænseflades mangler, hvis du producerer en positiv følelsesmæssigt svar . MailChimp er et perfekt eksempel på et websted med en grænseflade, der er brugbar, lystløs og faktisk sjov at bruge.
Det forudsigelige menneskelige øje
Nogle gange ser det ud til, at dine øjne har sine egne. Evolutionens år har givet os instinkterne til at få øje på objekter og bevægelser, som vi anser for vigtige, om nogen er sexet gå på tværs af gaden, eller en nuttet tegneserie bærer reklame honning. Mens den relative vægt, vi placerer på, hvad der er vigtigt, kan variere fra person til person, er den ene konstant mekanismerne, som de opfører sig på. I stor skala følger de fleste mennesker de samme tendenser, når de ser på en webside.
Af disse tendenser er der to, som vi vil diskutere i detaljer. I en artikel om visuelle principper , Alex Bigman, Design Writer for 99Designs, viser, hvordan disse kulturer, der læser fra venstre til højre, er de mest almindelige - og mest nyttige - når man designer et websteds layout.
Den første, F-Pattern, bruges mest til tekst (men kan tilpasses til andre formål). Det andet, Z-mønsteret, kan bruges til ethvert visuelt layout. Vi forklarer de forskellige fordele og ulemper for hver nedenfor.
F-Pattern
F-mønsteret er synetrenden, der fremkommer på sider, der er stærkt belæsset med tekst, typisk blogs, nyhedskilder, artikler mv.
Når de står over for en blok af ord, vil de fleste læsere først scanne en lodret linje ned til venstre for teksten, typisk efter søgeord eller interessepunkter i afsnitets oprindelige sætninger. Til sidst finder læserne noget, de kan lide, og begynder at læse normalt og danne vandrette linjer. Slutresultatet er noget, der ligner bogstaverne F eller E.
Jakob Nielson fra Nielson Norman Group gennemførte en læsbarhed undersøgelse baseret på 232 brugere scanning tusindvis af hjemmesider. Fra hans forskning registrerede han hvad han mener er de praktiske konsekvenser af F-mønsteret:
- Brugere vil sjældent læse hvert ord i din tekst.
- De to første afsnit er de vigtigste og bør indeholde din krog.
- Start afsnit, underpositioner og punktpunkter med tiltrækkende søgeord.
Som altid er det øverste venstre hjørne det vigtigste, som det er hvor alle venstre-til-højre læsekulturer starter. Brugeren læser normalt vandret over hovedet, så her er et godt sted for en navigationslinje og / eller en opfordring til handling. Derefter scanner brugeren lodret ned til venstre, indtil de kommer på tværs af indhold, der interesserer dem. Endelig slutter brugeren på højre side af siden, et godt sted med en opfordring til handling eller reklame. Lad ikke sidebjælken overvælde indholdet.
Men F-Pattern er ikke en skabelon - det er virkelig ikke en præcis praksis, men mere af en løs guide udarbejdet af tendensen hos de fleste brugere. Vær opmærksom på dette fordi F-mønsteret mister sin effektivitet efter de øverste rækker af F.
Kickstarter bruger et kortlayout til at vise funktionsprojekter og ikke blive visuelt kedeligt efter de første 500 pixel.
På den anden side, iZettle tager en mere konventionel tilgang til F-Pattern på deres hjemmeside. Imidlertid klarer de at undgå et templet look ved at overlay den primære kopi ("Udvid din virksomhed med iZettle") og opfordring til handling på et stort baggrundsbilde. Vi vil overveje dette det absolutte minimum for at tilpasse dette læsemønster til dit interface layout.
Z-mønster
Derudover er Z-mønster det enkleste og mest universelle mønster, der almindeligvis anvendes på enhver webside, der er baseret på tekst. Læseren scanner først vandret over toppen, dart ned og tilbage til venstre, og scanner derefter vandret igen over bunden.
Det er vigtigt at forstå den alsidige Z-mønster , da det behandler kernewebstedets krav som hierarki, branding og opfordringer til handling. Dens skønhed er i sin enkelhed, og et ideelt layout for websteder fokuseret på en opfordring til handling. Men for mere komplekst eller overdrevent indhold kan Z-mønsteret være for simpelt.
Tænk, at Z-mønsteret passer til din side? Her er et par bedste metoder til at optimere fordelene:
- Baggrund - Hold baggrunden, hvor den tilhører: i baggrunden. Du ønsker ikke at distrahere din læser.
- Punkt nr. 1 - Som udgangspunkt er dette generelt, hvor du vil placere dit logo.
- Punkt nr. 2 - Mens den vigtigste opfordring til handling skal komme senere, er her et godt sted for en sekundær opfordring til at skelne mellem en vandret navigationslinje. (En god grafisk eller billedskyder hjælper adskille toppen og bunden af siden og opmuntrer læseren til at forblive på Z-Patterns forudsigelige vej.)
- Punkt nr. 3 - Dette er et godt sted at tiltrække opmærksomhed for andre links, eller alternativt at lede brugerens syn til slutmålet: Punkt nr. 4.
- Punkt nr. 4 - Som "målstregen" er dette det perfekte sted for din vigtigste opfordring til handling.
Det første du vil gøre, er at prioritere elementerne på din side for dig selv, så du kender de mest og mindst vigtige. Derfra er det bare et simpelt spørgsmål om at allokere dem til de relevante "hot spots".
Desuden kan Z-mønsteret gentages og udvides i hele hele siden. Bare tag et kig på, hvordan Evernote zig-zags nedadgående gennem call-to-action og salgspunkter.
DropBox tager en visuelt enklere tilgang til dette zig-zag mønster ved at fjerne eventuelle baggrundsbilder. I stedet er mere funktionalitet indbygget i layoutet, da en "Learn More" call-to-action hjælper med at forbinde hver sektion af viklingsmønstret, da dit øje gør sin vej ned på siden. Dette hjælper også informerede læsere med at klikke til næste relevante side uden at skulle læse hele kopien først.
Syn i fremsynet
Great interface design bør være som en usynlig hånd, der styrer læsere sammen med tankens hastighed. Den vigtige takeaway fra F-Pattern og Z-Pattern trends er, at du kan placere dit vigtigste indhold, hvor læseren vil "snuble" det naturligt, i modsætning til at forsøge at tvinge dem til at se på dem.
Subtilitet er en stor fordel for ethvert sidelayout, og disse mønstre kan gøre forskellen mellem at foreslå noget til din læser, i modsætning til at skubbe det ned i halsen.
Udvalgte billede, bruger menneskelige øje billede via Shutterstock.