Colpi di eroe della pagina di destinazione: 18 esempi perspicaci per aiutarti a guidare il tuo [2022]

Nel 1911, il Syracuse Advertising Men's Club tenne un banchetto per discutere di giornalismo e pubblicità. Uno dei suoi membri (Arthur Brisbane) è stato citato nel giornale dicendo: “Usa un'immagine. Vale più di mille parole”.

Non Confuso, Re Salomone, Einstein o Aristotele, ma un pubblicitario. (Dillo ai tuoi genitori.)

Avanti veloce di oltre 100 anni e le proverbiali parole di Arthur suonano ancora vere, specialmente quando si tratta di pagine di destinazione.

Invio: lo scatto dell'eroe della pagina di destinazione.

Se il titolo e il sottotitolo comunicano la tua proposta di valore, lo scatto da eroe della pagina di destinazione lo dà vita in un modo che solo un'immagine può fare. Questo è il motivo per cui un forte colpo da eroe è un pilastro del design della pagina di destinazione.

Sbagli e guarda i tuoi tassi di conversione precipitare.

Fallo bene (come Arthur sapeva per esperienza) e guarda i tuoi tassi di conversione salire alle stelle.

Al fine di farlo bene , renderemo orgoglioso Arthur esplorando i diversi tipi di immagini di eroi, i passaggi necessari per crearne di proprie ed esempi di immagini buone, cattive e fasulle.

Andiamo.

Il tuo colpo di eroe sulla pagina di destinazione si riferisce all'immagine o al video principale utilizzato per comunicare il valore della tua offerta ed è la prima immagine che i tuoi visitatori incontreranno all'arrivo.

Ad esempio, nota come l'immagine dell'eroe di Divvy presenta una carta di credito e un'app mobile, che aggiungono entrambi un contesto al titolo che afferma: "Il credito e il software di cui la tua azienda ha bisogno per prosperare".

L'immagine di un eroe sedurrà qualcuno a comprare?

Non da solo.

Ma insieme al titolo, al sottotitolo, all'offerta e all'invito all'azione (CTA), il tuo scatto da eroe può fornire il contesto, l'emozione e la chiarezza necessari per spingere i tuoi visitatori oltre il traguardo.

Ciò significa che uno scatto da eroe di alta qualità non riempie solo lo spazio; dà vita alla tua offerta in un modo che le parole da sole non potrebbero mai e crea una prima impressione indelebile .

Non confondere un colpo da eroe con una sezione da eroe.

La sezione eroe della tua pagina di destinazione si riferisce alla sezione "above-the-fold" o alla sezione della pagina di destinazione che i tuoi visitatori incontrano per la prima volta prima di iniziare a scorrere verso il basso.

La tua sezione eroe include il tuo colpo eroe, titolo, sottotitolo e CTA (almeno), ma la sezione eroe e la sezione eroe si riferiscono a due elementi separati dell'intera pagina di destinazione.

Che si tratti di una fotografia animata, personalizzata, di un video o di qualche altro stile, gli scatti eroi della pagina di destinazione rientrano in cinque categorie principali:

1. incentrato sul prodotto
2. metafora
3. "terra promessa"
4. focalizzato sul processo
5. astratto

Esploriamo esempi da ciascuno.

Le pagine di destinazione incentrate sul prodotto mettono in risalto il prodotto in azione. Sorpresa sorpresa.

Per un prodotto nuovo o complicato, una ripresa incentrata sul prodotto può aiutare a demistificare la tua offerta rendendo concreto l'astratto.

Ad esempio, lo scatto dell'eroe dell'Editor X presenta la loro effettiva interfaccia dell'editor visivo:

Gli scatti metaforici dell'eroe utilizzano immagini che rappresentano o simboleggiano il valore dell'offerta, ma non in senso letterale.

Ad esempio, l'eroe ripreso sulla pagina di destinazione del nostro piano di marketing gratuito presenta le emoji del nostro marchio sotto forma di banconote da un dollaro e cervelli sorridenti:

Le riprese dell'eroe della terra promessa ritraggono il risultato desiderato dell'utilizzo del tuo prodotto o servizio, mettendo in luce un cliente di successo o uno stato futuro desiderabile.

Ad esempio, la medicina per la caduta dei capelli in abbonamento Keeps mostra un cliente soddisfatto e sorridente, presumibilmente dopo aver usato la medicina per la caduta dei capelli:

