I modelli esaminati nei precedenti post – triangolo d’oro, “F”, “Z”, “Zig-Zag, diagramma di Gutenberg – sono più simili di quanto si potrebbe pensare.

Tutti questi modelli descrivono infatti il naturale movimento degli occhi quando non esistono particolari segnali visivi che attraggono lo sguardo. 

 

              

 

In mancanza di questi segnali visivi, le persone inizieranno a visionare una pagina come gli è stato insegnato quando erano bambini, cioè da sinistra in alto, muovendosi poi orizzontalmente verso destra. Successivamente, sposteranno lo sguardo verso il basso, ritornando sul lato sinistro, per poi proseguire nuovamente verso destra con un movimento orizzontale. 

Anche il modello triangolare segue questo percorso, come si può osservare nell’immagine seguente: 

 

Il principale elemento di diversità tra questi modelli è rappresentato dalla differente area di gravitazione dello sguardo: mentre il diagramma di Gutenberg e i modelli “Z” e “Zig-Zag” tendono a far gravitare lo sguardo in basso sulla destra, il modello “F” e quello del “triangolo d’oro” tendono a far gravitare lo sguardo verso la parte sinistra della pagina. 

Come possiamo giustificare questa differenza? 

In tre modi: 

1. il modello “F” e quello triangolare esprimono il modo in cui le persone scorrono velocemente una pagina per vedere se ci sono delle informazioni interessanti; gli altri modelli esprimono invece il caso in cui le persone stanno leggendo la pagina e sono fortemente interessate al contenuto; 
2. in genere, le persone preferiscono dare una rapida occhiata alla pagina web per capire se vale la pena di essere letta; di conseguenza, se capiscono che ne vale la pena, non proseguiranno con una scansione triangolare o a “F”, ma graviteranno anche verso il lato destro, seguendo quindi gli altri modelli; 
3. nel caso di una lettura a “F o a triangolo, forse la pagina è stata scritta seguendo uno stile a piramide invertita, ponendo cioè subito, all’inizio del testo, le informazioni più importanti e relegando quelle meno importanti nella parte inferiore della pagina; di conseguenza, la lettura, dopo un primo interessamento, procede velocemente scorrendo solo le prime parole di ogni paragrafo.    

Come abbiamo detto, tutti questi modelli seguono il naturale ritmo della lettura – soprattutto quando il contenuto è distribuito in modo uniforme – e suggeriscono dove posizionare le informazioni più importanti. Se si progettano le pagine web rispettando questo percorso, si è molto facilitati nell’attrarre l’attenzione del lettore. Così, ad esempio, se si segue il diagramma di Gutenberg o il modello “Z”, si potrà collocare una call to action in basso sulla destra; se, invece, si segue il modello “F” o quello triangolare, si cercherà di far gravitare sulla sinistra le informazioni più importanti. 

 

Elementi d’attrazione

Questi modelli descrivono dove si dirige lo sguardo quando non ci sono elementi che lo distolgono da questo percorso naturale – da sinistra a destra e dall’alto in basso – e lo attraggono in altre direzioni.

Si consideri, ad esempio, come la direzione dello sguardo di una persona possa influire sulla direzione degli occhi di chi la guarda. Nell’immagine seguente, si può osservare come si modifichi il centro dell’interesse del lettore, quando cambia la direzione dello sguardo del bambino; se il bambino guarda in direzione del lettore, quest’ultimo dirige il suo sguardo verso il bambino; se il bambino guarda in un’altra direzione – in questo caso verso destra – anche lo sguardo del lettore si dirige verso questa direzione.  

Osserviamo le seguenti due pubblicità, che differiscono solamente per la diversa direzione dello sguardo della modella. Come si può notare, lo studio eseguito utilizzando la tecnica dell’eyetracking evidenzia che gli occhi del lettore seguono la direzione dello sguardo della modella.

