Come creare hero image persuasive per il tuo sito web

Una hero image è un elemento fondamentale per la prima impressione del tuo brand. Scopri come creare hero image sorprendenti e persuasive per il tuo sito web con questa guida.

Una hero image occupa la maggior parte dello spazio visibile sulla tua homepage ed è dunque un elemento fondamentale per la prima impressione del tuo brand. Scopri come creare hero image sorprendenti e persuasive per il tuo sito web.

Navigando tra i vari negozi online, potresti notare un elemento importante comune a tutti: una grande immagine in evidenza (o una serie di immagini) visualizzata in primo piano sulla homepage.

Tali immagini vengono chiamate hero image, banner o carosello. Indipendentemente dal nome, le hero image di un sito web rivestono un ruolo molto importante per qualunque azienda di ecommerce.

In questo articolo trovi tutte le informazioni sull'importanza delle hero image, oltre ad alcune best practice per il loro utilizzo. Scoprirai anche alcuni incredibili strumenti e risorse di grafica per aiutarti a creare hero image sorprendenti e persuasive per il tuo negozio online. 

Inizia subito a vendere online e dal vivo con Shopify

Cos’è una hero image?

Una hero image è un'immagine di grandi dimensioni che appare nella parte superiore di una pagina web. Le hero image possono comparire in diverse pagine di un sito, ma sono più spesso utilizzate nella homepage, sotto l'header e la barra di navigazione.

Una hero image occupa la maggior parte dello spazio visibile della tua homepage. Per certi versi, svolge la stessa funzione di una landing page. Dalla hero image dipende la prima impressione del tuo brand, il che significa che può essere una risorsa molto preziosa per la tua attività, se usata correttamente.

Fonte: Moss Botanicals

Cosa dovrebbe includere una hero image efficace?

Le hero image efficaci sono solitamente composte da tre elementi:

• Immagine accattivante
• Copy incisivo
• Call to action (CTA) convincente

Grazie all’attenta combinazione di ciascuno di questi elementi puoi creare una hero image persuasiva, capace di portare l’utente a compiere l'azione desiderata, contribuendo ad aumentare il tasso di conversione.

Di seguito puoi vedere alcuni esempi per capire come unire questi tre fattori, con approfondimenti su ognuno di essi.

Fonte: Scent & Fire

1.    Immagine accattivante

L’occhio umano ama le immagini grandi, vivaci e luminose. Puoi scegliere se utilizzare grafiche, fotografie o illustrazioni a seconda del tuo tipo di attività. La regola fondamentale è che le tue immagini siano in alta risoluzione e catturino l’attenzione.

Le hero image dovrebbero essere gli elementi più in vista sulla tua homepage: tienilo presente quando decidi di creare il tuo sito web.

Tutti i temi di Shopify includono un’ampia sezione dedicata alle hero image, con una risoluzione consigliata. In questo modo sai con precisione come impostare le dimensioni di ognuna. Alcuni temi includono anche funzionalità aggiuntive per lo slideshow delle hero image, i video banner e le animazioni.

Fonte: Nurilens

Foto da banca immagine

Se pensi di fotografare i tuoi prodotti autonomamente, studia prima come effettuare foto professionali di buona qualità. Per risparmiare tempo, potresti utilizzare foto da banca immagine.

Ci sono tantissime risorse online dove trovare immagini di qualità professionale per il tuo sito web. Ecco alcuni dei migliori esempi per aiutarti in questa ricerca:

Risorse di immagini royalty-free a costo zero

• Burst di Shopify: Burst è la piattaforma gestita da Shopify dedicata a chi ha un’attività. Su Burst ci sono foto di prodotto in alta risoluzione e immagini lifestyle perfette per campagne di marketing e social media. Se hai un negozio su Shopify, potrai aggiungere foto da Burst direttamente dal tuo editor del tema.
• Pexels: su Pexels trovi migliaia di immagini gratis condivise dagli utenti e da siti web di immagini gratuite.
• Unsplash: Unsplash presenta oltre 3 milioni di immagini gratuite ad alta risoluzione messe a disposizione dalla sua community di fotografi.
• Pixabay: Pixabay offre immagini gratuite per scopi commerciali e non. Alcune immagini sono però protette da diritti legati all’utilizzo di marchi, a pubblicità o privacy.
• Stockvault: su Stockvault trovi foto gratis, layout per il web e template per i loghi.
• Canva: Canva è una piattaforma utile per creare il design del proprio sito web e include un database di immagini gratuite e a pagamento per uso commerciale.
• Stocksnap: Stocksnap offre un’ampia varietà di immagini gratuite per uso commerciale e non.
• Freepik: Freepik è un sito di immagini stock gratuite che include template Photoshop e foto gratuite per uso commerciale, di cui richiede l’attribuzione.

 

