Perché above the fold è un comportamento, non un'altezza in pixel

Cosa significa "above the fold"?

I contenuti above the fold sono tutto ciò che un visitatore vede senza scorrere la pagina. Per questo il fold dipende dal suo schermo e non è un numero che puoi scrivere in un file di design. Il termine viene dai quotidiani di grande formato, che venivano piegati a metà per l'esposizione in edicola, così che solo la metà superiore della prima pagina fosse rivolta al compratore. I redattori mettevano lassù la notizia che doveva vendere il giornale.

Il web ha ereditato l'idea perché anche gli schermi, a un certo punto, finiscono. Amy Schade del Nielsen Norman Group lo spiegò con chiarezza nel 2015: "Ciò che è visibile sulla pagina senza bisogno di alcuna azione è ciò che ci spinge a scorrere." Il fold non ferma le persone. Decide se si prenderanno la briga di continuare.

Perché un'altezza fissa in pixel è il modo sbagliato di definire il fold?

Perché non esiste un solo fold da definire. L'obiezione di Schade a un valore fisso è diretta: "Un design responsive può avere 2, 3, 4 o più fold diversi, specifici per i dispositivi e le dimensioni di schermo per cui il design è stato ottimizzato." Qualunque valore scegli è giusto per una minoranza dei tuoi visitatori e sbagliato per tutti gli altri.

L'altezza disponibile per i tuoi contenuti cambia per motivi che non c'entrano nulla con il tuo layout:

• Il chrome del browser. Barre degli strumenti, schede e barre dei preferiti occupano spazi diversi a seconda del browser e del sistema operativo.
• La barra degli indirizzi su mobile, che si ritrae mentre scorri, quindi il viewport dopo il primo swipe è fisicamente più alto di prima.
• Il ridimensionamento dello schermo a livello di sistema operativo e la dimensione predefinita del carattere impostata dal visitatore.
• Il livello di zoom, che è diverso da zero più spesso di quanto i designer immaginino.
• L'orientamento del dispositivo, che dimezza o raddoppia il valore con una sola rotazione.

Considera il fold come una distribuzione e non come una linea. La domanda utile non è "dov'è il fold", ma "cosa vede il 25° percentile dei miei visitatori prima di scorrere", e a questa puoi rispondere con i tuoi dati invece che con il numero di un articolo qualsiasi.

Cosa dice la ricerca sullo scorrimento above the fold?

Il Nielsen Norman Group ha condotto test di eyetracking su pagine di notizie, ecommerce, blog, FAQ ed enciclopediche, con 120 partecipanti su schermi da 1920 per 1080 e oltre 130.000 fissazioni oculari raccolte. Therese Fessenden ha pubblicato i risultati il 15 aprile 2018. Il dato principale è che le persone scorrono, ma l'attenzione resta comunque concentrata in alto.

Zona della pagina	Quota del tempo di visualizzazione
Above the fold	57%
Prime due schermate (fino a 2160px)	74%
Prime tre schermate	81%
Primo 20% della pagina	più del 42%
Primo 40% della pagina	più del 65%

L'evoluzione nel tempo è la parte su cui vale la pena discutere. Nello studio NN/g del 2010, condotto su monitor da 1024 per 768, l'80% del tempo di visualizzazione era speso above the fold. Nel 2018 era il 57%. Lo scorrimento è diventato normale, quindi il fold è diventato meno assoluto e più relativo, ma non ha smesso di contare: oltre il 65% del tempo di visualizzazione above the fold si concentrava nella metà superiore del viewport, il che significa che l'attenzione si assottiglia già dentro la prima schermata, non solo dopo.

La misurazione del confine fatta da Schade nel 2015 è la versione più netta dell'effetto. I 100 pixel appena sopra il fold sono stati guardati il 102% in più rispetto ai 100 pixel appena sotto, e nei suoi dati la differenza media nel modo in cui gli utenti trattano le informazioni sopra e sotto il fold era dell'84%. Spostarsi di una singola riga di pixel cambia pochissimo, ma superare il confine raddoppia più o meno la probabilità che un contenuto venga visto.

Above the fold, ieri e oggi

Studio 201080%

Studio 201857%

Fino a che punto della pagina arrivano davvero i lettori?

