Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Architettura e navigazione dei siti web

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

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]

×