15 convincenti esempi di contenuto Above the Fold per ispirare il tuo

Otto secondi – in media, questa è la durata della durata dell’attenzione di un essere umano. Questo significa che se sei un marketer, il tuo contenuto deve ispirare, deliziare ed essere visto come utile dal tuo target… in meno di otto secondi.

Forse sui social media, il tuo contenuto funziona bene. Sta entrando in risonanza con il pubblico e vi sta guadagnando l’impegno. Ma è possibile che quando si guarda alle metriche del sito web, ci sia una storia diversa che viene raccontata.

Se il tempo di sessione è basso e la frequenza di rimbalzo è alta, è possibile che stiate impiegando più di 12 secondi per attirare l’attenzione di un visitatore, il che, per generare lead, non è il massimo.

Si può perdere traffico perché il contenuto che i visitatori del sito vedono quando visitano per la prima volta la vostra pagina non è abbastanza interessante per tenerli lì. Le tue landing page potrebbero essere convincenti nel momento in cui i browser iniziano a scorrere, ma se non sono abbaglianti e facili da usare fin dall’inizio, i browser possono facilmente cliccare via.

Questo significa che il tuo contenuto sopra le pieghe potrebbe probabilmente essere rifatto per coinvolgere i visitatori.

Se il tuo sito ha un contenuto convincente sopra le pieghe, probabilmente vedrai tassi di conversione più alti e tassi di rimbalzo più bassi. Se non sei sicuro, prova a fare un auto-test guardando il tuo sito da una nuova prospettiva – se tu fossi un nuovo visitatore, rimarresti sul tuo sito a prima vista?

Se la tua risposta è “non sono sicuro”, non preoccuparti, ne parleremo, ma prima, discutiamo di cosa significa che il contenuto deve essere above the fold.

Il contenuto above the fold è ciò che attira il browser nel tuo sito web. Una pagina web lenta da caricare, congestionata da informazioni e difficile da usare probabilmente non attirerà il lettore nello stesso modo in cui lo farebbe una pagina con il design opposto.

Parliamo di alcuni modi per fare in modo che il tuo contenuto above the fold stordisca i browser web.

Above the Fold Website Design Best Practices

Quando progetti la tua pagina web, tieni a mente queste pratiche. Manterranno l’attenzione dei broswer e li incoraggeranno a esplorare il resto del tuo sito web.

Mantieni il tuo design semplice.

Il contenuto sopra la piega non dovrebbe essere estremamente occupato – se lo fosse, i lettori potrebbero non sapere dove guardare prima e cliccare via dalla pagina. In alternativa, se non sono in grado di trovare rapidamente la risposta alla loro sfida, probabilmente sceglieranno un altro sito web.

Per mantenere la tua pagina professionale, organizzata e user-friendly, prova ad aggiungere un’immagine in primo piano o multimediale, come una GIF o un video, al tuo fold. Poi, aggiungi un breve titolo che introduca la tua pagina web, e una frase sotto di esso che descriva la tua pagina in modo più dettagliato.

Rendi il contenuto coinvolgente.

Pagine web semplici sono un modo per mantenere l’attenzione di un browser. Ma quando ci arrivano, cogliete le opportunità per deliziarli. Per esempio, quando scrivi i titoli e il corpo del testo, dovrebbero riecheggiare la voce del tuo marchio.

Non è necessario fare grandi cambiamenti per deliziare il browser. Per esempio, se c’è un pulsante CTA sulla tua pagina, invece di leggere “Per saperne di più”, prova “Pronto a iniziare?”.

Se la foto in primo piano sulla tua pagina web è statica, vedi se puoi trasmettere lo stesso messaggio con una GIF. Inoltre, se tutto il tuo testo è di un solo colore, prova ad aggiungerne uno o due in più – una buona regola è incorporare i colori del tuo marchio per professionalità e coerenza con il resto del tuo sito web.

Progetta il tuo contenuto per l’usabilità.

Soprattutto, il tuo contenuto dovrebbe essere facile da interagire. Per esempio, se stai lavorando sul contenuto above the fold per una pagina prodotto, assicurati che il tuo contenuto above the fold funzioni come dovrebbe.

Supponiamo che il contenuto above the fold della tua pagina prodotto sia un video. Si carica correttamente, include didascalie e opzioni audio?

Inoltre, pensa all’esperienza dell’utente. Se il tuo contenuto above the fold presenta un video che si autopaga, interromperà l’interazione dell’utente con la pagina? Per combattere questo problema, assicurati che il video venga riprodotto in modalità silenziosa e includa i sottotitoli, se necessario.