Risorse di immagini a pagamento

Se hai a disposizione del budget per le tue hero image, prendi in considerazione anche le migliori risorse a pagamento di foto ad alta risoluzione, così da utilizzare immagini meno inflazionate:

• Shutterstock: Shutterstock possiede una library di quasi 500 milioni di immagini condivise da fotografi da tutto il mondo, il che la rende una risorsa perfetta per la fotografia di viaggio.
• Adobe Stock: Progettata per funzionare con la suite di strumenti Adobe, Adobe Stock include migliaia di foto, template di design per hero image, video, grafiche vettoriali e illustrazioni.
• Getty Images: Anche se abbastanza costosa, Getty Images contiene un vasto archivio di fotografie contemporanee e storiche disponibili per l'acquisto.
• iStock: iStock è di proprietà di Getty Images, per questo potresti notare una certa sovrapposizione per quanto riguarda le foto disponibili. Tuttavia, iStock consente ai fotografi di vendere le proprie foto su altre piattaforme, quindi trovi una collezione più ampia e contemporanea rispetto a Getty.
• Dreamstime: Dreamstime offre un’ampia scelta di foto, video, immagini vettoriali e illustrazioni stock, sia gratuiti che a pagamento, con diverse opzioni di licenza.

Contatta un fotografo freelance

Le foto stock hanno lo svantaggio di essere impersonali. Se hai tempo e budget, potrebbe valerne la pena di ingaggiare un fotografo professionista e fare uno shooting di prodotto ad hoc.

Se non conosci nessuno in particolare, ecco qualche idea su come trovare fotografi freelance:

• Scegli un esperto sulla Partner directory Shopify: utilizza la Partner directory per contattare freelance e agenzie specializzati in produzione ed editing di foto. Puoi anche filtrare i risultati in base alla località e al settore di tuo interesse, ad esempio visualizzando solo i partner italiani specializzati in moda e abbigliamento.
• Fiverr: Fiverr offre una grande varietà di freelance specializzati in diversi campi, dalla fotografia di prodotto al web design.
• Freelancer: il database di Freelancer include professionisti di vari settori, come fotografi o illustratori.
• Upwork: Upwork ti consente di pubblicare un annuncio per il lavoro che ti serve e connetterti a freelance con esperienza.
• Guru: Guru propone fotografi freelance esperti in tutti i tipi di fotografia, come la fotografia di moda, la fotografia di strada, la fotografia di paesaggio e molto altro ancora.

Fonte: Totem Design House

2. Copy incisivo

In pubblicità e nel marketing, il termine copy è utilizzato per descrivere il contenuto scritto riferito a un mezzo di comunicazione. Per chi ha un’attività, il copywriting è uno strumento indispensabile.

Gli utenti danno solo un’occhiata alla tua hero image prima di passare oltre, quindi hai solo pochi secondi (al massimo) per catturare l'attenzione della potenziale clientela. Un buon copy deve dare risposta alle necessità degli utenti in modo facile e veloce. 

Ecco qualche utile consiglio per scrivere copy incisivi: 

• Prediligi la sintesi: i testi lunghi servono, ma l'immagine di un banner non è il posto adatto a loro. Il copy del banner deve essere incisivo e diretto.
• Evita i font difficili da leggere: i font particolari richiedono più tempo per essere letti. Anche se si tratta di poco tempo in più, ogni frazione di secondo è importante quando si tratta del copy di un banner.
• Utilizza il linguaggio della tua clientela: gli utenti tendono a essere più ricettivi nei confronti di un linguaggio a loro familiare. Tieni in considerazione il tono che il tuo pubblico di riferimento usa sui social media e usalo per individuare il tuo stile di scrittura.
• Concentrati sui vantaggi: invece di scrivere "Il nostro team di assistenza clienti è disponibile 24 ore su 24, 7 giorni su 7, per rispondere a qualsiasi domanda", scrivi "Ottieni risposte rapide grazie all'assistenza clienti 24 ore su 24, 7 giorni su 7".
• Non avere paura di testare copy diversi: le hero image sono i candidati ideali per i test A/B, poiché parole differenti possono modificare drasticamente il modo in cui gli utenti interagiscono con il design della hero image.
• Evita le espressioni e i cliché del marketing: gli utenti tendono a sorvolare su slogan pubblicitari comunemente usati come "agisci subito", "risparmi incredibili" e "garanzia di soddisfazione".

