Sapere cosa mettere nell’header del sito, logo, menu, pulsante di contatto, è solo metà del lavoro. L’altra metà è capire come costruirlo bene impostando le dimensioni giuste, rispettando un ordine visivo, scrivere il codice in modo corretto, rispettare l’accessibilità e avere una buona velocità di caricamento sono le cose che decidono se quella parte del sito aiuta davvero chi lo visita, oppure gli mette solo ostacoli.
Se cerchi una panoramica su cosa deve contenere un header e che differenza c’è con l’above the fold, ho già scritto una guida su cos’è l’header di un sito web. In questo articolo do per scontato che tu abbia già scelto quali elementi inserire, e ti spiego come farli funzionare bene insieme.
Perché non basta mettere gli elementi giusti?
Molti header hanno tutto quello che dovrebbero avere: logo, menu chiaro, un pulsante di contatto. Eppure non funzionano bene. Quasi sempre il problema non sono gli elementi ma è la loro organizzazione.
Ad esempio: un logo troppo grande che schiaccia il menu, un contrasto troppo basso tra testo e sfondo, che rende difficile leggere, l’altezza che cambia mentre la pagina si carica, il menu che si apre solo passandoci il mouse sopra, e che su smartphone semplicemente non si apre.
Questi sono tutti dettagli pratici, non estetici, ed è proprio qui che molti siti di freelance e piccole attività perdono punti senza accorgersene.
Le dimensioni giuste, e perché cambiano da sito a sito
Non esiste un’altezza uguale per tutti, ma ci sono misure che funzionano nella maggior parte dei casi. Su desktop va bene un’altezza tra 60 e 90 pixel. Su mobile è meglio restare tra 50 e 70 pixel, per lasciare più spazio al contenuto.
Il tipo di sito però cambia le cose:
- un blog o un sito di informazione funziona meglio con un header piccolo, perché l’obiettivo è portare subito l’utente ai contenuti
- un ecommerce può avere un’intestazione leggermente più grande, perché deve ospitare anche la ricerca e il carrello senza affollare lo spazio
- una landing page o un sito vetrina dovrebbe restare essenziale, per non togliere attenzione a quello che sta subito sotto
Una regola semplice che vale quasi sempre: il logo non dovrebbe occupare più di un terzo dell’altezza dell’header. Se lo fa, probabilmente stai togliendo spazio utile al menu senza un vero vantaggio per il tuo marchio.
Cosa deve notare l’occhio per primo
Un header ben fatto guida lo sguardo, non lo lascia l’utente vagare senza meta.
Bisogna fare attenzione a questi aspetti:
Contrasto: logo, menu e pulsante di contatto non devono avere tutti lo stesso peso visivo, altrimenti l’utente non capisce cosa guardare per primo.
Spazio tra gli elementi: un po’ di respiro comunica ordine, mentre tutto compresso comunica confusione.
Allineamento: se logo, menu e pulsanti non sono allineati bene, anche di pochi pixel, l’utente percepisce un senso di trascuratezza, anche senza capire esattamente perché.
Un errore comune è dare la stessa importanza a tutto: tutto in grassetto, tutto maiuscolo, tutto della stessa dimensione. Il risultato è che, se tutto sembra importante, niente lo è davvero.
Perché anche il codice dietro l’header conta?
Un header può essere bellissimo da vedere e comunque penalizzare il sito, se dietro le quinte il codice è scritto male. Usare il tag <header> per l’intestazione e il tag <nav> per il menu, invece di contenitori generici senza significato, aiuta sia Google sia le persone che usano uno screen reader a capire subito come è organizzata la pagina.
Un header accessibile funziona per tutti
L’accessibilità dell’header non riguarda solo chi ha una disabilità. Riguarda anche chi naviga con la tastiera invece del mouse, chi usa uno screen reader, o semplicemente chi guarda lo schermo del telefono sotto il sole, quando i colori chiari diventano difficili da leggere.
Alcune cose semplici da controllare sempre:
- il contrasto tra testo e sfondo deve essere abbastanza forte da poter essere letto anche in condizioni di luce non perfette
- ogni link e pulsante deve mostrare chiaramente dov’è quando ci si sposta con il tasto tab della tastiera
- i menu a tendina non dovrebbero aprirsi solo passando il mouse sopra, perché su smartphone e tablet questo gesto non esiste
- i pulsanti su mobile devono essere abbastanza grandi da poter essere toccati con un dito, senza costringere l’utente a ingrandire la pagina
Sono dettagli che quasi nessuno controlla in fase di progetto, ma che pesano molto sull’esperienza reale di chi visita il sito.
L’header può rallentare il sito, più spesso di quanto si pensi
Google valuta anche quanto è veloce e stabile una pagina, e l’header, essendo il primo elemento che il browser deve mostrare, ha un peso importante su questi aspetti.
I due problemi più comuni sono questi.
- Il primo è l’header che cambia altezza mentre la pagina finisce di caricarsi, facendo “saltare” tutto il contenuto sotto di qualche pixel: un effetto fastidioso, che Google valuta negativamente.
- Il secondo è il logo troppo pesante, quando un’immagine non ottimizzata rallenta il primo caricamento della pagina.
Bastano due accorgimenti per risolvere quasi sempre il problema: riservare uno spazio fisso per l’header fin da subito, e comprimere sempre le immagini del logo prima di caricarle sul sito.
Header trasparente o pieno: una questione di equilibrio
Un header trasparente all’inizio della pagina, che diventa pieno e visibile quando l’utente scorre, è spesso la scelta più equilibrata. Valorizza l’immagine principale della homepage, ma non sacrifica la leggibilità del menu quando serve davvero. Meglio evitarlo se l’header è già alto di suo, perché su mobile rischia di occupare troppo schermo in entrambe le versioni.
Il comportamento dell’header durante lo scroll, fisso oppure no, l’ho già approfondito nell’articolo su cos’è l’header di un sito web. Qui mi limito a dire che va sempre valutato insieme alle dimensioni e al tipo di contenuto della pagina.
Un header non è uguale per ogni tipo di attività
Le regole tecniche restano le stesse, ma l’equilibrio tra gli elementi cambia in base a chi usa il sito. Un avvocato o uno psicologo hanno bisogno di un header semplice, con un contatto ben visibile, perché chi arriva sul sito spesso ha già bisogno di un aiuto concreto e non vuole perdere tempo.
Un ecommerce di cosmetici deve invece bilanciare menu, ricerca e carrello senza sacrificare la leggibilità, perché lì l’header è anche uno strumento di vendita, non solo di orientamento. Un hotel, infine, può permettersi un header più visivo, capace di comunicare subito un’atmosfera, mantenendo però sempre la funzione principale: orientare chi guarda.
Prima di copiare un modello trovato online, vale la pena chiedersi cosa deve fare davvero l’utente nei primi cinque secondi sul tuo sito, e costruire l’header intorno a quella risposta.
Come capire se il tuo header sta funzionando davvero
La teoria aiuta fino a un certo punto, poi serve controllare sul campo. Alcuni modi semplici ma efficaci:
- guardare le mappe di calore, se le hai, per vedere dove clicca davvero chi visita il sito rispetto a dove ti aspetteresti
- controllare quante persone scorrono oltre l’header senza toccare nessun elemento al suo interno
- far usare il sito a qualcuno che non lo conosce, senza dargli istruzioni, e osservare dove esita o dove clicca per sbaglio
- provare l’header su un telefono vero, non solo nella modalità responsive del browser, perché con le dita si valuta meglio di quanto si faccia con il mouse
Un header che sembra perfetto sullo schermo di chi lo ha progettato, ma che nessuno usa come previsto, va rivisto. Anche se dal punto di vista estetico sembra tutto a posto.
Tra 60 e 90 pixel su desktop, tra 50 e 70 su mobile. La misura esatta dipende dal tipo di sito.
Aiuta Google e gli screen reader a leggere meglio la struttura della pagina, ma da solo non determina il posizionamento.
Sì, soprattutto con un logo pesante o quando l’altezza cambia mentre la pagina si carica.
Dipende da cosa c’è sotto: trasparente in alto e pieno dopo lo scroll è spesso il compromesso migliore.
Sì, è anzi consigliato per coerenza. Può cambiare il comportamento in scroll o il pulsante in evidenza, non la struttura.
Se vuoi capire come sta lavorando davvero l’header del tuo sito, o hai bisogno di rivederlo da zero, puoi contattarmi per un confronto.
