z layout

Esistono varie teorie su come progettare la disposizione dei contenuti all’interno di una pagina web in maniera efficace, in modo tale da guidare la lettura dell’utente. Lo “Z Layout” è una di queste. Vediamo come funziona nel dettaglio.

La teoria alla base dello Z Layout

La teoria che sta alla base dello “Z layout”, supportata anche da prove empiriche, è molto semplice e si basa su studi fatti sul movimento dello sguardo. Nel momento in cui si va a leggere una pagina web, un annuncio stampa, o un qualsiasi altro documento il nostro sguardo si muove da sinistra a destra, dall’angolo in alto a destra fino all’angolo in basso a sinistra ed infine verso l’angolo in basso a destra, tracciando quindi una “Z”.

 

Z-layout1

 

Questa “Z” ci aiuta quindi a capire in che modo disporre gli elementi all’interno del nostro layout in modo tale da guidare ed indirizzare la lettura da parte dell’utente.

I due estremi del percorso li possiamo gestire mettendo in posizione “1” il BRAND, ossia il soggetto che sta “parlando” , e in posizione “4” la CALL TO ACTION quasi a chiusura del discorso, mentre in posizione “2” e “3” metteremo tutti i contenuti del discorso che il BRAND sta facendo con il suo lettore e che dovrebbero portare quest ultimo a compiere l’azione descritta nella call to action.

Z-layout3

Oltre alla disposizione degli elementi come sopra descritto è sempre bene tenere a mente alcuni altri suggerimenti per rendere questo layout efficace:

  • Utilizzate uno sfondo che contrasti con il colore del contenuto per focalizzare meglio il movimento dell’occhio;
  • Fate in modo che il logo risalti e sia evidente.
  • Impostate la call to action con colori accesi e di dimensione “importante” in modo tale che sia ben evidente ed in risalto.
  • In posizione “2” potrete prevedere un elemento grafico (una call to action più piccolina ad esempio) che attiri lo sguardo del lettore e lo inviti a guardare in quella direzione dopo aver guardato il logo.

Esempi di Z layout

A seguire trovate alcuni esempi di siti realizzati sulla base dello “Z Layout”.

 Z-layout6

 

Z-layout7

 

Z-layout8

Se volete un supporto alla progettazione del vostro sito non esitate a contattarci all’indirizzo info@www.magentadigital.it

RESTA AGGIORNATO!

newsletter e blog magenta digital

Continua a seguire il nostro blog per scoprire di più sul SEO, sul Social Media Marketing, su WordPress e tanto altro! Iscriviti alla Newsletter e scarica i nostri utilissimi tools pensati appositamente per te!

[Voti: 1    Media Voto: 5/5]