Share
Z-Layout è un ottimo modo per iniziare praticamente qualsiasi progetto di web design perché risponde ai requisiti fondamentali di qualsiasi sito efficace: branding, gerarchia, struttura e call to action. Anche se il classico "Z-Layout" non sarà la soluzione perfetta per ogni sito Web, è sicuramente un layout abbastanza efficace da garantire l'inclusione nell'arsenale di idee di layout di qualsiasi web designer.
Raggiungere una migliore comprensione di come i diversi layout possono cambiare il comportamento degli utenti è uno dei principi centrali per creare un'esperienza utente efficace.
Questo post segna il primo di una serie in cui esamineremo l'ampia varietà di paradigmi di layout esistenti nel mondo del web design. L'obiettivo: capire meglio perché potresti scegliere un concetto di layout piuttosto che un altro. In questa serie, osserveremo anche il modello a forma di "F", il layout aperto e alcuni layout fuori dagli schemi che sono sicuri di darvi alcune grandi idee. Raggiungere una conoscenza migliore di come i diversi layout possono cambiare il comportamento degli utenti è uno dei principi centrali della creazione di un'esperienza utente efficace.
La premessa di Z-Layout è in realtà piuttosto semplice: sovrapponi la lettera Z alla pagina. Posiziona gli oggetti che vuoi che il lettore veda prima lungo la parte superiore della Z. L'occhio seguirà naturalmente il percorso della Z, quindi l'obiettivo è mettere il tuo "call to action" alla fine. Lungo tutto il percorso è possibile includere bit di informazioni che si accumulano nell'invito all'azione. Diamo un'occhiata al diagramma:
Si noti che abbiamo numerato i punti chiave lungo il percorso: rappresentano l'ordine in cui un lettore è in grado di visualizzare il contenuto della pagina. Vediamo come questo si traduce in un layout reale:
Ora sovrapponiamo lo Z-Diagram in cima al layout:
Semplice, vero? Non c'è certamente nulla di complicato in questo layout, ma sposta in modo rapido ed efficace l'occhio dal Punto 1 al Punto 4 in un ordine logico - concludendo con un potente invito all'azione. Ci sono ancora alcune cose che possiamo fare per arricchire questo layout anche se ... quindi aggiungiamo alcune cose al design:
Qui puoi vedere che il nuovo pulsante "iscriviti" nella navigazione si distingue maggiormente; Il "cursore" che abbiamo aggiunto all'area della classifica aiuta a mantenere l'attenzione dell'utente all'interno del centro dell'inquadratura; Le 2 icone accanto ai blocchi di contenuti nel Punto 3 contribuiscono anche a renderle un po 'più visivamente interessanti. Ancora una volta - questa roba è semplice come può essere, ma semplice può essere buono quando si tratta di progettazione di siti web! Puoi stratificare in complessità come preferisci, ma non trascurare la potenza di un layout semplice ed efficace.
Lo Z-Layout non ha certamente bisogno di essere la soluzione concreta finale per tutti i siti, ma come ho detto prima, è spesso un ottimo punto di partenza per qualsiasi progetto di design perché affronta i 4 principi fondamentali di un design efficace:
Funziona perché la maggior parte dei lettori occidentali eseguirà la scansione di un sito nello stesso modo in cui scriveranno un libro: dall'alto in basso, da sinistra a destra. Da questa semplice base puoi praticamente andare ovunque: aggiungi più inviti all'azione, riduci l'altezza della Z, estendila, fai tutto ciò che vorresti avesse senso per l'obiettivo del sito.
Diamo un'occhiata ad alcuni grandi progetti di siti che usano Z-Layout come struttura di base. Una cosa che vorrete notare in questi esempi è come il layout z è in grado di adattarsi. L'invito all'azione potrebbe non essere sempre lo stesso (alcuni siti potrebbero voler condurti al loro portafoglio più di quello che vogliono per te "Iscriviti"); il contenuto lungo il percorso può apparire notevolmente diverso dal nostro esempio. La cosa da notare è come viene trasportato l'aspetto narrativo: 1, 2, 3, Azione! Spostando l'occhio lungo la Z-Path, aumentano le probabilità che uno spettatore finisca per fare ciò che vuoi che facciano.
Mentre visualizzi questi esempi, prova a trovare il percorso Z che il designer vuole che tu segua.
Evernote sembra complesso a prima vista, ma un'ispezione più ravvicinata rivela un percorso z che termina con il pulsante "download". 
Molto più semplice, il sito Daina Reed fornisce un paio di brevi informazioni, quindi suggerisce un'azione "Entra in contatto". 
Il percorso su CodeMonkey inizia dal logo e finisce su "Inizia". 
È un po 'più difficile da vedere qui a causa della palette duo-chrome, ma il layout z crea la struttura generale. 
Questo esempio termina con un cartellino del prezzo brillante e audace. 
Probabilmente uno degli usi più chiari di Z-Layout, il design Blue Acorn colpisce ogni punto lungo il percorso. 
Il design di Campaign Monitor mescola il layout, ma i passi 1, 2, 3, 4 sono tutti intatti. È importante notare che Z-Layout non è l'unico paradigma di layout disponibile. Diamine, ci sono circa tanti layout quante sono le lettere dell'alfabeto. Lo Z-Layout è uno dei principali layout perché è così semplice da usare come base, ma dovrai sempre fidarti del tuo istinto quando è il momento di prendere una decisione finale sul layout.
... Indipendentemente dal design specifico del layout, è più probabile che gli spettatori guardino prima agli elementi più grandi, più luminosi e più contrastati di una pagina.
Ci sono stati un sacco di studi interessanti fatti sul tracciamento degli occhi che suggeriscono che cercare di prevedere il movimento degli occhi attraverso un sito web è tanto irregolare quanto mandare 1.000 bambini in un negozio di dolciumi. Diversi studi hanno anche dimostrato che il layout a forma di "F" (che esamineremo in seguito in questa serie) è più efficace nel controllare il movimento degli occhi di un osservatore su una pagina. La semplice verità è che, indipendentemente dal design specifico del layout, è più probabile che gli spettatori guardino prima agli elementi più grandi, più luminosi e più contrastati di una pagina. Tieni questo in mente; se il tuo obiettivo è quello di guidare uno spettatore attraverso lo Z-Layout, non dare loro più l'opportunità di essere distratto lungo la strada di quello che hanno già.
Dove lo Z-Layout brilla davvero è nei progetti di design in cui la semplicità e un invito all'azione sono i principi più importanti. Cercare di forzare un layout Z su una struttura di contenuto complicata probabilmente non funzionerà bene, ma consentire a Z-pattern di creare un framework per un sito di base può portare un senso dell'ordine che può aiutare ad aumentare il tasso di conversione.
Controlla il post del pattern a forma di "F"!
Oh! Consulta un elenco di modelli di stock che utilizzano il layout Z qui.
Accentsconagua