Comprendere come le persone leggono una pagina web è di fondamentale importanza per  costruire in modo efficace i layout delle pagine e posizionare i contenuti, in modo da attrarre più facilmente l’attenzione dei visitatori e da favorire la conversione (scaricare un white paper, registrarsi alla newsletter, richiedere una demo, fare un acquisto, ecc.).  

Sono stati fatti diversi studi per comprendere come le persone esaminano le pagine web.

In un precedente post abbiamo visto come vari studi abbiano suggerito che molto spesso le persone, per leggere una pagina web, seguono uno schema che rassomiglia ad un triangolo o, più spesso, alla lettera “F”. 

Pur essendo dei modelli visivi molto diffusi, non sono i soli che sono stati proposti per mostrare come le persone esaminano le pagine web. Un altro popolare modello è quello comunemente chiamato il “diagramma di Gutenberg”, reso popolare dal designer Edmund C. Arnold (figura seguente). 

 

Il diagramma di Gutenberg prende in considerazione come un lettore di cultura occidentale esamina una pagina.

Il diagramma divide una pagina in quattro quadranti. Secondo questa teoria, di solito:

• s’inizia a leggere in alto a sinistra (“Primary Optical Focus” = Principale Focus Ottico); 
• poi ci si sposta orizzontalmente verso destra (“Strong Fallow Area” = Forte Area Inattiva); 
• subito dopo, si ritorna a sinistra, muovendosi rapidamente verso il basso (“Weak Fallow Area” = Debole Area Inattiva); 
• infine, si prosegue orizzontalmente verso destra (“Terminal Area” = Area Finale). 

La seconda e la terza area sono quelle che ricevono minore attenzione, a meno che non siano enfatizzate in qualche modo tramite il design. Comunque, l’area 2 riceverà più attenzione dell’area 3. In queste zone si dovranno posizionare elementi di minore importanza, come link di navigazione secondaria. 

Invece, la Primary Optical Area è quella dove gli occhi si concentrano automaticamente appena vedono la pagina, a prescindere dal fatto che l’utente stia ricercando qualcosa, voglia leggere o solo dare una rapida occhiata. 

La quarta area è quella dove si registra un “pausa”, un break nella lettura e l’utente può essere orientato a compiere un’azione. 

Nell’immagine seguente è raffigurato il percorso visivo seguito dagli occhi, secondo questa teoria: 

Come si può notare, lo sguardo segue un percorso simile alla lettera “Z”: inizia dalla “Primary Optical Area” e si arresta nella “Terminal Area”.

Il diagramma suggerisce anche che gli occhi scorrono la pagina seguendo dei movimenti orizzontali. Ogni movimento inizia dal bordo di sinistra e si sposta verso il bordo di destra, seguendo quello che è stato definito l’asse di orientamento (immagine seguente). Lo sguardo, comunque, nel suo complesso, tende a seguire un naturale movimento dalla Primary Area alla Teminal Area: questo percorso è chiamato “Reading Gravity” (tendenza di gravitazione delle lettura). L’area 2 e l’area 3 cadono al di fuori della “Reading Gravity” e, di conseguenza, ricevono un’attenzione ridotta, a meno che non siano enfatizzate visivamente.  

  

Secondo questa descrizione, gli elementi più importanti dovrebbero essere posizionati lungo il percorso della Reading Gravity. Per esempio, collocando il logo o un titolo in alto sulla sinistra, un immagine o del contenuto importante al centro e una call to action in basso sulla destra. 

Vediamo come il Diagramma può essere traslato in un effettivo layout (immagine seguente).

Questo design – attraverso la sua struttura (logo che attira per primo l’attenzione; menu di navigazione; immagine centrale che separa la sezione in alto da quella posta in basso e che facilita il movimento degli occhi in giù; due colonne di contenuti; una call to action) – aiuta a muovere lo sguardo in modo da esaminare tutti gli elementi più importanti contenuti nella pagina, seguendo un percorso logico.

 

Alcuni esempi di siti web  

Vediamo ora alcuni siti web che seguono il diagramma di Gutenberg. 

 

 

 

Call to action

Il diagramma di Gutenberg ci suggerisce anche che l’area in basso sulla destra è quella che ottiene l’ultima attenzione dello sguardo del lettore, dove cioè si focalizza il suo interesse al termine della lettura. Dovrebbe quindi essere l’area, come ho accennato prima, dove conviene collocare la call to action, in quanto è la naturale conclusione dell’esame condotto dall’utente. 

Si consideri, ad esempio, l’immagine seguente: 

Come si può notare: 

