Come abbiamo visto nel precedente post, le persone spesso leggono le pagine web seguendo un modello che ha la forma della lettera “F”. In pratica:

• iniziano a guardare in alto verso sinistra; 
• poi, proseguono spostando lo sguardo orizzontalmente verso destra (prima striscia della “F”; 
• in seguito, procedono velocemente in basso, leggendo la successiva riga, muovendosi sempre da sinistra verso destra (seconda striscia della “F”); 
• infine, entrano in un schema di “esplorazione rapida”, una volta che hanno letto l’introduzione del contenuto del sito, tenendosi soprattutto verso sinsitra (stelo verticale della “F”). 

I visitatori di un sito seguono dunque molto spesso il modello visivo mostrato nell’immagine seguente: 

Proviamo adesso a trasferire questo modello di lettura in una rappresentazione grafica: 

 

Secondo questo modello visivo, di solito si vedono per prima cosa il marchio e il menu di navigazione; poi, si leggono le prime frasi del testo contenuto nella pagina (e si vedono le immagini, se ci sono); successivamente, si scorre in fretta una parte del testo, soprattutto quella posta sulla sinistra. 

Sulla base di questa rappresentazione, possiamo adesso costruire una pagina web, inserendo i principali contenuti in modo da rispettare il modello di lettura ad “F”. 

 

 

Si può notare come il design sia stato diviso in due colonne principali: quella più larga, posta a sinistra, contiene il contenuto più importante; quella collocata sulla barra laterale destra, invece, contiene dell’informazione secondaria e complementare (ad esempio, un elenco di articoli collegati al contenuto esposto sulla colonna di sinistra). 

Per rendere più reale questo layout, visualizziamo del contenuto, come mostrato nella figura seguente: 

E’ ancora un’immagine incompleta, ma ci sono tutti gli elementi più importanti. Il contenuto della riga in alto “orienta” il visitatore: se il menu di navigazione è collocato qui, il visitatore sa dove può andare all’interno del sito. Subito sotto, l’headline descrive l’obiettivo del sito e sintetizza il contenuto della pagina.   

 In basso, sotto l’headline, sono posizionate delle immagini e dei titoli che attirano l’attenzione (“catchy”) del visitatore. Anche se il lettore è impegnato solamente nel dare una rapida occhiata al contenuto, ci sono delle buone probabilità che possa trovare qualcosa d’interessante (o capire che è capitato nel posto sbagliato). 

Per sfruttare al meglio il modello “F”, posizioniamo inoltre una call to action in alto sulla destra (“New ebook out now!”).

Ora, proviamo a sovrapporre a quest’immagine quella dell’originale modello “F”, come si può vedere nell’immagine seguente:

Possiamo osservare che l’altezza delle due righe orizzontali della “F” può essere variabile. Si potrebbe optare per lasciare la distanza tra le due righe molto ristretta, in modo da incoraggiare immediatamente l’esame rapido. Oppure, si potrebbe preferire di lasciare tra le due righe una distanza maggiore, per rendere più evidente il loro ruolo predominante sulla pagina.  

Come si può inoltre osservare, seguendo questo procedimento, ci stiamo in definitiva muovendo in modo che il comportamento del visitatore, definito dal modello “F”, determini il design della pagina web.   

Possiamo adesso fare un’ulteriore passo in avanti, in modo da permettere al nostro visitatore di proseguire più in basso nella lettura della pagina. Per raggiungere questo obiettivo, dobbiamo far uscire il visitatore dal suo modello di scansione a “F”, dato che c’è il rischio che, a questo punto, forse un pò annoiato, scorra troppo velocemente il testo (parte verticale sinistra della “F”).

Il modo migliore per favorire il proseguimento “interessato” della lettura consiste nel fornire al visitatore degli elementi di “disturbo”, che rompano la naturale scansione della pagina e risollevino il suo livello d’interesse, come è stato fatto, nella figura seguente, con le immagini poste orizzontalmente a metà pagina (“Use Awkard Shapes Elements To Break UP The Visual Flow”): 

Questa tecnica, che interrompe le aspettative, può essere molto utile quando si ha del contenuto molto esteso verticalmente, che può rischiare di essere noioso dopo che il lettore ha scorso la prima coppia di titoli. 

 

Esempi di pagine web con il design a forma di “F”

Possiamo adesso mostrare dei siti che seguono il modello “F”, essendo basati su due colonne, come negli esempi precedenti: la prima colonna, nella parte sinistra, contiene il contenuto più importante; la seconda, meno larga, sulla destra, ha la funzione di barra laterale. 

DesignSnack, ad esempio, fornisce le informazioni più importanti nella colonna posta sulla sinistra, lasciando un ruolo subordinato al contenuto collocato nella colonna di destra:  

Phototuts+ è un altro ottimo esempio di sito che segue il modello a “F”, utilizzando le due colonne: 

 

Come pure GigaOm: 

 

 

Creative Sessions offre qualcosa di diverso: la parte superiore è focalizzata solo su un’immagine, senza alcun contenuto; il testo è posizionato sotto l’immagine e corrisponde alla seconda striscia della lettera “F”.

 

Non è necessario avere la barra laterale sulla destra. Come mostra SquareSpace, si può sfruttare la gravitazione dei visitatori verso lo stelo della “F”, piazzando sulla sinistra un menu secondario di navigazione. 

 

Infine, il sito Kickstarter modifica leggermente questo schema, così come è stato mostrato in tutti questi esempi, non prevedendo la barra laterale, ma dando la stessa importanza alle due colonne:

 

Conclusioni

Il design a”F” potrebbe alla lunga essere un pò noioso e ripetitivo. 

E’ necessario tenere alta l’attenzione, anche dopo che si sono superate le due righe orizzontali della “F”, quando si scorre rapidamente il testo, tenendosi sulla sinistra e saltellando tra le varie righe. Come abbiamo visto, una tecnica consiste nel rompere il ritmo del design, limitando le componenti ripetitive e inserendo elementi di novità, come una serie di immagini, titoli che attirino l’attenzione del visitatore, barre laterali con piacevoli widget, ecc.  

Comunque, il modello a “F” non è e non deve essere inteso come un dogma. E’ un utile strumento che può aiutare a costruire il layout dei siti web quando si vuole lasciare fluire liberamente lo sguardo del visitatore. Chi progetta un sito web può però, se lo vuole, interrompere questo flusso naturale, controllando e dirigendo il movimento degli occhi in specifiche direzioni attraverso l’utilizzo di particolari elementi visivi, come vedremo in un prossimo post.