Solvere le sfide per il lettore.

Il tuo contenuto above the fold dovrebbe rispondere alla sfida del browser. Per illustrare, diciamo che lavorate per un fornitore di servizi di email marketing, e un browser cerca “email marketing software” e atterra sulla vostra homepage.

Il vostro contenuto, quindi, dovrebbe includere alcune, se non tutte, le parole chiave “automated email marketing software” in qualche forma. Per esempio, il vostro titolo potrebbe essere “Email Automation for Marketers,” ed espandersi su questo nel testo di supporto.

Quindi, queste sono alcune linee guida da tenere a mente quando progettate il vostro contenuto. In seguito, daremo un’occhiata agli esempi di alcuni siti web con ottimi contenuti above the fold.

15 Esempi di contenuti Above the Fold convincenti per ispirare i tuoi

Wistia

Wistia permette ai suoi utenti di creare video dinamici per campagne di marketing. Il loro contenuto above the fold introduce i servizi di Wistia usando un mix di multimedia: GIF, video e breve copia, per mostrare le capacità del servizio:

Image Source

Il video della homepage blocca il browser nelle sue tracce. Probabilmente passeranno più tempo a guardare la clip ispirata al talk-show che spiega i servizi di Wistia. Come consumatore, quando vedo persone reali su una pagina web, è invitante e mi spinge ad esplorare ulteriormente.

Una homepage semplice come quella di Wistia sembra casuale. L’atmosfera accogliente della homepage semplicistica trasmette un’atmosfera professionale. E, dopo il video, i navigatori avranno un’idea delle offerte del software, direttamente dagli esperti di marketing.

Velocity Partners

Velocity Partners, un’agenzia di marketing B2B, non ha un video di panoramica aziendale per il suo contenuto above the fold. Invece, la homepage ha un affascinante slideshow interattivo che spiega perché i marketer innovativi dovrebbero sfruttare i nuovi formati di contenuto per raccontare storie più rinfrescanti:

Image Source

“Great marketing moves,” descrivere ciò che l’azienda è tutto, ed è breve, semplice, e al punto, lasciando che lo slideshow faccia il lavoro pesante quando si tratta di attrarre visitatori. La messaggistica above the fold di Velocity Partners accende la curiosità e, a sua volta, l’incentivo a continuare a scorrere.

È importante notare, tuttavia, che se si desidera utilizzare contenuti above the fold simili a quelli di Velocity Partners, assicurarsi che i primi secondi della presentazione, così come la copia, siano i più coinvolgenti. Se non lo sono, il navigatore probabilmente non si sentirà incline a rimanere sul sito dopo aver letto il titolo.

VeryGoodCopy

VeryGoodCopy è un’agenzia creativa che realizza articoli, landing page, pagine web ed e-mail per i marchi. Sopra la piega, il sito web lascia che il copy descriva ciò che l’azienda può fornire agli utenti:

Fonte immagine

Il titolo trasmette l’opportunità per i marketer di imparare a persuadere sfruttando un ampio spazio bianco, un titolo allettante, una breve descrizione dei loro argomenti di contenuto, la prova sociale e una vivace call-to-action. Questo design semplice e coinvolgente sopra la piega cattura l’attenzione dei visitatori e li convince a controllare i loro micro-articoli.

Shopify

Le immagini sono il modo in cui il contenuto sopra la piega sul sito di Shopify invita il lettore ad esplorare. Shopify permette agli imprenditori di iniziare la propria attività di ecommerce, facendo affidamento su di esse, piuttosto che sulla copia, per spiegare le caratteristiche del software:

Fonte immagine

La homepage include immagini artistiche e un video affascinante per fare un’impressione duratura sul browser. E, anche se il testo è scarno, la tagline è piena di scopo e costringe i visitatori a cliccare su quel CTA verde per iniziare una prova.

Ann Handley

Questa autrice di best-seller del Wall Street Journal e partner di MarketingProfs, Ann Handley, ha usato la homepage del suo sito web per impressionare i navigatori evidenziando le prodezze del marketing. L’hyperlinking e il linking sono eroi qui – il linking ad altre pagine di un sito web può far guadagnare più click su varie pagine di un sito, come i titoli di Handley:

Fonte immagine

Fa anche leva sullo spazio bianco, una sua foto accogliente, una tagline accattivante, una copia convincente e una vibrante call-to-action per convincere i suoi visitatori a considerare di lavorare con lei. Da questa homepage, il visitatore sa che aspetto ha Handley, cosa ha fatto e come contattarla. Per quanto riguarda il contenuto above the fold, è un home run.

