Le lingue
Pagine
Legale
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/
Top Related