Che cos'è il layout del modello Z e quando utilizzarlo?

Le pagine di destinazione post clic, come le pagine Web, dovrebbero sempre seguire una sorta di gerarchia visiva organizzata. È probabile che tu lo sappia già, ma vale la pena ripeterlo. Tutto ciò che puoi fare per influenzare i tuoi spettatori a concentrarsi su ciò che vuoi che notino è praticamente il nome del gioco.

Un buon designer comprende come gli utenti visualizzano ed elaborano le informazioni online. Questa conoscenza informa le loro decisioni di progettazione e li porta a posizionare gli elementi più essenziali in modo che vengano notati. Se tutto sembra a posto, il design invoglierà i visitatori a intraprendere l'azione desiderata.

Uno dei modi principali in cui i designer influenzano gli utenti e attirano l'attenzione sugli elementi più importanti di una pagina è progettare la pagina utilizzando lo Z-Pattern.

Cos'è il modello Z?

Un design a Z-Pattern traccia il percorso che l'occhio umano percorre quando legge - da sinistra a destra, dall'alto verso il basso:

• Innanzitutto, le persone scansionano dall'alto a sinistra in alto a destra, formando una linea orizzontale immaginaria
• Successivamente, in basso e sul lato sinistro della pagina visibile, creando una linea diagonale immaginaria
• Infine, torna di nuovo a destra, formando una seconda linea orizzontale

Quando gli occhi degli spettatori si muovono secondo questo schema, forma una forma immaginaria a "Z":

È importante notare che i design del modello Z non sono tenuti a conformarsi a una forma Z tradizionale e il numero di angoli Z lungo il modello può variare.

Come si applica lo Z-Pattern alle pagine di destinazione post clic

La creazione di una pagina Web con Z-Layout aiuta a creare una gerarchia visiva che è probabile che le persone seguano, rendendola un'opzione di layout perfetta per i progetti di landing page post-clic.

Ma perché progettare una pagina con lo Z-Pattern invece del F-Pattern?

Mentre F-Layout tende ad essere più appropriato per pagine dense di contenuti, Z-Layout è pensato principalmente per pagine con una copia minima. In sostanza, lo Z-Pattern è più adatto per le pagine in cui la semplicità è una priorità e il principale da asporto è il CTA.

Progettare pensando allo Z-Layout:

• La linea orizzontale superiore dovrebbe includere i componenti principali su cui vuoi che gli spettatori si concentrino per primi
• La linea diagonale dovrebbe presentare tutte le informazioni che si accumulano nel tuo invito all'azione
• La linea orizzontale inferiore dovrebbe evidenziare la CTA in un punto lungo il pattern

La creazione della tua pagina di destinazione post clic secondo un layout Z-Pattern può portare a più conversioni perché puoi controllare dove si muovono gli occhi dello spettatore.

Impariamo un po' di più sul design del modello Z esaminando alcuni esempi di landing page post clic.

Tieni presente che per le pagine di destinazione post clic più brevi, abbiamo mostrato l'intera pagina. Tuttavia, per le pagine più lunghe, abbiamo visualizzato solo above the fold. Potrebbe essere necessario fare clic su ciascuna pagina di destinazione post clic per visualizzare alcuni dei punti di cui discutiamo. Inoltre, alcuni esempi elencati potrebbero essere un test A/B della loro pagina con una versione alternativa a quella mostrata di seguito.

Una pagina di destinazione post clic che ignora lo Z-Pattern

La pagina di destinazione post clic di Traffic Light Media di seguito non segue lo Z-Pattern. Tuttavia, fornisce un flusso intenzionale essendo una pagina pulita e organizzata che persuade gli occhi degli spettatori a seguire un percorso previsto nel mezzo della pagina fino al pulsante CTA:

Sono intelligenti per testare A/B la pagina con la variazione di seguito. Questa volta, stanno seguendo il layout Z-Pattern:

Dopo aver visto questa variazione, il percorso Z è il seguente:

1. Il titolo bianco attira l'attenzione per primo sullo sfondo più scuro, anche se il logo dell'azienda è elencato più in alto nella pagina.
2. Da lì, il percorso esegue la scansione fino al titolo del modulo, poiché questo è proprio accanto al titolo della pagina e contrasta bene con il suo sfondo bianco. Questo è il primo angolo del modello Z.
3. Successivamente, il disegno del motivo continua in diagonale sul lato sinistro della pagina fino alla copia gialla "scopri opportunità".
4. Seguendo il percorso, l'attenzione viene riportata sul lato destro e focalizzata sul pulsante CTA arancione.

