Sabato sera hai organizzato una pizza con gli amici a casa tua. Sei entrato in un supermercato che non conosci, uno di quelli enormi con dieci corsie e i cartelli scritti piccoli. Ti serve solo il lievito, quello di birra fresco, ma nel reparto forno non lo trovi. Giri tra i lievitati confezionati, poi tra la pasticceria, torni indietro passando due volte davanti agli stessi scaffali di farina. Alla fine il lievito lo trovi, vicino al banco frigo dei formaggi, ma hai già perso dieci minuti e la pazienza.
Su un sito web succede la stessa cosa. L’utente arriva con un obiettivo preciso e l’header sito web è il primo cartello che incontra. Se gli comunica subito dove si trova e cosa può fare, resta sulla pagina. Se lo lascia a girare tra voci di menu poco chiare, se ne va prima ancora di scoprire cosa hai da offrirgli.
In questo articolo ti spiego cos’è un header, quali tipologie esistono, quali elementi deve contenere e come cambia su mobile, con un esempio pratico di un progetto e-commerce che ho realizzato.
Cos’è l’header del sito web
L’header sito web è la barra fissa in cima a ogni pagina, quella che contiene logo, menu di navigazione e spesso un pulsante di azione. Compare identica su tutte le pagine del sito ed è il primo elemento che l’utente incontra al caricamento del sito web.
Nella metafora del supermercato l’header è il cartello all’ingresso della corsia. Comunica all’utente dove si trova, cosa può fare da lì, dove andare per raggiungere quello che cerca.
Esempio di header sito web ottimizzato
Questo è l’header di AM Arredamenti, un e-commerce che ho sviluppato. La struttura è divisa su due livelli. Nella barra superiore, sottile, trovano posto a sinistra le icone social e a destra i contatti diretti, numero WhatsApp ed email, utili in un e-commerce dove la fiducia prima dell’acquisto conta quanto il prodotto. Nella barra principale il logo occupa il centro, in posizione simmetrica tra menu e icone. A sinistra le voci di navigazione portano l’utente a esplorare il catalogo. A destra account, carrello e ricerca gli permettono di agire subito sul proprio acquisto.
Tipologie di header sito web
Ogni corsia di supermercato ha bisogno di un cartello adatto alla sua complessità. Un piccolo negozio si orienta con un’indicazione semplice, un ipermercato ha bisogno di mappe più articolate. Lo stesso vale per gli header, la scelta dipende dalla complessità del menu e dagli obiettivi del sito.
Resta visibile durante tutto lo scroll, mantiene sempre accessibili menu e CTA.
Si nasconde scendendo, ricompare risalendo, lascia più spazio ai contenuti.
Nasconde il menu dietro un’icona anche su schermi grandi, riduce la visibilità delle voci e penalizza la SEO.
Dropdown ampio, organizzato per colonne e categorie, tipico di e-commerce con molti prodotti.
Un clic apre un pannello laterale con tutto il menu, adatto a navigazioni complesse.
Combina un menu principale con uno secondario accessibile da hamburger, utile con molte voci su due livelli.
Elementi da includere nell’header del sito web
Ogni header, qualunque tipologia scegli, contiene due famiglie di elementi con funzione diversa. Le azioni di navigazione portano l’utente a spostarsi tra le pagine del sito. Le azioni funzionali gli permettono di agire subito sul proprio account o sul proprio acquisto.
Se stai costruendo il tuo sito da solo, senza il supporto di un professionista che ne curi la strategia, probabilmente stai partendo da template pronti, come quelli della libreria di Elementor o i pacchetti header del marketplace di Divi. Oppure stai usando uno strumento di intelligenza artificiale per generare il sito in pochi minuti. In entrambi i casi il risultato segue una logica standardizzata, pensata per andare bene in generale. Vale sempre la pena verificare che gli elementi dell’header restino organizzati con chiarezza, perché una struttura pensata per chiunque raramente è quella giusta per te.
Al di là dello strumento con cui costruisci il sito, ci sono tre elementi che nell’header non sono negoziabili: se manca anche uno solo, la funzione stessa dell’header viene meno.
Contiene le voci principali del sito, tra quattro e sei, in ordine logico. Ogni voce deve essere descrittiva, l’utente capisce dove lo porta prima ancora di cliccare.
Azioni funzionali
Le azioni funzionali cambiano in base al tipo di sito. Su un e-commerce sono in genere account, carrello e ricerca. Su un sito aziendale o di uno studio professionale possono essere un numero di telefono cliccabile, un’area riservata per i clienti, o un pulsante di prenotazione. In ogni caso vanno posizionate dove l’occhio le cerca d’istinto, di solito a destra, perché servono a compiere un’azione immediata, non a esplorare contenuti.
CTA
È l’azione con la maggiore visibilità di tutto il sito, perché compare su ogni pagina. Va stilizzata come pulsante, con un colore che si distingue dal resto del menu, e un testo diretto come Contattaci o Richiedi un preventivo.
Hai bisogno di un sito web strategico?
Raccontami il tuo progetto e troviamo insieme la soluzione più adatta alla tua attività.
Oppure scopri come posso aiutarti a costruire una presenza online efficace.
Dimensioni header sito web
Le dimensioni header sito web non sono un valore fisso, dipendono dal dispositivo e dallo schermo con cui l’utente naviga. Un header progettato bene resta fluido e si adatta automaticamente a ogni risoluzione, da un monitor largo a un telefono tenuto in verticale, mantenendo sempre proporzioni leggibili. Alcuni riferimenti utili in fase di progettazione, da trattare come punto di partenza e non come regola rigida:
| Elemento | Misura consigliata |
|---|---|
| Altezza header desktop | 70-100 px |
| Margine interno tra elementi | 20-24 px |
| Larghezza logo | 15-25% della larghezza header |
| Altezza pulsante CTA | 40-48 px |
Cosa inserire nell’header mobile di un sito web
Su mobile lo spazio verticale è ridotto, ma l’header non deve perdere nessuna delle sue funzioni. Il compito è riorganizzare gli stessi elementi in modo diverso, non eliminarli.
Nel progetto AM Arredamenti, sulla versione mobile il menu di navigazione si raccoglie dietro un’icona hamburger accompagnata da un’etichetta testuale, per ridurre l’ambiguità di chi non la riconosce subito. Il logo si sposta rispetto alla posizione desktop per bilanciare il peso visivo con l’icona del menu. Account, carrello e ricerca restano invece sempre visibili, nella stessa posizione a colpo d’occhio, perché sono le azioni che l’utente vuole compiere anche con pochi secondi a disposizione.
Perché è importante avere un header ottimizzato
Hai mai abbandonato un sito perché non capivi dove cliccare? Succede in meno di tre secondi, ed è esattamente quello che rischia di fare chi arriva sul tuo. Un header confuso non perde solo un visitatore, perde una vendita che magari era già a un clic di distanza. Se hai il dubbio che il tuo menu stia facendo lo stesso danno, prenota una consulenza con me: analizziamo insieme l’header del tuo sito WordPress e vediamo insieme come ottimizzarla.
Quanto ti costa un header confuso?
Nessuno resterà soddisfatto di un supermercato dove, per comprare un solo prodotto, ha perso tempo prezioso. Il ricordo di quella ricerca frustrante resterà negativo, e molto probabilmente quella persona non tornerà più in quel negozio, né comprerà altro lì. Un sito con un header confuso lascia esattamente la stessa impressione, e la conseguenza è la stessa: l’utente se ne va e non torna.
Se vuoi capire se l’header del tuo sito sta guidando i visitatori o li sta perdendo nei primi secondi, ho creato un servizio di check up del sito pensato proprio per questo.
Contattami per una consulenza tecnicaL’header non è l’unico elemento che decide se un visitatore resta o se ne va. Nell’articolo su come strutturare un sito web aziendale trovi come organizzare tutte le altre sezioni della pagina con la stessa logica.
