Musei e multimedia: progettare e comunicare Hoc-Hypermedia Open Center Dipartimento di Elettronica e Informazione Politecnico di Milano http://hoc.elet.polimi.it Francesca Alonzo alonzo@mail2.elet.polimi.it F. Alonzo - Hoc - Politecnico Milano

F. Alonzo - Hoc - Politecnico Milano Presentazione Problemi aperti HDM: un modello di progettazione Design patterns Grafica e contenuti Usabilità F. Alonzo - Hoc - Politecnico Milano

Ipertesti e Ipermedia: problemi aperti Assenza di metodologie di progettazione e sviluppo Nessuna consolidata metodologia di realizzazione Assenza di schema Manca una descrizione ad alto livello delle informazioni contenute nell’applicazione e di come sono organizzate Disorientamento Mappe e grafici per orientare l’utente Difficoltà di accesso alle informazione cercate F. Alonzo - Hoc - Politecnico Milano

Tecnologia e cultura: problematiche Incomprensione tra informatici e umanisti (scienziati) Difficoltà nel cogliere le opportunità offerte dalle nuove tecnologie per mancanza di conoscenza del potenziale offerto dalla multimedialità e conseguente incapacità di formulare delle richieste precise sui contenuti Contenuti inadeguati Difficoltà nel produrre contenuti adatti al mezzo multimediale: ad esempio, testi sintetici e di buon impatto comunicativo Difficoltà a valutare la qualità delle proposte tecniche Scarsa conoscenza del mercato software da parte degli umanisti F. Alonzo - Hoc - Politecnico Milano

F. Alonzo - Hoc - Politecnico Milano Prima di progettare Requisiti Obiettivi Utenti Contesto applicativo F. Alonzo - Hoc - Politecnico Milano

Modello 5 W: Who, Why, What, Where, When WHO: Chi sono i destinatari dell’applicazione WHAT: Cosa di quali informazioni ha bisogno il destinatario cosa dovrà contenere l’applicazione: informazioni, media, modalità di accesso WHY: Perché l’utente utilizzerà il prodotto perché queste informazioni sono utili WHERE: Dove s’immagini venga fruita l’opera WHEN: Quando (e per quanto tempo) l’utente esaminerà il prodotto F. Alonzo - Hoc - Politecnico Milano

HDM-Hypermedia Design Model Obiettivi Metodo Presentazione Hyperbase Link strutturali Link semantici Strutture d’accesso Slot F. Alonzo - Hoc - Politecnico Milano

F. Alonzo - Hoc - Politecnico Milano Obiettivi Progettare un'applicazione ipermediale (WWW, Cd Rom, DVD) Descrivere le caratteristiche relative all'applicazione Descrivere la dinamica dell'applicazione Progettare in HDM è utile per alcuni motivi: 1) migliorare la comunicazione con il cliente 2) migliorare la comunicazione con la squadra di implementazione 3) migliorare la qualità/usabilità 4) migliorare la comunicazione con lo staff 5) risparmiare tempo in fase progettuale 6) permettere la valutazione immediata sulla qualità delle scelte F. Alonzo - Hoc - Politecnico Milano

F. Alonzo - Hoc - Politecnico Milano HDM-metodo HDM definisce 5 dimensioni di un’applicazione multimediale: 1 STRUTTURA organizzazione globale del contenuto quale appare nell’utilizzo 2 NAVIGAZIONE definizione dei paradigmi di esplorazione e dei collegamenti a disposizione dell’utente per muoversi nell’applicazione 3 COMPORTAMENTO dinamiche dei media e dei collegamenti 4 CONTROLLO interazione, cioè le operazioni fornite agli utenti per controllare l’applicazione 5 ASPETTO presentazione grafica e proprietà visive F. Alonzo - Hoc - Politecnico Milano

F. Alonzo - Hoc - Politecnico Milano HDM: la struttura (1) Due livelli di progettazione: in the large in the small IPERBASE (in the large) struttura portante dell’applicazione insieme degli oggetti che ne costituiscono il contenuto organizzazione del contenuto stesso decisioni strategiche IPERBASE e costituita da tipi di Entità ad es. in un ipermedia d’arte, un acquerello potrebbe essere un oggetto dell’entità “quadro” F. Alonzo - Hoc - Politecnico Milano

F. Alonzo - Hoc - Politecnico Milano HDM: la struttura (2) ENTITA’ semplici o complesse: componenti organizzate in una struttura propria Mono-COMPONENTE ad es. l’entità QUADRO potrebbero comprendere solo informazioni generiche Un Componente è un insieme di informazioni percepite come un’unità concettuale dall’utente (ad es. la vita di un pittore) Un componente non è un’unità indipendente, quando l’Entità è costituita da altre componenti F. Alonzo - Hoc - Politecnico Milano