Mint

Il contenuto above the fold può massimizzare la semplicità, come fa per Mint, un software di pianificazione per la pianificazione del budget &. La semplice, ma professionale, homepage trasmette efficacemente l’azienda e come possono aiutare i clienti.

Nota la copia nel titolo – si collega emotivamente al lettore in due frasi, aprendo loro la porta per esplorare il sito web di una società che li conosce:

Image Source

Mint ha anche una foto della loro applicazione in azione per catturare l’attenzione dei visitatori del loro sito. Questo aiuta il navigatore a visualizzare come sarà l’app se decidono di iscriversi.

InVision

Come si fa a mostrare le storie dei clienti in modo dinamico above the fold? Diamo un’occhiata all’elegante esempio di InVision:

Image Source

InVision è un’azienda di design di prodotti digitali che aiuta gli utenti a costruire facilmente siti web eleganti e impressionanti, quindi il team di design della società sapeva che la homepage doveva impressionare i visitatori. Lo fa, riproducendo in automatico una versione silenziosa del video riassuntivo dell’azienda, completo di testimonianze di responsabili di aziende come Uber e Twitter.

Il copy che è stratificato sopra il video fa un ottimo lavoro di spiegazione concisa di ciò che l’azienda fa per gli utenti, e la CTA “Free Forever” invoglia persino me, un marketer che non sta cercando di progettare un sito web, ad iniziare ad imparare di più sulle offerte del software. Inoltre non nasconde i titoli di questi decisori dal video – “Dantley Davis, Netflix Design Director” è un terzo inferiore abbastanza grande che può catturare gli occhi degli utenti quando non stanno guardando (il mio è stato sicuramente catturato).

Animalz

Simile a VeryGoodCopy, Animalz è un’agenzia di content marketing il cui sito non bombarda i visitatori con messaggi sui loro servizi nel design above the fold. Invece, i visitatori sono accolti con il titolo, “Il miglior content marketing del mondo avviene qui”, che invoglia un marketer come me a leggere ulteriormente per sapere come:

Image Source

La copia CTA è diversa dai pulsanti CTA ordinari. “Parliamo”, piuttosto che “Clicca qui per saperne di più!”, implica che quando i visitatori cliccano sulla CTA, saranno portati a una persona reale che può offrire loro maggiori informazioni sul servizio.

Il sito web sfrutta anche lo spazio bianco, e usa semplici immagini disegnate a mano per invogliare il lettore a scorrere in basso. Il ghirigoro viola corre lungo la pagina web per introdurre i principali clienti di Animalz, e porta a un modulo per entrare in contatto con l’azienda.

Ahrefs

Forse lavori per un’azienda che vuole una homepage senza fronzoli, che trasmetta le campane e i fischietti del prodotto senza congestionare la pagina con un sovraccarico di informazioni. Se questa descrizione vi corrisponde, date un’occhiata all’approccio above the fold di Ahref:

Image Source

Il titolo della pagina web descrive cosa fa il servizio: aiuta gli utenti a migliorare il loro SEO. Questo è ulteriormente supportato dal titolo più piccolo, e il CTA comunica ai browser le informazioni sui prezzi.

I clienti soddisfatti sono elencati in fondo, proprio prima della piega, per dare una panoramica completa di come Ahrefs può essere un vantaggio per le aziende di successo. Se vuoi che la tua homepage usi più copia, piuttosto che immagini, prova a presentarla in un modo semplice che non usi più di 30 parole, come ha fatto Ahrefs.

Twitch

Dopo aver digitato Twitch.tv nel tuo browser, sei immediatamente immerso in ciò che il sito offre: streaming in diretta per i giocatori. Questo perché non appena il tuo browser accede al sito web, uno stream live in primo piano inizia l’autoplay:

Image Source

Mentre può essere un po’ stridente sentire improvvisamente delle voci provenire dal tuo browser, il design above the fold di Twitch non usa alcuna copia per descrivere i suoi servizi. Invece, gli utenti possono saltare direttamente dentro e dimostrare il contenuto da soli, scorrendo i flussi senza dover fare un account o leggere nulla. Possono continuare a scorrere per vedere gli stream più popolari, cliccarne uno ed esplorare le funzionalità del sito da lì.

Per come funziona il sito nel suo complesso, questo approccio above the fold funziona. Twitch offre ai visitatori di provare i loro servizi senza fare alcuna lettura. Piattaforme visuali simili a Twitch possono beneficiare di questo metodo, attirando studenti visivi e non visivi allo stesso modo.

