Struttura di navigazione di un sito: i menu

Saper creare un sito Web non basta se non si è capaci di guidare il visitatore all'interno di esso. Realizzare una buona struttura e fornire agli utenti un aiuto per muoversi senza che essi debbano pensare troppo vuol dire avere un'interfaccia di navigazione alla portata di tutti...

Premessa sulla struttura di navigazione di un sito web

Saper realizzare un sito web non basta se non si è capaci di guidare il visitatore nel proprio sito. Creare una buona struttura e fornire agli utenti un aiuto per muoversi senza che essi debbano pensare troppo (vedi "Don't make me think" di Steve Krug) vuol dire avere un'interfaccia di navigazione alla portata di tutti.

Quando l'utente entra per la prima volta nel nostro sito, deve trovare subito le risposte a tre domande fondamentali:

1) dove mi trovo?
2) dove sono stato?
3) dove posso andare?

E una buona struttura di un sito può rispondere a queste domande.
Quando si parla della struttura di un sito web si parla di struttura gerarchica e di struttura ipertestuale e si inizia a progettare la navigazione dopo aver realizzato la categorizzazione dei contenuti e l'attività di labeling. In poche parole: catalogare i contenuti, raggrupparli, denominarli e stabilire le gerarchie.

Un altro punto molto importante è rappresentato dall'allocazione dello spazio visuale su un sito web. Quando si progetta la struttura di navigazione, si deve fare attenzione che essa non superi il 20% dello spazio visuale totale allocato per il sito web, perchè più importanti sono i contenuti.

Fondamentale è anche l'accesso immediato alle informazioni di alta priorità. E' consigliato utillizzare la soluzione "one-click" che permette all'utente di interagire subito, avendo accesso alle informazioni desiderate subito in una pagina a parte.

Sempre qui vorrei parlare dell'utilizzo delle immagini come menu per la navigazione.
Se esse rappressentano un elemento identificativo del proprio sito, si è liberi di usarle.
Comunque occorre stare attenti perchè il visitatore ha di solito un modello mentale di ciò che rappresenta un menu, una struttura di un sito, e, se non associa subito l'immagine che gli viene proposta ad una certa voce del menu, rischiate di perderlo. Se i semplici link testuali danno il risultato massimo, allora perchè non utilizzarli?

Schema di navigazione

Lo schema di navigazione comune incontrata nei siti web è:

- Barra verticale sinistra
- Linguette in alto
- Elenco di link in alto (barra orizzontale superiore)
- Elenco centrato di categorie
- Menu a tendina
- Altro (barra verticale a destra, barra orizzontale in basso (footer), oppure molti menu di navigazione insieme)
Attenzione: troppi menu di navigazione nella stessa pagina portano al superamento dello spazio visuale allocato alla navigazione e perciò portano anche alla confusione dell'utente.
Non più di tre menu possono stare in una pagina e già questo numero può rendere inquieto l'utente; dunque, se si devono mettere per forza tre menu, si mettono con cautela e si deve fare attenzione alla lunghezza di ciascuno.

Secondo le statistiche, i tipi di menu più usati sono:

