15+ Beautiful Website Headers and Why They Work So Well

Qual è la prima cosa che un utente vede sul tuo sito?

Esattamente, l’header.

Se non è abbastanza attraente, se non porta chiarezza, i tuoi utenti potrebbero semplicemente andarsene, e forse non tornare più.

Non vogliamo questo, vero?

Le intestazioni del sito web sono una parte centrale della progettazione di un sito. Giocano un ruolo chiave nell’attirare l’attenzione degli utenti e nello stabilire una connessione con i visitatori del sito web.

Ecco perché, nelle righe seguenti, affronteremo alcuni principi di design dell’intestazione di cui dovreste essere consapevoli quando progettate l’intestazione di un sito web.

Principi di design dell’intestazione da seguire

Studi di ricerca hanno scoperto che gli occhi degli utenti si muovono su una pagina web seguendo uno dei 3 modelli:

• Il modello Gutenberg

Fonte immagine: https://vanseodesign.comThe Il pattern Gutenberg può essere applicato a contenuti con molto testo. Suggerisce agli occhi dei lettori di spaziare attraverso e giù per la pagina in una serie di movimenti orizzontali.

Esempio:

• Il motivo a Z

Il pattern a Z definisce il percorso che gli occhi degli utenti seguono quando scansionano una pagina, un percorso che prende la forma di una lettera Z. È raccomandato per il design delle landing page, che i lettori scansionano rapidamente.

Esempio:

• Il modello a forma di F

Questo modello descrive lo stile più comunemente usato per leggere blocchi di contenuto nel mezzo online. Gli utenti scansionano rapidamente una pagina web, e i loro occhi seguono un modello F.

Esempio:

Senza entrare in ulteriori dettagli su questi modelli, vorremmo rafforzare che per ognuno di questi modelli, la linea orizzontale superiore è dove i visitatori iniziano la scansione di una pagina.

Cosa integrare nell’header di un sito web?

Questi modelli mostrano perché un web designer deve decidere attentamente cosa gli utenti devono vedere prima. L’intestazione dovrebbe servire come un gancio che cattura la loro attenzione e li invita ad esplorare il resto della pagina.

Non c’è possibilità di fare una seconda impressione. Quindi, dovresti pensare due volte a cosa includere nell’intestazione:

• Forte immagine eroe

Un’immagine eroe è un’immagine banner molto grande che viene mostrata above the fold in una pagina web. È inclusa nella sezione dell’intestazione ed è la prima cosa che gli utenti vedono quando arrivano su un sito web. Le immagini eroe hanno anche lo scopo di attirare l’attenzione dei visitatori sul punto di vendita unico (USP) del business. Una buona pratica afferma che usare volti di persone reali nelle immagini eroe può aiutare i visitatori a relazionarsi meglio con il marchio. La comunicazione diventa più umana e personale.

Fonte: Drift.com

• Unique selling point (USP)

L’USP è una frase che spiega il motivo per cui esiste un business. Dovrebbe rivelare cosa fa l’azienda, perché e per chi. Dovrebbe anche enfatizzare caratteristiche e benefici unici, che fanno risaltare il marchio tra i suoi concorrenti. Una forte USP è vitale per trasmettere il giusto messaggio ai visitatori del sito web e, infine, per convertirli in clienti.

Fonte: miro.com

• Nome del marchio

Il nome del marchio abitua le persone all’identità del sito o rafforza l’immagine che le persone hanno della vostra identità aziendale.

L’immagine dovrebbe riflettere la personalità del vostro marchio e assicurare che la vostra voce sia coerente in tutto il sito. Dovrebbe essere facilmente riconoscibile anche se tagliata dall’intestazione del sito. E quando è collocata nell’intestazione del sito web, dovrebbe giocare un ruolo chiave nello stabilire una connessione personale con ogni utente.

Fonte: carolinaherrera.com

• Video del prodotto

