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”.
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.
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”.
Se volete un supporto alla progettazione del vostro sito non esitate a contattarci all’indirizzo info@www.magentadigital.it
RESTA AGGIORNATO!
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!
