Per poter guidare lo sguardo di una persona che legge una pagina web, abbiamo bisogno di creare delle aree d’interesse o, più precisamente, dei punti focali definiti da specifi pesi visivi. Il punto focale dominante dovrebbe essere quello dove si vorrebbe focalizzare per prima cosa lo sguardo del lettore: il logo, il titolo della pagina, l’immagine di un prodotto, ecc. 

E’ in questa direzione che le persone guardano quando arrivano per la prima volta sulla pagina, perché è l’area o l’elemento con maggiore peso visivo e, quindi, ha un maggiore potere di attrazione. Da qui, gli occhi seguiranno altri percorsi: dall’elemento dominante si sposteranno verso gli alti punti focali presenti nella pagina.

Il percorso che verrà seguito dipende dai pesi visivi relativi di questi punti focali. 

La figura sulla sinistra dell’immagine seguente ci mostra una pagina che non ha alcun punto focale e che quindi si presenta come un unico blocco di testo da cui non si riesce ad estrapolare alcuna informazione particolare. 

L’immagine sulla destra, al contrario, ha un punto focale dominante, che attira subito lo sguardo – la banda azzurra – e dei punti focali con minore peso visivo: la barra sulla sinistra e la colonna di testo centrale suddivisa in vari blocchi di testo. 

Chiunque capiti sulla prima pagina a sinistra avrà bisogno di impegnarsi particolarmente per capire se questa è la pagina di cui ha bisogno. Se lo è, il visitatore non ha scelta: deve leggere ogni parola per trovare la parti di informazione a cui è interessato. 

La pagina sulla destra è, al contrario, molto più leggibile e non richiede un grande sforzo per capire se è la pagina giusta. Se lo è, la pagina conduce rapidamente il lettore all’informazione che desidera. 

 

La gerarchia visiva

Chi progetta il sito web può immaginare, per ogni pagina, il percorso che vuole far seguire al visitatore e costruire di conseguenza una serie di punti focali con decrescente peso visivo, in modo che lo sguardo si sposti dal punto focale con maggiore peso visivo fino al punto focale con minore peso visivo.

Occorre quindi creare una gerarchia visiva, cioè definire l’ordine d’importanza dei diversi elementi posti in una pagina, in modo che lo sguardo segua un preciso percorso cronologico.

Ad esempio, nell’immagine seguente, esiste una precisa gerarchia visiva: 

 

I quattro blocchi hanno un differente peso visivo, definito principalmente dal colore e, secondariamente, dalle dimensioni. Il blocco dominante è il primo, quello di colore nero posto in alto sulla sinistra. Il blocco con il secondo peso visivo è quello di colore grigio scuro, posizionato sulla destra in basso. Il blocco con il terzo peso visivo è quello di colore grigio medio, collocato a sinistra in basso. Infine, l’elemento con minore peso visivo è rappresentato dal piccolo quadrato di colore grigio chiaro, posto in alto sulla destra. 

Guardando questa pagina, gli occhi del lettore si sposteranno tra i vari blocchi, passando dal quadrato nero al rettangolo grigio scuro, poi al rettangolo grigio medio fino al quadrato grigio chiaro: la gerarchia visiva rende chiari gli elementi principali e quelli secondari.

Possiamo pensare al contenuto che dobbiamo comunicare come composto da differenti livelli di informazione, ognuno di differente importanza. Elementi che sono sullo stesso livello hanno un peso visivo analogo; elementi che stanno su differenti livelli hanno diversi pesi visivi. Come il peso visivo di un livello aumenta, cresca anche l’importanza dell’informazione. 

Un livello del design comunicherà il messaggio più importante, un altro livello comunicherà un secondo messaggio, e così via (immagine seguente).

Si crea una gerarchia visiva regolando i pesi visivi degli elementi (livelli di design) presenti nella pagina.

 

Siti web con gerarchia visiva

Il sito raffigurato nell’immagine seguente, ha una chiara gerarchia visiva:

 

L’elemento con il maggiore peso visivo è rappresentato dal messaggio di benvenuto -“Hello! What are you doing here?” – grazie alla posizione in primo piano e ai grandi caratteri neri utilizzati. Questi caratteri attirano immediatamente lo sguardo e lo dirigono, subito dopo, verso il menu di navigazione sulla destra, che ripete il nero come colore di fondo e che ha un peso visivo minore del messaggio di benvenuto. 

