gennaio 00Produzione MM1 Produrre multimedia Fare ricerca. Design della grafica. Design...

gennaio ’00 Produzione MM 1

Produrre multimedia

Fare ricerca. Design della grafica. Design dell’interfaccia. Produzione

di video. Produzione di audio. Scrivere testi. Sviluppo di

software. ...


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


Il processo di produzione

• Disegno del contenutoCosa e’ il prodotto?

• Disegno dell’interazioneCome deve funzionare?

• Disegno della presentazioneCome deve apparire?


Disegno del contenuto

• Definire gli obiettivi di comunicazione

• Definire l’organizzazione del contenuto di conseguenza

L’essenza di un multimedia è raccontare, insegnare, vendere, informare nel modo piu’ efficace possibile.



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


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.


L’obiettivo guida il design - 1

Impari

Si diverta

Capisca

• Chiarezza, semplicità, ripetizioni, rinforzo...

• Varietà, casualità, impredicibilità, sorpresa...

• Spiegazioni concettuali, grafici, simulazioni, video

Se volete che l’utente Allora occorre


L’obiettivo guida il design - 2

Faccia esperienza

Agisca o comperi

Riceva risposte

• Alta interattività, realismo, utente in controllo

• Chiare opzioni, benefici, moduli di ordinazione...

• Indici, ricerca, accesso veloce...

Se volete che l’utente Allora occorre


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.


Es: brochure di una società - 2

Contenuto

• Breve e ad alto livello.

• Contenere pochi dettagli.

• Dare i profili di diversi settori concisamente.


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.


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.



Contenuto

• Strutturare un esistente manuale cartaceo.

• Includere moduli per richieste.

Aggiornabile a scadenze fisse.



L’utenza

• Per uso interno soltanto

• Ha esigenze specifiche

• E’ molto motivata


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 bancaIl catalogo vendite deve essere usato dal venditore per il cliente

Diversa interattività


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


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)


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


Scelta del mezzo di trasmissione

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

Influenza l’esperienza dell’utente


Scelta del mezzo di trasmissione

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

Influenza qualità ed estensione dell’interazione


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



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



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



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


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


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.


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.


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


Organizzazione del contenuto

• Argomenti

• Dimensione

• Locazione geografica

• Sequenza storica o temporale

• Sequenza narrativa

In che modo il contenuto diventa interfaccia? Strutturandolo!


Organizzazione materiale già esistente

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

La struttura su un altro media (carta) può dover essere modificata.


Organizzazione del contenuto

Guglielmo di Occam, filosofo del 1300, introdusse “Il principio della Parsimonia”,

noto come Rasoio di Occam.

Keep it simple!


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


Guida ai benefici aziendali

• 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

Una prima lista:


Guida ai benefici aziendali - 2

Tempo Soldi Salute LavoroOrario di lavoro Salario Benefici

assicurativiPoltiche

Ferie Bonus Maternità Etica

Sabbatico Opzioni azioni Palestra e tempo libero

Interviste

Assenze senza assegni

Pensione Infortuni Dimissioni

Prestiti Assicurazione infortuni


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.


Gerarchia top-down

Main

tempo soldi salute lavoro


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.


Gerarchia web

Main

tempo soldi salute lavoro


La struttura

• Strumento editoriale• Gli utenti faranno le loro scelte, ma la struttura

indica quali sono possibili.• Strumento per evidenziare quello che è

prioritario.


Gerarchia per esigenze editoriali

Main

Settore A Settore B Settore C

Risultati Risultati Risultati



Main

Settore A Settore B Settore C Risultati



Main

Settore A Settore B Settore C Risultati


Disegno dell’interazione

• Decidere dove mettere interazione

• Decidere come dare il controllo all’utente

Interattività significa che è l’utente, non il designer, a controllare la sequenza, il ritmo e soprattutto quello che

vuole vedere o ignorare.



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???


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.


Quanta interazione ?

lucidi realtà virtuali immersiveritmo 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 dell’interazione che caratterizza in termini di controllo le possibili applicazioni.


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


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


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/

http://www.hp.com/country/us/eng/products.htm

http://www.hp.com/country/us/eng/products.htm

http://www.apple.com/support/

http://www.ideo.com/projectarchives.htm

http://www.designunit.com/


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.


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.


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.


Esempio di errore


Esempio ripensato


Navigazione - 2

Main

Sez 3Sez 2Sez 1

Arg 1 Arg 3Arg 2

Il flowchart mostra la relazione gerarchica tra livelli ma non gli accessi diretti


Simulazione di navigazione

Sezione 1

Sezione 2

Sezione 3

Menù principale: accesso in profondità

Main



Argomento 1

Argomento 2

Argomento 3

Accesso in profondità e indietro al menù principale

Sezione



Accesso laterale ad argomenti allo stesso livello e indietro al livello superiore

Argomento 1




Argomento 2




Argomento 3


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.


Accesso diretto - 2Leonardo

scrittoreingegnerepittore


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


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.


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


Disegno della presentazione

• Lo stile e il layout degli elementi sullo schermo

Semplicità, consistenza.

... sapere quando rompere le regole.



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


Potere dell’interazione

I gotch’ya

Respirate profondamente ...


Metafora di navigazione

ingresso

richiami tool matematici

Argomento principale

al II piano

Date post:	01-May-2015
Category:	Documents
Upload:	sandra-cavalli
View:	216 times
Download:	2 times

gennaio 00Produzione MM1 Produrre multimedia Fare ricerca. Design della grafica. Design...

Documents