aprile 2003
HOME  |  INDICE  |  CORSI  |  DIZIONARIO  |  ABBONAMENTI  |  SITO  |  HELP
 
   
  CORSI OPENMASTER
  MUSICA DIGITALE  
  WEBMASTER  
 
Lezione 1  
Lezione 2  
Lezione 3  
Lezione 4  
Lezione 5  
Lezione 6  
Editor HTML  
Esercizi  
Risorse  
 
  WINDOWS EXPERT  
 
 

Tecniche di progettazione del sito

 

Fase 5d: regole di navigazione

La navigazione di un sito diventa complicata nella misura in cui il sito è complesso. Dall’esperienza di progetto di siti commerciali della seconda metà degli anni Novanta sono emerse alcune regole di buon senso da osservare nella progettazione del sistema di navigazione. Per approfondimenti rimandiamo al classico “Information Architecture for the World Wide Web” di Louis Rosenfeld e Peter Morville, pubblicato presto da Hops e a “Web Navigation” di Jennifer Fleming pubblicato da Apogeo.

Una navigazione vincente dovrebbe:

Essere facile da capire
Rimanere costante
Fornire un feedback
Apparire contestuale
Offrire alternative
Richiedere un’economia di tempo e di azione
Fornire messaggi visivi chiari
Utilizzare etichette chiare e comprensibili
Essere idonea per gli scopi del sito
Favorire gli obiettivi e i comportamenti dell’utente

Essere facile da capire significa non discostarsi troppo dai modelli che il navigatore già conosce per averli visti in altri siti. Si può essere creativi, ma solo a condizione che la navigazione sia semplice. Non si può pretendere che il nuovo arrivato studi la navigazione di un sito prima di capire dove può andare.

Rimanere costante significa non variare all’interno del sito, poiché una volta imparato il sistema di navigazione, il navigatore vi farà affidamento e qualsiasi variazione importante finirà per confonderlo. Un esempio d’incostanza, citato anche in vari libri sull’usabilità, è il classico menu con cinque opzioni che a un certo punto diventano quattro perché si eliminato il link alla pagina in cui ci si trova già. Meglio mantenere il link, magari cambiandogli colore. Lo stesso vale per voci che cambiano posizione o denominazione all’interno di un menu presente in diverse pagine del sito.

Nel caso in cui sia davvero impossibile mantenere la continuità in una porzione del sito, tanto vale costruire un sotto-sito, chiaramente separato.

Fornire feedback significa confermare che l’operazione richiesta è stata portata a termine e che il navigatore ora si trova in una pagina diversa da quella di partenza. Un’altra forma di feedback è il meccanismo del rollover, ossia il cambiamento dell’elemento di navigazione quando vi si passa sopra col cursore. Il rollover viene usato solitamente per mostrare in dettaglio quello che si trova all’interno della voce di navigazione che si è selezionata.

Apparire contestuale significa seguire il navigatore nel suo percorso e fornirgli elementi diversi in funzione di dove si trova. Ad esempio, alla fine di un lungo articolo si può inserire un link che riporti all’inizio oppure che lo mandi direttamente all’articolo successivo o al precedente nel caso di una sequenza definita, così che non sia necessario scorrere la pagina a ritroso per ritrovare gli altri elementi di navigazione standard che sono nel frattempo spariti dalla vista.

Un altro elemento di contestualità sono i sistemi di navigazione locale che permettono di esplorare le varie parti di un documento articolato, e che scompaiono quando si esce da quel particolare documento.

Offrire alternative significa creare diversi percorsi possibili per arrivare alla stessa pagina. Ci possono essere diversi link che puntano alla pagina da più parti del sito, oltre che una mappa del sito che identifica le pagine principali e un motore di ricerca interno che porta direttamente alle pagine che contengono determinate parole o frasi.

Tra le alternative abbiamo anche la creazione di versioni multiple del sito per diversi tipi di navigatori: Flash per chi vuole una grafica spettacolare ed è disposto a dotarsi del plug-in necessario ed HTML standard per tutti gli altri.

In generale, è sempre meglio evitare elementi di navigazione in formato particolare, come Flash. Anche l’uso di bottoni grafici per la navigazione, senza una corrispondente etichetta testuale, è pericoloso perché i bottoni diventano invisibili a chi naviga con la visualizzazione delle immagini disattivata sul proprio browser per scopi di velocità.

Richiedere economia di tempo e di azione significa evitare i percorsi lunghi, in tutti i sensi. Abbiamo già visto che non conviene spingersi oltre i cinque livelli di profondità perché dopo il quinto click il navigatore perde interesse se ancora non è arrivato alla pagina desiderata. Tuttavia la lunghezza è pericolosa anche nelle pagine che contengono moduli da compilare. Nel caso in cui il modulo sia molto lungo e richieda lo scrolling della pagina e l’inserimento di numerose informazioni, la persona è portata ad abbandonare. Lo stesso dicasi per moduli che si protraggono per diverse pagine.

