Vuoi aprire un negozio online?

Come creare hero image belle (e persuasive) per il vostro negozio online

hero image

Negozi online, temi e template per siti web generalmente presentano un elemento primario in comune: la hero image, ovvero quell’ampia immagine posta in bella evidenza sulla homepage.

Viene definita anche “banner image”; oppure, “carosello di immagini”, se racchiude una sequenza di foto o illustrazioni. Questo elemento grafico, comunque lo si definisca, riveste un ruolo centrale per ogni attività online.

In questo articolo, ci occuperemo della rilevanza della hero image e delle principali best practice per il suo utilizzo; vi presenteremo anche alcuni incredibili strumenti e risorse grafiche per creare hero image belle e persuasive per il vostro negozio online.

Guida gratuita: Come fare da soli le fotografie di prodotto

Impara a scattare splendide foto di prodotto senza spendere una fortuna grazie alla nostra guida gratuita.

Centralità della hero image

La hero image occupa la parte principale dello spazio disponibile sulla homepage, ossia la pagina più in vista del vostro sito. Si tratta della location numero uno nel mondo online: ciò significa che la hero image può essere una risorsa di valore per la vostra attività, se usata correttamente.

Queste ampie immagini sono presenti praticamente in ogni sito e template. Date solo un'occhiata ai temi più popolari nello Store dei temi Shopify: la maggior parte di essi presenta una hero image in evidenza.

hero image Location, Location, Location.

Possibili scopi della hero image

Potete usare questa preziosa parte del vostro sito per diversi scopi, a seconda della vostra attività e dei vostri obiettivi. Esaminiamo alcuni degli approcci più comuni per utilizzare la hero image.

1. Contribuire a costruire il vostro brand e a raccontare la vostra storia

Innanzitutto, lo spazio in homepage dedicato alla hero image può contribuire alla costruzione del vostro brand. Questo approccio può rivelarsi particolarmente efficace se la vostra attività e i vostri prodotti hanno una storia particolarmente interessante. In tal caso, con la hero image, dovrete mettere in evidenza anche le informazioni chiave riguardo la storia del vostro brand, affinché i visitatori ne vengano a conoscenza.

2. Rispondere alle domande dei clienti

Un’altra strategia comune è quella di mettere in evidenza le risposte a domande frequenti, rispondendo al dubbio maggiormente ricorrente dei clienti, o a una loro domanda che richiede una risposta urgente; ad esempio: “Consegna GRATUITA in Italia”.

3. Evidenziare la vostra value proposition

Forse il più importante utilizzo di questo spazio può essere quello di spiegare la value proposition del vostro brand. La vostra “proposta di valore” spiega esattamente il beneficio che i vostri prodotti sono in grado di offrire alla clientela. Quale migliore location per collocarla, se non la homepage, ovvero il punto di ingresso principale al vostro sito?

4. Fare un annuncio

Uno degli usi più frequenti di questo spazio chiave? Presentare un annuncio in evidenza; ad esempio, riguardo una vendita promozionale. La hero image è ideale per comunicare le novità ai clienti: è il posto del sito che raggiunge il maggior numero di visualizzazioni.

5. Mettere in evidenza un prodotto o una linea di prodotti

Infine, è popolare anche l’uso della hero image per mettere in bella mostra un prodotto o una particolare linea di prodotti. Questa può essere la soluzione perfetta per il lancio di nuovi prodotti, in modo da convogliare su di essi l'attenzione principale degli utenti; oppure, per mettere in evidenza i prodotti con il più alto margine di profitto, o i prodotti in liquidazione.

A prescindere dall'utilizzo che volete farne, la hero image dovrebbe comunque includere determinati elementi. Diamo un'occhiata a quelli più importanti.

Quali elementi dovrebbe includere la hero image?

Gli elementi essenziali della hero image sono tre e la loro sapiente combinazione può portare ad un'immagine persuasiva, che spinga i visitatori a compiere l’azione desiderata, in linea con il vostro obiettivo di conversione.

