Produrre multimedia

1
Produrre multimedia

• Fare ricerca. Design della grafica. Design
  dellinterfaccia. Produzione di video. Produzione
  di audio. Scrivere testi. Sviluppo di software.
  ...

2
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
• Lidea originale di V. Bush del 1945
• As we may think, Atlantic Monthly 176, July 1945,
  101-108

3
Il processo di produzione

• Disegno del contenuto
• Cosa e il prodotto?
• Disegno dellinterazione
• Come deve funzionare?
• Disegno della presentazione
• Come deve apparire?

4
Disegno del contenuto
Lessenza di un multimedia è raccontare,
insegnare, vendere, informare nel modo piu
efficace possibile.

• Definire gli obiettivi di comunicazione
• Definire lorganizzazione del contenuto di
  conseguenza

Il processo di produzione
5
Passi critici del disegno del contenuto

• Definizione degli obiettivi del prodotto
• Messaggio e scopo
• Specifica dellutenza
• Il bisogno di informazione e gli interessi
• Scelta degli strumenti
• Di sviluppo e di fruizione (internet, CD-ROM, DVD
  ...)
• Produrre un flowchart della struttura

6
Definizione dellobiettivo

• Lobiettivo è 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
lobiettivo, il punto di arrivo.
Ad esempio, trasformare un catalogo su carta in
uno interattivo e multimediale è un punto di
partenza.
7
Lobiettivo guida il design - 1
Se volete che lutente
Allora occorre

• Impari
• Si diverta
• Capisca

• Chiarezza, semplicità, ripetizioni, rinforzo...
• Varietà, casualità, impredicibilità, sorpresa...
• Spiegazioni concettuali, grafici, simulazioni,
  video

8
Lobiettivo guida il design - 2
Se volete che lutente
Allora occorre

• Faccia esperienza
• Agisca o comperi
• Riceva risposte

• Alta interattività, realismo, utente in controllo
  
• Chiare opzioni, benefici, moduli di
  ordinazione...
• Indici, ricerca, accesso veloce...

9
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 lutente fino alla fine della
  brochure.
• Motivare richieste di informazioni ulteriori.

10
Es brochure di una società - 2

• Contenuto

• Breve e ad alto livello.
• Contenere pochi dettagli.
• Dare i profili di diversi settori concisamente.

11
Es brochure di una società 3

• Lutenza

• 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 limmagine e lo stile con
brochure esistenti e immagine di istituzione.
12
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.

13
Es benefici aziendali - 2

• Contenuto

• Strutturare un esistente manuale cartaceo.
• Includere moduli per richieste.

Aggiornabile a scadenze fisse.
14
Es benefici aziendali - 3

• Lutenza

• Per uso interno soltanto
• Ha esigenze specifiche
• E molto motivata

15
Quale applicazione è diversa?

• Un catalogo di vendite sul portatile
• Ledizione dellEnciclopedia 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
Diversa interattività
16
Lutenza e le condizioni duso

• Lutente finale
• Età, educazione, esperienza con computer
• Uso
• A casa, al lavoro
• Controllato da un singolo per se stesso o per
  altri
• Frequenza duso
• Ambiente duso
• Rumore, luminosità, postura dellutenza
• Hardware
• Previsioni sul tipo

17
Ricerca sullutenza - 1

• Non tutti possono permettersi di fare ricerche
  sullutenza, ma nessuno può permettersi di non
  farne.
• I prodotti, anche i migliori, devono incontrare
  le aspettative dellutenza.
• Imparzialità nella ricerca (professionisti o
  persone non direttamente coinvolte nel progetto)

18
Ricerca sullutenza - 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

19
Scelta del mezzo di trasmissione
Influenza lesperienza dellutente

• Rete
• Principalmente testo e immagini. Audio e video
  non giocano un ruolo primario ma sono a
  disposizione dellutente.
• Supporto privato (CDR-ROM, DVD, hard disk)
• Il testo narrativo è integrazione tra testo,
  immagini, suoni e video.

20
Scelta del mezzo di trasmissione
Influenza qualità ed estensione dellinterazione

• Rete
• Browser consentono il display. Navigazione via
  testo e immagini ma il resto dellinterazione è
  definita dai menù del browser.
• Supporto privato (CDR-ROM, DVD, hard disk)
• Interazione può essere completamente specificata
  dal designer nei limiti dellambiente di sviluppo.

21
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 dellinterazione 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

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

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

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

25
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

26
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 dellinterazione e
  dellaspetto grafico. Esperienza in aspetti
  percettivi e psicologici del layout e del
  disegno.
• Programmatore
• Responsabile dellimplementazione delle
  funzionalità nei linguaggi standard o nei
  linguaggi di scripting.

27
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 dellinformazione
• Se cè una componente narrativa, responsabile
  della sua organizzazione in collaborazione con il
  designer dellinterazione.

28
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

29
Organizzazione del contenuto
In che modo il contenuto diventa interfaccia?
Strutturandolo!

• Argomenti
• Dimensione
• Locazione geografica
• Sequenza storica o temporale
• Sequenza narrativa

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

31
Organizzazione del contenuto

• Guglielmo di Occam, filosofo del 1300, introdusse
  Il principio della Parsimonia, noto come Rasoio
  di Occam.

Keep it simple!
32
Esercizio di organizzazione

• Fare una lista di tutte le categorie di
  materiale.
• Raggrupparle per argomento cercando
  meta-categorie, che saranno al primo livello.
• Ridefinire i raggruppamenti per tentativi.
• Dare una struttura

