Realizzare un sito web con un header navigabile

L’header (pronunciato /hed′ər/) è la sezione più in alto di un sito web. In un articolo precedente ci siamo occupati del footer, ovvero il pie’ di pagina, mentre oggi ci dedichiamo a quella che potremmo tradurre con ‘intestazione’ o ‘testata’ e alla sua importanza nella realizzazione di un sito web.

Cosa rientra, quindi, in un header? Quali principi seguire affinché sia funzionale all'esperienza di navigazione utente?

 

Quali elementi fanno parte dell'header?

In ogni progetto web, possiamo immaginarci una pagina web come un’area suddivisa in tre sezioni, sia che si sviluppi siti web aziendali, e-commerce o portali.

Procediamo al contrario. Il footer si trova in fondo ed è ben riconoscibile perché nel web design, per convenzione, si tende a realizzarlo di un colore diverso rispetto al resto della pagina. L’area centrale è quella definita da Google con l'etichetta Main Content, ovvero il contenuto principale, a sua volta suddiviso in varie sotto-aree. La prima parte che incontriamo, invece, è proprio l’header. La linea che solitamente definisce la fine dell'header e l'inizio del main content è quella del menù.

 

Il menù principale

Il menù è il re incompreso dell’header e merita il focus della nostra riflessione. A volte, infatti, molti web designer rimangono fregati nella stilizzazione di un menù di navigazione efficace. Similmente al footer, infatti, si tratta di una sezione ‘utile’ ma non ‘bella’. O meglio, sono elementi che non permettono al web designer di esprimere al massimo la sua creatività.

Si tratta tuttavia di uno strumento importantissimo, perché molto spesso le persone si affidano completamente al menù per raggiungere contenuti e funzioni specifiche (solitamente organizziamo prodotti e servizi principali). Gli utenti hanno aspettative rispetto a cosa conterrà il menù e a dove esso molto probabilmente si troverà nel sito.

Se il sito internet ha una piccolissima icona di menù nascosta in qualche angolo del sito, probabilmente, deluderà tali aspettative. Non c'è niente di più errato del nascondere la navigazione. Quando gli utenti fanno difficoltà a percepire e trovare il menù, perdono tempo e se ne vanno.

Ecco allora alcune linee guida che noi seguiamo nella realizzazione di siti internet pensati per essere funzionali ai bisogni degli utenti:

  1. la misura del menù deve essere adeguata al variare di misura dello schermo. Poiché i siti web oggi devono essere siti web responsive, è importante che anche il menù funzioni adeguatamente sia che si cerchi in versione mobile che in versione desktop. Se nella versione mobile è accettabile che il menù sia identificato con una piccola icona in alto a sinistra dello schermo, difficilmente lo stesso varrà per la versione desktop, dove lo spazio non manca affinché il menù sia esteso e ben leggibile;
  2. collocare il menù dove le persone se lo aspettano;
  3. fare in modo che il menù risulti interattivo, ovvero deve essere chiaro che le voci in esso presenti siano cliccabili. Semplicemente, deve essere evidente anche a livello grafico che quelle sono voci navigabili;
  4. dare la giusta importanza al padding. Sappiamo di aver tirato fuori un termine poco familiare, ma in parole semplici si tratta dello spazio ‘vuoto’ tra un elemento grafico e l’altro del sito. Se nel menù le voci risultano troppo vicine a titoli, immagini o contenuti, c’è il rischio che l’utente non riesca a identificarle correttamente;
  5. le voci di menù devono avere il giusto livello di contrasto affinché siano ben leggibili da tutti gli utenti. Le parole devono quindi avere un colore che le distingua adeguatamente da quello di sfondo. Detto questo, è quasi sempre sconsigliato utilizzare immagini come sfondo di un menù, proprio per non compromettere la leggibilità delle singole voci.

Questi cinque accorgimenti sottolineano ancora una volta quanto sia importante, in certi casi, far prevalere il principio di utilità e funzionalità rispetto a quello dell’estetica. Ci sono elementi, come il menù, appunto, che non possono ‘soffrire’ un eccesso di creatività per non compromettere l’esperienza dell’utente.

Ma in un sito web c’è un solo menù? Niente affatto! Quello di cui abbiamo parlato fino ad ora è identificato anche con il termine di ‘menù principale’. Esiste anche il cosiddetto ‘menù corporate’. 

 

Il menù corporate

Il menù corporate presenta voci di natura completamente diversa dal menù principale. Se in quest’ultimo troviamo i collegamenti funzionali a navigare tutte le pagine del sito, dal menù corporate potremmo raggiungere pagine aziendali, come la storia del progetto o dell’azienda, a volte il blog, il collegamento al customer care, la pagina ‘lavora con noi’, le referenze, e così via. Non troviamo quindi servizi o prodotti, ma informazioni aziendali, che sono, sì, importanti, ma possono essere posizionate anche in un menù più compatto e semplice rispetto al main menù.

Capita spesso, comunque, che il menù corporate sia la prima cosa che si trova all’inizio di un header, quasi sempre nell’area in alto a sinistra.

 

Gli altri elementi dell'header

Veniamo ora ad altri elementi solitamente presenti nell’header a parte i menù. L’area a sinistra è pressoché sempre occupata dal logo, anche se a volte esso si trova proprio al centro dell’header. L’utente, in ogni caso, deve poter riconoscere subito e senza problemi dove si trova e il nome dell’azienda/brand/servizio di cui sta navigando il sito web.

Sempre nell’header è importante inserire:

  • selezione della lingua qualora il sito web fosse multilingua
  • login per area riservata
  • barra di ricerca
  • icona per collegamento al carrello (per e-commerce)
  • eventuale linea telefonica o e-mail diretta di contatto

 

Nella realizzazione di un sito web, inoltre, è possibile utilizzare l’header per comunicare un’informazione particolarmente utile. Ad esempio, negli header degli e-commerce troviamo spesso la soglia di spesa per azzerare i costi di spedizione oppure un collegamento rapido alle offerte o promozioni speciali.

Francesco|Borgianni
FrancescoBorgianni