Perché gli utenti impiegano solo 50 millisecondi per farsi un’opinione su un sito web, significa che dovresti avere i messaggi più importanti nell’intestazione. Questo è il motivo per cui molte aziende non aspettano che i loro utenti scorrano verso il basso per arrivare alle caratteristiche del loro prodotto/servizio, ma usano il potere del video per trasmettere meglio il loro messaggio. Inoltre, non dimentichiamo che il 78% delle persone guarda video online ogni settimana, e il 55% guarda video online ogni giorno.

Fonte: wistia.com

• Call to action (CTA)

Una CTA è un messaggio (di solito su un pulsante), che scatena una certa risposta dai visitatori del sito web. La Call-to-action dovrebbe essere chiaramente definita e facile da capire per i visitatori del sito. Naturalmente, una CTA posta nell’intestazione, proprio dove i visitatori iniziano il loro viaggio nel sito web, aumenta le possibilità di ottenere l’azione desiderata dai rispettivi utenti.

Fonte: creatopy.com

• Product featuring

Nel caso tu gestisca un negozio eCommerce, vorrai sottolineare la qualità e la convenienza di un certo prodotto, e il modo migliore per farlo è di includere quel prodotto nell’intestazione. L’attenzione degli utenti sarà guidata verso quella migliore offerta, e saranno inclini ad entrare nel processo di acquisto.

Fonte: amazon.com

In ognuno dei casi di cui sopra, la regola generale è: tienilo semplice, tienilo chiaro, rendi l’intestazione coinvolgente! La ricerca mostra che “la differenza media nel modo in cui gli utenti trattano le informazioni sopra e sotto la piega è dell’84%”. Quindi, è meglio concentrare i vostri sforzi per ridurre questi numeri il più possibile. E lo farai meglio se ti sei posto degli obiettivi su ciò che vuoi trasmettere.

Grandi siti web, come www.youtube.com, limitano lo spazio dedicato all’intestazione solo ad una piccola quantità. Questo è fatto di proposito, poiché l’intenzione è quella di lasciare che l’attenzione degli utenti sia diretta a qualcosa di più importante, come prodotti, o servizi, o video (ad esempio YouTube).

A volte non hai nemmeno bisogno di un’intestazione, o se lo fai, ne hai solo una piccola.

Tutto dipende dalle particolarità del sito. Pensaci e dai al tuo sito web la personalità di cui ha bisogno, non importa quello che le tendenze del web design ti “dicono” di tanto in tanto.

Che cosa ispira l’header del tuo sito web?

Oltre a trasmettere certi messaggi, puoi anche considerare di infondere certe emozioni nei lettori. A seconda dello scopo che dai all’intestazione, essa può ispirare nei lettori una delle seguenti:

• Curiosità

Per certi siti web, sarebbe adatto impostare un’intestazione che ispira curiosità nei lettori. Vorranno scoprire di più, desidereranno di più, si precipiteranno ad esplorare il resto della storia.

È come mi sento riguardo a questo header di Canva. Fanno un’enorme promessa proprio lì: “Disegna qualsiasi cosa”. E tu sei invitato a provarlo. Puoi resistere?

• Azione

In alcuni casi, è meglio suscitare l’azione direttamente dall’header. Con una call-to-action, è possibile invitare gli utenti a cliccare su un pulsante, o eseguire qualche altra interazione con il sito web, subito. Nel caso di Planable, il loro USP è direttamente collegato alla CTA qui sotto. Inoltre, se non sei ancora pronto a comprare, c’è anche un’opzione per programmare una demo.

• Fiducia

Potrebbe essere utile iniziare ispirando fiducia ai tuoi visitatori. Volete che compiano un’azione in seguito, e per farlo, devono sentirsi pienamente sicuri di prendere la decisione giusta.

Vediamo come lo fa Salesforce. Dichiarano di essere il più grande CRM del mondo. Ok, potreste dire che il 99% delle aziende là fuori non sono le prime nel loro campo. E avreste ragione. Ma, se leggete qui sotto, c’è sicuramente qualcosa che potete usare. C’è un caso di studio che mostra quanto sia efficiente il prodotto. Puoi sfruttare tu stesso un tale caso di studio.

• Dolore