Vediamo quali sono i tre elementi essenziali della hero image:

  1. Immagine accattivante

    L'occhio umano ama le immagini grandi, vivaci, luminose. Proprio per questo le foto dei prodotti sono così importanti. E la hero image non fa eccezione alla regola; essa dovrebbe presentare elementi grafici, immagini o foto ad alta risoluzione e accattivanti. Quasi tutti i temi contengono indicazioni sulla risoluzione e dimensione consigliata per la hero image; così saprete esattamente come predisporla.

  2. Slogan incisivo

    Per “slogan” intendiamo indicare le parole usate per comunicare il vostro messaggio. Deve trattarsi di un testo estremamente conciso e diretto, che possa essere letto in un istante, nel guardare l’immagine.

  3. Call to action efficace

    Infine, su ogni hero image, dovrebbe spiccare una call to action: un testo o bottone indicante l’azione da compiere. Ad esempio: “Compra ora”, “Leggi la nostra storia”, “Scopri di più”, ecc.

Conviene usare varie hero image a rotazione?

Noterete che molti temi e siti mostrano più hero image a rotazione, ovvero una sequenza di immagini che si susseguono ogni tot secondi. Questa funzione è tipicamente amata dai designer, perché risulta scenografica. Ma gli esperti di usabilità disapprovano tale soluzione: le immagini che ruotano costantemente, soprattutto se non lasciano possibilità di controllo all’utente, costituiscono un elemento di distrazione.

Da alcuni test condotti sulle hero image a rotazione, è emerso che le immagini successive alla prima non generano quasi alcun click. ConversionsXL ha pubblicato un interessante articolo dove si parla di questo argomento e dove in sostanza si consiglia di lasciar perdere tutti i banner a rotazione.

L’articolo riporta uno studio della Notre Dame University: emerge come la prima immagine in una successione di cinque abbia ottenuto ben l’84% dei click totali.

In linea generale, vi è consenso unanime sull’opportunità di non presentare varie hero image a rotazione, focalizzandosi invece su un’unica immagine. Comunque, la rotazione delle immagini può essere la soluzione giusta per particolari tipi di attività; se ben progettata, nel vostro caso può funzionare.

Se volete usare più hero image a rotazione per il vostro negozio, osservate i seguenti accorgimenti:

  • Adottate uno stile uniforme ed omogeneo per tutte le immagini.

  • Mantenete semplice lo slogan, di modo che possa essere captato velocemente dal visitatore.

  • Utilizzate immagini più leggere possibile, per non rallentare il tempo di caricamento del vostro sito.

  • Riducete all'essenziale il numero delle slide, mettendo in evidenza solo ciò che è realmente importante.

  • Rendete lo scorrimento dello slideshow facilmente controllabile dall'utente.

Come creare immagini hero per il vostro negozio online

Forse, la difficoltà maggiore per i nuovi proprietari di siti web, inesperti di design e tecnologia, risiede proprio nel realizzare con regolarità delle belle hero image. Comunque, negli ultimi anni, sono sorti una varietà di strumenti realizzati per semplificare questo processo, anche per quegli imprenditori che non abbiano molta dimestichezza con la tecnologia.

Da dove prendere le immagini

Esistono moltissimi siti web a cui poter attingere, e alcuni sono meglio di altri. Per agevolarvi nella ricerca, abbiamo elencato alcune delle fonti migliori dove trovare le immagini per la vostra hero image.

Niente costi, risorse con immagini royalty free

Burst di Shopify - (gratis). È una nuovissima piattaforma fotografica per imprenditori. Qui potete trovare foto prodotto ad alta risoluzione ed immagini lifestyle perfette per le vostre campagne di marketing e social media. Centinaia di nuove foto vengono aggiunte settimanalmente; quindi, se la vostra nicchia non è stata ancora inserita, tornate periodicamente a controllare.

The Stocks - (gratis). Raccoglie tutte le migliori foto di stock royalty free delle fonti più conosciute, tutte in un unico sito, lineare e facile da navigare. Non si riesce a trovare proprio tutto, quindi dovrete spendere un po' di tempo nella ricerca su tutte le risorse, per trovare le soluzioni ottimali per il vostro brand.

Death To Stock Photo - (gratis) Si tratta di immagini gratuite disponibili solo via email. Infatti queste foto vi vengono inviate via email una volta al mese. Un buon modo per iniziare a costruire la vostra collezione di immagini uniche da poter usare in futuro.