Tieni presente che questi movimenti oculari sono soggettivi e non tutti gli utenti eseguiranno la scansione delle pagine allo stesso modo. La cosa fondamentale da ricordare è mantenere i tuoi spettatori concentrati sul percorso che vuoi che seguano e persuaderli a convertire sul tuo CTA.

Ora, esaminiamo alcune pagine di destinazione post clic che seguono il layout Z-Pattern.

pagine di destinazione post clic che seguono lo Z-Pattern

LifeLock

Questa pagina post clic di LifeLock segue lo Z-Pattern ma non si conclude con un CTA:

1. Il visitatore probabilmente inizierà dal titolo, poiché è un carattere più grande del resto della copia e contrasta bene con lo sfondo scuro.
2. Scansionando verso destra, lo spettatore si concentrerà quindi sul viso dell'uomo, che è il primo angolo Z.
3. Successivamente, lo sguardo dell'occhio viaggerà in diagonale verso il pulsante CTA rosso brillante al secondo punto di svolta.
4. Infine, l'attenzione si sposterà sull'immagine dello smartphone.

Proprio come i progetti Z-Pattern non devono formare una "Z" tradizionale, è importante riconoscere che i CTA non sono richiesti agli angoli Z-Pattern. È solo meglio se i CTA si trovano alle curve perché è qui che finiranno gli occhi degli spettatori.

CallFire

Questa pagina post clic di CallFire è un altro esempio che non forma una Z tradizionale, ma lo schema è ancora evidente:

1. I visualizzatori inizieranno con il titolo della pagina poiché è più grande del resto della copia.
2. Da qui, i visitatori eseguiranno la scansione verso il basso e verso destra passando attraverso l'immagine, concentrandosi sul modulo e sul pulsante CTA, creando il primo angolo Z.
3. Successivamente, gli spettatori si spostano a sinistra verso il video, creando il secondo angolo Z.
4. Infine, gli occhi degli spettatori continueranno attraverso la pagina all'iconografia e ai tre passaggi.

Oracolo

La pagina di Oracle è un altro esempio che non segue una Z tradizionale, ma il percorso conduce alla CTA alla fine:

1. I visitatori della pagina probabilmente inizieranno dal titolo perché è il carattere più grande della pagina ed è di facile lettura con tutto lo spazio bianco circostante.
2. Successivamente, si sposteranno orizzontalmente sull'immagine a destra.
3. Da qui, l'occhio umano scorrerà naturalmente verso il basso sul lato sinistro della grafica.
4. Infine, gli occhi degli spettatori eseguiranno la scansione della parte inferiore della pagina fino al CTA dove termina lo Z-Layout.

Fleetmatics

Questa pagina di destinazione post clic di Fleetmatics include un CTA su più angoli Z:

1. È probabile che il titolo e il sottotitolo in alto a sinistra catturino per primi l'attenzione degli spettatori.
2. Da lì, i visitatori eseguiranno la scansione a destra per vedere il video di sfondo.
3. Creando la prima diagonale nella Z-Shape, è probabile che i visitatori effettuino la scansione in basso a sinistra verso il primo pulsante CTA arancione.
4. Successivamente, lo sguardo dell'utente passerà attraverso i badge del cliente, passando avanti e indietro attraverso la copia puntata al secondo pulsante CTA arancione.
5. Infine, il layout Z continua a sinistra verso l'immagine e di nuovo al terzo pulsante CTA.

Il modello continua più in basso nella pagina creando più angoli Z. E, includendo un CTA a più riprese, gli spettatori avranno difficoltà a ignorarli e saranno persuasi a fare clic e convertire.

Progetta la tua prossima pagina con il layout Z-Pattern

Ciascuno dei marchi discussi sopra fa un ottimo lavoro nel posizionare i propri elementi della pagina di destinazione post clic lungo un layout Z-Pattern. Lungo la strada, influenzano efficacemente lo sguardo dello spettatore e lo indirizzano al CTA.

Con questi esempi in mente e per concentrare maggiormente i tuoi visitatori sulla conversione, progetta la tua prossima landing page post-clic con Instapage. Iscriviti oggi stesso per una demo di Instapage Enterprise.