Appunti su architettura dellinformazione 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 dellinformazione -

• Larchitettura 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 unidea 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 allutente nellarea 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, sullazienda, e alcune istruzioni e servizi del sito. Serve a gestire lidentit 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 dellutente 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 larchitettura - 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 dellutente - La tassonomia del men principale rispecchia il modo nel quale lutente 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 nellarchitettura 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 dellutente)

• 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 - Larchivio 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 pertinenzeo)

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 -