Internet Struttura di un sito web Navigazione in un sito web.

Presentazione sul tema: "Internet Struttura di un sito web Navigazione in un sito web."— Transcript della presentazione:

1 Internet Struttura di un sito web Navigazione in un sito web

2 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.

3 Tipi di ipertesto e complessità

4 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.

5 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

6 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?

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

8 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

9 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.

10 Non tutti i link sono uguali: i link topici
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 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.

11 Non tutti i link sono uguali: i 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

12 Non tutti i link sono uguali: i 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

13 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

14 Esempio link topici link strutturali link associativi

15 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

16 La suddivisione dei menu più frequente
Menu principale Menu locale o secondario Menu constestuale Menu del footer (piè di pagina)

17 Esempio Menu principale Menu locale (sezione Il Teatro)
Menu del footer

18 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

19 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)

20 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

21 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.)

22 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.)

23 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

24 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

25 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

26 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