Quando si pubblica un contenuto in Rete, tutti desiderano che venga letto nella sua interezza, ossia parola per parola. Tra smartphone, tablet e tutti gli altri dispositivi digitali le informazioni vengono fruite e fagocitate in pochi secondi, mentre gli utenti scrollano velocemente da una pagina all’altra alla ricerca di qualche informazione interessante da metabolizzare. La maggior parte delle persone tende a leggere solo quello che attira la loro attenzione: ed è per questo motivo che quando si lavora a un contenuto bisogna mettere l’utente nella migliore condizione per fruirne. Quando si progetta una pagina web, per esempio, è importante prestare attenzione a parametri come l’usabilità e la facilità d’uso, oltre alla disposizione dei contenuti e così via.

Nella progettazione di tutti quei processi che definiscono la “UX Design” (User Experience Design), per migliorare la facilità di navigazione e rendere più intuitiva la consultazione delle pagine web è importante scegliere il layout giusto. L’UX Design è un aspetto molto importante, perché la prima impressione che un sito web (o un’app) suscita può davvero fare la differenza. È importante pensare alle informazioni che l’utente deve visualizzare in una pagina web, ma anche in quale ordine devono essere lette e il tipo di risposta che devono suscitare. Con un attento studio, infatti, è possibile guidare l’utente nella fruizione delle informazioni, utilizzando dei “percorsi visivi” che possono stimolare l’occhio e la mente umana.

Il “Pattern Z”

Per valorizzare i contenuti è importante scegliere il giusto layout: il “Pattern Z” e “Pattern F” sono i modelli più utilizzati in Rete. Il primo, per esempio, è la scelta ideale per tutti quei siti web che sono costruiti a blocchi di contenuti. Il Pattern Z funziona come una pagina cartacea ed è la soluzione ideale per gli utenti occidentali che utilizzano sistemi di scrittura dall’alto verso il basso e da sinistra a destra: in questo modo si viene a formare una forma immaginaria che assomiglia a una Z. Pattern Z è la scelta ideale per chi vuole proporre dei contenuti semplici e con poco testo e alcuni elementi chiave (solitamente un paio). Le informazioni vengono ordinate per grado di rilevanza all’interno della pagina stessa: in alto vengono messe quelle più importanti, in basso quelle meno. Seguendo la forma di una Z, il flusso visivo accompagna lo sguardo dell’utente da una parte all’altra della pagina. Il tutto, chiaramente, va bilanciato.

Il “Pattern F”

Un altro layout piuttosto gettonato in Rete è il “Pattern F”, la soluzione ideale per chi deve preparare delle pagine ricche di testo. Si tratta del modello più usato per le pagine web che privilegiano i contenuti: viene utilizzato per siti di news, blog o landing page (una pagina web che ha lo scopo di promuovere una call to action specifica). La lettera “F”, in questo caso, rappresenta il senso di lettura con cui il lettore scansiona il testo: è stato dimostrato che gli utenti, quando si trovano a leggere online, non seguono lo stesso ordine di lettura che manterrebbero davanti alla pagina di un libro ma vanno alla ricerca keyword o ancore di testo che attirino il loro interesse.

Il Pattern F permette agli utenti di scansionare il testo da leggere: si parte orizzontalmente dalla parte superiore dello schermo per poi passare in verticale lungo il lato sinistro (l’occhio umano apprezza keyword e un titolo in <h2>). Lo sguardo tende a scendere in basso formando un’altra linea orizzontale, generalmente più breve della precedente. Continuando nella lettura, l’occhio umano segue le altre linee orizzontali formando una lettera a forma di F (in qualche caso assomiglia anche “E” o a una “L” capovolta). Naturalmente, non si tratta di uno schema fisso: gli utenti hanno la tendenza a non leggere in modo lineare. Anche in questo caso, il Pattern F ha senso solo per le lingue che seguono il senso di lettura da sinistra a destra. Chi utilizza un layout con Pattern F lo fa per incentivare la scansione dei contenuti piuttosto che la lettura: è senza dubbio la scelta ideale per blog o siti di news o per quelle pagine web con grandi blocchi di testo.

“F come  Fast”, veloce

Per comprendere come funziona la mente umana vengono usate diverse metodologie scientifiche: una delle più utilizzate è l’eye tracking (in italiano, oculometria). Si tratta di un processo in grado di monitorare, registrare ed analizzare il movimento oculare di una persona. Si tratta di un processo che monitora i movimenti oculari per determinare dove una persona sta guardando, cosa sta guardando e per quanto tempo il suo sguardo punti in un determinato punto dello spazio. L’eye tracking viene sfruttato in numerosi contesti: nella ricerca in psicologia, nel marketing e in altri ambiti, mentre le applicazioni spaziano dal package design fino all’ingegneria automobilistica. Utilizzando un dispositivo eye tracker, infatti, è possibile capire se il soggetto in questione ha letto tutte le righe di un testo, se l’ha fatto parzialmente o se si è focalizzato su qualche frase o paragrafo. È possibile scoprire quante parole, immagini o spazi hanno catturato la sua attenzione e il tempo effettivo dedicato alla lettura e altro ancora.

