Produrre multimedia
Fare ricerca. Design della grafica.
Design dell’interfaccia. Produzione
di video. Produzione di audio.
Scrivere testi. Sviluppo di software.
...
gennaio ’00
Produzione MM
1
La terminologia
• Testo vs multimedia
• Ipertesto vs ipermedia
• Il termine ipertesto è introdotto da Nelson
nel 1965
• Il lavoro di Engelbart a SRI, anni ’60 e ‘70
• L’idea originale di V. Bush del 1945
• As we may think, Atlantic Monthly 176, July 1945, 101-108
gennaio ’00
Produzione MM
2
Il processo di produzione
• Disegno del contenuto
Cosa e’ il prodotto?
• Disegno dell’interazione
Come deve funzionare?
• Disegno della presentazione
Come deve apparire?
gennaio ’00
Produzione MM
3
Disegno del contenuto
L’essenza di un multimedia è raccontare, insegnare,
vendere, informare nel modo piu’ efficace possibile.
• Definire gli obiettivi di comunicazione
• Definire l’organizzazione del contenuto di
conseguenza
Il processo di produzione
gennaio ’00
Produzione MM
4
Passi critici del disegno del
contenuto
• Definizione degli obiettivi del prodotto
• Messaggio e scopo
• Specifica dell’utenza
• Il bisogno di informazione e gli interessi
• Scelta degli strumenti
• Di sviluppo e di fruizione (internet, CD-ROM, DVD ...)
• Produrre un flowchart della struttura
gennaio ’00
Produzione MM
5
Definizione dell’obiettivo
• L’obiettivo è uno strumento per valutare ogni
decisione.
• Questa soluzione va nella direzione finale?
• E per non perdersi tra molte idee.
Non confondere un possibile punto di partenza con
l’obiettivo, il punto di arrivo.
Ad esempio, trasformare un catalogo su carta in uno
interattivo e multimediale è un punto di partenza.
gennaio ’00
Produzione MM
6
L’obiettivo guida il design - 1
Se volete che l’utente
Allora occorre
 Impari
• Chiarezza, semplicità,
ripetizioni, rinforzo...
 Si diverta
• Varietà, casualità,
impredicibilità, sorpresa...
 Capisca
• Spiegazioni concettuali,
grafici, simulazioni, video
gennaio ’00
Produzione MM
7
L’obiettivo guida il design - 2
Se volete che l’utente
Allora occorre
 Faccia
esperienza
• Alta interattività, realismo,
utente in controllo
 Agisca o
comperi
• Chiare opzioni, benefici,
moduli di ordinazione...
 Riceva
