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.

Menu

Come il logo è banale ribadirlo ma il menù deve essere chiaro, ben organizzato e facilmente navigabile.

Nella versione desktop prediligi un menù esteso di facile navigazione. In questo modo l’utente ha una visione chiara di quello che può trovare sul sito ed evita di fare uno o più click inutili.

Se il sito ha molto contenuto, si può inserire un mega menu che rende la navigazione più semplice ed intuitiva

Inoltre fissa il menu in cima alla pagina (sticky menu) in modo che l’utente possa averlo sempre disponibile quando naviga sul  sito web.

Per la versione mobile invece, prediligi un hamburger menu che occupa meno spazio. Anche in questo caso fissano in alto.

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.

condividi l'articolo

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

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

Tabella dei Contenuti

Ogni sito che realizzo è il risultato di ascolto, metodo e cura del dettaglio.

Sono Valentina e lavoro nel mondo del web design da oltre 20 anni. Metto al servizio di ogni cliente la mia esperienza, sensibilità estetica e visione strategica. 

Seguimi anche su Linkedin e Instagram