Gli elementi strategici del web: la gerarchia visiva (il layout a F)

Posted on

Nella progettazione e realizzazione di un sito web abbiamo visto come l’impianto di un layout specifico può mutare l’atteggiamento degli utenti.  Abbiamo appena scritto del layout a Z, ora focalizziamoci su quello a F.
II layout a F si basa su analisi e ricerche condotte sul comportamento dell’utenza ed è particolarmente indicato per pagine web essenzialmente testuali, quindi blog e descrizioni dei prodotti e-commerce.
Il primo a parlarne è stato nel 2006 Jacob Nielsen che dopo l’analisi del tracciamento degli occhi degli utenti su tre diverse pagine web nell’articolo “F-Shaped Pattern For Reading Web Content” afferma che  vi sono tre fasi del movimento dell’occhio:

1)Gli utenti prima leggono in senso orizzontale da sinistra verso destra, di solito attraverso la parte superiore della pagina. Questo elemento iniziale costituisce la barra superiore della F.

2)Successivamente, gli utenti si spostano un po’ in basso nella pagina e leggono in un secondo movimento orizzontale che copre tipicamente una zona più breve rispetto al movimento precedente. Questo ulteriore elemento costituisce la barra inferiore della F.

3)Infine, gli utenti continuano la scansione sul lato sinistro della pagina in un movimento verticale. A volte si tratta di una scansione abbastanza lenta e sistematica che appare come un striscia spessa nel rilevamento. Altre volte gli utenti si muovono più velocemente, creando un mappa a punti. Quest’ultimo elemento costituisce la parte finale della F.

w640

Da queste informazioni possiamo definire la gerarchia visiva del nostro layout in questo modo:

  • Nella prima riga della F saranno posizionati il logo e tutti gli elementi che avranno il compito di orientare il visitatore, quindi navigazione, barra di ricerca, pannello di accesso ed i social se il nostro sito intende puntare sul social media.
  • Nella seconda riga sarà posizionato una frase che descrive il nostro prodotto/servizio o una call to action
  • La parte inferiore verrà divisa in due colonne: quella principale sulla sinistra dove sarà focalizzata l’attenzione dell’utente, che ospiterà il contenuto più importante, e una sidebar sulla destra che ospiterà le informazioni accessorie.
  • È inoltre importante organizzare gerarchicamente il contenuto all’interno della colonna principale, dividendo il testo in paragrafi ed utilizzando immagini e titoli “accattivanti” per catturare l’attenzione del navigatore.