La presentazione è in caricamento. Aspetta per favore

La presentazione è in caricamento. Aspetta per favore

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

Presentazioni simili


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 n I siti web consistono principalmente di un insieme di documenti n Quando si parla della struttura di un sito web si parla di organizzazione dei documenti in una struttura gerarchica o in una struttura ipertestuale n I contenuti sono stati catalogati, raggruppati, denominati e per essi sono state stabilite delle gerarchie n 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 n L'usabilità è quella proprietà di un sito web che lo rende "facile" da navigare e usare. n 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. n Lusabilità 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 n Lusabilità 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 lutente 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 n Lutente, da parte sua, deve imparare a riconoscere nella pagina gli elementi per la navigazione n Ogni sito propone una sua propria navigazione n La navigazione avviene con il link (collegamenti ipertestuali) n Una pagina web contiene decine di link n Questi possono assolvere a funzioni diverse ed essere aggregati in modo diverso.

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

11 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

12 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

13 Posizionamento dei link nella pagina Nellintestazione 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) Nellarea 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 n Barra verticale sinistra n Linguette in alto n Elenco di link in alto (barra orizzontale superiore) n Elenco centrato di categorie n Menu a tendina n 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 n Menu principale n Menu locale o secondario n Menu constestuale n Menu del footer (piè di pagina)

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

18 Menu principale n E il menu che raggruppa le voci più importanti n 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 n Consente il cambio rapido della sezione e ci dà un punto chiaro di riferimento sulla pagina che stiamo consultando

19 Menu locale o secondario n Si tratta di menu che appartengono a diverse sottosezioni specifiche n Il contenuto di questo menu varia a seconda della sezione n 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 n E il menu che consente l'accesso ad una certa pagina partendo dal contenuto di una specifica pagina del sito n Viene usato quando il contenuto è messo in più pagine oppure per linkare argomenti correlati alla pagina

21 Menu del footer n E rappresentato da una serie di link testuali, posizionati in fondo alla pagina n A volte contiene le stesse voci del menu principale, in modo che lutente, arrivato in fondo alla pagina può cambiare sezione senza dover scorrere di nuovo in alto n Di solito contengono informazioni generiche sul sito (contatti, link alla mappa del sito, alla ricerca nel sito, ecc.)

22 Menu del footer n E rappresentato da una serie di link testuali, posizionati in fondo alla pagina n A volte contiene le stesse voci del menu principale, in modo che lutente, arrivato in fondo alla pagina può cambiare sezione senza dover scorrere di nuovo in alto n Di solito contengono informazioni generiche sul sito (contatti, link alla mappa del sito, alla ricerca nel sito, ecc.)

23 Ritorno alla homepage n Di solito si entra in un sito web dalla homepage (la pagina iniziale) n Se lingresso avviene da unaltra 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 nellintestazione del sito (di solito il logo) o nel menu principale n Il logo dellintestazione è un link alla homepage

24 Briciole di pane n Per aumentare l'usabilità del sito, molti siti web forniscono dei dei percorsi a "briciole di pane, teorizzati dal guru dell'accessibilità Jakob Nielsen. n Il percorso a briciole di pane è in sostanza una sequenza di link che informano il navigatore in quale sezione del sito si trova. n Il percorso a briciole di pane contribuisce a soddisfare i criteri di percezione, comprensibilità, coerenza e trasparenza del sito. n Ad esempio, il percorsola pagina Organico del sito del Teatro Alla Scala

25 Mappa del sito n Un altro elemento fondamentale per lusabilità è la mappa del sito n Questa è lanalogo dellindice di un libro ed è una pagina che fornisce lelenco di tutti i link alle varie sezioni del sito, organizzati nella struttura gerarchica del sito n Lesempio è la mappa del sito del Teatro alla Scala di Milano

26 Ricerca nel sito n Molti siti offrono anche un motore di ricerca interno (al sito) n Il visitatore che vuole trovare un contenuto, lo può fare inserendo delle parole chiave in un modulo di ricerca n Il sito restituisce lelenco dei link alle pagine che contengono questo termine n La ricerca può essere semplice o avanzata n Lesempio è il modulo di ricerca (molto semplice) del Teatro alla Scala di Milano


Scaricare ppt "Internet Struttura di un sito web Navigazione in un sito web."

Presentazioni simili


Annunci Google