F. Alonzo - Hoc - Politecnico Milano HDM: la struttura (3) Componente costituito da NODI (in the small) NODO l’unità di fruizione di base (pagina-schermata) un componente può essere costituito da più nodi informativi NODO: diversi segmenti di informazioni strutturate La struttura dei segmenti è data da FRAME, elementi di contenuto, costituiti da SLOT (ad es. una pagina che contiene un frame di animazione può essere composto da slot con comandi per azionarlo e dallo slot filmato) F. Alonzo - Hoc - Politecnico Milano

HDM: strutture d’accesso modalità e strutture per raggiungere il contenuto informativo dell’iperbase (ad es. in un Cd d’arte gli indici alfabetici delle opere che portano ai quadri) Le strutture d’accesso sono costituite da COLLEZIONI insieme di oggetti detti MEMBRI che posso essere elementi dell’iperbase o di altre collezioni Le COLLEZIONI presentano: insieme dei membri centro di collezione collegamento tra il centro e i membri e questi tra loro (ad es. collezione di pittori del Cinquecento) F. Alonzo - Hoc - Politecnico Milano

F. Alonzo - Hoc - Politecnico Milano HDM: navigazione Navigazione: collegamenti tra gli oggetti di un’applicazione e le regole per percorrerli Link strutturali link tra componenti di Entità Link semantici link che connettono Entità diverse tra loro (ad esempio, relazione semantica tra Pittore e Opera) Link di collezione indice guided tour Orientamento e percezione della posizione da parte dell’utente F. Alonzo - Hoc - Politecnico Milano

F. Alonzo - Hoc - Politecnico Milano HDM: comportamento Comportamento: dinamica interna dell’applicazione Dinamica dei nodi regole di attivazione e disattivazione (quando si entra per la prima volta, la seconda e durante la navigazione) back Comportamento degli slot testo+audio testo-audio video+audio+testo F. Alonzo - Hoc - Politecnico Milano

F. Alonzo - Hoc - Politecnico Milano HDM: aspetto Comunicazione visiva e interfacce Rappresentazione grafica dei singoli nodi Disposizione e definizione spaziale degli oggetti bottoni, menù, finestre… modifiche dovute all’interazione F. Alonzo - Hoc - Politecnico Milano

F. Alonzo - Hoc - Politecnico Milano HDM: interazione Interazione: comandi e possibilità operative a disposizione dell’utente Tipologia di slot: passivi (testo, frasi o immagini) attivi (animazioni, video) reattivi (controllati dall’utente, grafica interattiva) F. Alonzo - Hoc - Politecnico Milano

Schema dell’applicazione Lo schema di un’applicazione. In the large: hyperbase, strutture d’accesso, link semantici, link strutturali e di collezione... In the small: nodi, comportamento degli slot F. Alonzo - Hoc - Politecnico Milano

F. Alonzo - Hoc - Politecnico Milano HYPERBASE: Entità Entità semplici e complesse Componenti F. Alonzo - Hoc - Politecnico Milano

F. Alonzo - Hoc - Politecnico Milano Entità (1) L’HYPERBASE è costituito da ENTITA’ raggruppate per tipi L’Entità corrisponde ad un oggetto distinto del mondo dell’applicazione Esempi di Entità: un pittore oppure un’opera d’arte in un Cd Rom d’arte; un animale in un sito di biologia F. Alonzo - Hoc - Politecnico Milano

F. Alonzo - Hoc - Politecnico Milano Entità (2) Tipo di Entità: entità con caratteristiche simili nella prima fase di progettazione viene definito solo il TIPO, in seguito vengono specificate le caratteristiche dei diversi esemplari Esempio: in un ipermedia d’arte, un acquerello potrebbe far parte di un tipo di entità “Quadro”. Nello stesso ipermedia ci possono essere altri tipi di entità come “Pittore” di cui fa parte Caravaggio, Raffaello... F. Alonzo - Hoc - Politecnico Milano

F. Alonzo - Hoc - Politecnico Milano Entità isolate (1) Le Entità isolate sono create soprattutto nelle applicazioni complesse Oggetti non facilmente tipizzabili Esempi: la biografia di Leonardo da Vinci. Entità elementare che consiste di parecchie pagine di testo; la presentazione del museo, il bookshop... E’ meglio evitare di crearne troppe per non appesantire l’hyperbase e complicare la navigazione F. Alonzo - Hoc - Politecnico Milano

F. Alonzo - Hoc - Politecnico Milano Componenti (1) Entità possono essere oggetti semplici o complessi Entità sono costituite da COMPONENTI organizzate in una struttura propria Entità monocomponente Esempio: in un ipermedia d’arte, l’ entità “Opera” potrebbe riguardare soltanto informazioni generali (componente) F. Alonzo - Hoc - Politecnico Milano