Pixabay - (Gratis). Oltre 400.000 risorse gratuite: foto, vettori e illustrazioni artistiche. 

Graphic Burger - (gratis).  Una grande risorsa con foto e immagini gratuite per uso commerciale.

PicJumbo - (gratis). Una buona risorsa per foto di stock di alta qualità e gratuite. Una vasta selezione con i tag, che rende le immagini più facili da trovare.

morgueFile - (gratis). È online da parecchio tempo e contiene migliaia di foto gratuite di stock, tutte provviste di tag per la ricerca. 

hero image immagini gratis Royalty Free

Risorse a pagamento

Se disponete di un piccolo budget per le vostre hero image, potete ricorrere ad alcune delle migliori risorse a pagamento per ottenere immagini e foto di maggiore qualità.

Nel caso delle risorse a pagamento, l’utilizzo sul web è meno diffuso; disporrete di immagini più nuove e originali.

Creative Market - (a pagamento).  Uno dei migliori marketplace per le immagini e grafiche. Gli standard qualitativi sono elevati e i prezzi ragionevoli.

500px Prime - (a pagamento). Un'incredibile risorsa per foto professionali, belle e originali, scattate da fotografi di tutto il mondo.

Stocksy - (a pagamento). Un’altra fantastica risorse di immagini professionali selezionate. Il costo delle foto va da $15 per le immagini piccole, a $30 per quelle medie, a $75 per le grandi.

Naturalmente, le foto di stock restano pur sempre foto di stock. Se avete del tempo, e magari un budget un po' più consistente, prendete in considerazione l’idea di scattare voi stessi le foto per le hero image, come ha fatto Amos Brand.

hero image dove trovare immagini a pagamento

Scattare le vostre foto non deve essere per forza costoso o complicato. Controllate la nostra guida su come fare foto per ecommerce; molti dei consigli in quell’articolo possono essere utilizzati per realizzare ottime hero image per la vostra homepage.

Come mettere insieme una hero image

Adobe Photoshop (€ 24,39 al mese) è il programma più utilizzato da grafici e fotografi; comunque, ha il suo costo e occorre un po’ di tempo per imparare a usarlo. La buona notizia è che esistono diverse alternative più user-friendly ed anche gratuite.

Pixlr - (web based, gratuito). Editor di immagini gratuito, sia in versione web based che scaricabile. Se avete familiarità con l'editing delle immagini, troverete Pixlr piuttosto facile e intuitivo da apprendere. Sfortunatamente, se non avete esperienza nell’elaborazione di immagini, potreste trovare Pixlr un po' difficile da usare. Provate a iniziare con la versione web based dell'editor. 

Pixelmator (app OSX $ 29,99). Pixelmator è uno strumento ricco e potente per l'editing delle immagini per OS X, che viene fornito a un costo nominale di $29,99. 

Canva - (web based, gratuito, con versione Premium). È piuttosto nuovo. Si tratta di un'app editor per immagini basata sul web e va oltre la semplice modifica delle immagini. L'obiettivo è quello di fornire a chiunque la possibilità di creare design con semplicità. L’app rende facile selezionare la misura dell'immagine da produrre ed include elementi di design come fotografie di stock integrate, sia gratuite che a pagamento; in più, include anche dei font.

PicMonkey - (web based, gratuito). Nasconde la sua potenza dietro un’interfaccia semplice ed intuitiva. Sebbene sia gratuito, esiste una versione Premium che fornisce molte funzioni extra per un piccolo costo mensile.

Conclusione

Ora conoscete sia la ragione per cui la hero image è importante, sia le funzioni a cui può assolvere sulla vostra homepage. Cambiatela frequentemente! Ciò contribuirà a presentare il vostro negozio in modo sempre nuovo ai visitatori ricorrenti. Grazie a questo piccolo accorgimento, non solo il vostro sito apparirà costantemente aggiornato, ma condurrà i visitatori a compiere le azioni più in linea con i vostri obiettivi di conversione.

Conoscete altre risorse importanti per realizzare le hero image? Comunicatecelo nei commenti qui sotto!


Articolo originale di Richard Lazazzera, tradotto da Maria Teresa Cantafora.