Perché mai vorresti ispirare dolore nei lettori, specialmente dall’intestazione? Beh, molte aziende hanno il loro marketing basato sul principio FUD (Fear, Uncertainty, Doubt). In una fase iniziale del processo di conversione, la paura/dolore farà scattare la decisione di applicare immediatamente una soluzione e far svanire quel dolore.

Questo può essere un approccio per servizi di cybersecurity, servizi di sicurezza fisica, ma anche nella sanità o nei fondi pensione.

Questo approccio può essere sfruttato nelle campagne che vogliono rendere le persone consapevoli della necessità di vaccinarsi contro la COVID, o di indossare la cintura di sicurezza.

• Laughter

Forse si vuole connettersi emotivamente con i visitatori, fin dall’inizio. E non c’è modo migliore per farlo che farli ridere. E ridere forte. Si sta formando un senso di complicità e avrai i tuoi utenti al tuo fianco, mentre esplorano il sito web.

• Familiarità

Collegare la situazione degli utenti con una situazione simile presentata nell’intestazione può creare un certo grado di familiarità.

Tipi di intestazione per diversi tipi di siti web

A seconda delle specificità del sito, un’intestazione si adatta meglio al design generale che un’altra. Di conseguenza, dovresti avere un’idea chiara di quale tipo di intestazione si adatterà meglio al tuo sito web (che sia un eCommerce, un blog, un portfolio, un giornale online, ecc.).

• Intestazione incentrata su CTA

Nel caso di Blue Apron, l’intestazione del sito web utilizza un grande video, invece di una grande immagine principale. Trasmette un senso di intimità, familiarità, appetito.

Poi, abbiamo una CTA che invita l’utente ad agire per beneficiare della stessa esperienza accogliente e gustosa.

Il sito CrazyEgg è dotato di un’intestazione che invita gli utenti a prendere il loro prodotto per una dimostrazione dal vivo. Il loro prodotto è semplicemente perfetto per queste dimostrazioni in tempo reale. E dimostra immediatamente i benefici del prodotto. Stanno anche usando uno spunto visivo, indicando la CTA: la mano dell’uomo nel palloncino sta dirigendo l’occhio verso il pulsante.

• Intestazione focalizzata sul marchio

Questo è un bellissimo esempio di un sito web con un’intestazione focalizzata sull’identità del marchio e sugli elementi del marchio. Include il logo, una replica dei colori del logo del marchio nella parte superiore, così come il loro slogan.

• Intestazione focalizzata sul contenuto

Questa è molto adatta per blog e riviste che promuovono articoli e storie.

Ma ho anche trovato alcune eccezioni.

Patagonia non promuove il suo negozio sulla homepage, ma spinge le storie che mostrano il loro impegno a fare un cambiamento nel mondo. Questa storia attuale, presente nell’intestazione del sito, riguarda la schiavitù e l’attivismo.

Nel caso di Ikea, la parte sinistra dello schermo invita i visitatori a uno dei negozi online, mentre l’altra metà invita gli utenti a leggere la storia di Ikea.

• Intestazione con sfondo video

BUKWILD ha integrato 3 diversi video nell’intestazione del sito. Ognuno dei video può essere riprodotto posizionando il mouse sulla sezione corrispondente. Ciò che è interessante in questo è il modo creativo in cui usano i video come parti di un “quadro” più grande, che rappresenta il loro marchio.

• Intestazione incentrata sul prodotto

Nel caso di Cropp, un negozio di moda online, le ultime collezioni vengono presentate nell’intestazione.

Threadless.com mette la wall-art in un contesto e presenta una squadra CMYK. L’header include anche una chiara CTA, per tutti coloro che sentono di appartenere in qualche modo a quello scenario presentato nell’header dalla “squadra”.

• Testata incentrata sul branding personale

Nel caso del blog di viaggi Alex in Wanderland, nell’header del sito, oltre a una foto di Alex, gli utenti possono vedere l’inizio di una storia in questo header: “Five years and counting on the road…”. Questo è un invito per i lettori a voler esplorare altre storie.

Per concludere…

Le intestazioni contribuiscono molto al successo o al fallimento di un sito web. Tecnicamente parlando, questa parte superiore è naturalmente la prima cosa sul sito web con la quale le persone interagiscono.

Si tratta di un sito web.