Un sito molto complesso finisce comunque per richiedere una navigazione lunga. In tal caso sono necessarie scorciatoie come la mappa del sito, che indica a colpo d’occhio dove si trovano tutte le sezioni principali; liste di contenuto, che aiutano a capire che cosa c’è all’interno prima di entrare e i menu a tendina che si aprono per rivelare i sotto-livelli abbinati a una particolare voce di navigazione. In sostanza, bisogna consentire al navigatore di saltare rapidamente da un estremo all’altro del sito.

Fornire messaggi visivi chiari significa subordinare l’estetica del sistema di navigazione alla sua comprensibilità. Il sistema di navigazione deve essere chiaramente riconoscibile rispetto al contenuto standard della pagina (testo e immagini) e deve anche essere autoesplicativo. L’uso di icone senza etichette di spiegazione è rischioso perché molte delle immagini utilizzate per le icone possono significare cose diverse per persone diverse.

Il riconoscimento dei link deve essere altrettanto chiaro. Mascherarli con lo stesso colore del testo è un errore. I puristi vorrebbero che fossero sempre blu e sottolineati, come nello standard originale del Web. In realtà, molti siti hanno abbandonato la sottolineatura (che peraltro compare spesso quando si porta il cursore sul link) e hanno adottato colori diversi dal blu. L’importante è che sia facile capire che si tratta di link e che il colore scelto rimanga costante in tutto il sito.


Utilizzare etichette chiare e comprensibili è un’arte di per se stessa perché richiede la completa comprensione dei contenuti del sito e una capacità di sintesi fuori del comune. Nello scegliere le etichette di un sito, è sempre meglio usare la terminologia tipica dell’utente e non la propria. Ogni elemento di navigazione deve avere una propria etichetta, anche i bottoni e le icone. Un'altra regola di buon senso è quella di utilizzare parole singole, brevi e comuni, evitando le frasi.

Essere idonea per gli scopi del sito significa integrarsi con il resto del sito e rinforzarne l’identità. Un sito di servizio, che debba fornire informazioni immediate e sintetiche, usa al meglio una navigazione testuale stringata e chiara. Un sito di divertimento può permettersi invece di avere icone accattivanti e anche un po’ curiose. Un sito dedicato all’enignimistica potrebbe anche avere un sistema di navigazione tutto da decifrare.

Favorire gli obiettivi e i comportamenti dell’utente significa aver prima studiato il tipo di utente a cui ci si rivolge, averne identificato le priorità e le modalità di comportamento in relazione alle attività che gli si propongono. Un sito per fare la spesa on line si concentrerà sul catalogo dei prodotti e sul facile accesso al carrello e alla cassa, un sito giornalistico privilegerà le notizie più importanti e recenti e, magari, riprodurrà sul sito la sequenza di lettura della rivista o del giornale a cui fa riferimento.

Tutti i documenti relativi a questo articolo:
Introduzione
Fase 1: raccolta d'informazioni sugli scopi del sito
Fase 2: analisi della concorrenza
Fase 3: organizzazione delle informazioni
Fase 4: costruzione della mappa - gerarchia
Fase 4b: mappa - ipertesto
Fase 4c: mappa - struttura lineare
Fase 5: strumenti di navigazione - URL e cronologia
Fase 5b: strumenti di navigazione - preferiti
Fase 5c: strumenti di navigazione - tasti dedicati e altro
Fase 5d: regole di navigazione
Fase 5e: sistemi di navigazione
Fase 5f: elementi di navigazione
Fase 5g: sistemi di labeling

  < Precedente   Prossimo >

 

Corso - Webmaster
 
  Prima lezione:
  Competenze e strumenti
1. Che cosa fa un Webmaster
2. Gli strumenti di lavoro
  1. Editor orientati al testo
  2. Editor visuali semplificati
  3. Ambienti di sviluppo integrati
3. Le altre figure con cui opera
4. Le risorse online
5. Tecniche di progettazione
del sito
  1. Raccolta d'informazioni sul sito
  2. Analisi della concorrenza
  3. Organizzazione delle informazioni
  4. Costruzione della mappa - gerarchia
  4b. Mappa- ipertesto
  4c. Mappa - struttura lineare
  5. Strumenti di navigazione - URL e cronologia
  5b. Strumenti di navigazione
- preferiti
  5c. Strumenti di navigazione
- tasti dedicati e altro
  5d. Regole di navigazione
  5e. Sistemi di navigazione
  5f. Elementi di navigazione
  5g. Sistemi di labeling
6. Definizioni dei termini comuni
7. Esercizi
  1. Riepilogo dei concetti della lezione
  Seconda lezione:
  Siti statici e linguaggio HTML
  Terza lezione:
 Modelli di pagina e tabelle
  Quarta lezione:
  HTML 4.01 e CSS
  Quinta lezione:
  Design e multimedialità
  Sesta lezione:
  Siti interattivi

 Copyright© PC Open - 2002 - 2003

Credits