F. Alonzo - Hoc - Politecnico Milano Componente (2) Una Componente è un insieme di informazioni percepite dall’utente come unità concettuale Esempio: la biografia di un pittore o la storia di una battaglia... Entità e componente coincidono quando l’entità è monocomponente F. Alonzo - Hoc - Politecnico Milano

F. Alonzo - Hoc - Politecnico Milano Componenti (3) Una componente può essere suddivisa in subcomponenti che sono "parte di essa" Una componente è costituita da un NODO(i) che rappresenta l’unità di fruizione di base (pagina-schermata) F. Alonzo - Hoc - Politecnico Milano

F. Alonzo - Hoc - Politecnico Milano Nodo Il NODO è rappresentato da una pagina-schermata e descrive una componente di Entità o più componenti della stessa In una componente con più Nodi questi sono organizzati in una struttura della quale viene scelto quello più rappresentativo (punto di inizio della navigazione) Esempio: per consultare la vita di un pittore si accede (sempre oppure no) prima ad un nodo rappresentato da una sua foto con la data di nascita e di morte? F. Alonzo - Hoc - Politecnico Milano

F. Alonzo - Hoc - Politecnico Milano Tipi di componente Componenti simili per significato costituiscono un tipo di componente e sono strutturati in maniera simile (ad esempio: biografia, storia...) Tipo di componente è costituito da: un nome, la definizione della sua struttura, i tipi di nodi, l’identificazione del nodo rappresentativo F. Alonzo - Hoc - Politecnico Milano

F. Alonzo - Hoc - Politecnico Milano Link strutturali I legami strutturali (structural links) connettono componenti della stessa Entità Data una topologia di componente, ci sono parecchi modi per organizzare la navigazione Sequenza, salti (primo nodo...) I collegamenti strutturali definiscono i particolari del percorso di navigazione tra i contenuti I collegamenti strutturali devono condurre facilmente l’utente all’informazione Percorsi semplici o complessi F. Alonzo - Hoc - Politecnico Milano

F. Alonzo - Hoc - Politecnico Milano Link semantici (1) I link semantici collegano Entità diverse tra loro Rappresentano una relazione semantica tra oggetti Creano una navigazione articolata Creano dei percorsi di lettura Esempio: link che connettono l’opera d’arte all’artista (collegamento bidirezionale: “è stata realizzata da”, “”ha realizzato”). Link tra habitat naturali e animali (collegamento bidirezionale: “chi vi vive”, “dove vive”) F. Alonzo - Hoc - Politecnico Milano

F. Alonzo - Hoc - Politecnico Milano Link semantici (2) I collegamenti semantici sono “percorsi di percorso”, quindi non devono essere ridondanti Evitare di collegare tutto a tutto I link semantici generici possono creare disorientamento (cambiamento di contesto) Esempio: collegamento di approfondimento con la vita di un personaggio, che partecipa ad un evento, all’interno della descrizione dell’evento stesso F. Alonzo - Hoc - Politecnico Milano

F. Alonzo - Hoc - Politecnico Milano Strutture d’accesso Utilizzo Collezioni Struttura Navigazione F. Alonzo - Hoc - Politecnico Milano

Strutture d’accesso (1) Strutture che permettono all’utente di accedere al contenuto dell’hyperbase Costituite da Collezioni Organizzazione dell’applicazione percepita dall’utente Percorsi di “lettura” Esempio: in un ipermedia d’arte ci possono essere collezioni organizzate per correnti pittoriche oppure per indici alfabetici F. Alonzo - Hoc - Politecnico Milano

Strutture d’accesso (2) Usabilità del sistema dipende da queste strutture Sono facilmente modificabili La modifica non implica il cambiamento della struttura dell’hyperbase dell’applicazione F. Alonzo - Hoc - Politecnico Milano

Strutture d’accesso: collezioni (1) Le Collezioni sono costituite da: il nome, l’insieme dei suoi membri, il centro della collezione, i link dal centro ai membri e questi tra loro F. Alonzo - Hoc - Politecnico Milano

Strutture d’accesso: collezioni (2) Le Collezioni sono un insieme di oggetti denominati Membri I Membri sono elementi dell’hyperbase oppure di altre collezioni Esempio: una raccolta di collezioni per correnti artistiche (gotico, barocco, neoclassico) che porta alla fruizione delle opere, la definiamo Collezione di collezione; un indice alfabetico delle opere è una Collezione di Entità F. Alonzo - Hoc - Politecnico Milano

Strutture d’accesso: membro di collezione Un oggetto di collezione può appartenere a parecchi contesti Un oggetto può essere membro in maniera DIVERSA di molte collezioni Esempio: un’opera d’arte può rappresentare in una collezione un esempio di stile e in un’altra l’espressione di un periodo storico o di un movimento pittorico F. Alonzo - Hoc - Politecnico Milano