In genere vengono visualizzati scatti eroici incentrati sul processo per servizi o software in cui potrebbe non essere possibile illustrare il prodotto. Visualizza invece il processo responsabile del valore o dell'efficacia del servizio.

Ad esempio, GatherContent utilizza una grafica personalizzata per illustrare il processo di gestione dei contenuti del suo software:

Il nostro scatto dell'eroe meno preferito: immagini astratte dell'eroe (o immagini dell'eroe composte da elementi visivi come forme o motivi).

Perché sono i nostri meno preferiti? Perché riempiono solo lo spazio. Non molto altro.

Ad esempio, Semrush presenta due forme astratte come elemento visivo principale, nient'altro. Occasione persa.

Uno scatto da eroe di alta qualità non riempie solo lo spazio; aggiunge contesto, comunica rilevanza, evoca emozioni e arricchisce l'esperienza dell'utente. E lo fa usando una combinazione di

• concretezza
• pertinenza
• contesto
• emozione
• personalizzazione
• allineamento

Esploriamo ciascuno.

I colpi astratti dell'eroe fanno bene due cose: 1) assolutamente nulla e 2) aumentano il carico cognitivo (il tempo necessario ai visitatori per comprendere la tua offerta).

Questo è tutto.

Gli scatti dell'eroe della pagina di destinazione di alta qualità dovrebbero ritrarre il tuo prodotto, servizio, risultato desiderato o proposta di valore in azione, nel mondo reale o il più vicino possibile alla realtà. Semplice.

Non far riflettere troppo i tuoi visitatori. Evita l'arte per amore dell'arte. E mantieni la tua grafica concreta.

Ad esempio, Dollar Shave Club usa la sua immagine dell'eroe per illustrare i prodotti inclusi nel suo set iniziale di rasoi da $ 5. Semplice ma efficace.

Uno scatto da eroe della pagina di destinazione di alta qualità dovrebbe entrare immediatamente in risonanza con il tuo pubblico di destinazione segnalando contemporaneamente "Questo non è per me" a chiunque altro.

I tuoi visitatori prendono decisioni in una frazione di secondo principalmente influenzati dalle loro menti inconsce. Se il tuo colpo da eroe non fa immediatamente chiarezza su chi è e per chi non è, riprova.

Ciò significa anche abbinare l'eroe della pagina di destinazione girato con il messaggio e la creatività che ha inviato le persone lì (ad esempio, corrispondenza del messaggio).

Ad esempio, quando guardi lo scatto dell'eroe Beauty Box di Allure, c'è qualche domanda sul fatto che sia per le persone specificamente interessate alla bellezza?

L'eroe della tua pagina di destinazione ha sparato a vite per supportare il tuo titolo e sottotitolo. Periodo.

Meglio ancora, pensala come la rappresentazione visiva della tua proposta di valore.

Ciò significa che il tuo scatto da eroe deve portare in vita la promessa che fai nel titolo, non una promessa che fai in altre parti della pagina.

Ad esempio, Canva aggiunge un contesto al titolo "creatività e produttività" con uno scatto da protagonista incentrato sul prodotto che illustra la collaborazione, i modelli e il design in movimento (app mobile):

Quando diciamo emotivo, non intendiamo commuovere qualcuno fino alle lacrime; intendiamo creare una sensazione positiva sul tuo marchio e sulla tua offerta.

Molto si riduce alla qualità del tuo design grafico: il web design di qualità crea fiducia e stabilisce credibilità.

Ma puoi evocare sentimenti positivi come fiducia, sicurezza, felicità e sicurezza direttamente dal tuo scatto all'eroe utilizzando immagini scelte.

Ad esempio, Namogoo presenta una varietà di "acquirenti" spensierati, come per dire: "Ecco come si sentiranno i tuoi clienti dopo aver iniziato a utilizzare Namogoo".

Rispecchiando le emozioni positive associate alla "terra promessa" della loro proposta di valore, Namogoo suscita emozioni positive dai suoi potenziali clienti.

Oppure puoi includere prove sociali, come testimonianze dei clienti, valutazioni a stelle o premi, direttamente nella tua foto dell'eroe per evocare sentimenti di fiducia e sicurezza.

Niente scorte. Fotografia.

Mantieni gli scatti dell'eroe della tua pagina di destinazione personalizzati per il tuo marchio.

Se hai bisogno di aiuto dalla fotografia stock a causa delle risorse, come minimo, lavora la fotografia stock in una grafica personalizzata in modo che si adatti allo stile e alla sensazione del tuo marchio.

Ad esempio, Monday.com utilizza varie fotografie d'archivio di persone, ma le modifica nella loro pagina di destinazione scattata in modo da renderla originale e unica.

Infine, le migliori immagini dell'eroe della pagina di destinazione non distraggono dalla copia; si allineano con gusto attorno ai titoli e alle CTA in un modo che attiri l'attenzione su (non lontano da) loro.

Ad esempio, noti come Apostrophe presenta un dermatologo che guarda verso il titolo e CTA?

Dirigere il suo corpo e lo sguardo a destra crea un sottile spunto visivo che attira l'attenzione del visitatore nella stessa direzione, proprio verso il titolo e la CTA.

Ora giustapponilo allo scatto dell'eroe della pagina di destinazione di VanMoof. Non fa risaltare il titolo e la CTA; li seppellisce.

Ora per la parte divertente: esempi di colpi di eroe sulla pagina di destinazione.

Abbiamo suddiviso questa sezione in tre categorie distinte:

1. Il buono (10 esempi)
2. Il cattivo (4 esempi)
3. Il falso (4 esempi)

Come mai?

Perché non tutti i colpi di eroe sono supereroi e imparare cosa non fare è importante tanto quanto imparare cosa fare.

Aggiungili ai preferiti. Aggiungili al tuo file di scorrimento. Dillo a tutti i tuoi amici.

1. Canva Pro
2. Doo
3. Pubblico
4. Adobe Creative Cloud
5. Klient Boost
6. Spazio quadrato
7. Spline
8. SnapCall
9. Forma tipografica
10. Armadillo

Ciò che amiamo: un'inquadratura dell'eroe incentrata sul prodotto che aggiunge contesto al titolo, non distrae dal CTA ed evoca emozioni positive.

Ciò che amiamo: Doo mostra schermate reali dalla loro app di promemoria. Semplice, concreto, contestuale, personalizzato, efficace.

Ciò che amiamo: Public presenta un video in loop che mostra gli screenshot della loro app insieme a utenti reali e autentici. Questo video unisce la focalizzazione sul prodotto con la terra promessa per catturarne ad arte la facilità d'uso, il mercato di destinazione e la compatibilità con i dispositivi mobili.

Ciò che amiamo: non c'è modo migliore per dimostrare la potenza del tuo software di progettazione che mostrare i progetti reali che ha facilitato. Beh, forse in un modo: rendendo il tuo logo il soggetto del design. Bravo, Adobe.

Ciò che amiamo: AMIAMO i colpi metaforici della landing page di KlientBoost. Principalmente perché abbiamo sviluppato un'intera famiglia di mascotte del marchio che hanno bisogno dei loro 15 minuti di fama, ma anche perché illustrano le nostre proposte di valore in modo distinto e divertente. Chi non ama le landing page sorridenti e la pioggia di soldi?

Cosa amiamo : Squarespace dà la priorità al design, sempre. Quindi non sorprende che le immagini degli eroi della loro pagina di destinazione assomiglino più all'arte moderna che alla maggior parte dell'arte moderna. Ma come abbiamo accennato in precedenza, l'arte per il bene dell'arte non è all'altezza quando si tratta di scatti da eroi della pagina di destinazione. No, a meno che tu non abbia catturato il tuo prodotto nella vita reale all'interno di quell'arte. Ed è esattamente ciò che fa Squarespace qui.

Cosa amiamo: è un po' difficile da distinguere da questa immagine (ti suggerisco di visitare la loro pagina web), ma l'inquadratura 3D dell'eroe di Spline si muove quando fai clic e trascini il mouse su di essa. Abbastanza carino, considerando che vendono strumenti di progettazione 3D collaborativi.

Ciò che amiamo: SnapCall usa il loro colpo da eroe per illustrare un caso d'uso comune (o punto dolente) che il loro mercato di riferimento potrebbe trovare prezioso (come interagire con i tuoi clienti in remoto). Ha senso, considerando che i loro sottotitoli promettono di "offrire un'esperienza cliente rivoluzionaria con videochiamate con un clic".

Ciò che amiamo: parlare di incentrato sul prodotto. Typeform usa una forma Typeform incorporata nella vita reale come immagine dell'eroe. I visitatori possono effettivamente fare clic sul pulsante "Provami" e provare il modulo in prima persona. Brillante.

Ciò che amiamo: avviso metafora. Un armadillo che avvolge il suo corpo intorno a una casa come se lo stesse proteggendo come se fosse il suo stesso bambino. È anche possibile comunicare la promessa del marchio e la proposta di valore in un modo migliore? Nessuna possibilità.

Abbiamo visto di peggio, ma questi scatti eroici della pagina di destinazione non riescono ancora a fare il taglio.

1. Semrush
2. InVision
3. MURALE
4. PocketGuard

Cosa non ci piace: ecco cosa succede quando le metafore falliscono. Semrush utilizza una cassetta degli attrezzi, presumibilmente per evidenziare la loro proposta di valore "Strumenti per qualsiasi sfida SEO". Solo la cassetta degli attrezzi è riempita con un righello, una lente d'ingrandimento e un ingranaggio. Vendi attrezzi idraulici? O strumenti SEO?

Cosa non ci piace: E questo è ciò che accade quando l' abstract fallisce. Abbiamo capito, però, dal momento che questa pagina di destinazione promuove il nuovo software "Freehand" di InVision. Ma perché mostrare semplicemente una donna "a mano libera" su un muro? Sì, no. Occasione persa. Le persone vogliono vedere il software nella vita reale, specialmente quando si tratta di un nuovo tipo di software.

Cosa non ci piace: è sovraccarico. Su cosa ci concentriamo? MURAL tenta di utilizzare uno scatto da eroe incentrato sul prodotto, ma ci hanno spremuto troppo, rendendo difficile discernere cosa fa ogni caratteristica. Lo vedo ora: troppe persone vogliono che vengano rappresentate troppe caratteristiche, quindi il designer ha detto: "Eff it, li inseriremo tutti lì dentro".

Cosa non ci piace: la cosa più inquietante di questo disegno astratto è che sembra una sorta di onda sonora. Ma PocketGuard è un'app di finanza personale. La lezione? Assicurati che il tuo colpo da eroe non sembri un servizio diverso a prima vista, anche se per caso.

Sì, non possiamo dimenticare il falso. Questi colpi di eroe sprecano il pezzo più prezioso degli immobili della pagina di destinazione.

1. Citofono
2. SurveyMonkey
3. Agire
4. Info Zoom

Cosa odiamo: una donna che fa saltare in aria un palloncino? È così che illustrerai la tua proposta di valore "Convertire più visitatori del sito Web in clienti paganti"? Altalena e perdere.

Cosa odiamo: le pagine di destinazione non hanno sempre bisogno di scatti da eroe per essere convertite. Quindi non schiacciarli solo perché "hai bisogno di qualcosa di visivo". Dì no ai riempitivi spaziali (ehm, SurveyMonkey).

Quello che odiamo: è un imbuto, suppongo. Ma sembra più una lampadina. In una pagina di destinazione ricca di testo che potrebbe trarre vantaggio da una forte visuale, Act-On non coglie il punto. Per non parlare del fatto che non includono nemmeno il loro logo su questa pagina di destinazione.

Cosa odiamo: è un drone Amazon che consegna la mia nuova prolunga? Yikes. Per non parlare del posizionamento (in alto a destra) distoglie la tua attenzione dal CTA in basso, non verso di esso.

Linea di fondo?

Sebbene gli scatti dell'eroe della pagina di destinazione siano disponibili in tutte le forme e tipi, i migliori incorporano una combinazione di

• concretezza
• pertinenza
• contesto
• emozione
• personalizzazione
• allineamento

Che tu sia una piccola impresa o un'organizzazione globale, dai la priorità a questi elementi per inchiodare la tua pagina di destinazione.

Vuoi sapere se il tuo colpo da eroe colpisce nel segno?

Prova il test del tiro dell'eroe.

Trova un amico o un collega (preferibilmente qualcuno che non ha mai incontrato il prodotto promosso dalla tua pagina di destinazione), carica la pagina di destinazione e concedi loro da cinque a dieci secondi per rivedere lo scatto dell'eroe.

Se non riescono a descrivere con precisione la tua proposta di valore e l'eroe che l'accompagna sparato in due frasi, è ora di iniziare a testare A/B diverse varianti.

Ora vai avanti e rendi Arthur (e noi) orgogliosi.

Non dimenticare di padroneggiare i titoli della tua pagina di destinazione mentre ci sei. Leggi tutto su come farlo nel nostro prossimo blog qui.