Share
De Z-Layout is een geweldige manier om vrijwel elk webontwerpproject te starten omdat het de kernvereisten voor elke effectieve site aanpakt: branding, hiërarchie, structuur en call-to-action. Hoewel de klassieke "Z-Layout" niet de perfecte oplossing voor elke website is, is het zeker een lay-out die effectief genoeg is om opgenomen te worden in het arsenaal aan lay-outideeën van een webontwerper.
Een beter begrip van hoe verschillende lay-outs het gebruikersgedrag kunnen veranderen, is een van de centrale principes voor het creëren van een effectieve gebruikerservaring.
Dit bericht is de eerste in een serie waarin we de grote verscheidenheid aan lay-outparadigma's in de wereld van webdesign zullen onderzoeken. Het doel: om het beter te begrijpen waarom u kunt het ene lay-outconcept kiezen boven het andere. In deze serie kijken we ook naar het "F" -vormige patroon, de open lay-out en enkele out-of-the-box-lay-outs die u ongetwijfeld geweldige ideeën zullen geven. Een beter begrip van hoe verschillende lay-outs het gebruikersgedrag kunnen veranderen, is een van de centrale principes bij het creëren van een effectieve gebruikerservaring.
Het uitgangspunt van de Z-Layout is eigenlijk vrij simpel: super-opleggen van de letter Z op de pagina. Plaats de items die je wilt dat de lezer eerst langs de bovenkant van de Z ziet. Het oog zal vanzelfsprekend het pad van de Z volgen, dus het doel is om je "call to action" aan het einde te plaatsen. Overal op het pad kunt u stukjes informatie opnemen die zich opbouwen naar de call-to-action. Laten we het diagram eens bekijken:
Merk op dat we de belangrijkste punten langs het pad hebben genummerd - deze vertegenwoordigen de volgorde waarin een lezer de pagina-inhoud waarschijnlijk zal bekijken. Laten we eens kijken hoe dit zich vertaalt naar een echte lay-out:
Laten we nu het Z-diagram over de lay-out heen leggen:
Eenvoudig, toch? Er is zeker niets gecompliceerd aan deze lay-out - maar het verplaatst snel en effectief het oog van punt 1 naar punt 4 in een logische volgorde - afgesloten met een krachtige oproep tot actie. Er zijn nog een paar dingen die we kunnen doen om deze lay-out op te vrolijken ... dus laten we een paar dingen toevoegen aan het ontwerp:
Hier kunt u zien dat de nieuwe "aanmelden" -knop in de navigatie meer opvalt; De "schuifregelaar" die we aan het leaderboardgebied hebben toegevoegd, helpt de aandacht van de gebruiker binnen het midden van het frame te houden; De 2 pictogrammen naast de blokken met inhoud in punt 3 helpen ook om ze visueel interessanter te maken. Nogmaals - deze dingen zijn eenvoudig, maar eenvoudig kan goed zijn als het gaat om website-ontwerp! Je kunt lagen in complexiteit naar eigen inzicht maken, maar let niet op de kracht van een eenvoudige, effectieve lay-out.
De Z-Layout hoeft zeker niet de definitieve concrete oplossing te zijn voor alle sites, maar zoals ik al eerder zei, is het vaak een goed startpunt voor elk ontwerpproject omdat het de 4 grote principes van een effectief ontwerp aanpakt:
Het werkt omdat de meeste westerse lezers een site scannen op dezelfde manier waarop ze een boek scannen - van boven naar beneden, van links naar rechts. Vanuit deze eenvoudige basis kun je vrijwel overal naartoe gaan: meerdere oproepen toevoegen aan actie, de hoogte van de Z verkleinen, uitbreiden, doen wat je wilt dat zinvol is voor het doel van de site.
Laten we eens kijken naar enkele geweldige siteontwerpen die de Z-Layout gebruiken als de basisstructuur. Een ding dat u in deze voorbeelden wilt opmerken, is hoe de z-lay-out zich kan aanpassen. De Call to Action is misschien niet altijd hetzelfde (sommige sites willen u mogelijk meer naar hun portfolio brengen dan zij u willen "Sign Up"); de inhoud van het pad ziet er mogelijk heel anders uit dan in ons voorbeeld. Het ding om op te merken is hoe het storytelling-aspect wordt overgedragen: 1, 2, 3, actie! Door het oog langs het Z-pad te bewegen, neemt de kans toe dat een kijker uiteindelijk doet wat jij wilt dat ze doen.
Terwijl je deze voorbeelden bekijkt, probeer je het Z-pad te vinden dat de ontwerper wil dat je volgt.
Evernote ziet er op het eerste gezicht complex uit, maar een nadere inspectie onthult een z-pad dat eindigt op de knop "downloaden". 
Veel eenvoudiger, de Daina Reed-site levert een paar snelle stukjes informatie, en vraagt vervolgens om een actie "Neem contact op". 
Het pad op CodeMonkey begint bij het logo en eindigt op "Aan de slag". 
Het is wat moeilijker om hier te zien vanwege het duo-chroompalet, maar de z-lay-out creëert het algemene kader. 
Dit voorbeeld eindigt met een helder, gewaagd prijskaartje. 
Waarschijnlijk een van de duidelijkste toepassingen van de Z-Layout, het Blue Acorn-ontwerp raakt elk punt op het pad. 
Het ontwerp van Campaign Monitor combineert de lay-out, maar de stappen 1, 2, 3, 4 zijn allemaal intact. Het is belangrijk op te merken dat de Z-Layout niet het enige lay-outparadigma is dat er is. Er zijn ongeveer evenveel lay-outs als letters in het alfabet. De Z-layout is een van de belangrijkste lay-outs, omdat het zo eenvoudig te gebruiken is als een basis, maar je zult altijd je instinct willen vertrouwen als het tijd is om een definitieve lay-outbeslissing te nemen.
... Ongeacht een specifiek lay-outontwerp kijken kijkers eerder naar de grootste, helderste en meest contrastrijke elementen op een pagina.
Er zijn een heleboel interessante studies gedaan over eye-tracking die suggereren dat het proberen om oogbewegingen over een website te voorspellen ongeveer net zo grillig is als het sturen van 1.000 kinderen naar een snoepwinkel. Verschillende onderzoeken hebben ook aangetoond dat de "F" -vormige lay-out (die we hierna in deze reeks zullen bespreken) effectiever is in het controleren van de beweging van een oog van een kijker over een pagina. De simpele waarheid is dat kijkers, ongeacht een specifiek lay-outontwerp, eerder naar de grootste, helderste en meest contrastrijke elementen op een pagina kijken. Onthoud dit; als het je doel is om een kijker door de Z-Layout te leiden, geef ze dan niet nog meer de gelegenheid om onderweg afgeleid te worden dan ze al hebben.
Waar de Z-Layout echt schittert, is in ontwerpprojecten waar eenvoud en een call-to-action de belangrijkste principes zijn. Proberen om een Z-Layout te forceren op een ingewikkelde inhoudsstructuur zal waarschijnlijk niet goed werken, maar als het Z-patroon een kader voor een heel eenvoudige site vormt, kan het een gevoel van orde brengen dat je conversiepercentage kan helpen verhogen.
Bekijk de "F" -vormige patroonpaal!
Oh! Bekijk hier een lijst met voorraadsjablonen die de Z-layout gebruiken.
Accentsconagua