Strutture d’accesso: centro di collezione (2) Il Centro di una collezione è un Nodo o una serie di nodi Nel Nodo/i vengono presentati i membri della collezione Informazione sul raggruppamento dei membri Esempio: in un ipermedia d’arte una collezione di pittori impressionisti può rappresentare una descrizione del concetto e delle caratteristiche comuni a questi pittori F. Alonzo - Hoc - Politecnico Milano

Collezioni normali e speciali (1) Le Collezioni normali sono costituite da un insieme definito e stabile di membri immodificabili nel corso dell’utilizzo Le Collezioni speciali: i membri vengono determinati dinamicamente in base a regole definite in fase di progettazione Esempio: la registrazione della “storia” della sessione di utilizzo. Tutti i passi compiuti dall’utente vengono registrati durante la fruizione dell’applicazione e possono essere ripercorsi F. Alonzo - Hoc - Politecnico Milano

Collezioni speciali (1) Le Collezioni speciali: risultati di ricerche dinamiche Esempio: l’utente può interrogare l’applicazione chiedendo di selezionare solo oggetti che rispondano ad una certa caratteristica F. Alonzo - Hoc - Politecnico Milano

Collezioni speciali (2) Le Collezioni speciali: creazione di collezioni da parte dell’utente Esempio: l’utente può “raccogliere” gli oggetti in un “Album” e aggiungervi note; può collegarsi ad Internet e scaricare gli aggiornamenti relativi ad un particolare argomento F. Alonzo - Hoc - Politecnico Milano

Collezioni e Navigazione(1) I collegamenti tra i membri di una collezione sono definiti link di collezione Due tipi di link: collegamenti ad indice collegamenti topologici F. Alonzo - Hoc - Politecnico Milano

Collezioni e Navigazione (2) Collegamenti ad indice connessione tra il Nodo di collezione (centro) ad ogni nodo dei membri e viceversa Esempio: un indice alfabetico di autori porta alla scelta dell’autore e il ritorno all’indice e viceversa F. Alonzo - Hoc - Politecnico Milano

Collezioni e Navigazione (3) Collegamenti topologici connessione tra i Nodi dei membri secondo la topologia della collezione non è sempre necessario il ritorno al centro di collezione Esempio: una visita guidata (guided tour) cioè una collezione che raggruppa un certo numero di opere dà la possibilità di passare direttamente da una altra secondo un ordine stabilito (centro al primo membro e ultimo membro al centro) F. Alonzo - Hoc - Politecnico Milano

Collezioni e Navigazione (4) Guided tour sono più adatti ad utente inesperto Permette la fruizione “guidata” del contenuto La navigazione guidata può essere resa automatica con un comando di “seguente” attivato automaticamente dal sistema Esempio: una visita guidata (guided tour) con commento audio F. Alonzo - Hoc - Politecnico Milano

Progettare Collezioni (1) Porsi dal punto di vista dell'utente Creare come un “autore” diversi percorsi di lettura La selezione di una collezione è una funzione fondamentale per l’identificazione del contesto di interesse F. Alonzo - Hoc - Politecnico Milano

Progettare Collezioni (2) La creazione di una collezione è un atto cosciente ed esplicito del progettista L'utente può percepire l'insieme dei membri (collezione) come "insignificante" Esempio: Leonardo appartiene a tutti i pittori elencati nell'ordine alfabetico L’utente può ricavare un’informazione in più Esempio: Leonardo appartiene ai pittori della Toscana F. Alonzo - Hoc - Politecnico Milano

Progettare Collezioni (3) L'utente può aspettarsi informazioni organizzate in modo articolato Richiedere un percorso con stili differenti Le collezione ad indice, il guided tour e la ricerca diretta possono diventare un’alternativa di accesso per individuare lo stesso oggetto F. Alonzo - Hoc - Politecnico Milano

F. Alonzo - Hoc - Politecnico Milano Slot Gli Slot sono elementi di base di contenuto dell’applicazione e possono essere creati a partire da altri slot Esempio: uno slot di un’immagine che mostri parte di un’immagine più grande contenuta in un altro slot dell’ipermedia F. Alonzo - Hoc - Politecnico Milano

Dinamica: nodi e slot (1) In HDM il comportamento dei nodi e degli slot viene definito nella progettazione in the small Nodi: il comportamento fissa le regole di attivazione e disattivazione stato in cui si trovano gli slot e i frame del segmento visivo quando l’utente fruisce dell'applicazione F. Alonzo - Hoc - Politecnico Milano

Dinamica: nodi e slot (2) Definire le regole in 4 casi: quando il nodo è attivato per la prima volta quando il nodo viene rivisitato durante la navigazione o la ricerca quando il nodo viene lasciato Esempio: la prima volta che si entra in un’entità opera viene presentato come primo nodo il “commento” (slot costituito da immagine + audio non controllabile); quando si accede successivamente cosa può succede? F. Alonzo - Hoc - Politecnico Milano

