Il menu di navigazione: la nostra bussola

La navigazione ha un ruolo fondamentale nella progettazione delle applicazioni e siti web perchè permette agli utenti di trovare da soli e nel minor tempo possibile le informazioni che stanno cercando e di orientarsi facilmente fornendo risposte alle domande: dove mi trovo? Dove posso andare?

Vediamo  quali sono gli elementi che compongono il menu di navigazione e le best practices da seguire nella progettazione nella home page e nelle pagine interne.

Il menu di navigazione (o header)  costituisce allo stesso tempo la bussola e l’àncora durante tutta la navigazione, perchè

• Ci aiuta a trovare ciò che stiamo cercando
• Ci dice dove siamo
• Ci dice cosa c’è nel sito (quali informazioni, prodotti o servizi)

Navigare un sito senza il menu di navigazione è come entrare in un grande magazzino senza cartelli che indicano dove sono i prodotti e senza nessun commesso a cui chiedere aiuto. (Steve Krug)

Come comporre il menu di navigazione

Prendiamo ad esempio il sito di un agriturismo (nome di fantasia: La Foglia) di cui dobbiamo progettare la navigazione sia della home page che delle pagine interne.

Quali elementi inserisco nella barra di navigazione?

• Logo: indica l’identità del sito. Spesso posizionato in alto a sx per convenzione linka alla home page. Il logo è la nostra stella polare, sempre in alto sulla sinistra, indica dove siamo e come tornare alla home. Se nelle pagine interne viene fatto sparire rischiamo di causare un disorientamento nei nostri visitatori che possono pensare di aver involontarimente cambiato sito.
• Tagline: piccola frase che riassume le caratteristiche peculiari del brand ad esempio per Nestlè abbiamo Good food, good life, per Nissan Innovation that excites; risulta molto utile sopratutto per i brand sconosciuti.
• Sezioni o le voci del menu: da qui capiamo cosa il sito ha da offrirci e se siamo nel posto giusto. Se c’è una struttura gerarchica e le sezioni contengono a loro volta delle sottosezioni ed è bene rendere questa relazione evidente anche visivamente.
• Utility: sono una serie di link che, ben separati dalle voci di menu con cui non si devono confondere, offrono le funzionalità per utilizzare al meglio il sito come la scelta della lingua, account, carrello

Home page: l’importanza del primo incontro

Come sappiamo la prima impressione nella vita come nel mondo digitale è quella che conta e la home page gioca un ruolo chiave in questo senso. Lo scopo della HP consiste nel catturare l’attenzione e l’interesse dell’utente offrendo le risposte a domande come:

Cos’è questo sito? Di che si occupa? Cosa posso fare qui? Perchè qui e non altrove?

Per svolgere questo compito è necessario che la HP comunichi, prima di tutto, l’identità del sito e la missione del brand mettendo in evidenza i servizi e i prodotti di valore. Mostri, inoltre, contenuti sempre aggiornati (presentare informazioni datate significa che il sito non è attendibile). Last but not least, offrire numerosi entry point in modo che l’utente possa iniziare a esplorare il sito; questo lo si può fare mettendo in evidenza alcuni prodotti in promozione o articoli “più letti”. Vediamo la home page dell’Agriturismo LaFoglia.

Il vero test: le pagine interne

Ma è nelle pagine interne che la progettazione della navigazione diventa sfidante perchè è lì che più facilmente il nostro visitatore può “perdersi”. in ogni pagina interna dovrà essere in grado di trovare risposte alle seguenti domande:

• Che sito è? (logo)
• Su che pagina sono (titolo della pagina)
• Quali sono le sezioni principali del sito (sezioni e sottosezioni)
• Dove mi trovo ora? (breadcrumb)
• Come posso tornare indietro?

Vediamo quindi per ultime quali sono le linee guida per la navigazione nelle pagine interne.

• Barra di navigazione persistente (presente in tutte le pagine) o no?
  A volte nelle pagine interne la barra di navigazione viene tolta o modificata per esigenze di design o spazio. Personalmente prediligo i siti dove la barra di navigazione resta fissa perchè costituisce, come abbiamo detto, un ottimo elemento di orientamento per l’utente; anche se decidiamo di eliminarla o modificarla ricordiamoci di presentare al visitatore tutti gli elementi necessari per capire dove si trova e dove può andare.
• Titolo della pagina gioca un ruolo chiave perchè costituisce un feedback per l’utente che ha la conferma di essere “atterrato” nel posto giusto. Può sembrare una ovvietà ma spesso questa semplice regola viene omessa creando confusione in chi visita il sito. Se ho cliccato la parola Il Miele mi aspetto di trovarmi nella pagina del Miele e non in quella di altri prodotti. Anche qui evitiamo di creare confusione nella mente del visitatore.
• Indicare chiaramente la sezione in cui ci si trova con l’aiuto della grafica.
• Usare se necessario il breadcrumb che indica il percorso compiuto dall’utente ed è molto utile perchè può essere navigato a ritroso. Per i più curiosi, la parola breadcrumb viene dalla storia di Pollicino che lasciò nel bosco le briciole di pane per poter ritrovare la strada di casa.

E la navigazione del vostro sito e della vostra app come è? E’ intutiva e chiara? Per scoprirlo vi consigliamo di leggervi i nostri libri di UX Design o partecipare ai nostri corsi di formazione. Scopri le prossime date! Buona navigazione a tutti!

Costanza Mosi
UX Designer
LinkedIn