Skillshare

Skillshare usa il video per spiegare la maggior parte dei suoi servizi sopra le righe. Poiché il software offre lezioni online in una varietà di argomenti, il video mostra una panoramica di ciò che Skillshare può aiutare a realizzare, imparare e sentire:

Image Source

Il video evidenzia adulti dall’aspetto sicuro che si immergono nelle loro passioni, che è ciò in cui Skillshare aiuta gli utenti. Il testo a strati ispira i visitatori a esplorare la loro creatività con il software – e a iniziare gratuitamente.

Flock

Se sai che il sito web della tua azienda trarrà beneficio da un mix mediatico di contenuti sopra la piega, considera l’approccio che fa l’app di messaggistica Flock. La chiave per utilizzare un mix di contenuti in una homepage è di progettarla in modo che le informazioni non interrompano l’esperienza di chi visita il tuo sito per la prima volta:

Fonte dell’immagine

Nota come le gif sono usate per evidenziare il testo mutevole che mostra le caratteristiche dell’app. L’immagine di supporto disegnata a mano illustra come funziona Flock, e il testo CTA mostra un po’ di personalità. Usare un mix di media per ravvivare la tua homepage può essere semplice come un’immagine in movimento, un pulsante cliccabile e un disegno per mostrare una panoramica della tua azienda ai visitatori.

King Arthur Flour

Il contenuto above the fold di questo fornitore di ingredienti da forno con sede a Boston, King Arthur Flour, è di prima qualità. Offre ai visitatori la scelta di guardare un video tutorial su come fare il pane a lievitazione naturale utilizzando le offerte dell’azienda:

Fonte dell’immagine

Potrei farmi un’idea delle offerte dell’azienda: una pagina Facebook (che ospita il programma di cottura dell’azienda), ricette, una FAQ sulla cottura, prodotti da acquistare, e anche una “Baker’s Hotline”, che funziona come una pagina per contattarci.

Le caratteristiche dello slideshow, dotate di una foto lucida e del proprio CTA, mi hanno dato una panoramica completa di tutto ciò che l’azienda può fare per gli aspiranti panettieri. Va al di fuori dei soli prodotti dell’azienda, e invece, offre informazioni utili per i panettieri in generale, il che è accogliente per qualcuno che può essere intimidito sulla cottura del pane.

Clarkisha Kent

Sei un libero professionista che si chiede come rendere il tuo contenuto above the fold distinguersi tra la concorrenza? Se è così, quando progetti la tua homepage, assicurati che realizzi due cose: mostrare la personalità e facilitare la navigazione.

Questo perché, mentre il tuo lavoro deve precederti, lo fa anche la tua personalità, specialmente come libero professionista. Se sei uno scrittore, come Clarkisha Kent, il tuo testo deve vendere, come fa il suo sito web:

Image Source

L’inclusione di una foto della testa e di un titolo interessante mostra rapidamente più di chi è la Kent come scrittrice, e l’angolo che probabilmente prenderà come collaboratrice di siti web. La sua barra di navigazione include link a tweet virali che ha fatto e ritagli da altre pubblicazioni, quindi la sua homepage non deve farlo.

Invece, la sua homepage serve come un’introduzione, che può precederla prima del resto del suo sito. Quando i navigatori sono attirati da una pagina web minimalista con un testo cliffhanger, è probabile che siano interessati ad esplorare il sito web per colmare quel vuoto. Per esempio, quando ho letto “Chaos bringer”, ho subito voluto sapere come, il che mi ha spinto a guardare il suo lavoro passato.

Good Witch Kitchen

Questo è un altro esempio di come trasmettere la personalità del tuo marchio se sei un libero professionista o un piccolo imprenditore. Good Witch Kitchen è il nome dell’attività della nutrizionista olistica Kristen Ciccolini. Proprio sotto la piega c’è un rapido slideshow di pubblicazioni che hanno caratterizzato il lavoro di Ciccolini, prima di tuffarsi in un’introduzione:

Fonte dell’immagine

Il logo di Ciccolini, un’immagine luminosa relativa al suo mestiere, e la copia accuratamente forniscono una rapida visione dell’atmosfera che Good Witch Kitchen trasmette: Un approccio non dietetico alla gestione della nutrizione da parte di un’esperta.

Ora che hai qualche ispirazione su come mantenere i tuoi clienti impegnati sulle tue landing page, quale strategia userai per la tua? Non vedo l’ora di vedere cosa ti viene in mente.