Fonte: Royalty Soaps

3. Call to action convincente

Infine, tutte le hero image dovrebbero avere una call to action (CTA) in evidenza. Con CTA si intende il testo con cui dici all’utente quale azione compiere in base ai tuoi obiettivi. Solitamente è abbinata a un pulsante che porta a tale azione. Alcuni esempi? “Acquista ora”, “Firma la petizione” o “Scopri di più”.

Approfondisci: Call to action (CTA): significato e 7 esempi di invito all’azione per ecommerce

Il modo in cui scrivere la call to action dipende a quale parte del funnel marketing ti stai rivolgendo. Se ti rivolgi agli utenti all’inizio del funnel, potresti invitarli a "scoprire di più", mentre per gli utenti alla fine del funnel la CTA potrebbe essere un più diretto "Acquista qui".

Fonte: Alivia

A cosa serve una hero image?

Puoi utilizzare questo elemento fondamentale per diversi scopi, a seconda della tua attività e dei tuoi obiettivi. Di seguito trovi gli utilizzi più comuni delle hero image:

1. Contribuire a costruire il tuo brand e a raccontarne la storia

Lo spazio in homepage dedicato alla hero image può contribuire alla creazione dello storytelling del brand, ossia il racconto utilizzato per comunicare la unique selling proposition del tuo marchio. Questo approccio può rivelarsi particolarmente efficace, perché una storia interessante può diventare memorabile e distintiva.

Fonte: Girls Chronically Rock

2. Rispondere alle domande della clientela

Un’altra strategia comune è quella di mettere in evidenza le risposte a domande frequenti. Puoi rispondere ai dubbi ricorrenti dei clienti, o a una loro domanda che richiede una soluzione urgente, scrivendo ad esempio: “Consegna gratuita in Italia”.

Fonte: Quartz and Rainbows

3. Evidenziare la tua value proposition

Forse il più importante utilizzo di questo spazio può essere quello di spiegare la value proposition del tuo brand. La tua “proposta di valore” descrive esattamente il beneficio che i tuoi prodotti sono in grado di offrire alla clientela rispetto alla concorrenza. Quale migliore posizione per collocarla, se non la homepage, ovvero il punto di ingresso principale al tuo sito web?

Fonte: Partake Foods

4. Fare un annuncio

Il banner della tua homepage è un elemento chiave per promuovere vendite, eventi, lanci di prodotti e altri annunci importanti. Le immagini dei banner attirano la maggior parte dell'attenzione dei visitatori del sito, quindi qualsiasi annuncio che vuoi comunicare è un contenuto ideale per il banner.

Fonte: Allbirds

Ottimizza il tuo sito web con una hero image sorprendente

Ora conosci il valore, gli scopi e le modalità di utilizzo di una hero image per la tua homepage. Cambiare frequentemente queste immagini fa sì che il tuo negozio venga percepito dai visitatori abituali come dinamico e aggiornato. Inoltre lo mantiene attivo e invita gli utenti a compiere le azioni in linea con i tuoi obiettivi di conversione. 

Come creare hero image per il tuo negozio online in 5 step

Creare una hero image ben progettata e che catturi l'attenzione aiuta ad attirare i nuovi visitatori del tuo sito web e a spingerli a esplorare ulteriormente le sezioni di prodotto. Se ti stai chiedendo come creare una hero image per il tuo negozio online, prosegui nella lettura di questa guida step by step.

1. Utilizza immagini di alta qualità per i tuoi prodotti

Attira nuovi clienti con belle foto dei tuoi prodotti o del tuo negozio. È sempre possibile utilizzare fotografie professionali da banca immagine, ma la cosa migliore è ingaggiare un fotografo per scattare foto di alta qualità di prodotti specifici.

Fonte: eGarden Store

2. Crea una grafica con un tool di design online

Puoi rendere più accattivanti le foto dei tuoi prodotti o creare una hero image utilizzando elementi grafici. Usa un tool di design online come Canva, Visme o Adobe Cloud e realizza una grafica capace di stupire.

