Un visitatore arriva sulla tua landing page, dà un’occhiata e decide se restare o tornare indietro. Succede in pochi secondi, prima ancora che legga una riga intera. Tutto quello che vede senza scorrere — quello che in gergo si chiama above the fold — deve rispondere a una sola domanda: “sono nel posto giusto e questa cosa fa per me?”. Se la risposta non è immediata, l’utente se ne va. Vediamo cosa mettere nella prima schermata, perché conta più del resto e come testarlo senza affidarti alle sensazioni.
Che cos’è l’above the fold e perché decide tutto
L’espressione “above the fold” arriva dai giornali: era la parte di prima pagina visibile sopra la piega, quella che convinceva (o no) a comprare la copia in edicola. Sul web è la porzione di pagina che si vede appena si apre il link, prima di scorrere. Cambia a seconda del dispositivo — su smartphone è una finestra molto più stretta che su desktop — ed è proprio per questo che va progettata pensando prima al mobile.
Decide tutto per un motivo semplice: è l’unico spazio che hai la certezza che venga visto. Tutto ciò che sta più in basso lo vedrà solo chi ha deciso di scorrere, e quella decisione la prende guardando la prima schermata. Se l’above the fold non chiarisce subito promessa, beneficio e azione, perdi una quota di visitatori che non leggeranno mai il resto. Per una PMI che paga traffico o investe ore di SEO per portare persone sulla pagina, è uno spreco che si misura in soldi.
Non è una questione di estetica. Una prima schermata bella ma muta converte peggio di una sobria che dice chiaramente cosa offri e a chi. La regola è una sola: nei primi secondi il visitatore deve capire dove si trova, cosa ottiene e cosa fare. Se vuoi inquadrare la pagina nel suo insieme, abbiamo descritto la struttura completa in questa guida all’anatomia di una landing page che converte.
I 4 elementi non negoziabili nella prima schermata
Sopra la piega ci sono quattro componenti che non possono mancare: headline, subheadline, visual coerente e call to action. Non servono trucchi, servono questi quattro scritti bene e disposti in modo che si leggano in sequenza naturale. Vediamoli uno per uno.
Headline orientata al beneficio, non al prodotto
La headline è la prima cosa che si legge e fa il lavoro più pesante. L’errore più comune è descrivere il prodotto (“Software gestionale per magazzino”) invece del beneficio (“Sai sempre cosa hai in magazzino, senza inventari manuali”). Il visitatore non compra una funzione, compra un risultato. Scrivi la headline partendo da ciò che cambia nella sua giornata, non dall’elenco delle caratteristiche tecniche.
Una buona headline è specifica e onesta. Evita i superlativi vuoti perché non dicono nulla e abbassano la fiducia: meglio una frase concreta che il visitatore riconosce come il suo problema. Se riesci a infilarci un elemento misurabile e veritiero, meglio ancora, ma solo se è vero: una promessa gonfiata fa rimbalzare chi se ne accorge.
Subheadline che spiega il “come” in una riga
La headline dice il “cosa” e il “perché”. La subheadline, una riga sotto, spiega il “come” e per chi è: è lo spazio dove chiarisci il meccanismo senza appesantire. Serve anche a qualificare il pubblico: se è rivolta a “imprenditori e responsabili operativi di PMI”, chi non lo è capisce di essere fuori target e chi lo è si sente parlato direttamente.
Tienila corta, una o due righe al massimo. Se senti il bisogno di spiegare di più, significa che la promessa va sotto, nelle sezioni successive, non sopra la piega. L’above the fold orienta, non racconta tutto.
Visual o hero coerente con la promessa
L’immagine principale — la “hero” — non è decorazione: deve confermare visivamente ciò che dice il testo. Se vendi un servizio per cataloghi e-commerce, mostra un catalogo ordinato, non una foto stock di persone che si stringono la mano. Se l’immagine contraddice o ignora la promessa, crea attrito e l’attenzione cala.
Attenzione al peso e alla resa su mobile. Una hero pesante che si carica lentamente è il modo più efficace per perdere chi è arrivato da uno smartphone, e un’immagine pensata per il desktop su schermo verticale spinge spesso la call to action sotto la piega. Progetta la prima schermata mobile per prima, poi adattala al desktop.
CTA primaria visibile senza scroll
La call to action primaria è il punto in cui chiedi l’azione. Deve stare nella prima schermata, visibile senza scorrere, con un testo che dice cosa succede dopo il clic: “Invia” è debole, “Ricevi il piano scritto” dice al visitatore cosa otterrà.
Una sola azione primaria. Se metti tre bottoni di pari peso, costringi a scegliere e la scelta che vince spesso è “nessuna”. Eventuali azioni secondarie vanno rese meno prominenti, così la gerarchia visiva guida l’occhio verso l’azione che conta. Sul mobile, la CTA deve essere abbastanza grande da toccarsi col pollice senza errori.
Il message match: dall’annuncio alla prima schermata
Se porti traffico con un annuncio — su Google, su Meta, in una newsletter — la prima schermata deve riprendere la promessa di quell’annuncio. Si chiama message match: se l’annuncio dice “Automatizza il catalogo del tuo shop” e la landing in alto parla d’altro, il visitatore ha cliccato per una cosa e ne trova un’altra, percepisce lo scollamento e rimbalza.
Il modo più semplice per ottenere coerenza è usare le stesse parole chiave dell’annuncio nella headline: stesso beneficio, stesso linguaggio, stessa immagine se possibile. Vale anche per il traffico organico, dove chi arriva da una ricerca specifica si aspetta di trovare in alto esattamente quel tema. Più la prima schermata conferma l’aspettativa con cui il visitatore è arrivato, più resta.
Il message match è anche un test di onestà: se l’annuncio promette qualcosa che la landing non mantiene, il problema non è la pagina ma la promessa. Una promessa coerente e modesta converte meglio di una grandiosa e tradita.
Errori di above the fold che fanno rimbalzare l’utente
Pochi errori ricorrenti spiegano gran parte degli abbandoni nella prima schermata. Riconoscerli è metà del lavoro.
- Headline che parla di te, non del visitatore. “Siamo uno studio di automazioni” interessa a te; “Recuperi ore di lavoro ripetitivo” interessa a chi legge.
- Slogan generico senza contenuto. “Innovazione e qualità al tuo servizio” non dice nulla di concreto e potrebbe stare su qualsiasi sito.
- CTA assente o spinta sotto la piega. Se per trovare il bottone bisogna scorrere, una parte dei visitatori non lo cercherà nemmeno.
- Troppe azioni concorrenti. Menu pieno di voci, più bottoni, link ovunque: la dispersione uccide la conversione.
- Hero pesante o incoerente o disallineata dall’annuncio. Immagine che rallenta il caricamento, non c’entra con la promessa o disattende l’aspettativa con cui il visitatore è arrivato.
Molti di questi problemi non si vedono finché non si guardano i dati o non si chiede a qualcuno esterno di descrivere la pagina a colpo d’occhio. Se vuoi un quadro più ampio di cosa evitare, abbiamo raccolto i più frequenti in questo articolo sugli errori che uccidono le conversioni.
Come testare l’above the fold con 3 varianti di headline
La headline è l’elemento che pesa di più e quello più facile da testare. Bastano tre versioni dello stesso messaggio con un angolo diverso ciascuna: una sul risparmio di tempo, una sul risultato concreto, una su un problema specifico che il pubblico riconosce. Le tre varianti devono restare oneste e coerenti con l’offerta — cambia l’angolo, non la verità.
Il metodo di base è un test A/B: dividi il traffico tra le versioni e misuri quale porta più clic sulla CTA o più conversioni a valle. Perché il test dia un segnale affidabile servono abbastanza visite per variante; con poco traffico i numeri ballano e rischi di “vincere” per caso. In quel caso, meglio una valutazione qualitativa: fai descrivere la prima schermata a persone che non conoscono il progetto e ascolta cosa capiscono nei primi cinque secondi.
Una cosa per volta. Se cambi headline, immagine e CTA insieme e la conversione migliora, non saprai a cosa attribuirlo. Isola la variabile, misura, tieni la versione migliore e passa all’elemento successivo.
Per un cliente e-commerce del settore moda abbiamo pubblicato 21 landing page in 24 ore su tre mercati (US, IT, ZH), con un audit comparativo dopo il deploy. Il punto non è la velocità in sé, ma poter confrontare varianti reali invece di discutere di opinioni.
Da dove partire, in pratica
Se devi sistemare una landing oggi, parti dai quattro elementi sopra la piega: headline sul beneficio, subheadline sul “come”, hero coerente, una CTA chiara e visibile senza scroll. Verifica il message match con la fonte di traffico e guarda la prima schermata su smartphone prima che sul computer. Se invece ti chiedi se ti serva davvero una landing dedicata o basti il sito, l’abbiamo affrontato in questo confronto tra landing page e sito per le PMI.
Se vuoi un occhio esterno sulla tua prima schermata, offriamo un audit strategico gratuito di 30 minuti: guardiamo insieme la pagina, ti diciamo cosa funziona e cosa no e, se ha senso intervenire, ricevi un piano scritto e un preventivo entro 48 ore. Se non vediamo un margine di ritorno misurabile, te lo diciamo e non iniziamo.
Domande frequenti
Che cosa significa esattamente “above the fold”?
È la porzione di una pagina web visibile appena la si apre, prima di scorrere. Il termine viene dai giornali. Su web cambia in base al dispositivo: su smartphone è una finestra molto più stretta che su desktop, quindi va progettata pensando prima al mobile.
Quali elementi non devono mancare nella prima schermata?
Quattro: una headline orientata al beneficio per il visitatore, una subheadline che spiega in una riga come funziona e per chi, un’immagine coerente con la promessa e una call to action primaria visibile senza scorrere. Una sola azione principale, non tre bottoni di pari peso.
Che cos’è il message match e perché conta?
È la coerenza tra l’annuncio o la ricerca che porta il visitatore sulla pagina e ciò che trova nella prima schermata. Se l’annuncio promette una cosa e la landing in alto ne mostra un’altra, l’utente percepisce uno scollamento e rimbalza. Usare le stesse parole e lo stesso beneficio dell’annuncio nella headline aumenta la permanenza.
Come testo quale headline funziona meglio?
Prepara tre varianti dello stesso messaggio con angoli diversi (risparmio di tempo, risultato concreto, problema riconoscibile) e confrontale con un test A/B, cambiando una sola variabile per volta. Se il traffico è scarso per un test affidabile, fai descrivere la prima schermata a persone esterne e ascolta cosa capiscono nei primi secondi.
Devo progettare prima per mobile o per desktop?
Prima per mobile. Su schermo verticale lo spazio sopra la piega è ridotto e un layout pensato per il desktop rischia di spingere la call to action sotto la piega, dove molti non la cercheranno. Si parte dalla prima schermata mobile e la si adatta poi al desktop.
Decidere con i conti in ordine
Un audit gratuito di 30 minuti per capire da dove partire e cosa conviene davvero, prima di investire.
Parliamone →
Lascia un commento