Architettura e navigazione dei siti web
-
Upload
giacomo-mason -
Category
Education
-
view
13.046 -
download
5
Embed Size (px)
description
Transcript of Architettura e navigazione dei siti web

1/40“Giacomo Mason” – Novembre 2008
Appunti su architettura dell’informazione e Design della navigazione

2/40“Giacomo Mason” – Novembre 2008
- Gli ingredienti di un sito web -
Aepw s-
asdlò
Aepw s-
asdlò+ + + +
HomeArchitettura
e navigazione
Design pagine
Testi Interazione
Usabilità

3/40“Giacomo Mason” – Novembre 2008
Architettura e navigazione- Architettura dell’informazione -
L’architettura delle informazioni è il livello “più nascosto” del sito ma è il primo passo da compiere nella progettazione. Gli schemi classificativi più tipici sono
• Per ordine alfabetico (modello “Elenco del telefono”)
• Per ordine cronologico (modello “archivio quotidiani”)
• Per ordine geografico (modello “cartina geografica”)
• Per tipo di utente (modello “servizi bancari”)
• Per tipo di compito (modello “ufficio anagrafe”)
• Per macrocategorie (modello “biblioteca”)
• Per metafora (Modello “realtà virtuale”)
• Nuove tendenze (tag, comportamenti emergenti, associalzio locali..

4/40“Giacomo Mason” – Novembre 2008
Architettura e navigazione - Per categorie -
Per macrocategorie
(modello “biblioteca”)

5/40“Giacomo Mason” – Novembre 2008
1
2
Per macrocategorie
(modello “biblioteca”)
Per tipo di azione
(modello “ufficio anagrafe”)
Architettura e navigazione - Per task e categorie -

6/40“Giacomo Mason” – Novembre 2008
Per tipo di utente
Architettura e navigazione - Per tipo di utenti -

7/40“Giacomo Mason” – Novembre 2008
Architettura e navigazione - Tipi di navigazione -
• Navigazione fissa o principale
• Navigazione locale
• Navigazione contestuale
• Navigazione di orientameno (briciole di pane)
• Navigazione di servizio
Struttura globale delle informazioni
Informazioni di secondo livello, Approfondimenti
Task specifici, correlazioni (oggi questo aspetto si è molto allargato)
Correlazioni gerartchiche (oggi meno usato)
Identità, login, personalizzazioni (oggi questo aspetto è determinante)

8/40“Giacomo Mason” – Novembre 2008
Architettura e navigazione - Navigazione principale -
In alto (poche opzioni) o a sinistra (molte opzioni). Anche a destra va bene se è chiara la loro natura. E’ presente in ogni parte del sito
Serve a
Muoversi nelle aree principali del sito e dare un’idea dei contenuti principali
Errori da evitare
Mettere link esterni
Mettere link a materiali
Mescolare mele con le pere
Tassonomia incomprensibile
Ritorno alla home
Link a pagine vuote

9/40“Giacomo Mason” – Novembre 2008
Architettura e navigazione - Navigazione locale -
A sinistra, oppure a destra se il menù principale è a sinistra
Serve a
Dare le opzioni di “azione” concreta all’utente nell’area che ha scelto e approfondire parti
Errori da evitare
Titolatura incoerente
Troppe voci di menù
Istruzioni incomprensibili

10/40“Giacomo Mason” – Novembre 2008
Architettura e navigazione - Navigazione contestuale -
Tipicamente a destra e a centro della pagina, dentro il testo
Serve a
Dare accesso ai materiali, fornire link o associazioni ad altre pagine, effettuare azioni
Errori da evitare
Mancata divisione tra pagine e materiali
Mancata divisione tra pagine interne ed esterne

11/40“Giacomo Mason” – Novembre 2008
Architettura e navigazione - Navigazione di orientamento -
Tipicamente in alto, sotto al logo e al menù principale
Serve a
Dare la posizione in profondità nel sito e risalire per categorie
Errori da evitare
Posizionamento errato
Finta briciola
La briciola finale è uguale alle altre
Il titolo della pagina è diverso dal titolo della briciola

12/40“Giacomo Mason” – Novembre 2008
Architettura e navigazione - Navigazione di servizio -
Tipicamente in alto, a fianco del logo e sopra il menù principale
Serve a
Dare informazioni sul sito, sull’azienda, e alcune istruzioni e servizi del sito. Serve a gestire l’identità e le personalizzazioni
Errori da evitare
Mettere cose diverse
Mescolare servizi e menù principale
Mescolare “contatti” e “Chi siamo”

13/40“Giacomo Mason” – Novembre 2008
Architettura e navigazione - Regole generali per la progettazione dei menù -
Coerenza. Il titolo della voce di menù è anche il titolo della pagina
Feedback. I menù attivi e i pulsanti cambiano stato (es. quello attivo non è cliccabile ed è di un colore diverso)
Memorizzabilità. Ogni box del menù non ha più di 7 collegamenti
Learneability. I menù di navigazione rispecchiano il più possibile la struttura informativa del sito
Prevedibilità. La tassonomia deve rispecchiare le aspettative dell’utente
Scelte esplicite. Se il sito è grande i sottomenù principali stanno in sotto-home page. No ai sottomenù a comparsa
Convenzioni. Usate icone standard e convenzionali

14/40“Giacomo Mason” – Novembre 2008
Architettura e navigazione - Coerenza nei titoli dei menù -
La voce di menù mi porta a una pagina che ha lo stesso titolo
Anche la briciola di pane è coerente con la titolatura
Da notare il trinagolino “segnaposto” nel menù

15/40“Giacomo Mason” – Novembre 2008
Architettura e navigazione - Feedback: i bottoni cambiano aspetto -
Le voci di menù nelle quali mi trovo cambiano aspetto
Cambia il colore
La voce non è cliccabile
Coerenza tra titolo della briciola di pane e titolo pagina

16/40“Giacomo Mason” – Novembre 2008
Architettura e navigazione - Memorizzabilità: troppe voci di menù -
Cercate di dividere ogni box in non più di sette voci
Menù troppo lunghi sono difficile da memorizzare

17/40“Giacomo Mason” – Novembre 2008
Architettura e navigazione - Learneability: dai menù capisco l’architettura -
Nel sito delle poste è facile “imparare” come è fatto il sito solo guardando i menù di navigazione
La navigazione rispecchia in modo esplicito la struttura del sito
Per tipo di utenti
Per prodotto
(ma label non chiare)

18/40“Giacomo Mason” – Novembre 2008
Architettura e navigazione - Prevedibilità: rispecchiare il modello dell’utente -
La tassonomia del menù principale rispecchia il modo nel quale l’utente stesso suddivide le informazioni
E’ facile prevedere i contenuti delle varie voci

19/40“Giacomo Mason” – Novembre 2008
Architettura e navigazione - Scelte esplicite: no ai sottomenù a comparsa -
E’ visibile sono un menù per volta
E’ visibile solo se ci passo con il mouse
E’ difficile ricordare le altre scelte
Copre le informazioni della pagina

20/40“Giacomo Mason” – Novembre 2008
Architettura e navigazione - Scelte esplicite: i sottomenù a parte -
Un sottomenù grande è messo in una pagina-indice (sotto-home page)
La titolatura è coerente tra titolo della voce di menù e titolo della pagina

21/40“Giacomo Mason” – Novembre 2008
Architettura e navigazione - Convenzioni: limitare le icone creative -
Troppe icone e di non facile comprensione
I menù diventano meno comprensibili che con il solo testo

22/40“Giacomo Mason” – Novembre 2008
Nuove tendenze nell’architettura informativa

23/40“Giacomo Mason” – Novembre 2008
1. Classificazioni fluide (tag)
2. Associazioni contestuali tra i contenuti (notizie correlate, task correlati)
3. Inline navigation (es. Wikipedia)
4. Navigazione globale stretta (poche voci – aumento navigazione
contestuale)
5. Navigazione task centrata (voci legate al “fare” dell’utente)
6. Classificazioni a faccette (e commerce)
7. Gestione identità (profili, personalizzazioni)
8. Comportamenti emergenti (più visti, più scaricati ecc)
Architettura e navigazione - Le nuove tendenze -

24/40“Giacomo Mason” – Novembre 2008
Architettura e navigazione - Classificazioni fluide: tag/1 -
I contenuti sono classificati con etichette e sparisce la navigazione classica. Un contenuto può essere raggiunto da più punti ed è classificato in modo multidimensionale

25/40“Giacomo Mason” – Novembre 2008
Architettura e navigazione - Tag/2 -
L’archivio di segnalazioni di Maestro Alberto è consultabile attraverso i suoi tag

26/40“Giacomo Mason” – Novembre 2008
I convegni del Forum Pa sono classificati in modo convenzionale (per categorie) e per tag (polidimensionale)
Architettura e navigazione - Classificazioni fluide: tag/3 -

27/40“Giacomo Mason” – Novembre 2008
Architettura e navigazione - Associazioni contestuali -
Ad ogni contenuto sono associati contenuti simili, in una navigazione “per pertinenze”o)

