Il design di un sito è più importante di quanto si possa pensare. La prima impressione è fondamentale e un buon modo per partire con “il piede giusto” è prevedere un Hero Shot che incorpori la value proposition del brand. Prima di tutto però, cos’è una hero image? Una Hero Image (o carosello) consiste in una o più (da 3 a 5) immagini di background presentate “a tutto schermo” in homepage.

Angie Schottmuller definisce una Hero Shot come:

“un’immagine o un video rilevante, emotivo e di valore che supporta, educa e persuade il consumatore.”

Non è semplicemente una grande foto in homepage ma una soluzione grafica che veicola la value proposition del brand.

Perché utilizzare un Hero Shot Image?

Per ottenere una user experience positiva è importante che i servizi, le funzionalità e gli obiettivi di un sito siano immediatamente comprensibili, facili da leggere e chiari. Una Hero Image facilita la comprensione dell’utente che può crearsi immediatamente un’opinione (sono infatti sufficienti solo 50 millisecondi per sviluppare un’impressione ) rispetto a un sito, e decidere se proseguire la navigazione o abbandonarla. Utilizzando quindi un carosello di immagini è possibile veicolare in modo unico e memorabile i valori di un brand e creare una migliore prima impressione rispetto al sito.

Come valutare l’efficacia di un Hero Shot

Chiaramente l’identità di una Hero Image dipende dai valori e dagli obiettivi di un brand. Fondamentale quindi è che incorpori caratteri di personalizzazione e identifichi chiari traguardi di conversione. Per valutare l’efficacia di un Hero Shot, Angie Schottmuller ha realizzato un framework di 7 step:

Rilevanza delle keyword: l’immagine incorpora le keyword identificative del target?
Chiarezza dell’obiettivo: l’immagine comunica in modo chiaro il messaggio del sito?
Supporto lato design: l’immagine supporta il flusso di navigazione indirizzando l’utente verso la CTA?
Autenticità: l’immagine rappresenta (in modo credibile) il brand?
Aggiungere valore: l’immagine aggiunge valore? Migliora la rilevanza? Mette in evidenza i benefit?
Trasporto emotivo: l’immagine comunica emozioni tali da incentivare l’utente a proseguire nella navigazione?
Il consumatore si trasforma in “eroe”: l’immagine trasforma l’utente in un eroe dopo che ha scelto l’offerta proposta?

I 4 tipi di Hero Image

In un website è possibile incontrare quattro possibili tipi di hero image:

Immagine prodotto
Immagine di contesto
Immagine dei fondatori del brand
Immagine extra-contesto

In questo articolo non vogliamo dire quale di queste categorie sia la migliore (un A/B Test è una buona soluzione per valutare quale sia più efficace per lo specifico business coinvolto), ma presentarvi alcuni esempi di hero image che potrebbero essere di utile ispirazione.

1. Immagine di prodotto

Questo tipo di Hero Shot è il più intuitivo, in quanto mette in evidenza l’oggetto dell’offerta: il prodotto. L’immagine può essere statica o dinamica ma il suo obiettivo è quello di dimostrare la value proposition del brand attraverso una prova visiva. Di seguito alcuni esempi. Vedere il prodotto dà un senso di concretezza all’offerta e, il nostro sistema istintivo ama la concretezza! Si tratta del noto Sistema 1 di Daniel Kahneman, ovvero il “pensiero automatico”, che scomoda il razionale (il Sistema 2) solo se strettamente necessario. Il Sistema 2 richiede energia, quindi ogni volta che viene attivato si realizza una frizione/attrito.

Manpacks Questo sito propone un “box” dedicato agli uomini completo di elementi essenziali: biancheria intima, calzini, rasoio, etc. Come si vede nell’immagine che segue, la Hero Image rappresenta e identifica l’offerta completa del brand.
Hammock Town Questo rivenditore di amache mette in evidenza come una casa possa essere arricchita dall’aggiunta di questi inconsueti oggetti. Si dà concretezza al risultato finale che ovviamente comprende la nostra amaca. Senza questo espediente, avremmo dovuto “sforzarci” e pensare.
Instapaper Un’altra interessante tendenza sono gli Hero Shot animati. L’esempio che segue, relativo a Instapaper, è una curiosa illustrazione di come questa applicazione consenta di leggere in qualsiasi modo e momento. Anche in questo caso, l’Hero Shot ci aiuta a “immaginare” il prodotto

