Share
Z-Layout er en fin måte å starte omtrent ethvert webdesign prosjekt fordi det adresserer kjernekravene for et effektivt nettsted: branding, hierarki, struktur og oppfordring til handling. Selv om den klassiske "Z-Layout" ikke skal være den perfekte løsningen for hver nettside der ute, er det absolutt et oppsett som er effektivt nok til å garantere inkludering i ethvert webdesigners arsenal av layoutideer.
Å 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 er det første i en serie hvor vi skal undersøke det store utvalget av layoutparadigmer som eksisterer i verden av webdesign. Målet: å forstå bedre Hvorfor du kan velge ett layoutkoncept over en annen. I denne serien ser vi også på "F" -formet mønster, 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.
Forutsetningen til Z-Layout er faktisk ganske enkel: super-pålegge bokstaven Z på siden. Plasser elementene som du vil at leseren skal se først på toppen av Z. Øyet vil naturlig følge stien til Z, så målet er å plassere din "handling til handling" på slutten. Hele veien kan du inkludere biter av informasjon som bygger opp til call-to-action. La oss ta en titt på diagrammet:
Legg merke til at vi har nummerert nøkkelpunktene langs banen - disse representerer rekkefølgen der en leser sannsynligvis vil se sidens innhold. La oss se hvordan dette oversettes til et faktisk layout:
La oss nå legge over Z-diagrammet på toppen av oppsettet:
Enkelt, ikke sant? Det er absolutt ikke noe komplisert med dette oppsettet - men det beveger raskt og effektivt øyet fra punkt 1 til punkt 4 i en logisk rekkefølge - avslutter med en kraftig oppfordring til handling. Det er fortsatt noen få ting vi kan gjøre for å spice opp dette oppsettet skjønt ... så la oss legge til noen få ting i designet:
Her kan du se at den nye "sign up" -knappen i navigasjonen skiller seg ut mer; "Slider" som vi har lagt til i topplisteområdet, bidrar til å holde brukerens oppmerksomhet midt i rammen; De 2 ikonene ved siden av blokkene av innhold i punkt 3 bidrar også til å gjøre dem litt mer visuelt interessante. Igjen - dette er enkelt som det kan være, men enkelt kan være bra når det gjelder webdesign! Du kan lag i kompleksitet som du vil, men ikke overse kraften i et enkelt, effektivt layout.
Z-Layout trenger absolutt ikke å være den endelige konkrete løsningen for alle sider, men som jeg tidligere nevnte, er det ofte et godt hoppe poeng for ethvert designprosjekt fordi det takler de fire av de store prinsippene for en effektiv design:
Det fungerer fordi de fleste vestlige lesere vil skanne et nettsted på samme måte som de ville skanne en bok - topp til bunn, venstre til høyre. Fra dette enkle grunnlaget kan du ganske mye gå hvor som helst: Legg til flere samtaler til handling, krympe høyden på Z, utvide den, gjør det du vil ha det, er fornuftig for målet med nettstedet.
La oss ta en titt på noen flotte nettsteddesigner som bruker Z-Layout som grunnleggende struktur. En ting du vil merke seg i disse eksemplene er hvordan z-layoutet er i stand til å tilpasse seg. Anropet til handling kan ikke alltid være det samme (noen nettsteder vil kanskje kjøre deg til porteføljen deres mer enn de vil "Sign Up"); innholdet langs banen kan se markant annerledes ut enn vårt eksempel. Tingen å legge merke til er hvordan fortellende aspekt er båret over: 1, 2, 3, Action! Ved å flytte øyet langs Z-banen, øker sjansene for at en seer slutter å gjøre det du vil at de skal gjøre, er økt.
Mens du ser på disse eksemplene, kan du prøve å finne Z-banen som designeren vil at du skal følge.
Evernote ser kompleks ved første øyekast, men en nærmere inspeksjon avslører en z-bane som slutter med "nedlasting" -knappen. 
Mye enklere gir Daina Reed-nettstedet et par raske biter av informasjon, og ber om en "komme i kontakt" -handling. 
Banen på CodeMonkey starter på logoen og slutter på "Kom i gang". 
Det er litt vanskeligere å se her på grunn av duo-krom-paletten, men z-oppsettet skaper det generelle rammeverket. 
Dette eksemplet avsluttes med en lys, fet prislapp. 
Sannsynligvis en av de klareste bruksområdene til Z-Layout, treffer Blue Acorn-designen hvert punkt langs banen. 
Kampanjemonitorens design blander opp oppsettet, men trinnene 1, 2, 3, 4 er intakt. Det er viktig å merke seg at Z-Layout ikke er det eneste layoutparadigmet som er der ute. Heck, det er omtrent like mange layouter som det er bokstaver i alfabetet. Z-Layout er et av prinsippoppsettene fordi det er så enkelt å bruke som grunnlag, men du vil alltid stole på instinktene dine når det er på tide å ta en endelig layoutbeslutning.
... Uavhengig av hvilken som helst spesifikk layoutdesign, er seere mer sannsynlig å først se på de største, klareste og mest motsatte elementene på en side.
Det har vært en rekke interessante studier gjort på øyesporing som tyder på at man prøver å forutsi øyebevegelser på tvers av et nettsted, er omtrent like uberegnelig som å sende 1000 barn inn i en godteri. Flere studier har også vist at den "F" formede oppsettet (som vi vurderer neste i denne serien), er mer effektivt til å kontrollere en seers øyebevegelse over en side. Den enkle sannheten er at, uansett hvilken spesifikk layoutdesign, seere er mer sannsynlig å først se på de største, klareste og mest motsatte elementene på en side. Vær oppmerksom på dette; hvis målet ditt er å lede en seer gjennom Z-Layout, ikke gi dem mer mulighet til å bli distrahert underveis enn de allerede har.
Hvor Z-Layout virkelig skinner, er i designprosjekter hvor enkelhet og oppfordring er de viktigste prinsippene. Å forsøke å tvinge en Z-Layout på en komplisert innholdsstruktur vil nok ikke fungere bra, men å la Z-mønsteret danne et rammeverk for et veldig grunnleggende nettsted, kan gi en følelse av ordre som kan bidra til å øke konverteringsfrekvensen din.
Sjekk ut "F" -formet mønsterpost!
Åh! Sjekk ut en liste over lagermaler som bruker Z-Layout her.
Accentsconagua