Il layout F-Pattern è il modello più usato per i siti in cui il contenuto è il Re, che richiedono la lettura di blocchi di testo, come quelli di news, blog o landing page di approfondimento. Uno studio condotto nel 2006 da Jacob Nielsen ha dimostrato come gli utenti, quando sono costretti a leggere online, mantengano un comportamento di lettura standard: in realtà non leggono il testo lo scannerizzano. Non seguono lo stesso ordine di lettura che manterrebbero davanti alla pagina di una rivista o a un cartellone pubblicitario, vanno alla ricerca keyword o ancore che attirino il loro interesse, ma questo non significa che il tuo blog o la tua landing non abbiamo valore.

Cos’è il pattern F?

L’F-Pattern è il modello più comune di scansione del testo da parte degli utenti che si trovano davanti a blocchi di testo da leggere.
La F rappresenta il senso di lettura con cui il lettore scansiona il testo: prima traccia una linea orizzontale lungo tutta la parte superiore dello schermo, procede poi in verticale lungo il lato sinistro alla ricerca di keyword o punti di interesse nelle frasi iniziali o dei titoli in <h2>. Trovato il punto d’interesse il lettore procede in senso canonico seguendo linee orizzontali. Il risultato sarà un tracciato che forma la lettera F o al limite la E.
Il pattern a F è valido ovviamente solo per le lingue e le culture che seguono il senso di lettura sinistra/destra.

Come ci comportiamo davanti a blocchi di testo secondo Nielsen

Il concetto di F Layout nasce grazie a studi di eye tracking che dimostrano come la maggior parte dei lettori online segua questo tracciato, mentre il loro sguardo solo accidentalmente si posa sulla parte destra dello schermo.

Il primo a parlarne nel 2006 è stato Jacob Nielsen che, nei suoi studi, ha evinto come i nostri preziosi contenuti siano scannerizzati molto velocemente e seguendo il famoso schema ad F. Per questo Nielsen ha coniato l’espressione “F for Fast” dopo aver esaminato il comportamento che 232 utenti avevano tenuto di fronte a centinaia di pagine web.

Davanti a siti e con compiti diversi il loro comportamento si è rivelato molto coerente:

1. Come prima cosa gli utenti spostano il loro sguardo in direzione orizzontale nella parte superiore dell’area del contenuto. Creano così la barra superiore della F.
2. Il secondo step è quello di spostarsi in verticale scorrendo la pagina, fermarsi in un punto d’attrazione e proseguire la lettura orizzontalmente per un tratto però più breve rispetto al primo. Ecco la seconda barra della F.
3. La concentrazione degli utenti rimane focalizzata sul lato sinistro, la linea d’attenzione rilevata diventa più spessa ma non si muove più orizzontalmente.
Si forma l’asta verticale della F.

Queste tre parti non sono ovviamente rilevabili sempre con la medesima incidenza, in alcuni casi la concentrazione degli utenti tornerà attiva nell’ultima parte del contenuto trasformando lo schema più in una “E” rispetto ad una “F”. Altre volte il contenuto verrà letto con costanza orizzontale solo nella prima parte, saltando il corpo del paragrafo e lo schema figurato sarà più simile ad una “L” rovesciata ma generalmente gli schemi tendono, come dicevamo sopra, ad omologarsi: potrà variare la distanza tra la prima e la seconda asta orizzontale ma la forma sarà sempre quella di una “F”.

Chi siamo, pagina prodotto, SERP: se il contenuto cambia il modello rimane lo stesso?

Lo studio di Nielsen si è concentrato su tre macro aree, una pagina About Us (quella che in media riceve più visite in un sito), la pagina prodotto di un e-commerce e una SERP di Google. La F risulta essere sempre uno schema ricorrente nonostante la differenza tra queste tre tipologie di pagina web.

Come leggi una Pagina Prodotto

La seconda immagine, quella che si riferisce alla pagina prodotto di un e-commerce, la seconda asta orizzontale dello schema “F” è più bassa rispetto alla pagina About Us, perchè al centro è presente l’immagine del prodotto. L’attenzione degli utenti hanno mostrato anche particolare attenzione per una porzione di schermo nell’angolo in alto a dx, in corrispondenza al prezzo e alla CTA “aggiungi al carrello”.

SERP, la leggiamo tutta?

Questa immagine si riferisce invece alla classica pagina dei risultati di un motore di ricerca: la seconda barra orizzontale della “F” qui risulta invece molto più vicina alla prima ma soprattutto molto più lunga. Questo risultato non è dovuto solo al fatto che il secondo titolo è più lungo del primo ma anche perché è ugualmente interessante per gli utenti. Questa tavola evidenzia molto bene anche l’importanza dell’indicizzazione delle pagine, ma di questo avremo tempo di parlare.

Inserire contenuti in un pattern a F

Lungo l’asse ideale tracciato dal punto 1 al punto 2 devi sfruttare la finestra d’attenzione degli utenti inserendo la sidebar, che sarà letta alla ricerca di keyword che rappresentino il titolo della sezione che stanno cercando.

A questo punto sta a te decidere se inserire una linea sottile che vada incontro alla scansione veloce che ne faranno gli utenti, o puntare su una fascia ben più estesa andando a sfruttare la posizione dominante per promuovere il contenuto interno anche a scapito del sottostante.

Dopo essersi soffermato sulla prima riga sai quindi che l’utente scenderà velocemente fino alla seconda sezione evidente (Punto 3) e seguirà una linea d’attenzione orizzontale e meno lunga della precedente (Punto 4). Da qui, teoricamente, il comportamento degli utenti sarà quello di scrollare velocemente la pagina alla ricerca di altri punti d’interesse e keyword ma è molto più probabile che abbandonino la pagina, a meno che tu non sia in grado di inserire un’ulteriore ancora di richiamo.

Per questo motivo è consigliabile introdurre almeno un elemento diverso, di disturbo, che desti nuovamente l’attenzione dei lettori. Un carousel di immagini, un’animazione, un effetto, qualsiasi cosa sia in grado di interrompere la routine pur rimanendo coerente con la pagina. Niente mucche volanti nel layout di un fashion brand!

Dopo “quanto” farlo? Una best practices è interrompere lo schema ogni 1.000 pixel.

Esistono ancora i banner?

È importante notare che alla fine di ogni riga, dove si trovano i punti 2 e 4, si trovano gli spazi migliori per l’inserimento di call to action e display adv, grazie alla pausa di respiro momentanea prima di intraprendere la riga successiva.

Right Sidebar: rendere meno oscuro il lato destro del layout

Utilizzando il layout F-Pattern la barra destra del layout può servire a due scopi principali:

1. contenuti pertinenti ma non correlati: vuoi arrivino informazioni all’utente anche se non corrispondono al contenuto primario, come banner, link a post correlati e widget social. 
2. come strumento di ricerca: ovviamente la search bar trova in questa parte una collocazione naturale ma potrebbe ospitare anche tag cloud e i post più letti.

…long may he reign!

Il modello a “F”, come dicevamo all’inizio, è ideale per le pagine in cui il protagonista assoluto è il testo. La sua importanza è data dall’organizzazione dei contenuti in relazione ai punti d’interesse e alle opzioni che possiamo proporre.
Non dimenticarti mai che Content is King, riservagli quindi il posto che gli spetta all’interno del tuo layout e sposta call to action e display adv nella parte destra, dove potranno vivere ed essere letti senza disturbare il tuo contenuto.