Il fondo nero è anche utilizzato per guidare lo sguardo verso altri elementi contenuti nella pagina. Il fondo azzurro è usato invece per fornire del contrasto e aiutare alcuni elementi ad emergere successivamente. 

Daina Reed (immagine in basso) ha tre diversi punti focali, con tre diversi pesi visivi: la banda viola è l’elemento dominante, quello che attira subito lo sguardo; poi, abbiamo l’immagine e, subito dopo, la colonna di testo sulla sinistra.

Senza un elemento che domina, i lettori dovranno impegnarsi per trovare il punto iniziale da leggere. Creando invece un elemento dominante, si darà modo ai lettori di capire subito dove devono iniziare a guardare. Da lì si può creare un elemento subordinato dove lo sguardo si poserà dopo aver visto il primo elemento principale. 

La gerarchia visiva crea dei punti focali, mette in evidenza quali azioni vogliamo che il vistatore compia in successione, definendo gli schemi di movimento dello sguardo. 

In Go Live Button (immagine seguente), il titolo “Prepare for Lunch” è l’elemento dominante. Poi, le tre strisce rosse costituiscono gli elementi secondari, che verranno osservati seguendo in successione i numeri cerchiati. 

  

Quando una pagina è priva di gerarchia e gli elementi hanno apparentemente uguale importanza, siamo costretto a seguire un processo di lettura molto lento e confuso per cercare di capire cosa è importante e come il tutto è organizzato. 

Giraffe (immagine sotto) esemplifica molto bene il caos visivo che si viene a creare quando non c’è una gerarchia visiva ben definita. In questo caso, l’elemento che potrebbe sembrare dominante – la prima banda con il titolo “£ 5 Burger Tuesday” – sfuma, sommersa dagli altri titoli e dalle altre immagini.

Il lettore non sa cosa osservare, dato che non esistono particolari elementi dominanti.

 

In genere, si possono creare tre livelli gerarchici. La creazione di un quarto livello è più difficile: noi possiamo facilmente distinguere il peso visivo maggiore e quello minore, mentre facciamo più fatica ad individuare quelli che stanno in mezzo, che tendono a ricadere in un’area grigia dove sono visti con lo stesso grado di rilevanza.

Per questo motivo, quando si utilizzano più di tre livelli gerarchici, occorre che siano chiaramente separati, come nella pagina di Adobe in Education:

Come si può osservare, la grande immagine in alto, grazie alle sue dimensioni e al posizionamento, è il punto d’entrata, il punto focale con il maggior peso visivo: qui s’indirizza subito lo sguardo. Il grande spazio bianco che contorna il titolo della pagina (“Adobe in Education”) attira successivamente l’attenzione.

Poi, lo sguardo tenderà a spostarsi verso il terzo punto focale, che è costituito dalla barra laterale destra, con il color grigio dello sfondo che fa da contrasto al colore rosso dei titoli. Infine, lo sguardo si sposterà verso l’ultimo punto focale, quello con il minore peso visivo, che è rappresentato dalla colonna sulla sinistra, con le immagini piccole, i titoli in rosso e lo spazio bianco che isola i testi. 

 

Conclusioni 

I modelli “F”, “Z”, triangolare, di Gutenberg, “zig zag”, che abbiamo visto nei precedenti post, suggeriscono che esiste un naturale percorso che gli occhi seguono quando osservano la pagina. Questo argomento è valido soprattutto quando ci sono grandi blocchi di testo con poca o nessuna gerarchia visiva.

In questi casi, ognuno dei cinque modelli indica dove posizionare le informazioni più importanti lungo il normale percorso visivo. In genere, in assenza di altri segnali visivi, le persone iniziano ad osservare l’area in alto a sinistra e da lì si sposteranno orizzontalmente  e poi verticalmente. E’ in questo modo che ci è stato insegnato a leggere. 

Nel momento in cui s’inseriscono dei segnali visivi, il percorso che seguono gli occhi non è più quello naturale, ma tende a convergere verso questi segnali. 

Si possono allora individuare le informazioni che il visitatore deve vedere e in quale ordine. Attraverso una serie di punti focali, si possono guidare i suoi occhi in modo che seguano la gerarchia visiva che abbiamo costruito. 

La gerarchia visiva aiuta ad organizzare le informazioni, a dargli un ordine e a evidenziare delle priorità. 

In conclusione, chi progetta un sito web può decidere di rinforzare un modello – come il modello “Z”, “F”, ecc. – oppure può decidere di costruire un nuovo percorso visivo, attraverso i punti focali e la gerarchia visiva.