Dinamica: nodi e slot (3) Slot passivi privi di caratteri dinamici: testo, numeri, frasi o immagini statiche Slot attivi modifica in modo lineare nel corso dell’utilizzo implicano l’attivazione (slot audio, video) Slot reattivi sottoinsieme di quelli attivi controllati dall’utente (slot audio/video, grafica interattiva) slot a basso controllo slot a controllo complesso (avanti, indietro, pausa...) F. Alonzo - Hoc - Politecnico Milano

F. Alonzo - Hoc - Politecnico Milano Design patterns soluzioni generali per problemi generali F. Alonzo - Hoc - Politecnico Milano

Design patterns: soluzioni pronte per l’uso Punto di partenza: capire cosa c’è dietro ogni scelta di progettazione Esempio: organizzare una collezione di oggetti (ad esempio prodotti) cercando di prevedere cosa può desiderare (o fare) con questa collezione l'utente? Quali dati possono essere raccolti? Come strutturarli, come renderli “navigabili” Come presentarli all’utente Scomporre il problema in sotto-problemi Informazione (Contenuto), Navigazione, Presentazione visiva, Funzionalità F. Alonzo - Hoc - Politecnico Milano

Design Patterns: esempio http://www.louvre.fr/ F. Alonzo - Hoc - Politecnico Milano

Design patterns: tipologie Patterns di contenuto Patterns strutturali Patterns di navigazione Patterns di Lay-out Spesso sono correlati F. Alonzo - Hoc - Politecnico Milano

Design Patterns: definizioni “Un pattern è una “nocciolina” di comprensione che porta all'essenza di una soluzione provata per un problema che ricorre all'interno di un determinato contesto in mezzo a preoccupazioni concorrenti”* “A pattern is a named nugget of insight that conveys the essence of a proven solution to a recurring problem within a certain context amid competing concerns” *Appleton, Brad. Patterns in a Nutshell. Appleton, B. 13 Apr. 2000. <http://www.enteract.com/~bradapp/docs/patterns-nutshell.html> F. Alonzo - Hoc - Politecnico Milano

Perché usare i Design Patterns Riuso di artefatti concettuali Progettare con i Patterns: può migliorare la qualità del design risparmio tempi e costi del design risparmio tempi e costi dell'implementazione Aumentare la comunicazione fra i progettisti DPs contribuisce a colmare la LACUNA fra i requisiti e il design Cercare nuove idee di design per modificare senza partire da zero F. Alonzo - Hoc - Politecnico Milano

Pattern: descrizione del template Nome Problema dichiarato Soluzioni (+ varianti) Discussione dei vantaggi e degli svantaggi Applicazioni d’esempio Patterns connessi F. Alonzo - Hoc - Politecnico Milano

Guided tour: soluzione di base Member 1 Member 2 Member n . . . F. Alonzo - Hoc - Politecnico Milano

Guided tour soluzione di base: esempio URL: www.nga.gov/feature/artnation/splash.htm Guided Tour: The Dance Lesson, di Edgar Degas Navigazione strutturale: Entitiy type (“quadro studio in dettaglio”) fatta di 20 componenti Ogni componente è un membro del GT “strutturale” GT con 20 membri (c.a: 40 s/nodo  c.a 15 min fruizione) F. Alonzo - Hoc - Politecnico Milano

Guided tour soluzione base: discussione Soluzione di base: Vantaggi Efficace per i nodi richiesti per una veloce fruizione overviews del prodotto, galleria, prima presentazione, servizio demo Efficace per una collezione con precise coerenze semantiche Corrisponde a “Narrazione efficace”, “Case History”, originale “dispositio” Se la navigazione sequenziale è essenziale per cogliere il messaggio F. Alonzo - Hoc - Politecnico Milano

Guided tour soluzione base: discussione Soluzione di base: Svantaggi Utente accede direttamente dal primo membro del tour Utente non può sapere a priori la topologia di collezione numero di membri ordine dei membri Rischio di far perdere l’orientamento trattandosi di un nodo molto complesso F. Alonzo - Hoc - Politecnico Milano

F. Alonzo - Hoc - Politecnico Milano Guided tour: Variante Tour ciclico Member 1 Member 2 Member n . . . F. Alonzo - Hoc - Politecnico Milano

F. Alonzo - Hoc - Politecnico Milano Guided tour: Variante Punto di partenza esterno all’insieme dei membri: Centro di collezione Member 1 Member 2 Member n . . . Collection Centre F. Alonzo - Hoc - Politecnico Milano

