Architettura dell Informazione su Web

Architettura dell Informazione su Web Corso IFTS Informatica, Modulo 3 Progettazione pagine web statiche (50 ore) Dott. Chiara Braghin Credits Prof. Roberto Polillo Università degli Studi di Milano Bicocca Prof. Marina Ribaudo Dipartimento di Informatica e Scienze dell'informazione, Università degli Studi di Genova Prof. Fabio Vitali Università degli Studi di Bologna C. Braghin - Architettura dell'informazione 2 1

Agenda 1. Architettura dell informazione: cos è 2. Strutture informative tipiche 3. Come raggruppare l informazione 4. Navigazione nelle strutture gerarchiche C. Braghin - Architettura dell'informazione 3 Architettura dell informazione Il progetto della struttura di ambienti informativi condivisi Esempi: molti utenti con molte esigenze diverse - enciclopedie, monografie, - ma anche librerie, biblioteche, musei, - siti web C. Braghin - Architettura dell'informazione 4 2

Esempio: una libreria C. Braghin - Architettura dell'informazione 5 Esempio: una biblioteca Etienne-Louis Boullee, Deuxieme projet pour la Biblioteque du Roi, Paris, 1785 C. Braghin - Architettura dell'informazione 6 3

Nel caso del web L architettura dell informazione è la creazione di sistemi consistenti e funzionali per la navigazione, la grafica, la struttura delle pagine e la titolazione in modo che l utente sappia dove andare, che cosa fare, e sia incoraggiato a tornare. Da Web Review, Peter Morville C. Braghin - Architettura dell'informazione 9 Architettura delle informazioni (1) L architettura delle informazioni è il design strutturale degli ambienti digitali, o a realtà mista, per lo scambio di informazioni. L architettura delle informazioni è la struttura logica organizzativa e semantica delle informazioni, dei contenuti e delle funzionalità di un sistema. È la combinazione di organizzazione, etichettatura e sistema di navigazione. L arte e la scienza di dar forma ai prodotti informativi a supporto dell usabilità e della trovabilità. Mette in relazione utenti e contenuti con una finalità di business. Porta i principi del design e dell architettura negli ambienti digitali. Next: Architettura delle informazioni (2) 2/49 10 4

Architettura delle informazioni (2) L architettura delle informazioni ha fra i suoi obiettivi che: i contenuti siano gestiti in maniera ragionevole; che siano ordinati, catalogati e filtrati in maniera corretta; che sia possibile richiamare le informazioni in maniera efficace: l utente deve essere libero di pensare ai proprio task e obiettivi e non alla struttura del sito. Next: Architettura delle informazioni (3) 3/49 11 Strutturare, organizzare, classificare Strutturare: determinare il livello di granularità degli atomi d informazione presenti in un sito web e decidere come sono correlati fra di loro. La granularità si riferisce alla dimensione relativa ed inclusività dei singoli elementi informativi. I vari livelli di granularità possono includere ad esempio un edizione di una rivista, articoli, paragrafi e frasi. Organizzare: raggruppare queste componenti d informazione in categorie significative e distinte. Classificare: definire le categorie e la serie di collegamenti ipertestuali che condurranno ad esse. Next: Reperibilità e gestione 13/49 12 5

Reperibilità e gestione Reperibilità: se gli utenti non riescono a trovare ciò che cercano (navigando il sito, usando il motore di ricerca) il sito è un fallimento. Un design centrato sugli utenti non è sufficiente: chi gestisce le informazioni (information manager) ha un importanza cruciale. Gestione: bilanciamento fra le esigenze degli utenti con gli obiettivi del business. Un efficiente gestione dei contenuti, delle politiche e delle procedure sono essenziali. Next: Arte e scienza 14/49 13 Sistema di navigazion e Sistema di ricerca Organizzaz ione Next: 28/49 14 6

C. Braghin - Architettura dell'informazione 15 Strutturare l informazione: le difficoltà L informazione deve essere organizzata in modo tale che il fruitore: possa costruirsi facilmente un modello mentale semplice e chiaro di tale organizzazione (organizzazione content driven ) possa accedervi facilmente in relazione ai suoi scopi (organizzazione task driven ) A volte questi due criteri sono in conflitto e, spesso, i diversi fruitori hanno caratteristiche ed esigenze diverse C. Braghin - Architettura dell'informazione 16 7

C. Braghin - Architettura dell'informazione 17 Temi da considerare Strutture informative tipiche Come raggruppare l informazione Sistemi di navigazione Sistemi di orientamento Sistemi di ricerca C. Braghin - Architettura dell'informazione 18 8

Strutture organizzative tipiche Organizzazioni tipiche dell informazione lineare gerarchica a matrice a rete ibrida C. Braghin - Architettura dell'informazione 21 9

Struttura lineare Home C. Braghin - Architettura dell'informazione 22 C. Braghin - Architettura dell'informazione 23 10

Struttura gerarchica Home Livello 0 Livello 1 Livello 2 3 livelli C. Braghin - Architettura dell'informazione 24 Livello 0 Livello 1 Livello 2 C. Braghin - Architettura dell'informazione 25 11

Struttura dell albero Ampiezza Profondità C. Braghin - Architettura dell'informazione 26 3 livelli C. Braghin - Architettura dell'informazione 27 12

Struttura a rete C. Braghin - Architettura dell'informazione 29 C. Braghin - Architettura dell'informazione 30 13

C. Braghin - Architettura dell'informazione 31 Strutture ibride Nelle applicazioni reali si incontrano quasi sempre strutture ibride costituita da una struttura di base gerarchica con link che permettono di fattorizzare componenti informativi comuni e blocchi di informazioni sequenziali C. Braghin - Architettura dell'informazione 35 14