Farhad Manjoo ha pubblicato i dati di scorrimento di Chartbeat per Slate il 6 giugno 2013, e quei numeri sono invecchiati meglio di molte statistiche sul web perché descrivono un comportamento e non una tecnologia.

Comportamento	Slate	Rete Chartbeat
Arrivano e se ne vanno senza interagire	38%	non indicato
Non scorrono affatto	circa 5%	circa 10%
Il lettore mediano arriva a	circa 50% dell'articolo	circa 60%
Superano il 1600° pixel	25%	non indicato

L'impostazione di Manjoo è la parte che si ricorda: ogni 161 persone arrivate sulla pagina, circa 61 se n'erano già andate, e dei 100 rimasti, cinque non avrebbero mai scorso. La scoperta che aveva sepolto è quella che dovrebbe cambiare il tuo comportamento. Il legame tra profondità di scorrimento e condivisioni è molto debole, quindi gli articoli più twittati non sono quelli letti più a fondo. Chi considera le condivisioni una prova che il contenuto è stato letto sta misurando tutt'altra cosa.

Mettendo a confronto i numeri di NN/g e di Chartbeat ne seguono due cose. La maggior parte delle persone scorre, quindi nascondere tutto ciò che conta nei primi 600 pixel è inutile. E l'attenzione cala rapidamente, quindi l'ordine dei tuoi contenuti conta molto più del fatto che un singolo elemento superi una linea immaginaria. Se vuoi sapere dove si fermano i tuoi lettori, e non dove si fermavano quelli di Slate nel 2013, serve proprio il monitoraggio della profondità di scorrimento.

Cos'è un falso fondo e perché costa più di una pagina lunga?

Il falso fondo è la modalità di errore che il fold provoca davvero. Kim Flaherty l'ha chiamata illusione di completezza sul sito NN/g il 17 gennaio 2016: "L'illusione di completezza si verifica quando il contenuto visibile sullo schermo sembra completo, mentre in realtà esistono altre informazioni fuori dall'area visibile."

In un test di usabilità che descrive, sei partecipanti su otto non hanno scorso affatto la pagina, e il 75% dei partecipanti si è frustrato dopo aver inserito i propri dati personali, scoprendo che il servizio non era disponibile nella loro zona, perché non si erano mai accorti che sotto c'era altro contenuto. La pagina non era troppo lunga. Sembrava finita al confine.

La soluzione è visiva e non strutturale. Fai in modo che qualcosa attraversi la linea. Un titolo tagliato a metà, un'immagine che continua oltre il bordo, una fila di card in cui la quarta è tagliata: tutti questi elementi dicono all'occhio che la pagina non è finita. Le sezioni hero a tutta altezza con un bordo orizzontale netto in basso sono il modo più sicuro in assoluto per fabbricare un falso fondo.

Come dovrebbe cambiare ciò che metti in alto la varietà dei viewport?

Smetti di progettare per la piega e inizia a progettare per la prima schermata del tuo traffico reale. Tre mosse pratiche:

• Misura la distribuzione dei viewport dei tuoi utenti. window.innerHeight al caricamento della pagina, raggruppato in fasce e riportato in un report, ti mostra la forma reale dei dati. Combinalo con visualViewport se ti interessano zoom e tastiere su schermo. Una heatmap segmentata per tipo di dispositivo mostra la stessa cosa in modo spaziale, ed è di solito più facile da discutere. La nostra guida su come leggere una heatmap del sito web spiega come evitare di interpretarla troppo.
• Usa unità di viewport che tengano conto della barra degli indirizzi. CSS offre svh, lvh e dvh accanto a vh proprio perché il viewport mobile cambia dimensione durante lo scroll. Una hero alta 100vh trabocca nel viewport piccolo e lascia uno spazio vuoto in quello grande.
• Metti la promessa sopra la piega, non l'intera pagina. La prima schermata ha un solo compito: far capire a chi arriva di essere nel posto giusto e che c'è dell'altro da vedere. Tutto il resto può stare più in basso, perché le ricerche dicono che le persone ci arriveranno.

