Internet
Struttura di un sito web
Navigazione in un sito web
La struttura di un sito web




I siti web consistono principalmente di un insieme di
documenti
Quando si parla della struttura di un sito web si parla
di organizzazione dei documenti in una struttura
gerarchica o in una struttura ipertestuale
I contenuti sono stati catalogati, raggruppati,
denominati e per essi sono state stabilite delle
gerarchie
Chi ha creato il sito deve essere stato capace di
guidare il visitatore all'interno di questa struttura, in
modo che questi sia sempre aiutato a muoversi tra le
informazioni per cercare quelle che gli occorrono.
Tipi di ipertesto e complessità
Una buona struttura di sito
Quando l'utente entra per la prima volta in un
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.
Usabilità di un sito




L'usabilità è quella proprietà di un sito web che lo
rende "facile" da navigare e usare.
Originariamente la parola usabilità deriva dalla
progettazione dei software: dalla metà degli anni 80
iniziò a svilupparsi quella che è una vera e propria
scienza, che coniuga la psicologia e l'intelligenza
artificiale all'informatica.
L’usabilità ha lo scopo di fornire i metodi per
strutturare le informazioni nel modo più efficace, per
creare una navigazione chiara, intuitiva e senza
ambiguità che renda il sito web utilizzabile da tutti i
navigatori
L’usabilità di un sito web viene sottoposta a dei test
I principali attributi dell'usabilità
1. Utilità
La prima domanda riguarda ovviamente il senso stesso
del sito:
Serve a qualcosa?
A chi serve?
E’ importante che l’utente capisca subito di che cosa
tratta il sito e a quale utenza è diretto
2. Facilità di apprendimento
Come si comportano gli utenti davanti a un sito che non
hanno mai visto? Indugiano?
Si ritrovano in aree di cui non conoscono il senso
generale e di cui non sanno dire come sono arrivati?
Vorrebbero fare qualcosa ma non sanno "Come"?
Ci sono delle "metafore" di facile intuizione?
I principali attributi dell'usabilità
3. Efficienza
Il caricamento del sito è rapido?
I visitatori possono interrogare il sistema e ricevere delle
risposte sensate e veloci, o devono tentare e ritentare per
ottenere ciò che hanno in mente?
4. Facilità di ricordo
Gli utenti ricordano immediatamente come usare il sito la
seconda o terza volta che ci ritornano?
I principali attributi dell'usabilità
5. Prevenzione degli errori
I navigatori compiono errori nella navigazione e usano
spesso il tasto back (torna alle pagine precedenti) come
se fossero finiti dove non volevano?
Il sito stesso contiene errori di vario genere (esempio:
link interrotti)?
6. Soddisfazione
Il sistema è divertente e soddisfacente da usare o crea
ansia e frustrazione
Elementi base per la navigazione: i link





L’utente, da parte sua, deve imparare a riconoscere
nella pagina gli elementi per la navigazione
Ogni sito propone una sua propria navigazione
La navigazione avviene con il link (collegamenti
ipertestuali)
Una pagina web contiene decine di link
Questi possono assolvere a funzioni diverse ed essere
aggregati in modo diverso.
Non tutti i link sono uguali: i link topici
Jacob Nielsen ha indicato tre tipi principali di link:
Esempio: i link topici nella pagina
topici, associativi, strutturali
Link topici
Sono i link contenuti in un
testo e conducono a ulteriori
informazioni riguardo
all'argomento trattato.
Non tutti sono d'accordo
nell'inserire dei collegamenti
dentro il testo, si corre il
rischio di spezzare troppo la
lettura.
della voce enciclopedica di
Cervignano rimandano ad altre voci
enciclopediche
Non tutti i link sono uguali: i link associativi
Link associativi
Vengono usati per indicare altre pagine dal contenuto
simile o correlato a quella attuale, che l'utente potrebbe
perciò trovare interessante.
Non sono vere e proprie guide alla navigazione del sito
(che sono i link strutturali), ma piuttosto forme di
"manipolazione" della navigazione.
Esempio: i link
associativi nella
pagina del sito di una
Assicurazione
Non tutti i link sono uguali: i link strutturali
Link strutturali
Sono link usati per connettere fra loro diversi livelli della
struttura del sito.
Generalmente i link strutturali sono quelli che alloggiano
sulle barre di navigazione (o menu)
Esempio: i link strutturali nel menu
orizzontale della pagina del sito di
una compagnia aerea
Posizionamento dei link nella pagina
Nell’intestazione
viene messo il link
alla home page
(quasi sempre nel
logo)
Nella barra di
navigazione primaria
vengono messi i link
strutturali di primo
livello)
Nella barra di
navigazione
secondaria vengono
messi i link strutturali
di livello successivo)
Nell’area dei contenuti principali vengono
messi i link topici e/o quelli associativi
Esempio
link topici
link
strutturali
link
associativi
I tipi di menu più usati






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)
Esempio: menu a linguette ciascuna
delle quali mostra un sottomenu di un
sito di commercio online
Esempio: menu nella
barra superiore
La suddivisione dei menu più frequente

