I direttori dei giornali l'avevano capito molto prima dell'arrivo del web. La notizia che vale la pena leggere va sopra la piega fisica. Tutto ciò che sta sotto compete con la decisione di voltare pagina. Su un sito web vale lo stesso principio per la prima schermata che un visitatore vede prima di scorrere.
L'above the fold, cioè la parte "sopra la piega", indica la porzione di una pagina web visibile nella finestra del browser quando la pagina si carica per la prima volta, prima che il visitatore scorra. È l'unica sezione della pagina che vedono tutti i visitatori, senza eccezioni. Tutto ciò che sta sotto deve guadagnarsi lo scorrimento. Il termine viene dalla stampa: un giornale piegato a metà in edicola mostra solo la metà alta della prima pagina. Quella metà alta doveva conquistare l'attenzione. L'area above the fold di un sito funziona allo stesso modo.
Cosa si trova above the fold varia in base al dispositivo, alle dimensioni dello schermo e al browser di ogni visitatore. Un grande monitor desktop mostra molti più contenuti above the fold di un telefono tenuto in verticale. Progettare per la piega significa pensare a tutti questi casi, non solo alla versione che vedi sul tuo schermo.
Perché i contenuti above the fold sono importanti?
Le ricerche sul comportamento di lettura mostrano in modo costante che i visitatori passano più tempo sui contenuti nella parte alta della pagina. Più in basso si trova un contenuto, meno visitatori lo raggiungono. Non è un difetto di attenzione. È una risposta razionale al tempo limitato. I visitatori giudicano in fretta se una pagina vale la lettura e questo giudizio avviene nella prima sezione visibile.
L'above the fold è il punto in cui rispondi alla prima domanda del visitatore: sono nel posto giusto? Se il titolo, l'immagine e le prime righe di testo rendono chiara la risposta, i visitatori scorrono. Se sono confusi o incerti, la maggior parte non dà una possibilità al resto della pagina.
Cosa mettere above the fold?
L'area above the fold ha spazio limitato e un'importanza alta. Ogni elemento che compare lì deve guadagnarsi il suo posto servendo il visitatore o facendo avanzare l'obiettivo della pagina.
Un titolo chiaro che dica di cosa parla la pagina o cosa ottiene il visitatore. Una frase di supporto o un sottotitolo che aggiunge contesto o precisione. Un'immagine che rafforza il messaggio invece di limitarsi a decorare. Una call to action che dà al visitatore un passo successivo chiaro, se è già convinto.
La navigazione va above the fold. I visitatori si aspettano di trovare in alto nella pagina un modo per esplorare il resto del sito, e un menu nascosto o difficile da trovare crea subito attrito. L'articolo su cos'è la navigazione di un sito web spiega come progettare menu che funzionino bene su tutti i dispositivi.
Non va above the fold nulla che occupi spazio senza contribuire alla comprensione o alla decisione del visitatore. Grandi immagini decorative senza valore informativo, banner a rotazione che rallentano il caricamento o blocchi di testo introduttivo da scorrere prima di arrivare al punto sprecano tutti lo spazio più prezioso della pagina.
Come cambia l'above the fold su mobile?
Su mobile, l'area above the fold è molto più piccola che su desktop. Lo schermo di un telefono in verticale mostra circa 600-800 pixel di altezza. Un monitor desktop può mostrarne da 900 a 1200. Lo stesso design può mostrare due o tre sezioni above the fold su desktop e solo un titolo e un'immagine su mobile.
La conseguenza pratica è che i visitatori da mobile decidono se restare o scorrere con molte meno informazioni di quelle che i visitatori da desktop vedono a colpo d'occhio. Ciò che conta di più deve stare in una finestra più piccola. Le sezioni hero con grandi immagini di sfondo e poco testo sono un problema comune: sembrano d'effetto su desktop, ma riempiono l'intero schermo mobile con pochissimo contenuto prima che il visitatore debba scorrere.
Testare l'above the fold su un telefono vero è importante, perché le anteprime del browser e le simulazioni desktop non rappresentano con precisione ciò che vedono i visitatori da mobile. Per una checklist completa sugli aspetti mobile, l'articolo su come rendere un sito adatto ai dispositivi mobili spiega cosa controllare prima di andare online.
L'above the fold influisce sulla velocità della pagina?
Direttamente. L'area above the fold è la prima cosa che il browser mostra, quindi qualsiasi risorsa che ne ritarda la visualizzazione peggiora il tempo di caricamento percepito, anche se il resto della pagina si carica in fretta.
Grandi immagini hero, font web che devono caricarsi prima che il testo compaia e script che girano prima del rendering della pagina spingono giù i contenuti above the fold. Dal punto di vista del visitatore, la pagina si carica lentamente anche se il tempo di caricamento tecnico è ragionevole. Un'area above the fold vuota o caricata a metà mentre il resto della pagina si mette al passo è una delle cause più comuni di frequenze di rimbalzo alte su pagine altrimenti ben progettate.
Ottimizzare l'immagine hero, dare priorità al caricamento delle risorse above the fold e rinviare gli script non essenziali sono le soluzioni più efficaci. L'articolo su cos'è la velocità di un sito web spiega l'aspetto tecnico delle prestazioni di caricamento e cosa le influenza di più.
L'above the fold influisce sulla SEO?
I contenuti above the fold sono un segnale che i motori di ricerca usano per valutare la qualità della pagina. Le pagine che caricano molta pubblicità o contenuti di scarsa qualità above the fold, spingendo in basso il contenuto principale, vengono penalizzate. Si trattava di un aggiornamento specifico dell'algoritmo contro i siti che nascondevano contenuti utili sotto grandi blocchi di annunci.
Oltre a questa penalizzazione specifica, l'above the fold influisce sulla SEO in modo indiretto, attraverso i segnali di comportamento. I visitatori che arrivano su una pagina e se ne vanno subito, perché l'area above the fold non ha dato loro un motivo per restare, generano frequenze di rimbalzo alte e tempi di permanenza bassi. Nel tempo, questi segnali comunicano ai motori di ricerca che la pagina non ha risposto all'intento della ricerca.
Un buon design above the fold favorisce anche una migliore struttura dei titoli. Un titolo chiaro visibile above the fold, sostenuto da una struttura logica della pagina sotto di esso, aiuta sia i visitatori sia i motori di ricerca a capire la pagina in fretta. L'articolo su cos'è il web design spiega come le scelte di layout, come la gerarchia dei titoli, plasmano l'esperienza del visitatore. Per il quadro completo sul posizionamento, l'articolo su cos'è la SEO spiega i fattori tecnici e di contenuto che contano di più.
Come WEMASY gestisce il design above the fold
I template del creatore di siti WEMASY sono costruiti pensando all'area above the fold. Le sezioni hero sono ottimizzate per un caricamento veloce e l'editor visuale ti permette di vedere in anteprima come appare ogni sezione a diverse dimensioni dello schermo prima di pubblicare. L'anteprima mobile mostra esattamente ciò che i visitatori vedono su un telefono prima di scorrere, così puoi regolare contenuti e layout senza andare a tentoni.
Scopri cosa è incluso nel creatore di siti WEMASY o guarda i piani nella pagina dei prezzi.
Domande frequenti
L'above the fold è ancora rilevante con i comportamenti di scorrimento di oggi?
Sì. I visitatori scorrono più volentieri di dieci anni fa, ma l'area above the fold ha ancora un peso sproporzionato. I visitatori passano più tempo sui contenuti nella parte alta della pagina, a prescindere da quanto scorrono. È nell'area above the fold che si decide se restare o andarsene. Renderla chiara, veloce e convincente è importante oggi quanto lo è sempre stato. Con il creatore di siti di WEMASY puoi configurarlo direttamente sul tuo sito.
Quanto deve essere alta una sezione hero?
Una sezione hero dovrebbe mostrare abbastanza contenuto above the fold da comunicare lo scopo della pagina, senza occupare l'intera schermata. Su desktop, una hero che riempie tutta l'altezza dello schermo con solo un titolo e un'immagine può essere d'effetto, ma ritarda anche l'accesso del visitatore al contenuto vero. Un approccio migliore è una hero abbastanza alta da fare una buona prima impressione e che lasci comunque intravedere un po' di contenuto sotto, segnalando ai visitatori che c'è altro da vedere se scorrono.
Cos'è una call to action above the fold?
Una call to action above the fold è un pulsante o un link messo nella prima sezione visibile di una pagina, che dà ai visitatori già convinti un modo per agire subito, senza scorrere. Esempi comuni sono "Inizia", "Prenota una chiamata" o "Vedi i prezzi". Non tutti i visitatori above the fold sono pronti ad agire, ed è per questo che esiste il resto della pagina, ma avere subito un'azione chiara riduce l'attrito per chi lo è.
Ogni pagina ha bisogno di una sezione above the fold efficace?
Sì, ma il significato di "efficace" varia in base al tipo di pagina. L'above the fold di una homepage deve stabilire chi sei e cosa offri. Quello di un articolo del blog deve confermare al lettore che è nell'articolo giusto e dargli un motivo per continuare a leggere. Quello di una pagina prodotto deve mostrare chiaramente il prodotto e rendere accessibile il prezzo. Il principio è lo stesso per tutti i tipi di pagina: la prima schermata deve rispondere alla domanda più immediata del visitatore.
Come testo cosa appare above the fold su dispositivi diversi?
Il modo più preciso è controllare le tue pagine su dispositivi reali. Usa un monitor desktop, un tablet e un telefono tenuto sia in verticale sia in orizzontale. Gli strumenti per sviluppatori del browser hanno una modalità di simulazione dei dispositivi che dà un'approssimazione ragionevole, ma non tiene conto delle barre degli strumenti del browser, delle barre degli indirizzi e delle aree di notifica che riducono l'altezza visibile dello schermo sui telefoni veri. Ciò che sembra a posto in un'anteprima del browser spesso ha un taglio della piega molto diverso su un dispositivo reale.