Con il termine “above the fold” (letteralmente “sopra la piega”) nel linguaggio del web si intende quella parte di una pagina web che è visibile senza necessità di scorrere con il mouse verso il basso, ovvero tutto ciò che compare entro il riquadro del proprio schermo. È un aspetto importante da curare e tener presente nella creazione siti web perché tendenzialmente tutti i contenuti più importanti vengono o dovrebbero essere posizionati in questa parte dello schermo, senza necessità di scorrere la pagina. Questo perché quando si apre una pagina web i primi 3 secondi, l’utente li dedica all’individuazione immediata dei contenuti che sta cercando: se il contenuto o l’informazione principale si trova subito, l’utente rimane sulla pagina e continua la navigazione. Risulta evidente l’importanza di valorizzare o persino ottimizzare questa porzione del video con creazione contenuti web, immagini, call-to-action che catturino l’attenzione dell’utente. Una curiosità – prima di entrare nel merito della nostra guida sul significato di “above the fold”: l’espressione è presa in prestito dal gergo della carta stampata dove ci si riferisce a quella parte della porzione superiore di un giornale ripiegato in due dove compare la testata e i tioli principali, mentre tutto ciò che è “sotto la piega – below the fold” contiene il resto delle informazioni.
Menu di navigazione dell'articolo
Quali sono i primi contenuti che si osservano quando si apre un sito web?
L’attenzione dell’utente che naviga su una pagina nuova di un sito è istintivamente catturata dalla parte superiore a sinistra che è solitamente la posizione in cui si colloca l’Header, l’intestazione, appunto, o il logo del sito. Quindi, se c’è qualcosa da migliorare e ottimizzare dal punto di vista grafico ed estetico, oltre che contenutistico, è proprio questa area con il nome del sito e un eventuale “tagline” cioè la sintetica descrizione di ciò che si è o si offre.
Gli altri elementi che catturano l’occhio dell’utente sono: il menù, la barra di ricerca interna al sito, il logo e le immagini in genere, la call to action e il titolo della pagina o headline. Le dimensioni dello schermo contano. Per i dispositivi mobili, il concetto di above the fold è molto più incisivo perché lo spazio a disposizione è minore e l’utente cercherà di focalizzare l’attenzione su tutti gli elementi che compaiono per primi o che si caricano più velocemente. Da qui, la necessità quando si realizzano siti web di progettarli fin dal principio come web-responsive, ovvero con i contenuti multimediali e non che si adattano a qualsiasi dispositivo e schermo (PC, tabelet, smartphone, TV).
Chiama l'800 119 270 o scrivici per un preventivo
Come ottimizzare l’above the fold: best pratcises
La user experience migliora decisamente se i contenuti sono accattivanti e ben collocati. È bene specificare che l’ottimizzazione dell’above the fold non contribuisce al posizionamento sui risultati di ricerca dei motori, non è un cosiddetto fattore di ranking (non ancora) in quanto non vi sono parametri algoritmici calcolabili. Tuttavia, è un fattore essenziale per agevolare e prolungare il passaggio degli utenti sulla pagina web specifica. Un above the fold accattivante, seo-friendly e che si carica velocemente contribuisce indirettamente a favorire un buon posizionamento del sito sui Motori di ricerca.
Tutti i contenuti della pagina – above e below the fold – necessitano di essere ben curati nell’aspetto, come nel significato e nel senso attraverso l’uso di immagini pertinenti i in formati veloci da caricare (come il Webp, per esempio, molto più leggero del .jpg o .png). la stessa logica si applica ai loghi e alle icone da preferire il formato vettoriale .svg. Attenzione particolare anche alla cura del display swap, ovvero la scelta di font (caratteri) e colori compatibili con più dispositivi e più sistemi operativi in modo da evitare difformità di grandezze e di visualizzazione.
Un’altra tecnica di caricamento dei contenuti multimediali – in particolare video e immagini – è il lazy loading in cui si caricano subito le immagini visibili sull’above the fold, mentre è leggermente ritardato quello del resto della pagina dove si posiziona un placeholder a indicare la presenza di altri contenuti in fase di caricamento. Solo quando si scorre la pagina verso il basso, l’immagine o il video prende il posto del placeholder, visualizzando per intero i contenuti.
Un altro metodo per bloccare subito l’attenzione dello user è curare e implementare il Critical CSS, ovvero la funzione che permette al browser di evitare di scaricare tutti i fogli di stile immediatamente, ma di dare precedenza a quelli necessari per il caricamento della prima sezione della pagina, potendo diluire il caricamento delle successive.
Le tecniche per ottimizzare l’above the fold sono, dunque, miste in parte riguardano i contenuti visibili e in parte riguarda i tool e gli strumenti alla base della creazione dei siti.
FAQ
Cosa significa Above the fold?
Con il termine above the fold si indica tutto ciò che è visibile nella parte superiore dello schermo senza dover scorrere la pagina con il mouse.
Ottimizzare l’above the fold è una pratica ancora valida?
Sì, anche se studi recenti dimostrano che l’abitudine a scorrere velocemente – fare “scrolling” – con lo smartphone e altri dispositivi non rende più necessario focalizzare l’attenzione sui contenuti concentrati sulla parte alta dello schermo, ma curare tutta la pagina in tutti i suoi aspetti e contenuti. Applicazioni come Tik Tok e Instagram hanno abituato gli utenti a scorrere le pagine alla ricerca di contenuti.
Quali ricerche esistono sui tempi di permanenza degli utenti su una pagina web?
Uno studio Nielsen del 2018 ha rivelato come siano cambiati i tempi di permanenza degli utenti sull’above the fold: fino al 2010, l’80% degli utenti focalizzavano la loro attenzione sulla parte superiore contro il 57% degli user nel 2018, questo è indice che la soglia di attenzione si sta spostando anche verso i contenuti collocati nella parte bassa della pagina web e che è pressocché indifferente se la pagina si sviluppa in verticale o concentra tutti i contenuti in un unico riquadro senza scroll aiutandosi con la Grafica, i pop up e i menù a tendina e a scomparsa.
È possibile riadattare la regola dell’above the fold?
Le conclusioni da trarre sono che la rilevanza del contenuto nel trasmettere il messaggio chiave resta importante e da collocare in apertura della pagina e l’utente, in ogni caso, è invogliato dall’effettuare lo scrolling e dal continuare a consultare la pagina se è invogliato a farlo grazie a un determinato story telling, a una struttura gradevole, al layout e al visual accattivante.
