Designjargon forklarede: Z-mønsteret

Billede med tilladelse fra Karyn Christner, www.flickr.com/photos/toofarnorth/

Billede med tilladelse fra Karyn Christner, www.flickr.com/photos/toofarnorth/

I Designjargon forklarede: F-mønsteret , vi talte om hvordan undersøgelser af øjesporing viser, at brugere scanner skærme på lignende og forudsigelige måder.



For en brugergrænsefladesigner afslører disse scanningsmønstre det optimale layout af elementer til bestemte typer websteder. Denne kolde, hårde videnskab skaber, når den anvendes korrekt, en magisk følelse af fortrolighed hos brugeren. Interfacet virker intuitivt og personligt med alt på det rigtige sted.



Vores tidligere artikel fokuserede på et af disse scanningsmønstre, F-mønsteret, og denne vil udforske en anden, lige så vigtig: Z-mønsteret.

Nedenfor forklarer vi, hvad dette er, hvordan man anvender det, og viser derefter nogle reelle eksempler på, hvordan det er gjort godt.



For flere detaljer om Z-mønster, F-mønster og mange andre visuelle webdesignteknikker, se de gratis e-bøger Webdesign til det menneskelige øje og Bedste fremgangsmåder til web-UI .

Dekonstruktion af Z-mønsteret

Mens F-mønsteret er ideelt til tekst- eller indholdstunge websteder, fungerer Z-mønsteret bedre for løsere, mere sparsomme websteder.

Minimalistiske steder eller steder, der hovedsageligt centrerer omkring et eller to hovedelementer, kan implementere Z-mønsteret for at foregribe og tilskynde brugerne til at følge denne naturlige metode.



På den måde kan designere sikre eller i det mindste øge sandsynligheden for, at de vigtigste elementer ses.

Billede med tilladelse til Wunderlist

Billede med tilladelse til Wunderlist

Som med F-mønsteret begynder brugeren i vestlige kulturer, der læser fra venstre mod højre og op til ned, næsten altid i øverste venstre hjørne og scanner over toppen. Det kendetegnende ved Z-mønsteret er 'Z-formen, som det følger derefter. I stedet for at vende tilbage til venstre og derefter gå ned, går brugerens syn til venstre og ned på samme tid og scanner derefter igen en vandret linje fra venstre mod højre.

Den interessante - og nyttige - ting at vide om Z-mønsteret er, at det gentages, undertiden ad infinitum, hvis indholdet er engagerende nok.

Dette skaber en endeløs zig-zag-struktur, der strækker sig nedad, så længe du kan holde brugerens opmærksomhed, hvilket gør dette mønster perfekt til at skabe visuelle fortællinger med lang rulning, uendelig rulning og parallaksrulning.

Photoshop hvordan man ændrer penselstørrelse

Billede med tilladelse til Wunderlist

Billede med tilladelse til Wunderlist

I modsætning til F-mønsteret, som fungerer godt for websteder, der kræver organisering af en blanding af visuelt og tekstindhold, fungerer Z-mønsteret godt for websteder med en klar og direkte dagsorden (for eksempel en destinationsside med en hovedopkald til- handling).

Z-mønster skaber en klar struktur og hierarki, og hvis det gøres rigtigt, bygger det momentum, der kulminerer med en endelig opfordring til handling.

Ulempen er, at det kan være desorienterende for websteder med meget indhold.

Anvendelse af Z-mønsteret

Z-mønsteret består normalt af rækker med lysindhold, ispedd stor grafik eller andet opmærksomhedsgribende indhold.

Billede med tilladelse til UXPin via MailChimp

Billede med tilladelse til UXPin via MailChimp

Z-mønsteret starter ligesom F-mønsteret, så dit vigtigste sted er det øverste venstre hjørne (punkt 1). Dette er et af de få pletter på skærmen, som din bruger næsten er sikker på at se på, og som sådan normalt har virksomhedens logo.

Igen, ligesom F-mønsteret, vil brugeren sandsynligvis scanne fra venstre mod højre over toppen af ​​siden (punkt 2). Dette betyder to ting for designeren.

  • For det første er den øverste række primær fast ejendom, hvorfor den normalt er fyldt med en vandret navigationslinje. Næsten umiddelbart efter landing på dit websted ved dine brugere, hvilke sider der er tilgængelige, og hvor de kan findes.
  • For det andet betyder det, at det øverste højre hjørne er et godt sted for en opfordring til handling, da brugerens syn vil stoppe et øjeblik, inden han går videre.

Følg øjet

Brugerens øje falder derefter nedad til midten. Det er her, du finder en stor grafik eller undertiden en underretning. En anden strategi er at holde dette område relativt tomt: et tomt rum her bevæger brugeren hurtigere fremad og tilskynder til en gentagende transe.

I begge strategier er den vigtige del om midten, at den ikke distraherer brugeren eller afviger dem fra Z-mønsterstien. Det betyder, at tunge eller visuelt komplicerede pladsholdere ikke anbefales.

Brugerens syn går derefter i nederste venstre hjørne (punkt 3) og scanner til højre igen (punkt 4). Nederst på skærmen finder du typisk vandret orienteret indhold, undertiden endda en barmenu, der spejler den øverst.