La velocità incide su tutto questo. Un contenuto che sta tecnicamente sopra la piega ma non è ancora stato renderizzato non sta sopra niente, ed è per questo che il Largest Contentful Paint viene calcolato sull'elemento più grande dentro il viewport e non sulla pagina intera. Un'immagine hero che compare a quattro secondi sta sotto la piega in tutti i modi che contano per il visitatore. Se stai lavorando su una pagina specifica, la nostra guida passo passo su come analizzare una landing page mette questi controlli in ordine.

Domande frequenti

La piega conta ancora, ora che tutti scorrono la pagina?

Sì, ma come peso e non come muro. NN/g ha misurato il 57% del tempo di visualizzazione sopra la piega nel 2018 e una differenza del 102% tra i 100 pixel appena sopra il confine e i 100 appena sotto. Le persone scorrono oltre la piega, ma non prestano la stessa attenzione ai due lati.

A quanti pixel di altezza si trova la piega?

Non esiste un valore unico. Un design responsive ha tante pieghe quante sono le dimensioni di schermo che prevede, e la barra del browser, lo zoom, la scala del display e la barra degli indirizzi mobile che si riduce spostano il confine in modo diverso su ogni dispositivo. Misura i tuoi visitatori invece di adottare un numero qualsiasi.

La call to action deve stare sempre sopra la piega?

Solo se il visitatore ha già abbastanza informazioni per agire. Su una pagina che vende qualcosa di familiare, una CTA nella prima schermata funziona. Su una pagina che deve prima spiegare qualcosa, una CTA anticipata viene ignorata e il punto giusto è dopo l'argomentazione. Ripeterla di solito funziona meglio che spostarla.

Quanto contenuto va messo nella prima schermata?

Quanto basta per rispondere a "sono nel posto giusto?", più un segnale visibile che la pagina continua. NN/g ha rilevato che oltre il 65% dell'attenzione sopra la piega cade nella metà superiore del viewport, quindi la metà alta della prima schermata fa la maggior parte del lavoro, a prescindere da quanto ci metti dentro.

Le pagine lunghe rendono peggio di quelle corte?

Non per la sola lunghezza. I dati di Chartbeat mostravano che il lettore mediano si ferma circa a metà articolo, e questo penalizza il riempitivo, non la lunghezza. Una pagina lunga con il valore concentrato all'inizio rende più di una pagina corta che sembra conclusa già alla piega.

Da dove viene l'espressione "sopra la piega"?

Dai giornali. I quotidiani in formato largo venivano piegati a metà per l'esposizione, quindi solo la metà superiore della prima pagina era visibile a chi passava davanti all'edicola, e il titolo più forte andava lì. Il web ha preso in prestito l'espressione quando si è scoperto che gli schermi hanno la stessa caratteristica.

Quanta meno attenzione riceve il contenuto sotto la piega?

Il Nielsen Norman Group ha rilevato che i 100 pixel appena sopra la piega hanno ricevuto il 102% di visualizzazioni in più rispetto ai 100 pixel appena sotto. Nell'intero set di dati di Schade, la differenza media di attenzione tra sopra e sotto la piega era dell'84%. Superare il confine fa quasi raddoppiare le probabilità che un visitatore noti qualcosa.

Perché la piega si sposta su un telefono dopo che inizi a scorrere?

La barra degli indirizzi mobile si riduce non appena il visitatore scorre, quindi il viewport diventa fisicamente più alto dopo il primo swipe rispetto al caricamento. La stessa pagina ha una piega quando si apre e una diversa un secondo dopo, sullo stesso telefono. È un motivo in più per cui un singolo numero di pixel non può descrivere la piega.

Che cos'è l'illusione di completezza?

È un termine di Kim Flaherty per una pagina che sembra finita al bordo dello schermo anche se più in basso c'è altro contenuto. In un test NN/g da lei descritto, sei partecipanti su otto non hanno mai scorso la pagina, e il 75% dei partecipanti si è frustrato dopo aver inserito dati personali, solo per scoprire che il servizio non era disponibile nella loro zona. La pagina non era finita, ma sembrava esserlo.

Le condivisioni social dimostrano che le persone leggono un articolo?

I dati di Chartbeat dietro l'articolo di Farhad Manjoo su Slate del 2013 dicono di no. La relazione tra profondità di scroll e condivisioni era molto debole, e gli articoli più condivisi non erano quelli letti più a fondo. Il numero di condivisioni misura qualcosa di diverso da quanto a fondo qualcuno ha davvero letto.