Menu principale

Menu locale o secondario

Menu constestuale

Menu del footer (piè di pagina)
Esempio
Menu
principale
Menu locale
(sezione Il
Teatro)
Menu del
footer
Menu principale



E’ il menu che raggruppa le voci più importanti
Di solito è presente in tutte le pagine del sito e
di conseguenza permette l'accesso alle aree
significative del sito, indipendentemente dal
punto in cui il visitatore si trova
Consente il cambio rapido della sezione e ci dà
un punto chiaro di riferimento sulla pagina che
stiamo consultando
Menu locale o secondario



Si tratta di menu che appartengono a diverse
sottosezioni specifiche
Il contenuto di questo menu varia a seconda
della sezione
Di solito però non varia la posizione che il
menu ha nella pagina (di solito viene
posizionato su una colonna sul lato a sinistra
della pagina)
Menu constestuale


E’ il menu che consente l'accesso ad una certa
pagina partendo dal contenuto di una specifica
pagina del sito
Viene usato quando il contenuto è messo in più
pagine oppure per linkare argomenti correlati
alla pagina
Menu del footer



E’ rappresentato da una serie di link testuali,
posizionati in fondo alla pagina
A volte contiene le stesse voci del menu
principale, in modo che l’utente, arrivato in
fondo alla pagina può cambiare sezione senza
dover scorrere di nuovo in alto
Di solito contengono informazioni generiche
sul sito (contatti, link alla mappa del sito, alla
ricerca nel sito, ecc.)
Menu del footer



E’ rappresentato da una serie di link testuali,
posizionati in fondo alla pagina
A volte contiene le stesse voci del menu
principale, in modo che l’utente, arrivato in
fondo alla pagina può cambiare sezione senza
dover scorrere di nuovo in alto
Di solito contengono informazioni generiche
sul sito (contatti, link alla mappa del sito, alla
ricerca nel sito, ecc.)
Ritorno alla homepage



Di solito si entra in un sito web dalla homepage (la
pagina iniziale)
Se l’ingresso avviene da un’altra pagina del sito,
oppure se, dopo essere entrati nella struttura
gerarchica del sito, si vuole tornare alla homepage, il
link a questa è sempre presente o nell’intestazione del
sito (di solito il logo) o nel menu principale
Il logo dell’intestazione è un link alla homepage
Briciole di pane




Per aumentare l'usabilità del sito, molti siti web
forniscono dei dei percorsi a "briciole di pane“,
teorizzati dal guru dell'accessibilità Jakob Nielsen.
Il percorso a briciole di pane è in sostanza una
sequenza di link che informano il navigatore in quale
sezione del sito si trova.
Il percorso a briciole di pane contribuisce a soddisfare i
criteri di percezione, comprensibilità, coerenza e
trasparenza del sito.
Ad esempio, il percorsola pagina Organico del sito del
Teatro Alla Scala
Mappa del sito



Un altro elemento fondamentale per
l’usabilità è la mappa del sito
Questa è l’analogo dell’indice di un libro
ed è una pagina che fornisce l’elenco di
tutti i link alle varie sezioni del sito,
organizzati nella struttura gerarchica del
sito
L’esempio è la mappa del sito del Teatro
alla Scala di Milano
Ricerca nel sito





Molti siti offrono anche un motore di ricerca interno (al
sito)
Il visitatore che vuole trovare un contenuto, lo può
fare inserendo delle parole chiave in un modulo di
ricerca
Il sito restituisce l’elenco dei link alle pagine che
contengono questo termine
La ricerca può essere semplice o avanzata
L’esempio è il modulo di ricerca (molto semplice) del
Teatro alla Scala di Milano