Du bemærker også, at punkterne i slutningen af ​​linjen til højre, nr. 2 og # 4, er de bedste til opfordring til handling, såsom knapperne 'Tilmeld dig gratis' i eksemplet. Tænk på disse punkter som målstreger, hvor øjet holder pause, inden du går videre.

Gentag mønsteret

Efter punkt 4 fortsætter mønsteret med at gentage. Du kan udvide Z-mønsteret, så længe du vil, gentage eller indføre nye opfordringer til handling på hvert af de højre sidepunkter.

Generelt er Z-mønsteret mere afslappet end F-mønsteret. Det giver vejrtrækningsrum og alsidighed - både i hvor længe det kan holde brugerens opmærksomhed, og i hvor bredt du kan lave hullerne i midten. Dette gør det befordrende for historiefortælling eller salgspladser, men ineffektivt til at organisere forskelligt indhold.

På grund af sin vægt på opfordring til handling er Z-mønsteret ikke ualmindeligt for startsider og destinationssider, hvilket subtilt påvirker brugeren om, hvor de skal hen næste. Det er et populært layout på tværs af forskellige brancher, og du kan ofte genkende det fra dets øverste og nederste navigationsbjælker. Her er nogle eksempler...

01. AirBnBs kortside

Billede med tilladelse til Air BnB Map

Billede med tilladelse til Air BnB Map

Som beskrevet i Webdesign til det menneskelige øje (Bog 2) , mønsteret starter ved det traditionelle firmalogo i øverste højre hjørne. Fordi der ikke er nogen øverste navigationslinje, skyder øjet sandsynligvis lige i øverste højre hjørne med opfordring til handling tilbage til det oprindelige websted og delingsmuligheder plus en lydkontrolindstilling.

Øjet scanner derefter kortet - det faktiske indhold på siden, men for nu kun en baggrund - inden det sætter sig i nederste venstre hjørne. Brugerens syn følger derefter den nederste navigationsmenu i nederste højre hjørne, hvor en af ​​de vigtigste kontroller er placeret: zoomen.

Mens det relevante indhold er i centrum, vil brugerne sandsynligvis scanne hele siden, før de interagerer. Ved at lægge alt i et Z-mønster hjælper AirBnB med at sikre, at brugeren vil se sidens kontrol og deres placeringer i de første øjeblikke, så de bedst kan interagere med siden. Z-mønsterlayoutet strømliner simpelthen denne proces.

02. British Airways

Billede med tilladelse fra British Airways

Billede med tilladelse fra British Airways

Et andet stort firma, der drager fordel af Z-mønsteret, er British Airways websted til fremvisning af deres nye fly. Forudsigeligt hviler firmaets logo ved startpunktet, og ligesom Airbnb betyder manglen på en øvre navigationsmenu, at øjet hurtigt går til højre hjørne. Her valgte virksomheden kun at promovere sine vigtigste links til siderne Galleri og ruter.

Øjet går derefter på tværs af det store billede - smukt at se på, men i sidste ende meningsløst for grænsefladen uden for æstetik. Brugeren kan læse eller ignorere hilsenen afhængigt af deres tidsramme, eller hvis de ved, hvor de landede.

Fordi punkt 3 er det mindst betydningsfulde, valgte British Airways (og mange andre selskaber) at stille sit juridiske krav her. Men dette er faktisk en strategisk beslutning - den vandrette tekstlinje tilskynder her brugerens websted til at bevæge sig lige langs det samme plan.

Som forklaret i Web UI Design for the Human Eye (Bog 1) viser Gestalt-princippet for linjer, at brugerens websted vil bevæge sig langs klare linjer og få fart, når det gør det. Denne placering af den juridiske linje understøtter faktisk Z-mønsteret og dirigerer øjet til mere relevant indhold ... der kulminerer med knappen Share i punkt 4.

03. Uregelmæssig

Billede med tilladelse fra Irregulart

after effects cc 2015 gratis download
Billede med tilladelse fra Irregulart

Irregulart bruger også Z-mønsteret, men demonstrerer en vigtig variation, som vi gerne vil påpege.

Som vi nævnte i det foregående eksempel, er punkt 3 den mindst vigtige placering på siden. Derfor vælger nogle designere at udelade det helt fra Z-mønster (som teamet hos Irregulart gjorde). Z-mønsteret er stadig effektivt, men det nederste / det midterste bliver det nye punkt 3. Dette gør det vitale første øjekast bare et hår hurtigere og afstemmer stedet for en mere forenklet og minimalistisk følelse.

Husk, at som de fleste designprincipper er Z-mønsteret kun en retningslinje. Du behøver ikke at følge hvert punkt, men husk absolut de grundlæggende ting og juster efter behov.

Konklusion

Den vigtige takeaway med Z-mønsteret er dens struktur.

Det forbedrer muligvis forenklede websteder, men de få strukturelle punkter er vigtige for dets effektivitet, så undervurder dem ikke. Struktur er Z-mønsterets største styrke, men det er også dets svaghed; et distraherende element ude af sted vil spore brugerens vej og besejre hele formålet med layoutet.

Ord : Jerry Cao

Jerry Cao er en indholdsstrateg hos UXPin - wireframing og prototyping app - hvor han udvikler in-app og online indhold til wireframing og prototyping platformen. For at lære at bruge mockups af alle typer og troskab, skal du tjekke ud Vejledningen til Mockups .

Sådan her? Læs disse!