- la barra verticale sinistra
- le linguette
- la barra orizzontale superiore
- l`elenco centrale di categorie (stile Yahoo)
- il menu a tendina
Una divisione del menu può essere questa:

- Menu principale: è il menu che raggruppa le voci più importanti, essendo presente in tutte le pagine del sito e permettendo l'accesso alle aree significative del sito, indipendentemente dal punto in cui il visitatore si trova;
- Menu locale o secondario: si tratta di menu che appartengono a diverse sottosezioni specifiche e che variano nel contenuto, ma preferibilmente non variano nella posizione;
- Menu constestuale: è il menu che consente l'accesso ad una certa pagina partendo dal contenuto di una specifica pagina del sito;
- Menu del footer: è rappresentato da una serie di link testuali, posizionati in fondo alla pagina, che richiamano di solito il menu principale.
Parlando di questa divisione del menu, penso che la domanda che si incontra spesso è se il menu principale deve essere ripetuto in ogni pagina. Qui abbiamo opinioni contrastanti. Da una parte c'è l'eccesso di navigazione in ogni pagina, visto che la cosa primordiale è il contenuto. E qui posso citare Jakob Nielsen che sottolinea l'importanza di un percorso "a briciole di pane", che mostra all'utente tutti i livelli gerarchici attraversati. Dall'altra parte, non si devono dimenticare i vantaggi che ci offre il menu principale: consente il cambio rapido della sezione e ci dà un punto chiaro di riferimento sulla pagina che stiamo consultando.

"Study case di 6 tipi di menu diversi presentato alla Conferenza 'Usability Professionals Association' a Montreal nel 2005"

All'inizio vengono presentati i 6 tipi di menu che riporterò di seguito:

1) Menu 'Stile Yahoo': rappresenta praticamente un'elenco centrato di categorie.

Fig.1

Pro: - l'accesso immediato alle informazioni di alta priorità tramite la soluzione "one-click".
- le opzioni di navigazione sono ben visibili; anche se si deve scrollare, tutto sta sulla prima pagina.

Contro: - l'allocazione dello spazio visuale è molto estesa, il menu occupa quasi tutta la pagina;
- la neccessità di scrollare per poter avere accesso a tutte le info.

2) Menu "Rollover": al passaggio del mouse sulla voce di un menu appare una descrizione dei sotto menu, poi cliccandoci sopra si va alla pagina con le informazioni.

Fig.2

Pro: - l'allocazione dello spazio visuale è molto ridotta, il menu occupa una piccola parte della pagina;
- non si deve scrollare per vedere tutto il menu.

Contro: - l'accesso alle informazioni di alta priorità è molto lento/lungo, qui avviene tramite la soluzione "due-click";
- dover muovere il mouse a caso per vedere la descrizione dei sotto menu è una seccatura;
- l'utente non può vedere a colpo d'occhio tutte le opzioni di navigazione.

3) Flash Menu: cliccando su una voce del menu si aprono i sotto-menu. All'apertura di un sotto-menu tutti gli altri si chiudono automaticamente.

Fig.3

Pro: - l'allocazione dello spazio visuale è molto ridotta, il menu occupa una piccola parte della pagina;
- non si deve scrollare per vedere tutto il menu.

Contro: - l'accesso alle informazioni di alta priorità è molto lento/lungo, qui avviene tramite la soluzione "due-click";
- l'utente non può vedere a colpo d'occhio tutte le scelte possibili, ma deve cliccare per aprire esplicitamente il menu;
- alcuni visitatori possono essere disturbati dall'effetto di auto-chiusura delle voci del menu.

4) Expand / collapse Menu: Cliccando su un menu chiuso si apre, cliccando su un menu aperto si chiude. I menu non sono chiusi automaticamente come nel caso precedente. In tanti hanno associato questo tipo di menu ad un libro online.

Fig.4

Pro: - l'allocazione dello spazio visuale è molto ridotta, qui predomina l'ampiezza.

Contro: - l'accesso alle informazioni di alta priorità è molto lento/lungo, qui avviene tramite la soluzione "due-click";
- l'utente non può vedere a colpo d'occhio tutte le scelte possibili, ma deve cliccare per aprire esplicitamente il menu.

5) Drop-down Menu: al passaggio del mouse sulla voce di un menu si aprono direttamente le sotto-voci, senza cliccarci sopra. Esse si possono selezionare.

Fig.5

Pro: - l'allocazione dello spazio visuale è molto ridotta, il menu occupa una piccola parte della pagina;
- buona visibilità nel sito, tramite la posizione;
- non si deve scrollare per vedere tutto il menu.

Contro: - l'accesso alle informazioni di alta priorità è più lungo della soluzione "one-click", anche qui avviene tramite la soluzione "due-click";
- dover muovere il mouse a caso sulle voci del menu per vedere le sotto-voci può essere considerato come un procedimento noioso;
- l'utente non può vedere a colpo d'occhio tutte le opzioni di navigazione di tutte le voci del menu.



6) Fly-out Menu: al passaggio del mouse questi sotto-menu si aprono automaticamente e si possono selezionare.

Fig.6

Pro: - l'allocazione dello spazio visuale è più ridotta del Menu "Stile Yahoo".

Contro: - l'accesso alle informazioni di alta priorità è molto lento/lungo, qui avviene tramite la soluzione "due-click";
- l'utente non può vedere a colpo d'occhio tutte le scelte possibili, ma deve passare con il mouse sopra per aprire esplicitamente i sotto-menu e vedere poi le informazioni; - alcuni visitatori possono essere distratti e con il movimento del mouse su un'altra sotto-voce perdono la categoria che hanno selezionato.

Il caso è stato studiato sia online che offline, tramite i lavoratori di certe società.
Abbiamo un totale di 706 lavoratori che hanno partecipato allo studio seguendo lo schema:

- 121 hanno utilizzato il Menu "Stile Yahoo"
- 121 hanno utilizzato il Menu Rollover
- 116 hanno utilizzato il Menu Flash
- 128 hanno utilizzato il Menu Expand / Contract
- 110 hanno utilizzato il Menu Drop-down
- 110 hanno utilizzato il Menu Fly-out

Criteri di valutazione dello studio

a) Errori: Il menu "Stile Yahoo" e il menu Drop-down hanno presentato il minor numero di errori generato dai partecipanti.

b) Durata neccessaria: I partecipanti hanno impiegato più o meno lo stesso tempo, dunque questo non è stato preso in considerazione come un fattore negativo.

c) Valutazione soggettiva: Positiva per tutti i tipi di menu, non si sono identificate differenze significative fra i metodi di navigazione, perciò questo criterio non è stato preso in considerazione.

Per la valutazione finale l'unico criterio rimasto in piedi era il criterio che si basava sugli errori commessi durante lo studio dei 6 menu. Siccome il Menu "Stile Yahoo" e il Menu Drop-down hanno presentato il minor numero di errori, la decisione finale ha riguardato uno di questi due menu.

Dopo aver valutato i vantaggi e gli svantagi di entrambi i menu si è deciso di scegliere il menu Drop-down come favorito.

In questo caso gli utenti hanno optato per il menu a tendina, ma in tanti altri casi sono gli utenti stessi a dire che sono infastiditi di questo tipo di menu, dicono che il passaggio con il mouse per poter accedere alla voce del menu è una seccatura e che si sentono a disagio perchè non possono vedere a colpo d'occhio tutte le scelte possibili.
Una cosa molto importante da valutare resta il fatto che l'unico menu che adottava la soluzione "one-click" è il menu "Stile Yahoo".
Questo è un fattore decisivo per una struttura di navigazione buona, si sa che più si avvicina l'utente a quello che cerca più lo si aiuta e meglio è.

Menu a tendina, menu centrale o menu orizzontale? La scelta è personale, l'importante è tenere a mente che un sito ben fatto è un sito facile da navigare, e un visitatore è contento quando non è costretto a pensare troppo.

Correlati:
- Sensible.com
- Don't make me think recensione in italiano del libro di Steve Krug
- MiniGuida Usabilità dei siti Web
- Siti dedicati a Usabilità ed Accessibilità

ALTRE RISORSE:

- WebmarketingStrategico.com
- Godado.it

- Articoli Webmaster
- Risorse e servizi gratis per Webmaster

- Directory: Portali per Webmaster
- Directory: Content Management
- Directory: Validazione codice

- Problemi con qualche termine? Scopri il significato nel glossario informatico

<<< Altri articoli di: Webmaster

Pubblicato il: 28/08/2005

AUTORE TESTO
Alina Teleanu
Webmarketingstrategico.com