9 cose sulle Hero Image che devi assolutamente sapere

Sappiamo bene quanto le immagini aiutino la comunicazione.
E sappiamo anche che la prima impressione è la più importante.

Vuoi sapere come fare colpo sul tuo visitatore con la prima immagine che vedrà?

In questo post scoprirai esattamente questo: il modo migliore per scegliere e trattare l’immagine che il tuo visitatore vedrà per prima.

Tavola dei contenuti

  1. Cos’è la Hero Image?
  2. A cosa serve la Hero Image
  3. È sempre necessaria?
  4. Dove cercarla e quanto pagarla?
  5. Cose da evitare?
  6. Hey, dove guarda il testimonial?
  7. Il testo non è leggibile. Che fare?
  8. Trucchi? Tendenze?
  9. Ho due buone idee, che fare?

 

Cos’è la Hero Image?

Quando se ne sente parlare per la prima volta la domanda è: “Ma cosa diavolo è la Hero Image?”
La Hero Image, è quella grande immagine che occupa una vasta zona sopra alla linea di galleggiamento in molte Home Page e Landing Page.
Facile no?


A cosa serve la Hero Image?

A spiegare cos’è il prodotto? A riempire uno spazio che altrimenti sarebbe “troppo vuoto”? A mostrare persone e umanizzare il sito web? A emozionare? Oppure… a niente, perché è solo uno standard?

Ecco, più o meno tutte e nessuna di queste: la Hero Image serve dare forza alla Value proposition.
Ripeto: La Hero Image serve a dare forza alla Value proposition.

La Hero vive in coppia con la sua Headline. Queste due insieme hanno il compito di marcare con forza la promessa di valore offerto al visitatore.

E il valore è né più né meno il vantaggio fornito da ciò che stiamo mostrando.
È utile qui ricordare che ciò che vende NON sono le caratteristiche di un prodotto o servizio, bensì i vantaggi che offre.

Se ad esempio stai promuovendo un trapano, il vantaggio che offri non è il numero di giri al secondo, o la punta più dura sul mercato. Ciò che fa presa e vende è la soddisfazione di essere il super-eroe di casa, o il miglior installatore in città.

immagine di un prodotto

PRODOTTO

Immagine che evoca un beneficio

BENEFICIO

Hero e Headline insieme dunque: mentre le parole indirizzano il pubblico nella sfera razionale e se usate bene stimolano e danno suggestioni, l’immagine… anche! Usate insieme in equilibrio possono far esplodere una quantità di concetti, o suggestionare nel profondo.Se vuoi scoprire di più su come usare le parole con le tue immagini ti consiglio di dare un’occhiata al post con la più grande raccolta di tecniche di Copywriting.


È sempre necessaria, una Hero Image?

Certo, perché bisogna suggestionare a tutti i costi, giusto?

Sbagliato!

La Hero non è sempre necessaria e ci sono molti argomenti per dirlo, dalla testimonianza di grandi pubblicitari a degli inconfutabili A/B test.

Ma l’argomento che preferisco viene da uno dei principi della Produzione Snella: “Tutto ciò che non produce valore per il cliente è spreco”.

Esempio di landing page senza Hero Shot Image

Quindi, se anche a te non piacciono gli sprechi, la domanda che ci porremo è: “Questa immagine aiuta a rafforzare la mia value proposition?” Se la risposta è NO per ogni immagine che hai trovato o immaginato, pensa seriamente a farne a meno.

Non è un dramma e può essere davvero la scelta vincente:

Togliere la Hero Image in questo caso ha aumentato le conversioni del 232% (Altri casi di studio su A/B test)

 


Dove cercarla e quanto pagarla?

Tutti sappiamo quanto possono essere convenienti gli archivi di immagini low-cost. Sono così celebri che non serve certo elencarli.

Problema risolto?

Non proprio.

Il problema degli archivi low-cost non è tanto la qualità delle immagini (cercando bene se ne trovano di davvero ottime) ma la loro diffusione: il basso costo fa sì che è molto facile trovare una bella immagine in molti luoghi, con il risultato che ben presto apparirà banale.

La soluzione è abbastanza semplice: pagare un po’ di più.

Per fare un esempio, l’archivio Stoksy ha un modello molto efficace: tutte le sue immagini sono in esclusiva (non si trovano altrove a più buon mercato insomma) e costano “un po’ di più”.

Inoltre la qualità media è più alta (e questo aiuta ad abbassare i tempi di ricerca). Questo mix di fattori tiene alla larga l’utilizzo seriale delle immagini e con una spesa 10x ti farà fare un salto di qualità di 100x.

 


Come scelgo un testimonial?

Un testimonial che funziona è un testimonial che… non sembra un testimonial.

Immagini anche perfette sotto il profilo della tecnica fotografica, ma “laccate”, con sorrisi poco spontanei, pose innaturali e in definitiva un aspetto da “immagine comprata” sono da evitare.

Il tuo visitatore non deve mai scorgere l’aspetto tecnico che si cela sotto la suggestione del messaggio.

Se poi c’è una cosa che io evito accuratamente sono le “ragazze ovunque”.

Io chiamo così quei testimonial che trovi in ogni dove, usati, abusati e stra abusati!

Giusto per fare un paio di esempi:

Esempio di "Ragazze Ovunque"

“Ragazze Ovunque”

Bellissime ragazze, grande espressività, ottima luce e composizione ok. Sì, d’accordo, ma un po’ troppo… OVUNQUE.
Non credi?


Hey, dove guarda il testimonial?

Ok, qui ti rivelo un trucchetto. È abbastanza noto a dire il vero, ma non tutti lo conoscono.
Il testimonial deve guardare verso un punto strategico: quello che per te è un punto strategico.