Esempio di struttura ibrida C. Braghin - Architettura dell'informazione 36 La struttura del www Il web, nel suo complesso, è un grafo con caratteristiche topologiche particolari: è una struttura molto clusterizzata la minima distanza fra due nodi scelti a caso è breve: circa 4 click ( small world network ) ha caratteristiche frattali (stesse proprietà a vari livelli di scala) C. Braghin - Architettura dell'informazione 37 15

L immagine mostra una porzione di Internet C. Braghin - Architettura dell'informazione 38 costituita da 535.000 nodi e più di 600.000 link The small world web C. Braghin - Architettura dell'informazione 41 16

Come raggruppare l informazione Come raggruppare l informazione? Posso utilizzare vari criteri: Organizzazione content driven (raggruppo contenuti fra loro simili ) Organizzazione user driven (raggruppo contenuti di interesse per una medesima categoria di utenti) Organizzazione task driven (raggruppo contenuti relativi a uno stesso compito) C. Braghin - Architettura dell'informazione 43 17

2 Esempi Come organizzare un negozio di abbigliamento online? 1 For him / her For him / her 3 C. Braghin - Architettura dell'informazione 44 Esempio C. Braghin - Architettura dell'informazione 45 18

Navigazione e sistemi di navigazione nelle strutture gerarchiche Tipi di navigazione Navigazione verticale Navigazione orizzontale Navigazione trasversale C. Braghin - Architettura dell'informazione 47 19

Navigazione verticale 2 3 da qui 1 4 a qui C. Braghin - Architettura dell'informazione 48 Bottone home su tutte le pagine 2 Navigazione verticale con scorciatoia 1 da qui 3 a qui C. Braghin - Architettura dell'informazione 50 20

Menu principale su tutte le pagine Navigazione trasversale da qui 1 2 a qui C. Braghin - Architettura dell'informazione 51 da qui 1 2 a qui C. Braghin - Architettura dell'informazione 52 21

Menu secondario su tutte le pagine Navigazione orizzontale da qui 1 a qui C. Braghin - Architettura dell'informazione 53 Esempio C. Braghin - Architettura dell'informazione 54 22

Esempio C. Braghin - Architettura dell'informazione 66 Sistemi di navigazione Un sistema di navigazione è l insieme degli strumenti a disposizione dell utente di un sito per permettergli: l accesso all informazione desiderata: come ci arrivo? l orientamento: dove mi trovo? C. Braghin - Architettura dell'informazione 67 23

Esempio: strumenti di navigazione nel libro Accesso: Indice dei contenuti ecco come è strutturata l informazione, e dove si trovano le varie parti Indice analitico ecco dove si parla di questo argomento Rimandi nel testo ecco dove trovi altre informazioni su questo argomento Segnalibro ecco dove sei arrivato a leggere Orientamento: Header, footer, Numero di pagina ecco dove ti trovi Titoli, sottotitoli qui inizia questo argomento C. Braghin - Architettura dell'informazione 68 La tecnologia del libro si è sviluppata lungo l arco di molti secoli C. Braghin - Architettura dell'informazione 69 24

Accesso nel web: strumenti Nel browser: Comandi back e forward History Nel sito: Link (vari tipi) Menu Sitemap C. Braghin - Architettura dell'informazione 70 Vari tipi di link Tab Bottone Immagine attiva Testo attivo C. Braghin - Architettura dell'informazione 71 25

Esempi di menu C. Braghin - Architettura dell'informazione 72 C. Braghin - Architettura dell'informazione 73 26

C. Braghin - Architettura dell'informazione 74 C. Braghin - Architettura dell'informazione 76 27

Esempi di sitemap C. Braghin - Architettura dell'informazione 80 C. Braghin - Architettura dell'informazione 81 28

C. Braghin - Architettura dell'informazione 86 Esercizio: che cosa c è che non va nelle seguenti sitemap? C. Braghin - Architettura dell'informazione 88 30

C. Braghin - Architettura dell'informazione 97 Sitemap: linee guida Deve essere accessibile dalla homepage Deve essere cliccabile Deve informare, non divertire, e deve farlo nel modo più efficace (ciò che mi serve) ed efficiente (rapidamente e senza sforzo) Deve farmi comprendere nel modo più chiaro possibile la struttura del sito C. Braghin - Architettura dell'informazione 99 33

NO C. Braghin - Architettura dell'informazione 100 SI C. Braghin - Architettura dell'informazione 101 34

NI C. Braghin - Architettura dell'informazione 102 Sistemi di orientamento C. Braghin - Architettura dell'informazione 103 35

Orientamento Stabilire la propria posizione o direzione rispetto a qualche sistema di riferimento - You are here - Breadcrumbs - Landmarks C. Braghin - Architettura dell'informazione 104 You are here C. Braghin - Architettura dell'informazione 105 36

C. Braghin - Architettura dell'informazione 106 YOU ARE HERE C. Braghin - Architettura dell'informazione 107 37

Breadcrumbs Il percorso seguito per arrivare alla pagina corrente (normalmente all interno di una struttura gerarchica Esempio: home > prodotti > elettronica > TV Normalmente è cliccabile (orientamento + navigazione) C. Braghin - Architettura dell'informazione 108 BREADCRUMBS C. Braghin - Architettura dell'informazione 109 38

BREADCRUMBS C. Braghin - Architettura dell'informazione 110 Landmarks Elementi fortemente riconoscibili, visibili da lontano, che possono essere utilizzati per orientamento C. Braghin - Architettura dell'informazione 111 39