View
225
Download
3
Category
Preview:
Citation preview
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
Recommended