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 apprendimentoCome 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

Link topiciSono 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.

Jacob Nielsen ha indicato tre tipi principali di link:topici, associativi, strutturali Esempio: i link topici nella pagina

della voce enciclopedica di Cervignano rimandano ad altre voci enciclopediche

Non tutti i link sono uguali: i link associativi

Link associativiVengono 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 strutturaliSono 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 paginaNell’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

Esempiolink 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