Quindi, noi possiamo guidare il movimento degli occhi del lettore semplicemente utilizzando la direzione dello sguardo di una persona raffigurata in un’immagine. E, in questo modo, possiamo distogliere lo sguardo di una persona dal percorso naturale seguito dagli occhi, come descritto nei 5 modelli di cui abbiamo parlato.

 

Il peso visivo

Oltre che nel modo appena indicato, si possono guidare gli occhi del lettore anche attraverso il diverso peso visivo attribuito agli elementi che compongono la pagina (titoli, sottotitoli, testo, immagini, sfondi, aree, call to action, ecc.).

Vediamo come questo avviene, attraverso alcuni esempi.

 

La dimensione

Consideriamo le due figure seguenti. Nella prima figura, il quadrato più grande domina la scena, rispetto a quello più piccolo. La seconda figura, confrontata con la prima, evidenzia invece che più grande è la differenza tra le forme, maggiore sarà la predominanza della forma più grande.

Entrambe le figure evidenziano quindi che il quadrato più grande, dato che attira l’attenzione più di quello minore, ha un peso visivo maggiore. 

Noi possiamo guidare lo sguardo del lettore verso una zona specifica della pagina, semplicemente evidenziando un contrasto tra le dimensioni di due aree differenti. L’immagine seguente evidenzia meglio questo contrasto, questo “peso visivo” differente: le forme più piccole perdono d’importanza e si affievoliscono sullo sfondo, rispetto all’elemento più grande, che invece emerge in prima linea: 

         

In questa successiva immagine, possiamo osservare meglio come la dimensione determini il peso visivo dei due elementi. Lo sguardo si concentra infatti sulla sinistra: la zucca con le dimensioni più grandi domina la scena, rispetto alla parte destra che è invece occupata dalla zucca più piccola.

Si può quindi dire che la zucca di sinistra ha un peso visivo maggiore di quella di destra, perchè è quella dove, in un primo momento, si concentra lo sguardo.

 

La prospettiva

Possiamo far emergere un elemento, rispetto ad un altro, e quindi guidare lo sguardo nella sua direzione, variando il grado di rilievo degli elementi, la loro prospettiva, come nell’immagine seguente:  

        

In questa immagine, gli alberi hanno il maggiore peso visivo e dominano su tutti gli altri elementi; la casa e le colline costituiscono un elemento secondario; infine, le montagne hanno il peso visivo minore e, quindi, si vedono come ultimo elemento sullo sfondo. 

 

Il contrasto

Si possono mettere in evidenza degli elementi lavorando sul contrasto, cioè sul colore dell’elemento e il suo sfondo. Nella figura seguente, ad esempio, l’immagine sulla sinistra ha un peso visivo maggiore di quella di destra, perché ha un più alto contrasto tra la zona davanti e quella sullo sfondo: 

 

Quindi, in una pagina web, un elemento può emergere rispetto ad un altro, poiché gli si è dato un maggiore contrasto: ad esempio, un blocco di testo scritto in caratteri bianchi su uno sfondo nero emerge di più di uno scritto su sfondo grigio.  

 

Il colore

Possiamo inoltre agire attraverso i colori per guidare lo sguardo del lettore. Si osservi, ad esempio, l’immagine seguente, dove il colore rosso del logo attira subito l’attenzione; poi, lo sguardo si dirige in modo naturale verso il rosso del testo e delle frecce:

Osserviamo adesso l’immagine seguente, dove l’attenzione è subito attratta dalla colonna più grande sulla destra, evidenziata dalla forte presenza del colore rosa. Le altre due colonne hanno un ruolo subordinato e attirano lo sguardo successivamente, dato che hanno un peso visivo minore e appaiono meno importanti. 

 

In pratica, è come se ci fossimo trovati di fronte a un’immagine simile a questa: 

 

Lo spazio bianco

Se un elemento è circondato da spazio bianco – come il cerchio al centro (immagine seguente) – ha un peso visivo superiore rispetto ad elementi che hanno poco o nessun spazio bianco:

 

 

