L’header di un sito web si trova nella parte superiore di ogni pagina e serve ad alcuni scopi molto importanti. Un buon header bilancia un design pulito e una navigazione cristallina verso le altre pagine. Come tale, è importante concentrarsi sulle migliori pratiche per progettare un’header che aiuti gli utenti a raggiungere rapidamente le informazioni di cui hanno bisogno.
Un header è più che fornire un posto per il tuo logo; è parte di un’esperienza utente coerente che tutti i buoni siti web condividono. Il design di un’header può differire da un sito all’altro, ma le caratteristiche fondamentali che determinano il modo in cui un sito viene navigato e vissuto rimangono le stesse.
Progettare l’header perfetto è un processo più personalizzato di quanto si possa pensare. Mentre crei il tuo sito web, tieni presente che l’header è la prima cosa che i visitatori incontrano quando arrivano sulla tua homepage. Come tutti gli aspetti del tuo sito, deve riflettere il tuo brand e implica una quantità uguale di pensiero strategico e creativo.
Nel complesso, una buona header rende il tuo sito web più facile da navigare, stabilisce il tuo brand e crea un’esperienza di navigazione coerente in tutto il tuo sito web.
Sia che tu parta da zero o che tu stia rinnovando il tuo sito attuale, abbiamo una raccolta delle migliori pratiche per creare un design dell’header che sia intelligente e attraente come il resto del tuo sito web.
In questo articolo, pubblicato di recente, abbiamo visto come progettare nei dettagli un footer efficace.
Oggi vedremo cosa si intende per header, quali sono gli elementi da inserire, le regole da seguire per un web design adeguato e cosa significa “hero header” o “hero image”.
Cos’è l’header di un sito web?
Come il nome implica, un’header si riferisce alla sezione superiore di una pagina web. È una striscia di contenuto di solito appuntata direttamente in cima, in modo da apparire in modo coerente in ogni pagina del tuo sito.
Lo scopo principale di un’header è quello di dare ai visitatori un quadro chiaro del contenuto di base del tuo sito web, e invitarli a vedere di più. Altrettanto importante è la sua funzione come strumento di navigazione. Mentre i visitatori si fanno strada da una pagina all’altra, l’header di un sito web può fornire loro una direzione chiara.
Un’header stabilisce il tono per il resto di un sito web, e non è una sorpresa che vediamo più designer di siti web che enfatizzano con entusiasmo il suo valore estetico.
Gli 8 elementi essenziali di un header
Le header del sito web sono una parte importante del design del tuo sito, ma non occupano molto spazio. Sta a te decidere quali elementi includere in questa area.
Se vuoi che il design dell’header migliori l’interazione dei visitatori con il tuo sito, quando scegli cosa includere, considera di evidenziare le parti del tuo sito che vuoi far risaltare di più. Questo spazio dovrebbe invitare gli utenti a sfogliare quel contenuto.
Tornando all’header come la sperimentano i tuoi visitatori, ci sono un certo numero di caratteristiche comuni che quasi tutti i siti web hanno. Queste caratteristiche rendono facile per qualcuno navigare e identificare il tuo sito web.
Le header possono anche essere fisse o fluttuanti. Le header fisse rimangono in posizione all’inizio della pagina; sono bloccate in posizione e non seguono la visuale del tuo browser mentre scorri verso il basso.
Un’header fluttuante ti segue mentre scorri. A seconda del design, questa header può cambiare durante lo scorrimento diventando più compatta. Questo permette a qualcuno di navigare rapidamente verso un’altra area del sito dopo aver letto fino al fondo della pagina senza dover prima scorrere verso l’alto.
Elementi di header coerenti rendono il web un luogo più user-friendly. I siti web possono variare nel design in modi virtualmente infiniti, ma mantenendo un nucleo di caratteristiche, il tuo sito sarà molto più facile da navigare.
Anche se non è necessario aggiungere tutti questi elementi al design dell’header del tuo sito web, ecco gli 8 elementi più popolari inclusi nell’header di un sito web:
1. Nome dell'azienda
In parole povere, includere il nome della tua azienda è un buon modo per aiutare i visitatori a riconoscere che sono arrivati nel posto giusto. Per quanto riguarda il valore aggiunto, la presenza del nome della tua azienda nella parte superiore del tuo sito web può solo rafforzare l’identità del tuo brand.
A proposito, qui usiamo il termine nome dell’azienda in senso lato – se stai creando un blog o costruendo un portfolio online, non esitare a inserire il tuo nome o le tue iniziali nell’header.
2. Logo
Se ti stai chiedendo dove posizionare esattamente il tuo logo, devi sapere che non esiste una pratica standard. Molti designer di siti web lo centreranno, e molti lo metteranno di lato. Un interessante studio del gruppo Norman Nielsen (F – Shape Pattern) ha scoperto che gli utenti sono più propensi a ricordare un brand quando vedono il loro logo sul lato sinistro dell’header di un sito web.
Suggerimento: se sei preoccupato che il tuo logo sia troppo grande per il tuo piccolo spazio nell’header, potresti creare un logo variabile, che è una versione più piccola e più semplice di quello reale.
Un logo rende facile per qualcuno identificare il tuo sito web a colpo d’occhio, soprattutto se hanno più schede aperte su diversi siti. Per molti utenti, serve a dare loro la certezza di essere arrivati dove volevano.
Se sei su Apple.com, per esempio, ti aspetti di vedere il logo Apple nell’angolo in alto a sinistra di ogni pagina. È sempre lì, coerentemente.
I loghi possono essere facilmente sostituiti da testo, purché identifichino il sito web. Di solito, il logo/identità funziona anche come un pulsante home, che riporterà i visitatori alla home page con un clic. Questo è un altro passo che puoi fare per mantenere la coerenza con altri siti web, dato che la maggior parte di quelli rispettabili hanno questa caratteristica.
3. Menu di navigazione
L’header di un sito web è considerata una posizione predefinita per posizionare il menu di navigazione del tuo sito web. Questo significa creare una lista di elementi del tuo sito e collegare ciascuno alla sua posizione designata. Includere un menu nell’header è davvero una decisione logica, dato che non può mancare. Questo fornisce ai visitatori una navigazione semplice del sito, assicurando un’esperienza utente positiva.
Il tuo menu principale è l’interfaccia utente principale del tuo sito web. Qui è dove metti i tuoi link alle pagine principali. Se il tuo sito web si occupa di notizie, qui è dove metteresti le principali categorie di notizie che coprono in modo che gli utenti possano arrivare rapidamente alle storie che gli interessano di più.
I menu possono essere semplici o complessi, con singoli link o dropdown che si espandono su più livelli. Dipende interamente dal creatore.
4. Carrello
Quando si progetta un sito web, molte delle tue decisioni dovrebbero riguardare la guida dell’utente verso il punto in cui ha bisogno di essere prima ancora di iniziare a cercare. Se il tuo sito web include un negozio online, l’aggiunta di un carrello all’header del sito semplificherà e migliorerà il processo di checkout del tuo acquirente. L’onnipresente icona del carrello serve come luogo riconoscibile per il checkout mentre gli utenti continuano a navigare e ad aggiungere articoli ai loro carrelli. Soprattutto, non saranno distratti dal loro obiettivo finale: soddisfare i loro ordini e pagare con facilità.
Quasi tutti i siti di e-commerce hanno un punto di accesso al carrello nello stesso posto: l’angolo più in alto a destra di ogni pagina del negozio. Quando qualcuno ha finito di sfogliare i prodotti ed è pronto a comprare, avere un punto coerente per accedere al carrello e fare il check-out è fondamentale.
5. Barra di ricerca
Aggiungere una barra di ricerca al tuo header può essere un grande regalo per i visitatori. Dà loro la possibilità di eseguire una ricerca sul tuo sito, mostrando un chiaro elenco di elementi collegati alla query. Questo è uno strumento particolarmente intelligente da aggiungere a un blog, in quanto aiuta gli utenti a trovare i post relativi agli argomenti a cui sono più interessati.
Se hai intenzione di aggiungere un elemento come questo al tuo sito web, è meglio che sia nell’header del tuo sito. I visitatori non lo perderanno mai, e probabilmente apprezzeranno un facile accesso alla barra di ricerca nella parte superiore della tua pagina.
Dare ai tuoi visitatori la possibilità di cercare contenuti specifici sul tuo sito web è una grande idea e la tua barra di ricerca non dovrebbe essere difficile da trovare. Alcuni siti web la collocano in una barra laterale sempre presente, mentre altri la gettano nell’angolo in alto a destra accanto al menu principale.
6. Login
Se crei un sito web per membri, questo di solito richiede agli utenti di effettuare il login, poiché il suo scopo è quello di proteggere le informazioni esclusive dal pubblico. Sia che i membri paghino per un abbonamento o meno, dovrai dare loro le credenziali per accedere al materiale del tuo sito web riservato ai membri. Pertanto, devi avere un posto chiaro per loro per il login, e la posizione più ovvia per indicare un modulo di login è nell’header della tua homepage dove tutti possono trovarlo.
I siti web in cui i visitatori possono diventare membri hanno spesso funzioni di login/logout da qualche parte sulla barra dell’header.
È pratica comune che il pulsante di login stia in piedi da solo, e sia sostituito dall’immagine del profilo dell’utente con un accesso a tendina alla scorciatoia di logout. Questo menu a tendina dell’immagine dà anche all’utente l’accesso al suo profilo e alle sue impostazioni. La homepage di Google è impostata in questo modo.
7. Link ai social media
Chi non vuole più seguaci sui social media? È una pratica comune aggiungere icone sociali a un sito web. Collegarle ai tuoi canali preferiti renderà semplice trasformare i visitatori del sito web in followers e likes.
Di solito, i link sociali sono inclusi nel design dell’header o del footer di un sito web. Posizionare questi link nella parte superiore del tuo sito web significa sicuramente che gli utenti li vedranno più velocemente. Tuttavia, se lo spazio è un problema nel design dell’header, non preoccupatevi di inserirli qui. La maggior parte degli utenti sa che le icone dei social media appaiono nel footer di un sito web, ed è probabile che controllino anche lì.
8. Lingue
Costruire un sito web multilingue è un’impresa ambiziosa – ma se hai le risorse, questo tipo di operazione farà crescere significativamente il tuo pubblico e ti permetterà di creare contenuti localizzati.
Dopo che le traduzioni sono state completate e i tuoi contenuti sono stati caricati, il tuo prossimo compito è quello di assicurarti che i visitatori internazionali possano arrivare nella lingua di loro scelta. L’aggiunta di un menu a levetta per la lingua al tuo design dell’header è il modo migliore per indicare più opzioni di lingua.
Le 10 best practices per il design dell’header
Al giorno d’oggi, non lasciarti ingannare dal design standard dell’header del sito web. Mentre il vecchio e fedele menu di navigazione orizzontale serve bene al suo scopo, sentiti libero di pensare anche fuori dalla scatola orizzontale. Progettare l’header di un sito web comporta ancora molto pensiero e sforzo, soprattutto perché si tratta di trovare modi intelligenti per includere informazioni in uno spazio limitato.
Qualunque direzione si scelga di prendere, ogni design di header può beneficiare delle seguenti pratiche:
1. Usare font chiari e leggibili
Dato che l’header è la parte superiore della tua pagina, includendo alcuni degli elementi più importanti e informativi – va da sé che la leggibilità è fondamentale. Quando crei la tua header, scegli un font che sia rappresentativo della tua identità di marca, ma soprattutto – facile da leggere. Poiché il tuo testo è lì per guidare il tuo pubblico, il suo scopo andrebbe perso se dovessero fare troppi sforzi per decifrarlo.
2. Mantieni un design coerente
Mentre non c’è una dimensione standard, un colore o anche una forma per l’header di un sito web, si vuole fare in modo che l’header incarni un delicato equilibrio: pronunciata, ma coesa. In altre parole, non dovrebbe mai passare inosservata, ma può anche servire come un elemento di design che abbellisce l’aspetto del resto del tuo sito.
Questo è sempre aperto alla soggettività, ma ci sono alcune buone regole empiriche da seguire. Per esempio, cerca di assicurarti che la dimensione della tua header non interferisca con il modo in cui un utente sperimenta il tuo contenuto. Inoltre, mantieni gli elementi visivi come la combinazione di colori e i caratteri coerenti con il resto del design del tuo sito web.
3. Includi una chiara chiamata all'azione
Se è importante per il successo del tuo business, ti perderesti qualcosa se non includessi un efficace pulsante di chiamata all’azione nella tua header perché tutti lo vedano. Per esempio, se hai un sito web di un ristorante, includi un pulsante di chiamata all’azione nella tua header che dice “ordina qui”. O nel caso di un sito web no-profit, questo sarebbe un posto eccellente per incoraggiare i visitatori con un pulsante “dona ora”. Assicurati che il tuo messaggio sia allettante, chiaro e possa essere riassunto in una o due parole.
4. Aggiungi un'illustrazione o un'animazione
Se hai lo spazio, non c’è motivo per cui tu non possa aggiungere un po’ di brio al design dell’header del tuo sito web. Grazie all’incredibile tecnologia dell’arte vettoriale, è facile aggiungere grafica per siti web di alta qualità – incluse illustrazioni o animazioni – di qualsiasi dimensione. Incorporare un’illustrazione o un’animazione darà ai visitatori un’esperienza sorprendente aggiungendo un dettaglio dinamico in un modo inaspettato.
5. Considera le possibilità dell'header
Non tutte le header devono essere uguali. Grazie alle innovazioni entusiasmanti portate dal progresso del web design, vediamo molti siti web svelare nuovi e interessanti approcci alla loro header. Prima di progettare l’header del tuo sito web, considera alcune delle varianti uniche là fuori. Potresti scoprire che forniscono una soluzione migliore alle tue esigenze di web design.
6. Header fissa del sito web
Un’header fissa del sito web rimane appuntata in cima ad ogni pagina del sito, così gli utenti la vedranno ovunque vadano. Questo è un modo molto semplice per dare agli utenti l’accesso alle informazioni in ogni momento, fornendo un’esperienza di navigazione eccezionale.
7. Navigazione nascosta (menu hamburger)
Molti designer scelgono di utilizzare un menu hamburger sul loro sito web. Questo design responsivo è una versione ridotta di un menu di navigazione che è indicato da un’icona composta da tre linee orizzontali impilate una sull’altra. È probabile che l’abbiate visto – anche se non sapevate che prende il nome da uno dei più grandi contributi alla cucina americana.
Questa variazione dell’header sarebbe ideale se stai lavorando con un design minimalista del sito web, poiché un menu hamburger ti permette di presentare agli utenti una ricchezza di opzioni risparmiando spazio. Inoltre, l’icona dell’hamburger è molto divertente da giocare.
8. Header mobile
Al giorno d’oggi, la maggior parte della navigazione dei siti web avviene in movimento. Quindi, è sempre più importante creare un web design mobile infallibile. Quando si tratta dell’header del tuo sito web, questo significa semplicemente controllare che sia visualizzata correttamente sul dispositivo mobile. Potrebbe significare regolare le dimensioni e il contenuto incluso nel design dell’header, o adattare un menu hamburger nella tua versione mobile.
9. Restringimento dell'header
Hai una splendida immagine di sfondo che merita di essere mostrata, ma vuoi anche incorporare un’header nel design del tuo sito web (soprattutto dopo aver letto questo articolo). Conosciuta nei circoli del web design come un’header restringente, questa gemma è la soluzione perfetta.
Un’header restringente è progettata per dissolversi nello sfondo del tuo sito web mentre gli utenti scorrono verso il basso. I visitatori non la vedranno sempre, ma sapranno che è lì. A parte il suo valore pratico, l’implementazione di questo stile di header creerà un effetto stupefacente sul tuo sito web, e andrebbe benissimo se abbinato al magico effetto tridimensionale della tecnica di scorrimento parallelo.
10. Messaggio
Aggiungere del testo all’header del tuo sito web è un ottimo modo per dare ai tuoi spettatori un messaggio personale o professionale fin dall’inizio. Non stiamo parlando dei titoli delle tue pagine o del tuo nome commerciale, ma piuttosto di testi informativi o motivazionali. Per esempio, il tuo spazio di header può essere utilizzato per incorporare una citazione ispiratrice che si riferisce al tuo brand o servizio. In alternativa, può essere un punto che attira l’attenzione per aggiungere aggiornamenti sulla tua attività, o per salutare i visitatori all’arrivo sul tuo accogliente sito web.
Header vs Head
È importante non confondere un’header di pagina con una head di pagina. I termini sono quasi identici, ma uno descrive una sezione della pagina che le persone vedono e con cui interagiscono, mentre l’altro descrive un’area dell’HTML della pagina (o codice di sfondo) che dice ai servizi di terze parti di cosa tratta la pagina.
La head della pagina è impostata nel codice della pagina con i tag
. Tutto ciò che si trova tra questi tag determina come i servizi di terze parti come il motore di ricerca di Google, Twitter, Facebook, e il tuo browser vedono la pagina.Gli elementi comuni che si trovano nei tag
includono (ma non sono limitati a):- Titolo: Questo si riferisce al titolo del documento HTML. Ogni pagina ha il suo titolo unico.
- Stile: Qui è dove vengono impostate le opzioni di stile che influenzano l’intera pagina. Per esempio, se vuoi che il testo sia di un certo colore, qui è dove lo imposti.
- Meta: Le informazioni meta, come il titolo di una pagina web (nota: diverso da quello impostato nel tag title), l’autore e l’immagine in primo piano aiuteranno i social network a visualizzare qualsiasi link a quella pagina nel miglior modo possibile. Anche le informazioni sul copyright, le parole chiave e altro sono memorizzate nei meta tag. Queste informazioni sono anche utilizzate per aiutare i motori di ricerca a catalogare meglio ogni pagina.
- Link: Il tag link è usato per designare qualsiasi foglio di stile esterno che si vuole far caricare nella pagina.
- Script: L’elemento