Quando parliamo di Header e Footer di un sito web, sostanzialmente ci riferiamo alla intestazione del sito ed il suo piè di pagina. La struttura standard di una pagina web è generalmente:
- Header: parte alta del sito che si replica su tutte le pagine;
- Body: contenuto centrale che definisce ogni singola pagina;
- Footer: parte bassa del sito che si replica anch’essa su tutte le pagine.
Sono elementi chiave di un sito web che offrono l’opportunità ai naviganti di accedere alle informazioni più importanti ed eventualmente interagire con esse.
Nessun sito può definirsi completo senza di esse, sebbene a volte siano sottovalutate, queste due aree, disegnate bene possono aggiungere tantissimo al tuo sito web, che sia un blog oppure un e-commerce.
La scelta delle informazioni da inserire in queste zone è fondamentale per invogliare i naviganti a visitare ulteriormente il sito web.
L’Header
La testata di un sito web è la parte riconoscibile in alto che si replica su ogni pagina del sito ed aiuta il navigante a spostarsi tra le varie sezioni.
Istintivamente gli utenti che approdano sul sito, sia che essi siano arrivati sulla homepage, oppure su una pagina d’articolo, cercheranno un punto dove orientarsi ed i loro occhi correranno in alto proprio l’header.
Convenzionalmente, l’header è diventata l’area dove trovare:
- Logo, slogan
- Menu di navigazione
- Informazioni di contatto
- CTA (call to action)
- Campi di ricerca
- Collegamenti social
- Carrello della spesa
Come dicevo in precedenza, le informazioni giuste aiuteranno gli utenti ad esplorare maggiormente il sito. Da qui la scelta di assicurarsi che il logo sia cliccabile per ricondurli alla homepage. Deve inoltre esserci un link per i contatti, e di un campo di ricerca in caso di blog o e-commerce. Qui di seguito ho creato alcuni esempi di header che possono introdurre un sito web:
Header Minimalista
Particolarmente indicato per professionisti o blogger, l’aspetto minimale assicura facilità di navigazione, concentrando l’attenzione sui contenuti della pagina che si sta visitando.
Header Informativo
Adeguato per piccoli negozi online, da la possibilità ai naviganti di leggere le informazioni salienti della’azienda ed al tempo stesso ricercare trai i prodotti del catalogo. Le indicazioni in alto, invitano ad un contatto diretto tramite telefono, email oppure tramite i canali social.
Header Mobile
Design dal look responsive per dispositivi mobili, ma che tralascia vedere le informazioni di contatto. Il menù è concentranto nell’hamburger a destra, mentre numero di telefono ed indirizzo appaiono subito all’occhio del navigante. Particolarmente indicato quando qualcuno cerca un negozio locale tramite lo smartphone mentre è per strada.
Header Creativo
Alternativa con il logo al centro che può integrarsi con il resto della grafica del sito. Indicato per chi ha una grafica estesa e poche pagine da collegare. In questi casi di solito si ha una pagina che contiene una grafica oppure un’immagine che coinvolge anche l’header come se fosse tutto un unico blocco.
Header XXL
Per aziende strutturate in vari reparti, e per una navigazione più complessa. La fascia centrale del menù è dedicata all’utente che già conosce il sito e vuole accedere alla sua area personale, mentre la parte sottostante è per chi vuole visitarlo in cerca di informazioni. La parte superiore per i contatti, può ospitare al posto dello slogan, una CTA con l’invito a mettersi in contatto con l’azienda.
5 esempi per mostrare quali informazioni possono essere contenuti all’interno di un header, in base alla destinazione d’uso ed in base alla struttura del sito.
Footer
Proprio come l’Header, anche il Footer appare in ogni pagina del sito, ma nella parte sottostante i contenuti. Anche se in prima battuta può sembrare un contenuto marginale proprio perchè si trova alla fine della pagina, esso può rappresentare un “gancio” per riallacciare argomenti contenuti nelle altre sezioni del sito.
In altre parole se un navigante ha appena finito di leggere un articolo del tuo blog, gli sarà utile trovare altri articoli riguardanti lo stesso argomento. Oppure un form di registrazione alla newsletter per non perdersi i futuri articoli.
Questo è molto altro può trovare spazio nel footer del sito web, porzione che viene replicata continuamente su tutte le pagine del sito. Ricordo che, a norma di legge, nella parte bassa del footer, vengono riportati i dati fiscali dell’azienda ed il collegamento alle pagine dedicate alla privacy e cookie policy.
Per questo motivo agli esempi che vedrete di seguito, si aggiungerà un’ulteriore striscia di appena 50px, dove inserire i dati obbligatori.
Riagganciandoci agli Header visti in precedenza e vediamo quali Footer possono creare il giusto “engagement”:
Footer Minimalista
Le informazioni essenziali riportate nel footer minimalista sono il menù di navigazione verticale ed i dati aziendali con i contatti telefonici.
Footer Informativo
Presupponendo che sia un footer appartenente ad una piccola azienda, può essere utile richiamare il menù verticale con il collegamenti ai social e le info di contatto. Al centro un invito a registrarsi alla newsletter, può essere un’ottima occasione per raccogliere le info sul navigante e magari proporre in seguito una nuova occasione di contatto tramite la newsletter.
Footer Mobile
Nel Footer Mobile lo spazio deve essere ben gestito per consentire facilità al “tocco”, l’ esempio può sembrare più grande degli altri visti in precedenza, ma è solo per garantire una migliore esperienza all’utente da smartphone. I contatti qui regnano sovrani, perché si presuppone che da dispositivo mobile le informazioni più richieste siano proprio queste.
Footer Creativo
Il Footer creativo prevede una grafica che coinvolga anche le estremità della pagina, per questo motivo le informazioni testuali sono raggruppate in colonne ai lati del logo centrale. In questo modo si dà un ordine sopra le creatività dello sfondo.
Footer XXL o Mega Footer
Le informazioni di una grande azienda sono tanti, distribuire lo spazio del footer in tante sottosezioni può dare l’opportunità all’utente di seguire la propria strada all’interno del sito. A sinistra è comunque riservata una parte in cui si ribadisce il brand con un messaggio che rafforzi la relazione.
Quest’ultimo tipo di footer sta prendendo sempre più piede (è proprio il caso di dirlo) tra i siti di un certo livello, perché consente tantissime opportunità di “engagement” con la clientela.
Spero ti sia piaciuto il mio excursus sugli header e footer di un sito web, se vuoi progettare il tuo, fammelo sapere tramite il form di contatto.