Da cosa è determinato il peso visivo 

Il “peso visivo” di un elemento rappresenta la sua capacità di attirare l’attenzione. In una composizione visiva, si può fare in modo che alcune zone risultino dominanti sulle altre, perché producono delle sensazioni che focalizzano l’interesse delle persone: queste zone hanno un maggior “peso visivo”. Il peso visivo è determinato principalmente: 

• dalla dimensione: a parità di altre condizioni, una forma grande “pesa” di più di una piccola; 
• dalla densità: la presenza di un numero maggiore di elementi in un dato spazio dà più peso visivo a questo spazio; 
• dalla forma: una forma regolare (per es., geometrica) appare visivamente più pesante di una irregolare; 
• dal colore: alcuni colori hanno più peso visivo, perché si notano maggiormente – come il rosso, il blu e il verde – mentre altri hanno meno peso, come l’arancione e il giallo; 
• dal contrasto tonale: un oggetto più scuro ha più peso visivo di uno più chiaro; e così, più elevato è il contrasto tra un oggetto e il suo sfondo, maggiore sarà il peso visivo dell’oggetto (ad esempio, colore chiaro in superficie e sfondo scuro); 
• dalla posizione: le forme tendono ad avere più peso quanto più sono in primo piano.  

Il peso visivo di un elemento è definito dalla combinazione di queste caratteristiche e dalla loro maggiore o minore presenza. Così, ad esempio, in una pagina, l’elemento con una maggiore dimensione potrebbe non avere il più alto peso visivo, se ha un colore con minore peso, ha poco contrasto e non è posizionato in primo piano. 

 

Siti web

Per vedere come funziona il peso visivo, esaminiamo adesso alcuni siti.

Girlfriend (immagine seguente) ha un solo fortissimo punto visivo, il titolo: “American Design. New York City”. Il testo, invece, scorre senza nessun particolare punto d’attrazione.

Nella figura seguente, abbiamo due differenti pesi visivi. L’immagine in alto a sinistra è l’elemento che ha il maggiore peso visivo e che, quindi, domina la scena: attira subito lo sguardo e lo orienta poi verso il contenuto collocato sulla destra, che ha un peso visivo inferiore.

Anche nel sito rappresentato qui di sotto, le immagini, grazie alla tazzina di caffé, che emerge tra tutte, attirano subito lo sguardo; poi, lo sguardo si sposta verso la colonna di testo, che ha un peso visivo minore.

Se una pagina è stata costruita senza pesi visivi, abbiamo delle difficoltà a esaminarla, perché lo sguardo non trova dei particolare punti dove soffermarsi. Il sito TillyMass, ad esempio, ha tutti gli elementi con lo stesso peso; di conseguenza, si riesce a guardarlo nel suo insieme, ma senza che qualche elemento catturi l’attenzione in modo particolare. In casi come questo, non esistendo dei punti di attrazione, è probabile che le persone seguano uno dei cinque modelli (“Z”, “F”, ecc.). 

 

Conclusioni 

Inserendo degli elementi che hanno un particolare peso visivo si può guidare lo sguardo quando si sofferma su una pagina web. In questo maniera, si può fare in modo che lo sguardo non segua il suo naturale movimento, come descritto nei cinque modelli (triangolare, “F”, “Z”, “zig zag”, Gutenberg). 

Però, affinchè lo sguardo segua un percorso ordinato, in modo da rispettare la successione che abbiamo progettato, occorre che gli elementi abbiamo un peso visivo diverso: l’elemento su cui vogliamo che lo sguardo si soffermi subito, appena si guarda la pagina, deve avere il peso visivo maggiore; il secondo elemento, su cui si deve soffermare lo sguardo dopo aver osservato il primo elemento, deve avere un peso visivo minore, ma più elevato del terzo elemento su cui si dovrà soffermare lo sguardo successivamente.

Questo significa che dobbiamo creare una gerarchia visiva, come vedremo nel prossimo post.