Ecco un ottimo esempio: Detour Coffee ha utilizzato la grafica ad effetto radiante di uno dei suoi prodotti per creare uno sfondo di grande impatto visivo.

Se ad esempio gestisci un negozio online di piante e fiori, chiunque visiti il tuo sito è probabilmente interessato alle piante e sarà facilmente attratto da immagini di fiori vivaci che colpiscono lo sguardo.

Fonte: Detour

3. Aggiungi la call to action più pertinente

Nessuna hero image è completa senza una call to action, quindi aggiungi il pulsante più adatto all'immagine o alla grafica che hai inserito.

Assicurati inoltre che il pulsante sia in linea con il design dell’intero sito, in modo che risalti ma non sembri fuori posto. Puoi prendere spunto da questo esempio:

Fonte: Horne

4. Utilizza un video come parte della tua hero image

Un altro modo efficace per catturare l'attenzione è quello di creare un video o una GIF in loop e senza audio per la tua hero image. Ad esempio, il sito web di Nomz presenta una serie di videoclip che attirano il visitatore del sito e lo persuadono a rimanere più a lungo sulla pagina per guardare l'intera scena.

Fonte: Nomz

5. Aggiorna regolarmente la tua hero image

Creare la tua hero image non è un processo statico e definitivo. Anche se ti piace molto quella che hai scelto, dovrai aggiornarla di tanto in tanto per far conoscere alla clientela abituale altri prodotti e offerte.

Puoi anche pensare di creare uno slider per la hero image, in modo da poter condividere più call to action contemporaneamente. Questa è un'ottima idea quando vuoi promuovere un evento in arrivo, come nell'esempio qui sotto, dando al contempo visibilità ad altre linee di prodotti. 

Fonte: Rare Device

Hero image: domande frequenti

Come faccio ad aggiungere una hero image al mio sito web?

Se utilizzi un tema di Shopify, puoi aggiungere la hero image nell'editor del tema. Accedi al tuo negozio Shopify, vai sulla pagina dedicata ai Temi e seleziona "Personalizza" accanto al tuo tema attuale.
La maggior parte dei temi prevede uno spazio per un banner come impostazione predefinita, ma se pensi sia necessario aggiungerlo, seleziona "Aggiungi sezione" in fondo al menù di destra, quindi seleziona l'elemento per la sezione hero. Puoi etichettare l’elemento come hero image, immagine banner o slideshow, a seconda del tema in uso.
Tieni presente che le hero image del sito non si trasferiscono da un tema all'altro, come le immagini dei prodotti e le immagini del blog. Le hero image devono essere aggiunte direttamente in ogni tema separatamente e appariranno sulla pagina solo se le aggiungi al tema del momento.

Che dimensioni deve avere la hero image di un sito web?

Puoi aggiungere file PNG e JPEG fino a 20 MB, ma è meglio se utilizzi file di dimensioni ridotte per garantire tempi di caricamento della pagina abbastanza rapidi. Le dimensioni esatte delle immagini dipendono dal tema che stai utilizzando, ma in genere le hero image dovrebbero avere una larghezza minima di 2048 pixel per essere visualizzate a schermo intero con una buona risoluzione.

Ricorda che i temi sono responsive, quindi lo spazio riservato alle hero image cambia a seconda delle dimensioni dello schermo su cui viene visualizzato il sito. Assicurati di lasciare uno spazio intorno alla cornice dell'immagine per tenere conto delle parti che potrebbero venire tagliate dalla visualizzazione.

Inoltre, è bene evitare di inserire il copy e le CTA direttamente nell'immagine. Utilizza invece l'editor del tema per sovrapporre il copy e i pulsanti della CTA che saranno posizionati davanti all'immagine e si adatteranno indipendentemente da essa.

Qual è lo scopo di una hero image in un sito web?

Le hero image hanno diversi scopi, ma in generale sono ottime per comunicare qualsiasi annuncio al maggior numero di visitatori possibile. Puoi ad esempio utilizzarle per annunciare sconti, mettere in evidenza i valori del brand o lanciare nuovi prodotti.

Cosa deve includere una hero image?

La hero image di un sito web deve includere un'immagine di grandi dimensioni e in grado di attirare l'attenzione, insieme a un copy conciso e incisivo e a una call to action convincente.