28/40“Giacomo Mason” – Novembre 2008
Architettura e navigazione - Inline navigation/1 -
In Wikipedia la navigazione di una voce è inserita dentro la pagina
In Yahoo le tab dei tipi di news sono dentro la pagina

29/40“Giacomo Mason” – Novembre 2008
Architettura e navigazione - Inline navigation/2 -
La navigazione del prodotto è dentro la pagina

30/40“Giacomo Mason” – Novembre 2008
Le sottotab sono dentro la pagina
Architettura e navigazione - Inline navigation/3 -

31/40“Giacomo Mason” – Novembre 2008
Architettura e navigazione - Navigazione globale stretta/1 -
La navigazione globale offre poche voci. Il resto è costituito da navigazione e task contestuali

32/40“Giacomo Mason” – Novembre 2008
Architettura e navigazione - Navigazione globale stretta/2 -
La navigazione globale offre poche voci. Il resto è costituito da navigazione e task contestuali

33/40“Giacomo Mason” – Novembre 2008
Architettura e navigazione - Navigazione globale stretta/3 -
La navigazione globale offre poche voci. Il resto è costituito da navigazione e task contestuali

34/40“Giacomo Mason” – Novembre 2008
Architettura e navigazione - Navigazione task centrata -
La navigazione globale è molto legata ai task che l’utente può compiere nell’applicazione

35/40“Giacomo Mason” – Novembre 2008
Architettura e navigazione - Classificazioni a faccette/1 -
Molto adatte per e-commerce e per grandi quantità di contenuto da gestire in modo polidimensionale

36/40“Giacomo Mason” – Novembre 2008
Architettura e navigazione - Classificazioni a faccette/2 -
Monclick associa una navigazione globale classica (per categorie e sottocategorie) e una navigazione locale a faccette

37/40“Giacomo Mason” – Novembre 2008
Architettura e navigazione - Gestione identità -
Ampio spazio è dedicato alla gestione dell’identità e delle azioni personali dell’utente

38/40“Giacomo Mason” – Novembre 2008
Architettura e navigazione - Comportamenti emergenti -
La classificazione è fatta sulla base del comportamento degli utenti

39/40“Giacomo Mason” – Novembre 2008
Architettura e navigazione - Per approfondire… -
http://trovabile.org/
http://www.iainstitute.org/it/
http://www.informationarchitecture.it/index.shtml
http://www.vocabola.com/