Sei qui: Homepage » interfacce, usabilità, web design » Guida per una navigazione usabile
ott 07 2008
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.
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:
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:
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:
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.

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.
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.
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.
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.
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.
Hai trovato interessante questo post? Puoi leggere anche i seguenti articoli:
Classificato in interfacce, usabilità, web design.
TomStardust.com è realizzato secondo i canoni dell'accessibilità, le normative del W3C, e la legge Stanca, pur non essendo il sito di una pubblica amministrazione e non avendo nessun obbligo a riguardo.
Poter navigare su internet ed accedere alle informazioni sulla rete è un diritto di tutti, realizzare siti che rispondano agli standard web dovrebbe essere un dovere di ogni sviluppatore.
Questo sito e tutti i suoi contenuti, compresi i temi Wordpress, sono pubblicati sotto licenza Creative Commons 2.5.
Questo sito non rappresenta una testata giornalistica e viene aggiornato senza alcuna periodicità.
Powered by Wordpress
7 ottobre 2008 alle 11:10
EngeliumOttimo 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
7 ottobre 2008 alle 21:14
PaoloComplimenti ottimo articolo, mi aggiungo a Engelium.
Speriamo di aver seguito tutti questi accorgimenti nei nostri siti…
Buon lavoro a tutti!
8 ottobre 2008 alle 22:26
Laura web designermi associo.. vallo a spiegare ai clienti però! soliti problemi…
9 ottobre 2008 alle 01:01
Fabio VaresanoGrazie per il promemoria.. soluzioni conosciute .. ma che e’ sempre bene tenere alla mano.
Saluti.
10 ottobre 2008 alle 08:38
Multimedia PlayerCiao Tom, non ho capito il punto 3 di Consigli e Divieti, se le immagini le carichiamo nel css quali benefici in termini di usabilità si hanno?
10 ottobre 2008 alle 10:12
Tom@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.
25 novembre 2008 alle 14:40
WidePixelDavvero utile!