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

1. Appunti su architettura dell’informazione e Design della navigazione

2. - Gli ingredienti di un sito web - + + + + Home Architettura e navigazione Design pagine Testi Interazione Usabilità Aepw s- asdlò Aepw s- asdlò

4. Architettura e navigazione - Per categorie - Per macrocategorie (modello “biblioteca”)

5. 1 2 Per macrocategorie (modello “biblioteca”) Per tipo di azione (modello “ufficio anagrafe”) Architettura e navigazione - Per task e categorie -

6. Per tipo di utente Architettura e navigazione - Per tipo di utenti -

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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Nuove tendenze nell’architettura informativa

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. Architettura e navigazione - Tag/2 - L’archivio di segnalazioni di Maestro Alberto è consultabile attraverso i suoi tag

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. Architettura e navigazione - Associazioni contestuali - Ad ogni contenuto sono associati contenuti simili, in una navigazione “per pertinenze”o)

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. Architettura e navigazione - Inline navigation/2 - La navigazione del prodotto è dentro la pagina

30. Le sottotab sono dentro la pagina Architettura e navigazione - Inline navigation/3 -

31. Architettura e navigazione - Navigazione globale stretta/1 - La navigazione globale offre poche voci. Il resto è costituito da navigazione e task contestuali

32. Architettura e navigazione - Navigazione globale stretta/2 - La navigazione globale offre poche voci. Il resto è costituito da navigazione e task contestuali

33. Architettura e navigazione - Navigazione globale stretta/3 - La navigazione globale offre poche voci. Il resto è costituito da navigazione e task contestuali

34. Architettura e navigazione - Navigazione task centrata - La navigazione globale è molto legata ai task che l’utente può compiere nell’applicazione

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. Architettura e navigazione - Classificazioni a faccette/2 - Monclick associa una navigazione globale classica (per categorie e sottocategorie) e una navigazione locale a faccette

37. Architettura e navigazione - Gestione identità - Ampio spazio è dedicato alla gestione dell’identità e delle azioni personali dell’utente

38. Architettura e navigazione - Comportamenti emergenti - La classificazione è fatta sulla base del comportamento degli utenti

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. Giacomo Mason [email_address]