Ad esempio il richiamo all’azione, o alla dichiarazione della Value Proposition.

Esempio di Hero Shot in cui il testimonial guarda verso la CTA

Flusso visivo rispettato: lo sguardo del testimonial indirizza l’attenzione verso un punto importante

Invece è quasi sempre da evitare che il testimonial guardi il visitatore:

Esempio di Hero Shot in cui il testimonial non guarda verso CTA o altri elementi importanti

Flusso visivo spezzato: lo sguardo del testimonial non indirizza la lettura.

L’immagine qui sopra non dirige l’attenzione ma la cattura: è quindi un punto di partenza, va bene per un banner ma qui è sbagliata. Esistono eccezioni ma di solito immagini così non sono da usare come Hero Image.


Il testo non è leggibile. Che fare?

La hero ha il concetto, il testimonial e la composizione giusta, ma il testo non è leggibile?

Esempio di testo illeggibile

Esempio di testo illeggibile

Semplice: mettere un velo e, se serve, ombreggiare i testi.

Esempio di testo reso leggibile grazie a una maschera semitrasparente

Maschera nera semitrasparente

Ora il testo si legge. Ma l’immagine è un po’ piatta, ha perso il suo “mordente”.

Ecco una semplice soluzione: puoi “bucare” il velo per dare un colpo di luce su un punto strategico.
Ad esempio:

Maschera semitrasparente con un "colpo di luce" ovvero una porzione ellittica più trasparente

Maschera “con buco”

Questa maschera crea un colpo di luce sul viso del testimonial e in parte sotto al richiamo all’azione.

Ecco il risultato:

Esempio di testo reso leggibile grazie a una maschera semitrasparente con un colpo di luce sul volto del testimonial

Hero Image con maschera nera semitrasparente “bucata”


Trucchi? Tendenze?

Ecco qualche trucchetto.

Usa un video. Sì, è possibile usare un video al posto dell’immagine: rafforzi ancor meglio la portata emotiva dell’insieme e risolvi facilmente la leggibilità del testo.

Usa un effetto generato da uno script. Se hai deciso di fare a meno di un’immagine figurativa puoi usare un’immagine astratta, magari in movimento, ad esempio un oggetto che segue il mouse. Attenzione però al concetto, usa uno script se il messaggio è appropriato, ad esempio:

Esempio di Hero Shot con animazione via script di codice

Il reticolo si modifica sempre e segue la posizione del mouse

Puoi anche usare un’immagine Cinemagraph.

Questa è stata prevista come tendenza per 2017: un’immagine cinemagraph può dar vita alla tua landing page:

dirk-980.gif
(immagine da cinemagraphs.com)

Vuoi altri trucchi e suggerimenti? Guarda questo Webinar:

 


Ho due buone idee, che fare?

La risposta è semplice (anche se l’attuazione pratica richiede un po’ di preparazione tecnica. Niente paura però: tutto si può fare con un po’ di pazienza e voglia di imparare!).

Se hai due versioni e non sai deciderti, la soluzione è un A/B test.

Schema di un A/B test

Quando fai un A/B test i visitatori del tuo sito sono divisi in due gruppi: un gruppo vedrà solo la versione A della tua landing page, l’altro gruppo vedrà solo la versione B.

Nel mentre si misura quanti visitatori del gruppo A e quanti visitatori del gruppo B “convertono” (cioè fanno l’azione che tu desideri: un acquisto, un’iscrizione eccetera).

Alla fine del test saprai se ha funzionato meglio la versione A o la versione B.

Ho riassunto davvero all’osso, in realtà la cosa è un po’ più complessa. Per fortuna ci sono molti strumenti che aiutano a preparare e ad automatizzare il test, alcuni dei quali gratuiti. Se vuoi saperne di più ti consiglio di fare un salto su Conversion-rate.it: il punto di riferimento italiano per le conversioni online.

 

Questo post ti è piaciuto? E soprattutto: l’hai trovato utile?
Qual è il prossimo accorgimento che terrai in maggior considerazione, quando preparerai la prossima Hero Image? Lo sguardo del testimonial? Le immagini Cinemagraph? Un A/B test?

Faccelo sapere lasciando un commento qui sotto!

Creativo prestato alla strategia aziendale (o viceversa). Uso parole come Affiliate Marketing, Growth Hacking e Conversion Rate Optimization, ma la mia vera passione è il business, cioè i sistemi di creazione di valore. La mia missione? Aiuto a crescere le aziende che vogliono crescere.

2 Comments

  • Infloweb

    21 aprile 2017, 08:51

    Ciao complimenti per l’articolo veramente interessante è sicuramente utile utilizzare elementi come questo per aumentare la comunicazione con l’utente. Volevo fare una domanda che riguarda le immagini in generale. Mi sono imbattuto in delle immagini le quali hanno una parte in movimento e mi chiedevo come vengono prodotte. Esempio se ci sono due persone una ferma insieme allo scondo l’altra invece è come se fosse ripresa in un video di qualche secondo. Non so se sono stato chiaro, spero di sì. Grazie e ancora complimenti per il post

    • Andrea Cossovel

      21 aprile 2017, 11:38

      Grazie per i complimenti 🙂
      Mi pare dalla tua descrizione che ti riferisci alle immagini Cinemagraph, come quella del “James Bond” al volante della Jaguar qui sopra.
      Per realizzare un’immagine così puoi usare Photoshop. Su Youtube trovi diversi tutorial, ad esempio questo in inglese e questo in italiano.
      Esiste anche un software creato ad hoc per realizzare Cinemagraph, Fixel
      Facci sapere se è quello che intendevi!

Lasciaci un tuo commento!