F. Alonzo - Hoc - Politecnico Milano Guided tour: esempio Punto di partenza: Centro di collezione http://www.nga.gov/collection/gallery/gg50/gg50-main1.html Collezione: gruppo di entity types “Quadro” Centro di collezione fatto di DUE nodi (di rado) Pochi membri Backgroud storico, artistico per presentare il Tour F. Alonzo - Hoc - Politecnico Milano

F. Alonzo - Hoc - Politecnico Milano Guided tour: esempio 1 F. Alonzo - Hoc - Politecnico Milano

Guided tour: discussione Punto di partenza Centro di collezione: vantaggi Il Centro di collezione può spiegare il senso del Tour Realizzare un’introduzione al Tour Overview del contenuto, messaggio di pre-fruizione Prevista una visual/textual preview di alcuni oggetti Efficace per piccole e grandi collezioni Efficace e di solito combinata con un Index Navigation Pattern F. Alonzo - Hoc - Politecnico Milano

Guided tour: discussione Punto di partenza Centro di collezione: svantaggi Navigazione ridondante per una collezione piccola Inefficiente per forti sessioni task-oriented Raro in assenza di Index Navigation (vedi patterns successivi) F. Alonzo - Hoc - Politecnico Milano

F. Alonzo - Hoc - Politecnico Milano Guided tour: Variante Dall’ultimo elemento della collezione Collection Centre Member 1 Member 2 Member n . . . F. Alonzo - Hoc - Politecnico Milano

Indice di navigazione: soluzione di base Collection Centre Member 1 Member 2 . . . Member n F. Alonzo - Hoc - Politecnico Milano

Indice di navigazione: soluzione di base (esempio) http://www.louvre.fr/ . . . F. Alonzo - Hoc - Politecnico Milano

Indice di navigazione: discussione Soluzione di base: vantaggi Ogni membro della collezione è raggiungibile attraverso un click Sinergia tra la funzione di overview e la funzione di l'accesso nel centro di collezione F. Alonzo - Hoc - Politecnico Milano

Indice di navigazione: discussione Soluzione di base: svantaggi Una volta raggiunto l’oggetto, è necessario tornare indietro al centro per andare ad un altro oggetto. Quasi mai viene usato per il Web (per l’usabilità e per non rallentare la performance) Molto usato per gli hypermedia off-line F. Alonzo - Hoc - Politecnico Milano

Indice di navigazione: varianti (esempio) F. Alonzo - Hoc - Politecnico Milano

Indice di navigazione: discussione “Embedded Index” Vantaggi La funzione di accesso del centro di collezione è embedded in ogni membro Navigazione accelerata, per evitare di fare un passo indietro per andare al centro di collezione Diverso supporto per le varie interfacce Soluzione scalabile (facilmente applicabile anche per collezioni nidificate) Ampiamente utilizzato in molte Web sites/application F. Alonzo - Hoc - Politecnico Milano

Indice di navigazione: discussione “Embedded Index”: svantaggi Il prezioso spazio del layout in ogni membro dovrebbe essere dedicato all'insieme dei link di collezione F. Alonzo - Hoc - Politecnico Milano

Guided tour misto: indice e GT Problema: realizzare una struttura di navigazione di semplice utilizzo da vari tipi di utenti: utenti che vogliono esplorare la collezione in modo esaustivo, utenti che hanno un’attitudine “passiva” e utenti che hanno interesse per un sotto-insieme della collezione (non conosciuto a-priori) oppure per uno specifico oggetto. Soluzione: Definire un ordine tra i membri della collezione e creare una pagina come un indice o un guided tour; aggiungere i links dal centro al primo membro e da questo ai successivi, e da ogni membro agli altri e al centro di collezione (e viceversa) F. Alonzo - Hoc - Politecnico Milano

Guided tour misto: esempio http://www.nga.gov/collection/gallery/cassatt/cassatt-main1.html F. Alonzo - Hoc - Politecnico Milano

Guided tour misto: esempio 1 http://www.nga.gov/collection/gallery/cassatt/cassatt-33364.0.html F. Alonzo - Hoc - Politecnico Milano

F. Alonzo - Hoc - Politecnico Milano Contenuti Domande per stabilire la validità dei contenuti di un’applicazione ipermediale culturale: Il contenuto è sufficientemente ampio e approfondito? Le informazioni sono precise ed aggiornate? I testi sono chiari, accurati e corretti La presentazione è concepita per un determinato target (oppure per più target: multisito)? I messaggi sono comunicati in maniera corretta Fonte: M.Forte e M. Franzoni F. Alonzo - Hoc - Politecnico Milano

Contenuti di un sito museale (1) Contenuti dettagliati: Informazioni pratiche: indirizzo, localizzazione, ingresso, orari, tariffe... Il museo: storia, architettura, distribuzione logistica e spaziale delle sale Le collezioni: informazioni generali, storia, composizione, catalogo, database, visita, scelte museografiche Le mostre: passate, presenti, future, online Le attività e i programmi educativi: divulgativi, didattici, di ricerca, online, differenziati per categoria di utenti I servizi: biblioteca, pubblicazioni, archivio, museum shop, ristoranti Le news: museo, collezioni, programmi, sito Fonte: M.Forte e M. Franzoni F. Alonzo - Hoc - Politecnico Milano