2. Immagine di contesto

Spesso i brand scelgono di utilizzare immagini complementari che forniscono un contesto di supporto all’offerta proposta. Può trattarsi dell’ambiente di utilizzo del prodotto o semplicemente qualcosa di correlato che metta in evidenza caratteristiche peculiari e valori.

National Allergy National Allergy è un eCommerce dedicato alla vendita di prodotti per combattere le allergie. Come si vede dall’immagine che segue, il brand ha scelto di non mostrare gli antistaminici ma di inserire nella headline un dottore. La credibilità della figura medica punta a sottolineare l’affidabilità e l’autorevolezza dei prodotti proposti. Anche qui si fa riferimento agli automatismi del Sistema 1: autorità (medico) = credibilità.
Instacart Instacart, un eCommerce dedicato alla delivery di prodotti alimentari, sceglie come Hero Image una varietà di prodotti freschi pronti per la consegna.
Uber Uber, invece di proporre le potenzialità della sua app, decide di mostrare un’esperienza reale: una persona in macchina. Il conducente e il passeggero sorridente sottolineano chiaramente la qualità e l’efficienza del servizio proposto.

3. Immagine dei fondatori del brand

La scelta di utilizzare questo tipo di immagini è volta a legare la personalità carismatica del fondatore alle caratteristiche peculiari dell’offerta. Spesso è arricchita da video, che mostrano il percorso di nascita e crescita dell’azienda.

Backlinko Brian Dean è un volto noto nella comunità SEO e fa leva sull’autorità acquisita inserendo la propria immagine nella hero image di Backlinko.
Conversion Science Anche Conversion Science sceglie di inserire nella Hero shot i suoi fondatori ma, invece di un’immagine statica, predilige un video di presentazione delle attività condotte dai protagonisti. Avete notato che indossano un camice? Come a suggerire “la clinica delle conversioni!
Book In A Box La stessa strategia è applicata al sito di Book In A Box, la società di Max Tucker. L’immagine statica mostra il volto del fondatore (indicatore di credibilità), mentre il video presenta un approfondimento dei servizi, a consolidamento della value proposition del brand.

4. Immagine extra-contesto

Questo tipo di immagini sono solitamente scelte per il loro essere di tendenza, ma non hanno alcuna affinità con l’offerta e non aggiungono alcun dettaglio rispetto al contenuto del sito. Spesso le non-contextual image distraggono dal messaggio ma focalizzano maggiormente l’attenzione sui valori del prodotto.

500 Friends È difficile capire di cosa si occupi 500 Friends. Non è possibile intuirlo dalle immagini ma nella headline sono presenti parole in riferimento alla costruzione di fedeltà. Questo brand ha scelto di utilizzare una generica foto di stock per la Hero Shot. Non di grande aiuto per la veicolazione della value proposition.

Muru Muru è una sorta di music app. Si può intuire questo grazie alla headline “Create your own music journey”. Escludendo però la headline, non si ottengono ulteriori informazioni osservando solo l’immagine scelta per la hero shot che rappresenta giovani che brindano e cenano insieme.

Leankit Anche in questo esempio non è chiara l’offerta del brand. Si tratta di una start up che vende shock photo. L’avreste mai detto guardando solo la hero shot?

Conclusioni

Se realizzate correttamente, le Hero Image sono in grado di contestualizzare e veicolare la value proposition di un brand e di rendere ancora più chiaro il messaggio contenuto nel sito. Aiutano a comprendere immediatamente la tipologia e le caratteristiche intrinseche dell’offerta. Esistono un’infinità di possibili modi per creare una Hero Image, la cosa fondamentale è però testarla su utenti reali e in target con il business di riferimento, in modo da valutare quale sia la modalità migliore. Il consiglio è evitare l’utilizzo di stock photo e ….tazze di caffè!