Guida per una navigazione usabile

Una guida completa per organizzare la navigazione di un sito, evitando gli errori più comuni.

Realizzare un sito usabile è un obbligo per ogni web designer professionista. Spesso però non viene riservata sufficente attenzione alla navigazione, dimenticando che un visitatore non tornerà mai su un sito dove non è capace di trovare ciò che cerca.

A questo proposito mi sono permesso di prendere spunto e reinterpretare un interessante post di ifohdesigns, per approfondire la questione suddividendola per argomenti.

Vincoli

Prima ancora di affrontare l’organizzazione della navigazione, è bene analizzare i vincoli presenti. Inutile pensare ad una soluzione se questa non è praticabile, ogni modello deve essere costruito in base al sito.

I limiti più evidenti, che spesso impediscono di seguire una scelta piuttosto che un’altra, sono:

  • il numero di pagine del sito
  • la gerarchia delle pagine e la struttura generale
  • lo stile grafico ed il layout

Consigli e divieti

Per migliorare la navigazione di un sito, è fondamentale non incorrere in gravi problemi di accessibilità ed usabilità. Alcune regole sono ovvie, ma non è mai scontato ricordarle:

  • non usare Flash per i menu
  • utilizzare JavaScript solo se i menu restano accessibili anche senza script abilitati
  • se usate delle immagini, fatelo tramite CSS con una tecnica di image replacement, senza inserirle direttamente nel codice html
  • cambiando le immagini di sfondo con i CSS, create degli sprite per evitare fastidiosi ritardi al caricamento

Posizione dei menu

I menu di navigazione possono essere posizionati in maniera più o meno originale, ma le collocazioni standard sono tre. Ci possono essere altre soluzioni, ma è meglio non esagerare con la fantasia:

  • menu orizzontale sotto l’header, se non ci sono troppe voci
  • menu orizzontale sopra l’header, per link secondari
  • menu verticale, solitamente a sinistra, facendo attenzione che le voci importanti siano visibili a colpo d’occhio e non scendano oltre i 600-700 pixel

Coerenza

La navigazione dovrebbe essere coerente su tutte le pagine del sito. Una volta decisa la struttura, è fondamentale non cambiare la posizione dei menu o modificarne l’aspetto a seconda della pagina, perchè il visitatore potrebbe rimanere disorientato.

A volte capita di trovare siti con sezioni dove manca la navigazione, con un semplice link “torna alla homepage”. Una soluzione simile non è sufficiente.

Attributi title

E’ importante non dimenticare di fornire maggiori informazioni sui link tramite gli attributi title dell’HTML. Alcune pagine possono avere nomi convenzionali e autoesplicativi, ma è sempre meglio semplificare la vita dell’utente.

Inoltre usare dei title coerenti può favorire una corretta indicizzazione sui motori di ricerca, rendendo anche il sito più accessibile.

Gerarchia

Se un sito contiene numerose pagine, non è mai conveniente metterle tutte sullo stesso livello. Meglio organizzarle in gruppi, suddividendo la navigazione per facilitare la comprensione.

A volte potrebbe bastare raccoglierle in un menu secondario, da mostrare solo quando necessario.

Breadcrumb (Briciole di pane)

Se il sito è complesso, è essenziale avere sempre visibile il percorso della pagina corrente. In certi casi può essere utile visualizzare il path anche su un blog, se esistono molte pagine distribuite su più livelli.

Come si può intuire dal nome, le briciole di pane aiutano l’utente a ritrovare la strada, capire quali pagine ha visitato e decidere quali visitare successivamente.

Footer

Fino a qualche anno fa era considerato un elemento di scarsa importanza, finchè non hanno iniziato ad apparire footer alti, ricchi di link. E’ un modo per permettere all’utente di continuare la visita del sito una volta arrivato a fine pagina.

Il footer non è ovviamente da utilizzare per la navigazione principale, ma non va sottovalutato.

Conclusioni

Organizzare la navigazione non è cosa semplice. Le variabili da considerare sono numerose e non tutte facili da gestire, soprattutto su siti con una struttura complessa.

La cosa più importante è curarsi di tutti gli aspetti, tenendo presente il target di utenti, la coerenza dei menu di navigazione e l’accessibilità degli stessi. Un menu in flash per quanto possa essere attraente impedirà a tutti i visitatori senza plugin di visitare le vostre pagine.

Se ne avete la possibilità fate dei test di usabilità, anche con parenti o amici: scoprirete cose impensabili. Con un minimo di buon senso potrete ottenere ottimi risultati.

Tommaso Baldovino

UX/UI Designer di Firenze, appassionato di tecnologia e accessibilità, esperto di WordPress, blogger, gamer e amante della fotografia.

7 commenti su “Guida per una navigazione usabile”

  1. Ottimo articolo… preciso e chirurgico come sempre ;)

    PS
    per il Breadcrumb ci sarebbe anche un’altro piccolo consiglio, ovvero rendere ogni livello direttamente cliccabile anzichè mostrarlo in solo testo … mi è capitato diverse volte infatti di incontrare questo fastidioso problema

  2. Complimenti ottimo articolo, mi aggiungo a Engelium.
    Speriamo di aver seguito tutti questi accorgimenti nei nostri siti…
    Buon lavoro a tutti!

  3. @Multimedia Player: il sito sarà più facilmente navigabile con i CSS disabilitati, il codice html resterà più ordinato, ed i motori di ricerca indicizzano sicuramente meglio del testo piuttosto che un’immagine.

    La tecnica ha ancora più importanza sull’header di un sito, ma anche per i menu di navigazione ormai è una pratica diffusa.