Contenuti di un sito museale (2) Tre categorie di siti in base a: presenza assenza di alcuni argomenti, grado di approfondimento e differenziazione in base all’utenza Siti generici: informazioni di carattere pratico; livello generico per le collezioni, le mostre i programmi. Nessuna specifica utenza Siti per approfondimenti parziali: molti gli argomenti trattati alcuni in modo dettagliato (collezioni, mostre, programmi, news) Siti esaustivi: trattazione articolata e linguaggi diversi a seconda dell’utenza Fonte: M.Forte e M. Franzoni F. Alonzo - Hoc - Politecnico Milano

Grafica e layout la “REGOLA” Alcuni esperti propongono di sistemare gli Oggetti Interattivi nei 4 quadranti del layout rispettando le seguenti percentuali di riempimento: primo quadrante: 45% secondo: 20% terzo: 25% quarto: 15% La tecnica di preferenza dei quadranti si basa sull’esperienza che l’occhio umano privilegia il quadrante in alto a sinistra F. Alonzo - Hoc - Politecnico Milano

Grafica e Interattività un modo per guidare l’utente alla lettura del contenuto; un modo per spiegare come compiere percorsi all’interno del contenuto; un modo per interagire a livelli più articolati e profondi della semplice selezione Grafica: in fase di progettazione di un’applicazione multimediale è importante individuare: una distinzione tra indicazioni di percorso e indicazioni di navigazione le metafore utilizzate per presentare il contenuto. F. Alonzo - Hoc - Politecnico Milano

Grafica e Interattività (1) APPARENZA FUNZIONI Software Mappatura percettiva Mappatura concettuale Icona Metafora F. Alonzo - Hoc - Politecnico Milano

Grafica e Interattività: valutare (3) Interfaccia utente di un’applicazione ipermediale L’interfaccia utente è coerente ed appropriata per presentare l’argomento? L'impiego di metafore tratte dal reale è efficace? Le icone usate con funzione di comandi sono comprensibili? La qualità della grafica, delle immagini e dei suoni è adeguata Il testo è leggibile (carattere, dimensione, layout, stile)? Il design complessivo è attraente ed efficace? I diversi media impiegati si integrano in modo armonico Il grado di interattività è adatto ai diversi livelli di utenza Fonte: M.Forte e M. Franzoni F. Alonzo - Hoc - Politecnico Milano

Grafica e layout tipologia di Siti museali (1) Tre categorie di siti: Siti tradizionali: layout generale come libro stampato; scarso rilievo alle immagini; trattazione omogenea del contenuto; disegni e icone di tipo statico Siti moderni: layout generale riprende stile della carta stampata disegni e icone statiche e dinamiche grafica diversa rispetto all’utenza Siti contemporanei: utilizzo novità sw testi e immagini elaborati uso del colore grafica bi/tridimensionale Fonte: M.Forte e M. Franzoni F. Alonzo - Hoc - Politecnico Milano

Grafica e layout tipologia di Siti museali (2) Dati e Considerazioni: Siti contemporanei 24% Siti moderni 32% Siti tradizionali 44% Mancanza di risorse economiche Mancanza di professionalità specifiche all’interno dei musei Fonte: M.Forte e M. Franzoni F. Alonzo - Hoc - Politecnico Milano

Metropolitan Museum - New York www.metmuseum.org F. Alonzo - Hoc - Politecnico Milano

Metropolitan Museum - New York www.metmuseum.org Gli obiettivi: confermare l’IMMAGINE del museo PROMUOVERE le raccolte PUBBLICIZZARE tutte le attività scientifiche e didattiche organizzate DIVULGARE informazioni utili per la visita alle collezioni, alle mostre e agli eventi ed attività correlati FIDELIZZARE il pubblico rispetto al museo e allo stesso sito offrire supporti didattici per insegnanti e studenti pubblicizzare l’associazione degli amici del museo e raccogliere ISCRIZIONI ON LINE promuovere raccolte di FONDI in favore del museo pubblicizzare e VENDERE prodotti on-line offrire diversi SERVIZI on-line (prenotazione visite guidate, invio informazioni e newsletter in e-mail, invio di avvisi su eventi segnalati dall’utente, trasmissioni di e-mail informative ad amici attraverso il sito, ricerca bibliografica e in parte catalografica) F. Alonzo - Hoc - Politecnico Milano

