Nello scorso articolo Migliorare la User Experience con lo Z-Layout abbiamo compreso come l’impostazione di un layout specifico può cambiare il comportamento degli utenti e favorire una user experience efficace, analizzando nello specifico lo Z-Layout.
Vediamo ora un layout impostato sempre su una lettera dell’alfabeto la F.
Allo stesso modo dello Z-layout anche l’F-layout consiste nel disporre i contenuti lungo una F ma, a differenza del primo, si basa su analisi condotte sul comportamento degli utenti che navigano il web.
Il primo a parlarne è stato nel 2006 Jacob Nielsen che dopo l’analisi del tracciamento degli occhi degli utenti su tre diverse pagine web nell’articolo F-Shaped Pattern For Reading Web Content afferma:
F for fast. That’s how users read your precious content. In a few seconds, their eyes move at amazing speeds across your websites words in a pattern that’s very different from what you learned in school.
In our new eyetracking study, we recorded how 232 users looked at thousands of Web pages. We found that users’ main reading behavior was fairly consistent across many different sites and tasks. This dominant reading pattern looks somewhat like an F.
Egli definisce tre fasi del movimento dell’occhio
- Gli utenti prima leggono in senso orizzontale da sinistra verso destra, di solito attraverso la parte superiore della pagina. Questo elemento iniziale costituisce la barra superiore della F.
- Successivamente, gli utenti si spostano un po’ in basso nella pagina e leggono in un secondo movimento orizzontale che copre tipicamente una zona più breve rispetto al movimento precedente. Questo ulteriore elemento costituisce la barra inferiore della F.
- Infine, gli utenti continuano la scansione sul lato sinistro della pagina in un movimento verticale. A volte si tratta di una scansione abbastanza lenta e sistematica che appare come un striscia spessa nel rilevamento. Altre volte gli utenti si muovono più velocemente, creando un mappa a punti. Quest’ultimo elemento costituisce la parte finale della F.
Ovviamente questa regola non vale sempre, ma concentrandosi sulle aree rosse (quelle più viste) di queste mappe di tre diversi tipi di pagine web (un articolo nella pagina “chi siamo” di un sito web aziendale, una pagina di un prodotto su un sito di e-commerce, una pagina dei risultati dei motori di ricerca), si nota che tutte e tre mostrano la forma di una F.
Riflessioni emerse dagli studi di Nielsen
Dagli studi di Nielsen emergono le seguenti informazioni importanti:
- Gli utenti non leggono online, ma piuttosto fanno una scansione per vedere se il contenuto che hanno davanti è quello che stanno cercando. In quel caso potrà esserci una lettura più esaustiva ma nella maggior parte dei casi no.
- Gli utenti analizzano la pagina molto velocemente quindi è importante attirare la loro attenzione.
- Le informazioni importanti devono essere posizionate nella parte superiore del layout.
- È opportuno iniziare titoli, sottotitoli, paragrafi e elenchi puntati con parole interessanti che gli utenti noteranno maggiormente nella loro scansione e che li invoglino a continuare nella lettura.
- Le informazioni meno importani devono essere poste nella parte destra della pagina
Come impostare gerarchicamente il layout
Da queste informazioni possiamo definire la gerarchia visiva del nostro layout in questo modo:
- Nella prima riga della F saranno posizionati il logo e tutti gli elementi che avranno il compito di orientare il visitatore, quindi navigazione, barra di ricerca, pannello di accesso ed i social se il nostro sito intende puntare sul social media
- Nella seconda riga sarà posizionato una frase che descrive il nostro prodotto/servizio o una call to action
- La parte inferiore verrà divisa in due colonne: quella principale sulla sinistra dove sarà focalizzata l’attenzione dell’utente, che ospiterà il contenuto più importante, e una sidebar sulla destra che ospiterà le informazioni accessorie.
È inoltre importante organizzare gerarchicamente il contenuto all’interno della colonna principale, dividendo il testo in paragrafi ed utilizzando immagini e titoli “accattivanti” per catturare l’attenzione del navigatore.
Brandon Jones nell’articolo Understanding the F-Layout in Web Design suggerisce anche di inserire qualcosa di visivamente diverso, un elemento imprevisto a metà pagina per bloccare il flusso, fermare la scansione automatica del lettore e riconquistare la sua attenzione prima che si annoi e abbandoni la pagina.
Utilizzo ed esempi
Il limite dell’F-Layout è che si applica a pagine web essenzialmente testuali. Quasi ogni sito web basato sul tradizionale layout del blog a 2 colonne utilizza un F-Layout, di seguito alcuni esempi.
