Appunti su architettura dell’informazione e Design della navigazione
- Gli ingredienti di un sito web -  + + + + Home Architettura e navigazione Design pagine Testi Interazione Usabilità Aepw...
Architettura e navigazione - Architettura dell’informazione -  <ul><li>L’architettura delle informazioni è il livello “più...
Architettura e navigazione     - Per categorie -  Per macrocategorie  (modello “biblioteca”)
1 2 Per macrocategorie  (modello “biblioteca”)  Per tipo di azione  (modello “ufficio anagrafe”)  Architettura e navigazio...
Per tipo di utente  Architettura e navigazione     - Per tipo di utenti -
Architettura e navigazione     - Tipi di navigazione -  <ul><li>Navigazione fissa o principale </li></ul><ul><li>Navigazio...
Architettura e navigazione     - Navigazione principale -  In alto (poche opzioni) o a sinistra (molte opzioni). Anche a d...
Architettura e navigazione     - Navigazione locale -  A sinistra, oppure a destra se il menù principale è a sinistra Serv...
Architettura e navigazione     - Navigazione contestuale -  Tipicamente a destra e a centro della pagina, dentro il testo ...
Architettura e navigazione     - Navigazione di orientamento -  Tipicamente in alto, sotto al logo e al menù principale Se...
Architettura e navigazione     - Navigazione di servizio -  Tipicamente in alto, a fianco del logo e sopra il menù princip...
Architettura e navigazione     - Regole generali per la progettazione dei menù -  Coerenza . Il titolo della voce di menù ...
Architettura e navigazione     - Coerenza nei titoli dei menù -  La voce di menù mi porta a una pagina che ha  lo stesso t...
Architettura e navigazione     - Feedback: i bottoni cambiano aspetto -  Le voci di menù nelle quali mi trovo  cambiano as...
Architettura e navigazione     - Memorizzabilità: troppe voci di menù -  Cercate di dividere ogni box in non più di  sette...
Architettura e navigazione     - Learneability: dai menù capisco l’architettura -  Nel sito delle poste è facile “ imparar...
Architettura e navigazione     - Prevedibilità: rispecchiare il modello dell’utente -  La tassonomia del menù principale r...
Architettura e navigazione     - Scelte esplicite: no ai sottomenù a comparsa -  E’ visibile sono  un menù per volta E’ vi...
Architettura e navigazione     - Scelte esplicite: i sottomenù a parte -  Un sottomenù grande è messo in una  pagina-indic...
Architettura e navigazione     - Convenzioni: limitare le icone creative -  Troppe icone  e di non facile comprensione I m...
Nuove tendenze nell’architettura informativa
<ul><li>Classificazioni fluide  (tag) </li></ul><ul><li>Associazioni contestuali  tra i contenuti  (notizie correlate, tas...
Architettura e navigazione   - Classificazioni fluide: tag/1 - I contenuti sono classificati con etichette e sparisce la n...
Architettura e navigazione   - Tag/2 - L’archivio di  segnalazioni di Maestro Alberto è consultabile attraverso i suoi tag
I convegni del Forum Pa sono classificati in modo convenzionale (per categorie) e per tag (polidimensionale) Architettura ...
Architettura e navigazione   - Associazioni contestuali - Ad ogni contenuto sono associati contenuti simili, in una naviga...
Architettura e navigazione   - Inline navigation/1 - In Wikipedia la navigazione di una voce è inserita dentro la pagina I...
Architettura e navigazione   - Inline navigation/2 - La navigazione del prodotto è dentro la pagina
Le sottotab sono dentro la pagina Architettura e navigazione   - Inline navigation/3 -
Architettura e navigazione   - Navigazione globale stretta/1 - La navigazione globale offre poche voci. Il resto è costitu...
Architettura e navigazione   - Navigazione globale stretta/2 - La navigazione globale offre poche voci. Il resto è costitu...
Architettura e navigazione   - Navigazione globale stretta/3 - La navigazione globale offre poche voci. Il resto è costitu...
Architettura e navigazione   - Navigazione task centrata - La navigazione globale è molto legata ai task che l’utente può ...
Architettura e navigazione   - Classificazioni a faccette/1 - Molto adatte per e-commerce e per grandi quantità di contenu...
Architettura e navigazione   - Classificazioni a faccette/2 - Monclick associa una navigazione globale classica (per categ...
Architettura e navigazione   - Gestione identità - Ampio spazio è dedicato alla gestione dell’identità e delle azioni pers...
Architettura e navigazione   - Comportamenti emergenti -  La classificazione è fatta sulla base del comportamento degli ut...
Architettura e navigazione   - Per approfondire… -  http://trovabile.org/ http://www.iainstitute.org/it/ http://www.inform...
Giacomo Mason [email_address]
Upcoming SlideShare
Loading in …5
×

Architettura e navigazione dei siti web

10,301
-1

Published on

Gli appunti di una lezione sull'architettura della navigazione dei siti web

Published in: Education
1 Comment
17 Likes
Statistics
Notes
  • Se hai sempre sognato di avere un tuo sito internet,ma hai sempre desistito,per il costo o per qualsiasi altro motivo,non perdere questa occasione.Siamo un gruppo di ragazzi che realizzano progetti web per mostrare le loro capacità.A noi importa la vetrina.
    Ragion per cui,il compenso che chiediamo,è davvero irrisorio.
    Vorrei realizzare UN SITO per la vostra attività.
    Penso che la vendita di abiti da sposa,possa ispirarmi per un lavoro davvero soddisfacente.
    Per contattarmi ti lascio il mio cell: 349/5547241 (MAYO)
    Oppure puoi scrivere a mayolavoro@gmail.com
    Non perdere questa occasione...
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
10,301
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
377
Comments
1
Likes
17
Embeds 0
No embeds

No notes for slide

Architettura e navigazione dei siti web

  1. 1. Appunti su architettura dell’informazione e Design della navigazione
  2. 2. - Gli ingredienti di un sito web - + + + + Home Architettura e navigazione Design pagine Testi Interazione Usabilità Aepw s- asdlò Aepw s- asdlò
  3. 3. Architettura e navigazione - Architettura dell’informazione - <ul><li>L’architettura delle informazioni è il livello “più nascosto” del sito ma è il primo passo da compiere nella progettazione. Gli schemi classificativi più tipici sono </li></ul><ul><ul><li>Per ordine alfabetico (modello “Elenco del telefono”) </li></ul></ul><ul><ul><li>Per ordine cronologico (modello “archivio quotidiani”) </li></ul></ul><ul><ul><li>Per ordine geografico (modello “cartina geografica”) </li></ul></ul><ul><ul><li>Per tipo di utente (modello “servizi bancari”) </li></ul></ul><ul><ul><li>Per tipo di compito (modello “ufficio anagrafe”) </li></ul></ul><ul><ul><li>Per macrocategorie (modello “biblioteca”) </li></ul></ul><ul><ul><li>Per metafora (Modello “realtà virtuale”) </li></ul></ul><ul><ul><li>Nuove tendenze (tag, comportamenti emergenti, associalzio locali.. </li></ul></ul>
  4. 4. Architettura e navigazione - Per categorie - Per macrocategorie (modello “biblioteca”)
  5. 5. 1 2 Per macrocategorie (modello “biblioteca”) Per tipo di azione (modello “ufficio anagrafe”) Architettura e navigazione - Per task e categorie -
  6. 6. Per tipo di utente Architettura e navigazione - Per tipo di utenti -
  7. 7. Architettura e navigazione - Tipi di navigazione - <ul><li>Navigazione fissa o principale </li></ul><ul><li>Navigazione locale </li></ul><ul><li>Navigazione contestuale </li></ul><ul><li>Navigazione di orientameno (briciole di pane) </li></ul><ul><li>Navigazione di servizio </li></ul>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. 8. 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. 9. 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. 10. 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. 11. 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. 12. 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. 13. 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. 14. 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. 15. 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. 16. 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. 17. 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. 18. 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. 19. 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. 20. 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. 21. 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. 22. Nuove tendenze nell’architettura informativa
  23. 23. <ul><li>Classificazioni fluide (tag) </li></ul><ul><li>Associazioni contestuali tra i contenuti (notizie correlate, task correlati) </li></ul><ul><li>Inline navigation (es. Wikipedia) </li></ul><ul><li>Navigazione globale stretta ( poche voci – aumento navigazione contestuale) </li></ul><ul><li>Navigazione task centrata (voci legate al “fare” dell’utente) </li></ul><ul><li>Classificazioni a faccette (e commerce) </li></ul><ul><li>Gestione identità (profili, personalizzazioni) </li></ul><ul><li>Comportamenti emergenti (più visti, più scaricati ecc) </li></ul>Architettura e navigazione - Le nuove tendenze -
  24. 24. 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. 25. Architettura e navigazione - Tag/2 - L’archivio di segnalazioni di Maestro Alberto è consultabile attraverso i suoi tag
  26. 26. I convegni del Forum Pa sono classificati in modo convenzionale (per categorie) e per tag (polidimensionale) Architettura e navigazione - Classificazioni fluide: tag/3 -
  27. 27. Architettura e navigazione - Associazioni contestuali - Ad ogni contenuto sono associati contenuti simili, in una navigazione “per pertinenze”o)
  28. 28. 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. 29. Architettura e navigazione - Inline navigation/2 - La navigazione del prodotto è dentro la pagina
  30. 30. Le sottotab sono dentro la pagina Architettura e navigazione - Inline navigation/3 -
  31. 31. Architettura e navigazione - Navigazione globale stretta/1 - La navigazione globale offre poche voci. Il resto è costituito da navigazione e task contestuali
  32. 32. Architettura e navigazione - Navigazione globale stretta/2 - La navigazione globale offre poche voci. Il resto è costituito da navigazione e task contestuali
  33. 33. Architettura e navigazione - Navigazione globale stretta/3 - La navigazione globale offre poche voci. Il resto è costituito da navigazione e task contestuali
  34. 34. Architettura e navigazione - Navigazione task centrata - La navigazione globale è molto legata ai task che l’utente può compiere nell’applicazione
  35. 35. Architettura e navigazione - Classificazioni a faccette/1 - Molto adatte per e-commerce e per grandi quantità di contenuto da gestire in modo polidimensionale
  36. 36. Architettura e navigazione - Classificazioni a faccette/2 - Monclick associa una navigazione globale classica (per categorie e sottocategorie) e una navigazione locale a faccette
  37. 37. Architettura e navigazione - Gestione identità - Ampio spazio è dedicato alla gestione dell’identità e delle azioni personali dell’utente
  38. 38. Architettura e navigazione - Comportamenti emergenti - La classificazione è fatta sulla base del comportamento degli utenti
  39. 39. Architettura e navigazione - Per approfondire… - http://trovabile.org/ http://www.iainstitute.org/it/ http://www.informationarchitecture.it/index.shtml http://www.vocabola.com/
  40. 40. Giacomo Mason [email_address]
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×