Metmuseum.org: utenza (1) visitatori abituali visitatori potenziali insegnanti studenti appassionati mecenati interessati generici ricercatori e specialisti possono contare su informazioni ben congegnate, un ricco archivio di immagini e di schede e la possibilità di compiere ricerche bibliografiche (non è il target privilegiato) F. Alonzo - Hoc - Politecnico Milano

Metmuseum.org: utenza (2) OBIETTIVO: FIDELIZZARE Offerta di un particolare APPROFONDIMENTO relativo a un’opera d’arte ogni giorno diversa Possibilità di costruire all’interno del sito una RACCOLTA di immagini PERSONALIZZATA Possibilità di iscriversi a un guest-book e di ricevere informazioni personalizzate via e-mail attività di fidelizzazione rivolte a un pubblico di visitatori abituali del sito, se non del museo. Per i frequentatori abituali del museo aggiornamenti sull'attività e notizie sulle mostre sono immediatamente raggiungibili, mentre per i visitatori occasionali la chiarezza e la sintesi delle informazioni aumentano il gradimento del sito e la sensazione della sua utilità. Uso di vari livelli e modalità di accesso rispetto alle molte informazioni contenute nel sito consente con facilità una visita mirata, personalizzata e soddisfacente, così che ogni segmento di pubblico può facilmente orientarsi e trovare un’adeguata risposta alle proprie attese. F. Alonzo - Hoc - Politecnico Milano

Metmuseum.org: utenza (3) Motivazioni dell’utente e situazioni d’uso: L’utente può rivolgersi a questo sito per: ottenere informazioni sulle collezioni e su tutte le ATTIVITA’ del museo APPROFONDIRE alcuni argomenti specifici legati alle raccolte organizzare una visita prenotare una visita guidata costruirsi un CALENDARIO personalizzato per partecipare alle attività offerte dal museo, ricevere avvertimenti-promemoria sugli eventi prescelti e comunicare una notizia relativa al museo ad un amico ISCRIVERSI a programmi di concerti e conferenze compiere RICERCHE ad uso scolastico avvalersi di strumenti multimediali per la DIDATTICA iscriversi all’associazione del museo compiere ricerche catalografiche e bibliografiche ACQUISTARE i prodotti del museo offrire contributi in denaro a supporto delle attività del museo La visita al sito può essere compiuta a casa, singolarmente o in gruppo. E’ possibile utilizzare il sito, però, anche per valutazioni aziendali di sponsorizzazione e per attività scolastiche o didattiche in genere. F. Alonzo - Hoc - Politecnico Milano

Metmuseum.org: contenuti Le INFORMAZIONI sono bene organizzate La SEGMENTAZIONE dei contenuti permette la facilità nel trovare le notizie desiderate e i relativi livelli di approfondimento La STRATEGIA COMUNICATIVA (chiarezza ed eleganza di presentazione, efficienza e usabilità) è funzionale agli obiettivi ed è aderente alla effettiva qualità del museo. La necessità di raccogliere FONDI e finanziamenti non viene mai mascherata, ma la strategia commerciale prescelta risulta rispettosa dell’altissimo valore culturale del museo: puntando sul mecenatismo degli appassionati, sulla possibilità di coinvolgere i visitatori in un “club” di sicuro prestigio e con finalità universalmente approvate, sulla qualità, l’estetica e il glamour dei prodotti venduti. F. Alonzo - Hoc - Politecnico Milano

Metmuseum.org: funzionalità Funzionalità aggiuntive “CLUB VIRTUALE”: informazioni direttamente al proprio indirizzo di posta elettronica e di venire “riconosciuto” dal sito per avere spazi autogestiti al suo interno. Costruire un proprio CALENDARIO per partecipare alle attività del museo (visite guidate, conferenze), con la possibilità di ricevere dal sito un segnale-sveglia o di trasmettere dal sito stesso l’informazione su un’attività prescelta ad un’altra persona via e-mail. Attività DIDATTICHE praticabili attraverso il sito, con la possibilità di inviare anche commenti via e-mail nella sezione educativa. L’AGGIORNAMENTO del sito, puntuale ed efficace: la copertina con la presentazione di una nuova opera e un nuovo colore di fondo ogni giorno e il “poster” linkabile sulla mostra del momento... La grafica sobria ma varia, i menù e gli indici ben leggibili e ben distribuiti, la facilità dei percorsi d’accesso, la chiarezza delle informazioni, l‘uso di colori di fondo diversi per i vari argomenti, la velocità di caricamento F. Alonzo - Hoc - Politecnico Milano

Metmuseum.org: navigazione Centri di collezione Navigazione ad indice   1.     The Collection 2.     The Met Store / Books 3.      Events and Programs 4.      Educational Resources Navigazione a Guided Tour 1. The Collection / American Decorative Arts / View 1at a time 2. Explore and Learn / A Look at Chinese Painting / Why there’s only writing in this image? F. Alonzo - Hoc - Politecnico Milano