risposte
• Indici, ricerca, accesso
veloce...
gennaio ’00
Produzione MM
8
Es: brochure di una società - 1
Obiettivi
• Dare una immagine aggiornata e tecnologicamente
avanzata.
• Dare una immagine di società responsabile socialmente.
• Mostrarne gli eccezionali e unici risultati.
• Coinvolgere l’utente fino alla fine della brochure.
• Motivare richieste di informazioni ulteriori.
gennaio ’00
Produzione MM
9
Es: brochure di una società - 2
Contenuto
• Breve e ad alto livello.
• Contenere pochi dettagli.
• Dare i profili di diversi settori concisamente.
gennaio ’00
Produzione MM
10
Es: brochure di una società – 3
L’utenza
• Azionisti, clienti potenziali, venditori.
• Hanno poco tempo, e non hanno chiesto loro.
• Non hanno obiettivi specifici di informazione e quindi
hanno bisogno di essere guidati e motivati.
Necessario coordinare l’immagine e lo stile con brochure
esistenti e immagine di istituzione.
gennaio ’00
Produzione MM
11
Es: benefici aziendali - 1
Obiettivi
• Creare un unico punto di riferimento per informazioni sui
benefici aziendali.
• Uso facile e senza istruzioni per utenti molto diversi.
• Essere facile da aggiornare.
• Essere portabile per essere consultato anche a casa.
• Essere funzionale e non promozionale.
gennaio ’00
Produzione MM
12
Es: benefici aziendali - 2
Contenuto
• Strutturare un esistente manuale cartaceo.
• Includere moduli per richieste.
Aggiornabile a scadenze fisse.
gennaio ’00
Produzione MM
13
Es: benefici aziendali - 3
L’utenza
• Per uso interno soltanto
• Ha esigenze specifiche
• E’ molto motivata
gennaio ’00
Produzione MM
14
Quale applicazione è diversa?
• Un catalogo di vendite sul portatile
• L’edizione dell’Enciclopedia Treccani su
CD-ROM
• Un video game
• Un applicativo per chiosco di una banca
Il catalogo vendite
deve essere usato dal
venditore per il cliente
gennaio ’00
Diversa interattività
Produzione MM
15
L’utenza e le condizioni d’uso
• L’utente finale
• Età, educazione, esperienza con computer
• Uso
• A casa, al lavoro
• Controllato da un singolo per se stesso o per altri
• Frequenza d’uso
• Ambiente d’uso
• Rumore, luminosità, postura dell’utenza
• Hardware
• Previsioni sul tipo
gennaio ’00
Produzione MM
16
Ricerca sull’utenza - 1
• Non tutti possono permettersi di fare ricerche
sull’utenza, ma nessuno può permettersi di non
farne.
• I prodotti, anche i migliori, devono incontrare le
aspettative dell’utenza.
• Imparzialità nella ricerca (professionisti o persone
non direttamente coinvolte nel progetto)
gennaio ’00
Produzione MM
17
Ricerca sull’utenza - 2
• Lista di domande
•
•
•
•
Quali argomenti si aspettano
Ordine di importanza
Uso del prodotto
Prodotti simili
• Anche un piccolo gruppo: 5-10 persone
• Descrivere bene gli obiettivi del progetto
• Ma ignorate quello che va contro ai vostri obiettivi
gennaio ’00
Produzione MM
18
Scelta del mezzo di trasmissione
Influenza l’esperienza dell’utente
• Rete
• Principalmente testo e immagini. Audio e video non
giocano un ruolo primario ma sono a disposizione
dell’utente.
• Supporto privato (CDR-ROM, DVD, hard disk)
• Il testo narrativo è integrazione tra testo, immagini,
suoni e video.
gennaio ’00
Produzione MM
19
Scelta del mezzo di trasmissione
Influenza qualità ed estensione dell’interazione
• Rete
• Browser consentono il display. Navigazione via testo e
immagini ma il resto dell’interazione è definita dai
menù del browser.
• Supporto privato (CDR-ROM, DVD, hard disk)
• Interazione può essere completamente specificata dal
designer nei limiti dell’ambiente di sviluppo.
gennaio ’00
Produzione MM
20
Scelta dello strumento giusto - 1
• MM authoring tools
• Apple Media Tool, Macromedia Director, ToolBook ...
• Descrizione: tools per integrare testo, immagini, audio e video e
mettereli in relazione e sequenza in una applicazione. Consentono
la creazione di prodotti altamente interattivi e ricchi di funzionalità
e media.
• Caratteristiche: linguaggi di scripting per controllo
dell’interazione e della sincronizzazione. Funzionalità predefinite
per il controllo di effetti visivi e delle transizioni.
• Drawbacks: da imparare. Le applicazioni realizzate spesso sono
fruibili solo con un CD come mezzo di trasmissione
gennaio ’00
Produzione MM
21
Scelta dello strumento giusto - 2
• On-line publishing tools
• HTML, Adobe Pagemaker, Microsoft Word, FrontPage ...
• Descrizione: tools per creare documenti in formato standar per
essere pubblicati in rete e compatibili con browser.
• Caratteristiche: i documenti creati come ipertesti che riferiscono
ad altri file, che possono essere scaricati. I documenti possono
essere controllati in modo distribuito.
• Drawbacks: interazione limitata alla navigazione. Nessun
controllo dei tempi di fruizione, della sincronizzazione tra nmedia
o sequenza. Nessun effetto visivo e nella transizione.
gennaio ’00
Produzione MM
22
Scelta dello strumento giusto - 3
• Tools per documenti elettronici on-line
• Adobe Acrobat ...
• Descrizione: tools per creare documenti, concepiti in modo
tradizionale, simili a quelli cartacei, e distribuiti mediante la rete.
• Caratteristiche: Trasformano documenti prodotti con diversi tool
di produzione in un formatostandard (pdf). Forniscono funzionalità
di scrolling, ingrandimento e ricerca sul testo. Integrano testo,
grafica e video.
• Drawbacks: limitata interazione e controllo su audio e video e del
tempo e sincronizzazione.
gennaio ’00
Produzione MM
23
Scelta dello strumento giusto - 4
• Tool per presentazioni
• Microsoft PowerPoint, Macromedia Action!, AppleWorks...
• Descrizione: tool per creare prodotti per presentazione, stile lucidi,
sia per chioschi sia per proiezione.
• Caratteristiche: integrazione audio e video e un varietà di effetti
speciali e preconfezionati stili e background; ampia possbilità di
personalizzare testo e una grafica elementare.
• Drawbacks: limitato controllo sul tempo e sulla sincronizzazione,
interazione limitata alla navigazione. Effetti e controlli non sono
personalizzabili.
gennaio ’00
Produzione MM
24
Autore del multimedia ?
Right now it is only a notion, but I think I can get
money to make it into a concept...and later turn it
into an idea.
Woody Allen in Annie Hall
gennaio ’00
Produzione MM
25
Profili profesisonali - 1
• Produttore
• Responsabile della concezione e della realizzazione, del
rispetto dei tempi e della previsione di spesa. Fornisce
le specifiche di disegno. Contatti con il committente.
• Direttore del design
• Responsabile del design dell’interazione e dell’aspetto
grafico. Esperienza in aspetti percettivi e psicologici del
layout e del disegno.
• Programmatore
• Responsabile dell’implementazione delle funzionalità
nei linguaggi standard o nei linguaggi di scripting.
gennaio ’00
Produzione MM
26
Profili professionali - 2
• Integratore dei media
• Integra i dati dei diversi media (testo, immagini, audio
etc.) per la realizzazione del testo interattivo. Può
coinvolgere programmazione.
• Tecnici dei media
• Ingegneri del suono e del video, digitalizzano dati e
effettuano editing e controllo di qualità.
• Designer dell’informazione
• Se c’è una componente narrativa, responsabile della sua
organizzazione in collaborazione con il designer
dell’interazione.
gennaio ’00
Produzione MM
27
Profili professionali - 3
• Webmaster
• Se c’è una componente on-line. La peculiarità della
figura: il suo lavoro non finisce a progetto concluso.
• Esperti del soggetto
• Scrittori e curatori
• Testi, dialoghi, etichette ...
• Attori
• Per i recitativi
• Avvocati
• Per i diritti di autore se il materiale non è originale
gennaio ’00
Produzione MM
28
Organizzazione del contenuto
In che modo il contenuto diventa interfaccia?
Strutturandolo!
•
•
•
•
•
Argomenti
Dimensione
Locazione geografica
Sequenza storica o temporale
Sequenza narrativa
gennaio ’00
Produzione MM
29
Organizzazione materiale già
esistente
La struttura su un altro media (carta) può dover
essere modificata.
•
•
•
•
Domandarsi dove serve interazione e come può migliorare.
Fornire link tra argomenti.
Fornire accessi diversi e flessibili (search e indici).
Riorganizzare il materiale per supportare le modalità di
accesso.
gennaio ’00
Produzione MM
30
Organizzazione del contenuto
Guglielmo di Occam, filosofo del 1300,
introdusse “Il principio della Parsimonia”,
noto come Rasoio di Occam.
Keep it simple!
gennaio ’00
Produzione MM
31
Esercizio di organizzazione
• Fare una lista di tutte le categorie di materiale.
• Raggrupparle per argomento cercando metacategorie, che saranno al primo livello.
• Ridefinire i raggruppamenti per tentativi.
• Dare una struttura
gennaio ’00
Produzione MM
32
Guida ai benefici aziendali
Una prima lista:
•
•
•
•
•
•
•
•
Salario
Ferie
Pensione
Periodi di assenza sabbatici
Palestra e tempo libero
Bonus
Infortuni
Politiche professionali
gennaio ’00
•
•
•
•
•
•
•
•
•
Etica
Benefici assicurazione malattia
Maternità
Assenze senza assegni
Dimissioni
Assicurazioni infortuni
Prestiti
Opzioni sulle azioni
Interviste
Produzione MM
33
Guida ai benefici aziendali - 2
Tempo
Soldi
Salute
Lavoro
Orario di lavoro
Salario
Benefici
assicurativi
Poltiche
Ferie
Bonus
Maternità
Etica
Sabbatico
Opzioni azioni
Palestra e tempo
libero
Interviste
Assenze senza
assegni
Pensione
Infortuni
Dimissioni
Prestiti
Assicurazione
infortuni
gennaio ’00
Produzione MM
34
La struttura
• Gerarchia top-down
• La più comune, la più semplice.
• Menù principale.
• Muoversi da un argomento all’altro richiede un
passo indietro al menù.
• Se l’interazione in ciascun argomento è lunga
allora il passo indietro è un utile modo per
ritrovare la struttura generale dell’applicazione.
gennaio ’00
Produzione MM
35
Gerarchia top-down
Main
tempo
gennaio ’00
soldi
salute
Produzione MM
lavoro
36
La struttura
• Gerarchia web
• Per consultazioni che richiedono frequenti
riferimenti incrociati.
• Fornisce lla gerarchia top-down.
• Opzioni ulteriori di accesso diretto da un
argomento all’altro.
gennaio ’00
Produzione MM
37
Gerarchia web
Main
tempo
gennaio ’00
soldi
salute
Produzione MM
lavoro
38
La struttura
• Strumento editoriale
• Gli utenti faranno le loro scelte, ma la struttura
indica quali sono possibili.
• Strumento per evidenziare quello che è
prioritario.
gennaio ’00
Produzione MM
39
Gerarchia per esigenze editoriali
Main
gennaio ’00
Settore A
Settore B
Settore C
Risultati
Risultati
Risultati
Produzione MM
40
Gerarchia per esigenze editoriali
Main
Settore A
gennaio ’00
Settore B
Settore C
Produzione MM
Risultati
41
Gerarchia per esigenze editoriali
Main
Settore A
gennaio ’00
Settore B
Settore C
Produzione MM
Risultati
42
Disegno dell’interazione
Interattività significa che è l’utente, non il designer, a
controllare la sequenza, il ritmo e soprattutto quello che
vuole vedere o ignorare.
• Decidere dove mettere interazione
• Decidere come dare il controllo all’utente
Il processo di produzione
gennaio ’00
Produzione MM
43
Potere dell’interazione
Vuoi che cancelli tutto
dal tuo hard disk?
Okay
Okay
Un esempio dallo studio Mackerel, per convincere in poche parole del
potere di suggestione dell’interfaccia. Non si esce dallo stato raggiunto
se non azionando uno dei due bottoni. Ma con che spirito???
gennaio ’00
Produzione MM
44
Passi critici del disegno
dell’interfaccia
•
•
•
•
•
Creare una guida per orientare l’utente.
Disegnare la navigazione e i cammini.
Definire ogni schermata.
Definire cosa controlla l’interazione.
Creare uno storyboard.
• Dal flowchart ottenuto con il processo di design del
contenuto, che mostra solo il contenuto e la sua
strutturazione, lo storyboard mostra anche i cammini e
il controllo.
gennaio ’00
Produzione MM
45
Quanta interazione ?
lucidi
realtà virtuali immersive
ritmo
sequenza
media
variabili transazioni
Click,
quando si
vuole per
avanzare
Scegliere
dove si
vuole
andare, in
ogni
momento
Start/
stop di
video,
search
di testo,
scroll,
zoom
Modifica
di output,
ricerca in
DB
Password,
mandare
messaggi,
pagare un
conto
oggetti
simulazione
Muovere
oggetti
sullo
schermo,
sconfigger
e
avversari
Cambiare una
vista,
cambiare il
rapporto
evento/azione
Range dell’interazione che caratterizza in termini di controllo le
possibili applicazioni.
gennaio ’00
Produzione MM
46
Quale interazione ?
• In funzione del tempo di sviluppo, delle risorse
finanziarie e tecniche.
• Più interazione, più complessità
• Dipende molto anche dal contenuto.
• Documento semplice richiede solo navigazione e
controllo dei media.
• Un catalogo può richiedere un DB e funzionalità per
transazioni economiche.
• Un corso di training funzionalità 3D (un simulatore di
volo).
gennaio ’00
Produzione MM
47
Orientamento
• Strumenti che guidano ad un uso appropriato.
• Libri hanno indici, giornali hanno titoli e sommari, film
hanno gli stacchi e altri espedienti tecnici per segnalare
i cambiamenti.
• E’ vitale fin dalla prima schermata.
• Equilibrio tra testo e immagini senza sopraffare
• Gli utenti di prodotti informativi vogliono sapere
esattamente cosa trovano nel prodotto (al contrario
di un film).
gennaio ’00
Produzione MM
48
Esempi
• HP
•
http://www.hp.com/country/us/eng/products.htm
• Apple
•
http://www.apple.com/support/
• Ideo, design
• http://www.ideo.com/projectarchives.htm
• Designunit, exploration into our communication process
• http://www.designunit.com/
• Interactive Cinema, reflects the longing of cinema to become
something new, something more complex and more personal as if in
conversation with an audience
• http://ic.www.media.mit.edu/JBW/
gennaio ’00
Produzione MM
49
Immagine e metafore
• Usate per creare un luogo familiare in cui
orientare l’utente, soprattutto nella finestra
principale di navigazione.
• Spazio concettuale in cui muoversi.
• Mappa di immagini, che rappresentano e guidano al
contenuto.
• Metafora, un immagine che letteralmente ha un
significato che viene trasposto figurativamente sul
contenuto.
gennaio ’00
Produzione MM
50
Metafore
• Metafore per la navigazione
• L’immagine orienta la scelta (l’agenda)
• Metafore funzionali
• L’immagine suggerisce la funzione dell’oggetto
(la scrivania per il file system)
Funzionano solo se l’utente è familiare con
l’immagine.
gennaio ’00
Produzione MM
51
Navigazione
• La parte più consistente dell’interazione.
• Partire dal flowchart.
• Definire i cammini di accesso, oltre ai link diretti
della struttura gerarchica del contenuto.
• Minimo cammino tra due punti.
• Minima profondità per raggiungere i livelli.
• Minima ridondanza: evitare cammini multipli per
raggiungere le stesse pagine, causa confusione.
gennaio ’00
Produzione MM
52
Esempio di errore
gennaio ’00
Produzione MM
53
Esempio ripensato
gennaio ’00
Produzione MM
54
Navigazione - 2
Main
Sez 2
Sez 1
Arg 1 Arg 2
Sez 3
Arg 3
Il flowchart mostra la relazione gerarchica tra livelli ma non
gli accessi diretti
gennaio ’00
Produzione MM
55
Simulazione di navigazione
Main
Sezione 1
Sezione 2
Sezione 3
Menù principale: accesso in profondità
gennaio ’00
Produzione MM
56
Simulazione di navigazione
Sezione
Argomento 1
Argomento 2
Argomento 3
Accesso in profondità e indietro al menù principale
gennaio ’00
Produzione MM
57
Simulazione di navigazione
Argomento 1
Accesso laterale ad argomenti allo stesso livello e indietro al
livello superiore
gennaio ’00
Produzione MM
58
Simulazione di navigazione
Argomento 2
Accesso laterale ad argomenti allo stesso livello e indietro al
livello superiore
gennaio ’00
Produzione MM
59
Simulazione di navigazione
Argomento 3
Accesso laterale ad argomenti allo stesso livello e indietro al
livello superiore
gennaio ’00
Produzione MM
60
Accesso diretto
• Fornire il cammino più semplice tra due
punti, minimizzando il numero di passi, ma
senza introdurre disorientamento.
• Il contenuto può suggerire un punto di vista.
• Metodi per accesso diretto:
• Menù, liste, linee dei tempi, mappe di
immagini, bottone, icone.
gennaio ’00
Produzione MM
61
Accesso diretto - 2
Leonardo
pittore
gennaio ’00
ingegnere
Produzione MM
scrittore
62
Livelli di accesso
• Accesso ad un nuovo argomento
• Può avere un grosso cambiamento di scena
• Accesso nell’argomento
• Il cambiamento deve essere subdolo. Il nuovo
materiale deve essere portato nell’immagine e
l’utente deve sentirsi in controllo
• Se il cambiamento è grande allora è meglio
far risalire e poi ridiscendere i livelli
gennaio ’00
Produzione MM
63
Usabilità
• Evitare conflitti nel controllo
• Evitare messaggi oscuri (tipo: avete raggiunto
l’applicazione anonimo)
• Redifinizioni di messaggi di interfaccia
standard
• Eccessi di strumenti di controllo
Non aggiungere il problema di dover
imparare ad usare il prodotto.
gennaio ’00
Produzione MM
64
Funzionalità
•
•
•
•
Il controllo dell’interazione
La gestione delle eccezioni
Confusione sullo stato in cui si è
Confusione sulla funzione (ad esempio dove portano i
bottoni)
• Controllo del video, dell’audio e del testo
• Inizio, fine, come si controlla
gennaio ’00
Produzione MM
65
Disegno della presentazione
Semplicità, consistenza.
... sapere quando rompere le regole.
• Lo stile e il layout degli elementi sullo
schermo
Il processo di produzione
gennaio ’00
Produzione MM
66
Passi critici del disegno della
presentazione
• Definire il tema visuale portante e lo stile
• Creare gli elementi per ogni screen
(background, finestre etc.)
• Creare gli elementi per il controllo (bottoni,
slide bar etc.)
gennaio ’00
Produzione MM
67
Potere dell’interazione
I gotch’ya
Respirate profondamente ...
gennaio ’00
Produzione MM
68
Metafora di navigazione
richiami
ingresso
gennaio ’00
tool matematici
al II piano
Produzione MM
Argomento
principale
69