33
Guida ai benefici aziendali
Una prima lista

• Salario
• Ferie
• Pensione
• Periodi di assenza sabbatici
• Palestra e tempo libero
• Bonus
• Infortuni
• Politiche professionali

• Etica
• Benefici assicurazione malattia
• Maternità
• Assenze senza assegni
• Dimissioni
• Assicurazioni infortuni
• Prestiti
• Opzioni sulle azioni
• Interviste

34
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
35
La struttura

• Gerarchia top-down
• La più comune, la più semplice.
• Menù principale.
• Muoversi da un argomento allaltro richiede un
  passo indietro al menù.
• Se linterazione in ciascun argomento è lunga
  allora il passo indietro è un utile modo per
  ritrovare la struttura generale dellapplicazione.

36
Gerarchia top-down
Main
tempo
soldi
salute
lavoro
37
La struttura

• Gerarchia web
• Per consultazioni che richiedono frequenti
  riferimenti incrociati.
• Fornisce lla gerarchia top-down.
• Opzioni ulteriori di accesso diretto da un
  argomento allaltro.

38
Gerarchia web
Main
tempo
soldi
salute
lavoro
39
La struttura

• Strumento editoriale
• Gli utenti faranno le loro scelte, ma la
  struttura indica quali sono possibili.
• Strumento per evidenziare quello che è
  prioritario.

40
Gerarchia per esigenze editoriali
Main
Settore A
Settore B
Settore C
Risultati
Risultati
Risultati
41
Gerarchia per esigenze editoriali
Main
Settore A
Settore B
Settore C
Risultati
42
Gerarchia per esigenze editoriali
Main
Settore A
Settore B
Settore C
Risultati
43
Disegno dellinterazione
Interattività significa che è lutente, 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 allutente

Il processo di produzione
44
Potere dellinterazione

• Vuoi che cancelli tutto
• dal tuo hard disk?

Okay
Okay
Un esempio dallo studio Mackerel, per convincere
in poche parole del potere di suggestione
dellinterfaccia. Non si esce dallo stato
raggiunto se non azionando uno dei due bottoni.
Ma con che spirito???
45
Passi critici del disegno dellinterfaccia

• Creare una guida per orientare lutente.
• Disegnare la navigazione e i cammini.
• Definire ogni schermata.
• Definire cosa controlla linterazione.
• 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.

46
Quanta interazione ?
lucidi realtà virtuali immersive lucidi realtà virtuali immersive lucidi realtà virtuali immersive lucidi realtà virtuali immersive lucidi realtà virtuali immersive lucidi realtà virtuali immersive lucidi realtà virtuali immersive
ritmo sequenza media variabili transazioni oggetti simulazione
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 Muovere oggetti sullo schermo, sconfiggere avversari Cambiare una vista, cambiare il rapporto evento/azione
Range dellinterazione che caratterizza in
termini di controllo le possibili applicazioni.
47
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).

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

49
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/

50
Immagine e metafore

• Usate per creare un luogo familiare in cui
  orientare lutente, 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.

51
Metafore

• Metafore per la navigazione
• Limmagine orienta la scelta (lagenda)
• Metafore funzionali
• Limmagine suggerisce la funzione delloggetto
  (la scrivania per il file system)

Funzionano solo se lutente è familiare con
limmagine.
52
Navigazione

• La parte più consistente dellinterazione.
• 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.

53
Esempio di errore
54
Esempio ripensato
55
Navigazione - 2
Main
Sez 3
Sez 2
Sez 1
Arg 1
Arg 3
Arg 2
Il flowchart mostra la relazione gerarchica tra
livelli ma non gli accessi diretti
56
Simulazione di navigazione
Main
Sezione 1
Sezione 2
Sezione 3
Menù principale accesso in profondità
57
Simulazione di navigazione
Sezione
Argomento 1
Argomento 2
Argomento 3
Accesso in profondità e indietro al menù
principale
58
Simulazione di navigazione
Argomento 1
Accesso laterale ad argomenti allo stesso livello
e indietro al livello superiore
59
Simulazione di navigazione
Argomento 2
Accesso laterale ad argomenti allo stesso livello
e indietro al livello superiore
60
Simulazione di navigazione
Argomento 3
Accesso laterale ad argomenti allo stesso livello
e indietro al livello superiore
61
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.

62
Accesso diretto - 2
Leonardo
scrittore
ingegnere
pittore
63
Livelli di accesso

• Accesso ad un nuovo argomento
• Può avere un grosso cambiamento di scena
• Accesso nellargomento
• Il cambiamento deve essere subdolo. Il nuovo
  materiale deve essere portato nellimmagine e
  lutente deve sentirsi in controllo
• Se il cambiamento è grande allora è meglio far
  risalire e poi ridiscendere i livelli

64
Usabilità

• Evitare conflitti nel controllo
• Evitare messaggi oscuri (tipo avete raggiunto
  lapplicazione anonimo)
• Redifinizioni di messaggi di interfaccia standard
• Eccessi di strumenti di controllo

Non aggiungere il problema di dover imparare ad
usare il prodotto.
65
Funzionalità

• Il controllo dellinterazione
• La gestione delle eccezioni
• Confusione sullo stato in cui si è
• Confusione sulla funzione (ad esempio dove
  portano i bottoni)
• Controllo del video, dellaudio e del testo
• Inizio, fine, come si controlla

66
Disegno della presentazione
Semplicità, consistenza. ... sapere quando
rompere le regole.

• Lo stile e il layout degli elementi sullo schermo

Il processo di produzione
67
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.)