La “web usability” fa la differenza

Diversi studi dedicati all’eye tracking hanno dimostrato che la maggior parte dei lettori online tenda a seguire lo schema proposto dal Pattern F, mentre il loro sguardo si sposta sulla parte destra dello schermo solo in modo casuale. Il primo a occuparsi di “eye tracking” è stato Jacob Nielsen, considerato il principale studioso dell’usabilità del web (“web usability”, in inglese).

Secondo Nielsen, un sito è “usabile” quando è piacevole da usare, efficiente e facile da memorizzare. Lo studioso ha rilevato nelle sue ricerche come i contenuti che seguano il Pattern F siano scannerizzati molto velocemente dagli utenti: per questo aveva creato l’espressione “F for Fast”. Lo studio di Nielsen era stato condotto nel 2006 su un campione di 232 utenti che si erano trovati a visualizzare alcune pagine web con compiti diversi da svolgere. Lo studioso aveva notato un comportamento più o meno simile in tutti i soggetti coinvolti nella prova: gli utenti, per esempio, avevano guardato sin dall’inizio la parte superiore della pagina web, spostando lo sguardo in modo orizzontale. Un altro comportamento riscontrato più volte riguardava lo scrolling verticale: l’utente, infatti, tendeva a scrollare fino a quanto trovava un punto particolare per poi proseguire nella lettura in modo orizzontale per un tratto però più breve rispetto al primo.

Il lato sinistro è quello dominante

Nelle ricerche, gli utenti si erano focalizzati maggiormente sul lato sinistro, anche se in altri soggetti la concentrazione si era riattivata nuovamente nell’ultima parte del contenuto trasformando lo schema più in una “E” rispetto a una “F”, e in qualche caso a una “L” rovesciata. Nel complesso, gli schemi riscontrati tendono a omologarsi. La ricerca di Nielsen si era concentrata in tre aree principali: una pagina dedicata al “chi siamo”, una all’e-commerce e una al SERP (Search Engine Results Page) di Google. Nonostante le differenze sostanziali tra le pagine web, lo schema a F è risultato essere quello prevalente. Per esempio, analizzando la pagina relativa a un prodotto di e-commerce è stato notato come l’attenzione degli utenti si sia focalizzata maggiormente in una porzione di schermo nell’angolo in alto a destra, in corrispondenza al prezzo e alla “Call To Action” “aggiungi al carrello”.

Altro esempio: nei titoli per la SEO (ottimizzazione dei testi per i motori di ricerca) la keyword principale dovrebbe essere la prima cosa che incontra il lettore. In questo esempio di Repubblica la keyword “riscaldamento globale” permette subito di inquadrare l’argomento:

Perché adottare il Pattern F

Il layout a F permette a chi crea un contenuto di avere un maggior controllo sulle informazioni che vuole mettere in risalto. È importante stabilire l’ordine in cui i visitatori devono fruire delle informazioni e posizionare il contenuto cercando di favorire la sopracitata modalità di scansione. I primi due paragrafi del contenuto rivestono un ruolo fondamentale per catturare l’attenzione dell’utente e per convincerlo a proseguire la lettura. Il messaggio del contenuto nella parte superiore della pagina è la chiave per attirare l’attenzione: è consigliabile utilizzare una parola chiave e spiegare un singolo concetto per paragrafo. Ricapitolando, per funzionare è quello necessario inserire le parole chiave all’inizio dei due paragrafi del layout F. Per mettere in risalto un contenuto è possibile evidenziare le parole utilizzando dei colori diversi, mentre gli elenchi puntati semplificano la scansione e sono perfetti per catturare l’attenzione di un utente. È stato notato che l’attenzione degli utenti tenda a focalizzarsi ai lati della pagina web: è consigliabile mettere una Call to Action proprio al centro del contenuto proposto. Un altro espediente utile per garantire la scansione di un testo è quello di aggiungere delle immagini per creare una mini-pausa al blocco del contenuto.

Una curiosità: si può usare l’F-Pattern anche per la stesura del CV.

Due schemi vincenti

I Pattern F e Z sono tra i più utilizzati in Rete. In entrambi i casi è importante studiare le informazioni in modo da rendere la scansione dei contenuti il più naturale possibile. È necessario veicolare i contenuti in base al grado di importanza e per arrivare a una Call To Action in possesso di tutte le informazioni necessarie. Il contenuto resta la chiave di tutto: è necessario riservare lo spazio adeguato all’interno del layout scelto e piazzare in modo intelligente Call to Action e gli Advertising (meglio metterli sul lato destro).