• il titolo (headline), che gli utenti leggono per primo, si trova nella principale area dove in genere si dà una prima occhiata; 
• il testo, che gli utenti leggono dopo il titolo, sta sulla destra, nella “Strong Fallow Area”; 
• l’immagine del prodotto, che viene guardata dopo che gli utenti hanno dato una scorsa al testo, è collocata nella “Weak Fallow Area” (questo è il migliore luogo per collocare un’immagine, perché le immagini tendono a focalizzare più a lungo lo sguardo: di conseguenza, piazzandola qui, in questa area debole, non sarà guardata troppo a lungo rispetto agli altri elementi); 
• infine, una call to action è collocata nella “Terminal Area”, dopo che lo sguardo ha guardato tutti gli altri elementi secondo il normale percorso visivo: è cioè nel luogo migliore per spingere l’utente a completare l’azione richiesta. 

Esaminiamo, invece, cosa accade quando la call to action è posizionata sulla sinistra in basso, nella “Weak Fallow Area”, quella a cui gli utenti prestano minore attenzione:

In questo caso, gli utenti muovono gli occhi verso la call to action (area 3), ma solo per un brevissimo periodo, dato che si dovranno spostare verso destra, per seguire il normale percorso visivo che gravita verso l’area 4. Dopo che hanno esaminato l’ultima area, la “Terminal Area”, gli utenti dovranno volgere lo sguardo indietro, ritornando nella “Weak Fallow Area” per cliccare sul pulsante della call to action.

Ma questo movimento, non solo forza i lettori a fare un’ulteriore azione – e sappiamo bene quanto poco tempo si dedica normalmente a visitare una pagina web, per cui ogni azione in più rischia di allontanare il visitatore  – ma li spinge anche a fare qualcosa di innaturale, che va contro il loro “ritmo visivo”. 

Le call to action devono essere posizionate nella “Terminal Area” poiché è più rapido e più facile compiere l’azione. Come abbiamo scritto, il diagramma di Gutenberg parte dal presupposto che gli occhi tendono a seguire generalmente un movimento che parte dall’alto, sulla sinistra, e poi tende a gravitare verso il basso sulla destra, come si può osservare nella figura seguente:

 

Pertanto, posizionando la call to action in basso sulla destra, la si colloca nel luogo naturale dove va a gravitare lo sguardo. Possiamo comprendere meglio questo ragionamento se osserviamo l’immagine che segue, che evidenzia meglio le principali aree di gravitazione dello sguardo (1 e 4) e quelle secondarie, più deboli (2 e 3):

Il modello “Z” e il modello “zig-zag”

Come abbiamo visto, nel diagramma di Gutenberg lo sguardo descrive un movimento che ricorda la forma della lettera “Z”. Per questo motivo, è spesso identificato con un altro modello teorico, quello definito propriamente “modello Z”.

Nella realtà, i due modelli sono identici, entrambi descrivono nello stesso modo il movimento degli occhi. L’unica differenza sostanziale è che, quando si parla di modello “Z”, tutte le quattro zone hanno lo stesso peso, non esistono aree più forti e aree più deboli, né aree di gravitazione, come si può osservare nell’immagine seguente:

 

 

Buckenmeyer (immagine seguente) si conforma al modello “Z” perchè, come si può osservare, non esistono Strong e Weak Area, ma un’uniformità di pesi. 

 

Il movimento dello sguardo nel modello “Z” è identico a quello descritto nel diagramma di Gutenberg. L’unico vero motivo per distinguere il modello “Z” dal diagramma di Gutenberg è in pratica dovuto al fatto che da questo modello è derivato quello definito “zig-zag”, che descrive il movimento dello sguardo come composto da una serie di “Z”. 

Il diagramma “zig-zag” si adatta particolarmente a pagine lunghe dove sono presenti molte immagini e blocchi di testo, che invitano a una rapida scansione, come nell’esempio seguente: 

Conclusioni

Il Diagramma di Gutenberg – così come il modello “F” o il triangolo d’oro o il modello “Z” – non  è una verità assoluta. Ci suggerisce solo che esiste un naturale percorso che gli occhi seguono quando osservano una pagina. Di conseguenza, può darci utili indicazioni di come costruire una pagina web e dove posizionare gli elementi principali, come le call to action. 

Però, è valido, come tutti gli altri modelli a cui ho accennato, solo se la pagina da leggere non ha elementi – immagini, blocchi di testo, ecc. – che possiedono pesi visivi differenti, capaci di attirare lo sguardo e di distoglierlo dal suo percorso naturale. Se, cioè, non esistono elementi visivi dominanti ordinati secondo una gerarchia visiva.

Questo argomento sarà trattato nel prossimo post.