Se torniamo ai primi giorni dell’editoria, otteniamo il termine “above the fold” come termine usato per il contenuto che appariva nella metà superiore della prima pagina di un giornale. Il contenuto sopra la piega appariva ai lettori come il più visibile, con titoli accattivanti e immagini vivaci comunemente usati per attirare l’attenzione dei lettori sperando che, passando davanti all’edicola, li avrebbe convinti a comprare il giornale.
Ora, avanti veloce fino alla transizione dall’aper al digitale, quando quegli stessi editori hanno spostato i loro affari dalla stampa all’online. Mentre il web design si è evoluto dai primi anni ’90, il termine ha continuato ad essere applicato. Quindi cosa significa above the fold per la tua homepage? E ha ancora importanza nel 2019?
Perché Above The Fold è importante per il mio sito web?
Nell’era del marketing digitale, la piega non si riferisce più a un’effettiva piega in un giornale, ma al contenuto che viene caricato per primo quando si visita un sito web, catturando la vostra attenzione e attirandovi dentro.
Nel mondo del web design, dove ci si preoccupa del layout e del posizionamento dei contenuti perché il contenuto che appare sopra la piega è ciò che è visibile per primo quando il visitatore del sito web carica la pagina. Quel contenuto è l’immobile principale che riceve la maggior parte dell’attenzione dai visitatori del tuo sito e l’esperienza dell’utente dovrebbe riflettere questo. Jakob Nielsen stima che, “…gli utenti web passano l’80% del loro tempo a guardare le informazioni sopra la piega della pagina. Anche se oggi gli utenti scorrono di più, dedicano ancora solo il 20% della loro attenzione sotto la piega.”
Prima devi chiederti: qual è il contenuto più importante per aiutarmi a raggiungere i miei obiettivi aziendali?
Una volta che hai risposto a questa domanda, sai cosa mettere in quell’area ad alta visibilità. Il contenuto dovrebbe catturare immediatamente l’attenzione dell’utente e presentargli il contenuto che sta cercando in modo che non rimbalzi e visiti un altro sito.
Punti rapidi per aumentare i tassi di conversione
- Immagine eroe: Non essere troppo etereo qui. Che aspetto hanno i tuoi clienti felici? Cosa stanno vivendo? Mostra un’immagine che evoca un’aspirazione positiva.
- Copia dell’intestazione: Non rinunciare alla chiarezza per essere intelligente. Se confondi, perdi. Attieniti a un messaggio semplice che mostri esattamente quello che fai o che entri in empatia con la sfida principale che stanno affrontando.
- Call to action (CTA): Il tuo CTA primario dovrebbe essere ovvio e posizionato nell’angolo in alto a destra della navigazione E nella sezione hero.
- Tagline: Abbina la chiara copia dell’intestazione con una linea di una o due frasi che posiziona il tuo marchio per aiutare a risolvere il problema del tuo cliente.
- Navigazione: Meno è meglio. Il design di un grande sito web guida l’utente esattamente dove vuoi che vada. Troppe opzioni possono portare ad un affaticamento decisionale.
- Velocità di caricamento: il tempo di caricamento della tua homepage potrebbe far rimbalzare i visitatori!
Posizionare gli annunci sopra la piega migliora la loro visibilità e genera più entrate pubblicitarie rispetto agli annunci che sono posizionati in luoghi meno visibili.
Come si misura “la piega” nel web design?
In breve, è impossibile definire esattamente dove si colloca la piega sul tuo sito web. La posizione esatta differisce a causa della varietà di dimensioni dello schermo del monitor (desktop e laptop), delle risoluzioni dello schermo, dei plugin del browser e delle dimensioni dei vari telefoni cellulari e tablet.
Come regola generale, la maggior parte dei web designer concorda che la linea di piegatura è approssimativamente 1000 pixel di larghezza e 600 pixel di altezza. Questa è la migliore stima della più comune combinazione monitor/browser di 1024×768 pixel, con la finestra del browser massimizzata e senza barre degli strumenti installate in alto che spingono il contenuto verso il basso.
Se sei curioso di saperne di più, controlla il programma di analisi del tuo sito web (se non ne hai uno, Google Analytics è un ottimo posto per iniziare) che dovrebbe essere in grado di dirti quali sono le dimensioni dello schermo più comuni per i tuoi visitatori. Mentre la dimensione dello schermo comune di 1024×768 è stata tradizionalmente la misura giusta, nuove dimensioni stanno guadagnando popolarità come 320×568 e 360×640, tutto grazie all’aumento della visualizzazione mobile dei siti web.
Mobile Viewing And Responsive Design
Negli ultimi due anni, l’utilizzo di dispositivi mobili per la navigazione web è aumentato notevolmente e questo complica ulteriormente il concetto di ottimizzazione del web design per i contenuti above the fold.
Una sfida è che i dispositivi mobili offrono una grande varietà di dimensioni dello schermo e, inoltre, gli utenti sui dispositivi mobili navigano per lo più in modalità verticale piuttosto che in modalità orizzontale. Ancora una volta ha un impatto sulle dimensioni che un designer ha per visualizzare contenuti importanti.
Optimizely dice: “Con così tante persone che accedono alle pagine web attraverso una tale varietà di dispositivi, le attuali pratiche di web design comportano l’utilizzo di un design reattivo: fare uso di layout flessibili, immagini e fogli di stile a cascata. Nel responsive design, non c’è un layout fisso per una pagina, e il contenuto riflette su uno schermo di qualsiasi dimensione. Le pagine web responsive reagiscono o “rispondono” all’ambiente in cui vengono consumate o navigate.”
Mentre il contenuto importante deve ancora essere più in alto nella pagina, al giorno d’oggi, le pagine dovrebbero essere progettate per invogliare gli utenti a scorrere in modo da non perdere i contenuti importanti.
La piega sarà sempre presente come concetto, ma è una regola che può essere cambiata o modificata, soprattutto nel tempo. Dal momento che ci sono così tanti dispositivi e risoluzioni di schermo diverse per navigare sui siti web, il fold differisce troppo da utente a utente per essere affidabile regolarmente. Ma assicurandosi di mettere solo gli elementi e i contenuti più importanti sopra la piega, è possibile trovare un buon equilibrio tra l’usabilità del tuo sito e servire il giusto contenuto “Above The Fold.”
Per altri suggerimenti sulle best practice della homepage o su come migliorare la velocità del tuo sito web dai un’occhiata a questi blog!
- 5 migliori pratiche per la homepage
- 13 modi per aumentare la velocità del sito web
Dalle landing page alle homepage, abbiamo aiutato aziende come la tua a costruire esperienze utente che portano alla vendita. Fissa un appuntamento per parlare.