Architettura e navigazione dei siti web

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 s- asdlò Aepw s- asdlò

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..

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

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

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

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)

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

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

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

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

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”

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

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ù

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

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

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)

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

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

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

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

Nuove tendenze nell’architettura informativa

Classificazioni fluide (tag)

Associazioni contestuali tra i contenuti (notizie correlate, task correlati)

Inline navigation (es. Wikipedia)

Navigazione globale stretta ( poche voci – aumento navigazione contestuale)

Navigazione task centrata (voci legate al “fare” dell’utente)

Classificazioni a faccette (e commerce)

Gestione identità (profili, personalizzazioni)

Comportamenti emergenti (più visti, più scaricati ecc)

Architettura e navigazione - Le nuove tendenze -

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

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 e navigazione - Classificazioni fluide: tag/3 -

Architettura e navigazione - Associazioni contestuali - Ad ogni contenuto sono associati contenuti simili, in una navigazione “per pertinenze”o)

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

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 è costituito da navigazione e task contestuali

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

Architettura e navigazione - Classificazioni a faccette/1 - Molto adatte per e-commerce e per grandi quantità di contenuto da gestire in modo polidimensionale

Architettura e navigazione - Classificazioni a faccette/2 - Monclick associa una navigazione globale classica (per categorie e sottocategorie) e una navigazione locale a faccette

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

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

Architettura e navigazione - Per approfondire… - http://trovabile.org/ http://www.iainstitute.org/it/ http://www.informationarchitecture.it/index.shtml http://www.vocabola.com/

Giacomo Mason [email_address]