Skip to main content

Cos’è l’above the fold? Significato e definizione

cos'è l'above the fold significato
Dove si trova l’above the fold in un sito web

L’above the fold è la porzione di una pagina web che un utente visualizza non appena atterra su un sito web, prima di compiere uno scrolling.

Attraverso l’above the fold, l’utente si crea una prima impressione generale sul sito web, quindi è fondamentale che questa sezione sia ben progettata e contenga al suo interno tutti i contenuti più importanti e più rilevanti per gli utenti.

In poche parole è come se fosse un giornale, in cui la parte superiore della pagina web è quella che cattura l’attenzione dell’utente e lo invita a proseguire la lettura o a compiere un’azione.

Perchè è importante l’above the fold in un sito web

Come abbiamo detto, la sezione above the fold è la prima parte di pagina che un utente vede senza dover fare scroll. Per questo essa riveste un ruolo importante in un sito web, perché è la parte di navigazione che ha più probabilità di catturare l’attenzione dell’utente e convincerlo a proseguire la navigazione.

Questa tesi la conferma lo studio che ha condotto la Nielsen Norman Group, in cui sostiene che in genere gli utenti impiegano solo 8 secondi per formarsi un’opinione su una pagina web. E’ quindi un sito web ha a disposizione solamente 8 secondi per far capire ad nuovo utente di cosa tratta la pagina, perché è importante per loro e perché dovrebbero continuare a leggerla.

La sezione above the fold è come una sorta di test per capire se un nostro sito web è efficace oppure no. Se si riscontra che la sezione above the fold è efficace, otteniamo la conseguenza che l’utente sarà più propenso a proseguire la navigazione e a compiere delle azioni di conversione sul nostro sito web.

Come individuare correttamente la sezione above the fold

Individuare la sezione Above the fold è semplice. Come abbiamo detto in precedenza essa è la parte superiore della pagina web, in poche parole è la prima parte visibile del sito web senza effettuare lo scroll. 

Tuttavia però per altri ambiti, come l’editoria, l’individuazione della piega della pagina può risultare leggermente più complessa, perché le connessioni e le visualizzazioni alle pagine di un sito web possono avvenire da dispositivi differenti, con dimensioni dello schermo diverse. In questo caso, il punto in cui l’utente deve iniziare a scorrere per continuare a visualizzare il contenuto della pagina non è fisso, ma varia a seconda del dispositivo utilizzato.

Per fortuna, esiste una guida che ci permette di aiutarci a individuare la sezione Above the fold, in modo un po più scientifico. In poche parole, dobbiamo considerare l’above the fold come quella sezione che rientra nei primi 1.000 pixel di larghezza e i primi 600 pixel di altezza.

Queste dimensioni devono dunque essere tenute in considerazione quando si iniziano a strutturare il design, gli elementi ed il copy di una pagina web. I contenuti più accattivanti dovranno essere necessariamente posizionati in questa parte alta di pagina, al fine di convincere gli utenti a scorrere l’intero contenuto.

Altro dettaglio che bisogna tenere in considerazione per essere sicuri che il visitatore riesca a visualizzare i contenuti più importanti senza fare scrolling è utilizzare un design responsive. Così si avrà la certezza che i contenuti siano visualizzati correttamente nel Above the fold da qualsiasi dispositivo avvenga la connessione.

Come creare una sezione above the fold efficace

Per realizzare una sezione above the fold efficace, è importante che la piega della pagina contenga al suo interno questi elementi:

#1 Un titolo persuasivo

Il titolo è il primo elemento testuale che vede l’utente, quindi è importante che sia chiaro, conciso e accattivante. Deve catturare la sua attenzione e deve fargli capire di cosa tratta la pagina del sito web.

#2 Un payoff: 

Il payoff è una breve frase che ha l’obbiettivo finale di rafforzare il titolo. Può essere utilizzato per fugare eventuali obiezioni che l’utente potrebbe avere.

#3 Una call to action

La call to action è un invito all’azione che invita l’utente a compiere un’azione, come ad esempio iscriversi alla newsletter, visitare un’altra pagina o effettuare un acquisto. E’ importante che questo elemento all’interno del above the fold sia chiaro, conciso e convincente.

#4 I benefici per l’utente: 

La sezione above the fold deve evidenziare i benefici che l’utente otterrà compiendo se continuerà la navigazione sul sito web. I benefici devono essere presentati in modo chiaro e devono essere soprattutto rilevanti per il target che visiterà il sito web.

#5 Design responsive: 

La sezione above the fold deve essere 100% responsiva, ovvero che deve essere fruibile sia da desktop che da dispositivi mobili.

#6 Utilizza un’immagine di alta qualità: 

Un’immagine di alta qualità è un ottimo modo per catturare l’attenzione degli utenti. L’immagine dovrebbe essere pertinente all’argomento della pagina web e dovrebbe essere di dimensioni sufficienti per essere visibile anche da dispositivi mobili.

Esempi di above the fold efficaci

Google Ads

screen sito google ads esempio di above the fold efficace
Above the fold della landing page di Google Ads

La landing page del servizio di advertising di Google è un chiaro esempio di pagina web che ha un above the fold efficace. Per esempio cosa troviamo?

  1. Titoli dinamici in cui sono elencati i benefici che si ottengono utilizzando il servizio Google Ads
  2. Payoff che rafforzano i benefici elencati dai titoli dinamici.
  3. Offerta di benvenuto di € 400,00 per chi è un nuovo cliente della piattaforma.
  4. Le CTA “Accedi” (Bottone con testo blu) per chi è già cliente e “Inizia Ora” (Bottone con colore blu scuro) per chi è nuovo cliente.
  5. Un ulteriore CTA con scritto “Fissa un appuntamento” per chi ha bisogno di una prima consulenza gratuita nella configurazione dell’account Google Ads.

Airbnb

screen sito airbnb esempio di above the fold efficace
Above the fold del sito web di Airbnb

Anche Airbnb, il famoso portale di affitto case per brevi soggiorni, presenta un above the fold curata ed efficace, in particolare presenta degli elementi come:

  1. Barra di ricerca di facile compilazione che permette all’utente di iniziare la ricerca per la ricerca della casa.
  2. Un menù con dei filtri su tutte le tipologie di case presenti sulla piattaforma.
  3. C’è già una lista di case suggestive che permette all’utente di iniziare l’esplorazione delle case su Airbnb.
  4. Menù per la selezione della lingua della piattaforma.  
  5. CTA dedicata agli host che desiderano affittare la casa tramite Airbnb.

Conclusioni

In conclusioni, l’above the fold è la parte più importante da sviluppare in un sito web. Noi quando creiamo dei siti web per i nostri clienti dedichiamo molto tempo nello sviluppo di questa parte, insieme anche al header, perché non solo migliorerà le conversioni ma essa migliorerà anche l’user experience del sito web.

Se vuoi un supporto nella realizzazione del tuo sito web, richiedi oggi una prima consulenza per il tuo progetto.

Pietro Gaito

Founder di MisaWeb Agency. Professionista e appassionato di Web Design e di Digital Marketing. Da 5 anni offriamo servizi professionali di sviluppo sito web, creazione e-commerce, consulenza SEO e gestione delle campagne pubblicitarie online. Richiedi subito un preventivo gratuito per lo sviluppo del tuo sito oppure richiedi una prima consulenza se desideri una campagna di digital marketing.

Skip to content