Le 4 regole per progettare una sezione Hero che funziona
Le 4 regole per progettare una sezione Hero che funziona
Indice:
1. Cos’è una sezione hero?
2. Perché dovresti usare un’immagine hero sul tuo sito web?
3. Le 4 regole per progettare una sezione Hero che funziona
4. Esempi
1. Cos’è una sezione hero?
Una Sezione Hero è una grande area presente nella parte superiore di una pagina, di fronte e al centro, fornisce agli utenti la prima impressione del tuo sito, quindi è importante che segua le migliori pratiche di design. È tipicamente un’immagine prominente, uno slider, un testo o un elemento simile che ha un posto d’onore in cima al layout della tua homepage e possibilmente delle pagine successive.
C’è sempre uno scopo e un focus per queste sezioni, non servono solo per impostare un look e un tono generale. Il modo in cui un sito web è progettato influenza direttamente il modo in cui l’utente percepisce il brand. L’uso di un’immagine principale sul tuo sito può aiutare a stabilire la fiducia tra i nuovi visitatori e convertirli in clienti, aiutandoli a comprare il concetto del tuo sito.
Questa parte della pagina dovrebbe idealmente includere informazioni su quattro cose:
- Cosa avete da offrire
- Perché le persone dovrebbero fidarsi di te
- I vantaggi di lavorare con te
- Quale azione dovrebbero intraprendere dopo
Insieme a questi aspetti chiave, bisogna trovare un modo per far risaltare il vostro brand rispetto alla concorrenza. Ci sono varie idee di design della sezione hero che potresti usare a seconda dell’aspetto del tuo sito web e dello stile che preferisci.
2. Perché dovresti usare un’immagine hero sul tuo sito web?
Gli utenti impiegano solo 50 millisecondi per formarsi un’opinione su un sito web. Ecco perché devi assicurarti che il tuo sito sia facile da leggere, chiaro e piacevole. Usare un’immagine principale è un buon modo per assicurarsi che gli utenti possano identificarsi e relazionarsi con il tuo sito.
Le immagini grandi e sovradimensionate catturano l’attenzione dell’utente non appena arrivano su una pagina. Aiutano anche gli utenti a identificare il punto di vendita unico del brand e a formarsi un’opinione sul brand non appena la pagina viene caricata. Molti web designer creano immagini hero usando foto di veri volti umani. Questo aiuta i designer a personificare gli utenti, oltre a permettere agli utenti di relazionarsi con il brand,
E nel tentativo di creare esperienze più personalizzate per gli utenti web, alcuni designer optano per immagini hero animate (utilizzando video, cursori o caroselli). Questo aiuta ad attirare gli utenti non appena arrivano sulla homepage del sito e rende l’esperienza più vivace.
3. Le 4 regole per progettare una sezione Hero che funziona
Your consent is required to display this content from youtube — Privacy Settings
1. Usa un’immagine o un video accattivante
L’ immagine hero su una pagina di destinazione potrebbe essere qualsiasi cosa da un design grafico a una fotografia di alta qualità o un video coinvolgente. Questi sono probabilmente l’aspetto più importante della sezione hero perché i consumatori sono generalmente più attratti da design colorati, grafica accattivante e video che condividono informazioni interessanti rispetto alle semplici righe di testo.
Con una manciata di modi per integrare la vostra immagine hero nel design della sezione hero, il tipo di solito determina il suo utilizzo. Per esempio, una striscia colorata può essere aggiunta insieme a qualsiasi cosa, da un pezzo unico di clipart a una grafica professionale. Si può poi integrare il testo per includere le informazioni chiave di ciò che fai, perché dovrebbero sceglierti, i vantaggi che offri e altri dettagli.
D’altra parte, potresti anche incorporare un eccellente video che catturerà la loro attenzione e fornirà loro tutte le stesse informazioni. Il video è già uno dei modi migliori per aumentare il ROI dei tuoi sforzi di marketing e usarne uno nella sezione hero della tua landing page porterà spesso a tassi di conversione più alti.
2. Crea un titolo potente
Il titolo della tua sezione hero gioca un ruolo fondamentale nel catturare l’interesse di un visitatore del sito o nell’annoiarlo a clicare il pulsante “Indietro”.
Generalmente, la tua headline sarà la prima frase o una breve dichiarazione che si distingue dal resto. Più efficace sarà meno probabilità ci saranno che la gente esca dal tuo sito web.
3. Utilizza un forte sottotitolo
Il subheading ti dà un po’ più di spazio per espandere la tua attività e la tua offerta. Dovresti includere brevi dettagli sui tuoi prodotti e servizi mentre introduci anche la mentalità di base dietro il tuo brand.
Questo è il punto ideale per infondere fiducia nei visitatori del tuo sito e per definire rapidamente i benefici che riceveranno lavorando con la tua azienda o acquistando dal tuo negozio. È anche essenziale che tu mantenga questa parte del tuo sito web aggiornata per garantire che le persone sappiano sempre cosa possono aspettarsi da te.
4. Includi una chiamata all’azione
Nessuna sezione hero di un sito web sarebbe completa senza una forte, chiara e invitante call-to-action (CTA).
Troppi siti web dimenticano questa parte e lasciano i loro potenziali clienti senza sapere cosa fare dopo. Senza una CTA da seguire, probabilmente saranno confusi e frustrati prima di cercare un’opzione alternativa con un’altra azienda.
Ci sono molti esempi diversi di CTA che puoi includere nella tua sezione hero. Portate il vostro cliente ad iscriversi alla vostra newsletter o invitatelo a scaricare la vostra app se ne avete una. Potresti anche offrire loro uno sconto sul loro primo acquisto o anche una prova gratuita dei tuoi servizi.
LEGGI QUI IL MIO ARTICOLO SULLA CALL TO ACTION
4. Esempi di sezione hero
1. Tesla
Questa hero image è tutta incentrata sul mostrare il modello S e sull’uso di componenti UI per rendere facile agli utenti iniziare il processo di acquisto.
I pulsanti CTA sono ben progettati, in modo che siano visibili ma svolgano un ruolo di supporto all’immagine hero dell’auto. Complessivamente, Tesla ci mostra che un’immagine-hero non deve essere complessa per funzionare, ma piuttosto ha bisogno di fornire l’idea del prodotto che viene venduto.
2. Uniqlo
Non appena atterri sulla homepage, sei immediatamente aggiornato sulle attività e le notizie, grazie all’header carosello interattivo.
Il carosello scorre automaticamente attraverso quattro diapositive, ognuna delle quali contiene un’immagine hero a tutta larghezza, un testo di intestazione e una Call To Action. La combinazione di grandi immagini, caratteri chiari e semplici effetti di scorrimento focalizza la tua attenzione sulle informazioni più importanti e attuali del brand. Puoi anche sfogliare le informazioni al tuo ritmo, usando le frecce destra e sinistra ai lati del carosello.
3. Samsung
Il carosello scorre automaticamente attraverso quattro diapositive, ognuna delle quali contiene un’immagine hero a tutta larghezza e un testo di intestazione. La combinazione di grandi immagini, caratteri chiari e semplici effetti di scorrimento focalizza la tua attenzione sulle informazioni più importanti e attuali del brand, senza dover cliccare da nessuna parte. Puoi anche sfogliare le informazioni al tuo ritmo, usando le frecce destra e sinistra ai lati del carosello.
Samsung va oltre un’immagine statica, optando invece per un carosello completo. Ogni immagine offre un buon impatto visivo, una copia concisa e una CTA. Il carosello include anche un video, rendendolo un’esperienza ancora più interattiva.
Le immagini hero abbiano tutte colori audaci che evidenziano l’atmosfera giovane che Samsung stava cercando di trasmettere con il loro nuovo smartphone.
