Header sito web. Quello che deve avere l'above the fold e l'intestazione di una pagina web

Il sito web professionale è uno spazio davvero prezioso dove sarebbe meglio inserire informazioni possibilmente studiate, mirate e precise.

Una pagina web è formata da diverse sezioni: above the fold, header (testata), body (corpo del sito, dove vanno i contenuti) e footer (parte finale della pagina web dove di solito troviamo i dati dell’azienda, partita iva e copyright).

Oggi voglio parlarti dell’above the fold, di ciò che contiene e in particolare dell’header.

Cos’è l’above the fold?

L’above the fold è la prima porzione caricata e visibile di una pagina we, porzione che appare ancor prima del primo scroll.

Il termine arriva dal mondo della carta stampata, infatti nei giornali, era la parte corrispondente sopra la piega, quella che si vedeva subito in edicola.

Sul web, ha la stessa funzione: attirare l’attenzione e comunicare subito il messaggio chiave.

L’obiettivo dell’above the fold è catturare l’interesse in pochi secondi e indirizzare l’utente verso un’azione o verso la comprensione immediata di dove si trova e cosa può fare. L’above the fold quindi deve unire in modo sapiente e bilanciato: usabilità, comunicazione del valore e nello stesso tempo convertire e coinvolgere l’utente.

Cosa dovrebbe contenere la parte alta del sito?

Non esiste una formula fissa, ma questi che ti sto per elencare sono elementi ricorrenti ed efficaci che ci aiutano a rendere una above the fold accattivante e coinvolgente.

L’above the fold contiene l’header, quindi la sezione fissa e costante che troviamo in ogni pagina web, solitamente composta da logo, menu, contatti e possibili altri elementi.

Inoltre l’above the fold contiene altre informazioni chiave che possono “convincere” l’utente a restare a scrollare la pagina.

Nell’above the fold di una home page ad esempio possiamo inoltre trovare:

Headline chiara e diretta che deve comunicare chi sei, cosa fai e per chi in una frase potente
Sottotitolo o breve descrizione con un beneficio concreto
Call To Action visibile (es. “Prenota una consulenza”, “Scopri di più”)
Immagine o elemento visivo coerente con il brand (foto, illustrazione, mockup)

Differenza tra header e above the fold

Header: la parte alta e sempre presente del sito, che include elementi fissi come: logo, menu di navigazione, a volte contatti, CTA, ricerca..

Above the fold: tutto ciò che si vede appena la pagina si carica, senza scrollare. Comprende l’header più ciò che sta subito sotto: headline, immagini, CTA, hero section…

Quindi:

L’header è un componente dell’above the fold
Ma l’above the fold è più ampio, è la “vetrina” iniziale della pagina, e cambia da pagina a pagina (homepage, landing page, ecc.)

Cos’è l’header di un sito web?

L’header è l’intestazione di una pagina web, quella parte che appare subito e fa parte dell’above the fold.

Online si vedono header di tutti i tipi, dalle più complete alle più minimaliste.

Quali sono gli elementi che non devono mancare nell’header di una pagina web?

Come detto in precendenza, online si vedono header di ogni tipo e gli elementi possono variare in base alla tipologia di sito web che la ospita.

In ogni caso a mio parere non devono mancare:

Logo

Sembra scontato dirlo ma è opportuno dare il giusto spazio al logo, al nome dell’azienda o del professionista. Fa in modo che il tuo logo si noti e sia di buona qualità.

Contatti

Non serve avere un header enorme che occupa diverso spazio, ma può essere utile avere una piccola top bar dove inserire i propri dati per facilitare il contatto

Potrebbe capitare che un utente ti conosce già e vuole solamente contattarti, perchè non mettere subito il numero di telefono in modo che non debba cercarlo nel sito? Aiutiamolo!

Collegamenti social

Inserire delle icone che riportano ai profili social può essere una buona strategia ma ricorda, in questo modo stai portando traffico fuori dal tuo sito web.

Tag line

Se inserisci una breve, brevissima descrizione di cosa fai, l’utente capirà subito chi sei e cosa fai.

Call to action

Come nell’esempio qui sopra, se vuoi far ricadere l’attenzione del tuo visitatore su un elemento in particolare, puoi evidenziare una parte della tua header. In questo caso, ho evidenziato il mio percorso gratuito per migliorare il sito web in autonomia.

Ma come nel secondo esempio, la call to action evidenzia un’azione differente che invita al contatto.

Carrello veloce

Se il sito in questione è un e-commerce si può inserire nell’header a fianco al menu un carrello veloce che facilità l’utente nell’acquisto.

Header complesse, ecco un esempio.

Nell’esempio sottostante, ho creato per un mio cliente un’header molto più complessa di quelle viste fino ad ora.

L’header formata da una top bar con modulo di ricerca, social e voci di menu secondarie, e sotto una barra con logo, menu e un pulsante a discesa con la possibilità di navigare in un solo click le categorie del blog.

Esempio di header complessa con diversi elementi

Questi sono gli elementi che considero davvero importanti e che un header dovrebbe avere ma, considera che nella versione mobile gli elementi e le dimensioni di questi potrebbero variare per questioni di spazio e di usabilità.

In ogni caso, su mobile non devono mai mancare logo e menu fissati in alto.

Tutti gli esempi di header visti qui sopra sono stati presi da siti web professionali realizzati da me. Se hai bisogno di rendere le tue pagine migliori, io ti posso aiutare. Prenota subito una call conoscitiva gratuita o visita la pagina dedicata al servizio di sviluppo siti web professionali.