AA 2004/05Sistemi multimediali Disegno dellinterazione 1 Il disegno dellinterazione Decidere dove mettere interazione Decidere come dare il controllo allutente Interattività significa che è lutente, non il designer, a controllare la sequenza, il ritmo e soprattutto quello che vuole vedere o ignorare. Il processo di produzione

AA 2004/05Sistemi multimediali Disegno dellinterazione 2 Potere dellinterazione Vuoi che cancelli tutto dal tuo hard disk? Okay Non si esce dallo stato raggiunto se non azionando uno dei due bottoni. Un esempio dallo studio Mackerel, per convincere in poche parole del potere di suggestione dellinterfaccia.

AA 2004/05Sistemi multimediali Disegno dellinterazione 3 Potere dellinterazione Respirate profondamente... Ah, ah...

AA 2004/05Sistemi multimediali Disegno dellinterazione 4 Passi critici del disegno dellinterfaccia Disegnare la navigazione e i cammini. Definire ogni schermata. Definire 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. Creare una guida per orientare lutente.

AA 2004/05Sistemi multimediali Disegno dellinterazione 5 Dallinformazione allesperienza Motivare allinterazione Dando una guida e opzioni chiare Creare cammini interessanti O almeno chiari tra le informazioni Dare allutente il controllo Su dove andare, su cosa fare e su come arrivarci Rendere lesperienza intuitiva

AA 2004/05Sistemi multimediali Disegno dellinterazione 6 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).

AA 2004/05Sistemi multimediali Disegno dellinterazione 7 Quanta interazione ? lucidi realtà virtuali immersive ritmosequenzamediavariabilitransazionioggettisimulazione Click, quando è necessa- rio 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 le possibili applicazioni in termini di controllo

Orientamento

AA 2004/05Sistemi multimediali Disegno dellinterazione 9 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. Gli utenti di prodotti informativi vogliono sapere esattamente cosa trovano nel prodotto (al contrario di un film). E necessario e vitale fin dalla prima schermata. Equilibrio tra testo e immagini.

AA 2004/05Sistemi multimediali Disegno dellinterazione 10 Mappe del sito Panoramica sul sito Anche a 3D Aiutano lorientamento Visite guidate

AA 2004/05Sistemi multimediali Disegno dellinterazione 11

AA 2004/05Sistemi multimediali Disegno dellinterazione 12

AA 2004/05Sistemi multimediali Disegno dellinterazione 13

AA 2004/05Sistemi multimediali Disegno dellinterazione 14

AA 2004/05Sistemi multimediali Disegno dellinterazione 15

AA 2004/05Sistemi multimediali Disegno dellinterazione 16

AA 2004/05Sistemi multimediali Disegno dellinterazione 17

AA 2004/05Sistemi multimediali Disegno dellinterazione 18

Home page

AA 2004/05Sistemi multimediali Disegno dellinterazione 20 Home page Il disegno della home è cruciale Il biglietto da visita Il centro vitale del sito le pagine interne devono rimandare alla home La parte alta è quella più vista e rivista Strategie variano in funzione dello scopo e della natura del sito

AA 2004/05Sistemi multimediali Disegno dellinterazione 21 Grafica vs testo Banner e il resto testo Dicotomia: lento/accattivante, veloce/spartano Trade off: estetica e risorse di rete Dipende anche dagli scopi del sito

AA 2004/05Sistemi multimediali Disegno dellinterazione 22

AA 2004/05Sistemi multimediali Disegno dellinterazione 23

AA 2004/05Sistemi multimediali Disegno dellinterazione 24

AA 2004/05Sistemi multimediali Disegno dellinterazione 25

AA 2004/05Sistemi multimediali Disegno dellinterazione 26

AA 2004/05Sistemi multimediali Disegno dellinterazione 27

Corporate identity

AA 2004/05Sistemi multimediali Disegno dellinterazione 29 Il marchio Creare influenza attraverso luso di simboli e attibuti vari Uso del colore, di grafica, Dipende da molti fattori: Stabilità sul mercato Leadership Moda Locazione geografica Politica aziendale

AA 2004/05Sistemi multimediali Disegno dellinterazione 30

AA 2004/05Sistemi multimediali Disegno dellinterazione 31

AA 2004/05Sistemi multimediali Disegno dellinterazione 32

AA 2004/05Sistemi multimediali Disegno dellinterazione 33

AA 2004/05Sistemi multimediali Disegno dellinterazione 34

AA 2004/05Sistemi multimediali Disegno dellinterazione 35

AA 2004/05Sistemi multimediali Disegno dellinterazione 36

AA 2004/05Sistemi multimediali Disegno dellinterazione 37

Immagini e metafore

AA 2004/05Sistemi multimediali Disegno dellinterazione 39 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; figura retorica del discorso.

AA 2004/05Sistemi multimediali Disegno dellinterazione 40

AA 2004/05Sistemi multimediali Disegno dellinterazione 41

AA 2004/05Sistemi multimediali Disegno dellinterazione 42

AA 2004/05Sistemi multimediali Disegno dellinterazione 43

AA 2004/05Sistemi multimediali Disegno dellinterazione 44 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.

Metafore di navigazione

AA 2004/05Sistemi multimediali Disegno dellinterazione 46

AA 2004/05Sistemi multimediali Disegno dellinterazione 47

AA 2004/05Sistemi multimediali Disegno dellinterazione 48

AA 2004/05Sistemi multimediali Disegno dellinterazione 49

AA 2004/05Sistemi multimediali Disegno dellinterazione 50

Metafore funzionali

AA 2004/05Sistemi multimediali Disegno dellinterazione 52

AA 2004/05Sistemi multimediali Disegno dellinterazione 53 Le icone del menu creano la metafora, suggerendo la funzione Paint per Windows

AA 2004/05Sistemi multimediali Disegno dellinterazione 54 asWedit per Unix Microsoft PowerPoint Real Player 7 QuickTime Player 4

AA 2004/05Sistemi multimediali Disegno dellinterazione 55 Motivazione La metafora deve generare senso e consentire il trasferimento di conoscenza pre-esistente. VisiCalc, la metafora del desktop della Xerox e degli appunti della Quicken. Attenzione: Metafore improprie diminuiscono lusabilità dellapplicazione

AA 2004/05Sistemi multimediali Disegno dellinterazione 56 La metafora del cestino Perfetta per eliminare documenti Errata per rilasciare dischetti

AA 2004/05Sistemi multimediali Disegno dellinterazione 57 La metafora del VCR Finestra di dialogo per la stampante Cosa fa il bottone rewind: Riavvolge la carta? Cancella il file?

AA 2004/05Sistemi multimediali Disegno dellinterazione 58 Metafore iper-realistiche Interfacce realizzate per assomigliare realisticamente ad oggetti fisici. Il trasferimento di conoscenza dalloggetto fisico allapplicazione deve avvenire attraverso linterazione con il computer. Spesso è controintuitivo. Il software è soggetto alle inutili limitazioni del mondo fisico.

AA 2004/05Sistemi multimediali Disegno dellinterazione 59 QuickTime4

AA 2004/05Sistemi multimediali Disegno dellinterazione 60 Critica Abbandono del sistema standard di finestre Difficoltà a riconoscere i controlli E il loro stato di disponibilità ad un dato istante Mancano i titoli della finestra Impossibilità per il sw di terze parti a riconoscere il nome dellapplicazione Impossibile il ridimensionamento della finestra

AA 2004/05Sistemi multimediali Disegno dellinterazione 61 QuickTime4 Un controllo NON è un controllo

AA 2004/05Sistemi multimediali Disegno dellinterazione 62 Controllo in GUI quanto è appropriato il controllo per il compito; la consistenza delle regole che si applicano al controllo. Scegliere lo strumento sbagliato per il compito o cambiare le regole crea certamente problemi allutente. Il modo con cui gli utenti interagiscono con lapplicazione. La qualità dipende da:

AA 2004/05Sistemi multimediali Disegno dellinterazione 63 QuickTime4 Mancanza dindizi sulla disponibilità dei controlli Il controllo del volume è disponibile a sinistra in 1., ma non lo è a destra in 2., dato che non è stato caricato alcun file Anche se è reso attivo mentre il video è in esecuzione, vedi

AA 2004/05Sistemi multimediali Disegno dellinterazione 64 QuickTime4 Un movimento rotatorio simulato con un movimento verticale del mouse Motivato dal mondo fisico Per essere azionato con un pollice non con il mouse Basta azionare il cursore nelle vicinanze della rotella, ma linterfaccia non lo suggerisce Meglio sarebbe uno slider

AA 2004/05Sistemi multimediali Disegno dellinterazione 65 Infatti, QuickTime5 … Modifiche al controllo del volume Funzionalità tipiche delle finestre

AA 2004/05Sistemi multimediali Disegno dellinterazione 66 RealCD della IBM RealThings are software objects or applications that are designed to resemble real-world counterparts, and to be productive, visually compelling, and fun to use.

AA 2004/05Sistemi multimediali Disegno dellinterazione 67 RealCD: come si apre ?

AA 2004/05Sistemi multimediali Disegno dellinterazione 68 RealCD: come si esce ?

AA 2004/05Sistemi multimediali Disegno dellinterazione 69

AA 2004/05Sistemi multimediali Disegno dellinterazione 70 RealPhone della IBM

AA 2004/05Sistemi multimediali Disegno dellinterazione 71 Creative PC-DVD Un telecomando per modellare linterfaccia di un software !

AA 2004/05Sistemi multimediali Disegno dellinterazione 72 Net2Phone da The RealNetworks Team - Seattle, WA USA

AA 2004/05Sistemi multimediali Disegno dellinterazione 73 Real Player

AA 2004/05Sistemi multimediali Disegno dellinterazione 74 Lettore CD Il controllo del volume tramite un bottone che simula il movimento rotatorio, difficile da ottenere con il mouse, ma soprattutto inutile visto che laumento di volume viene visualizzato meglio con uno slider.

AA 2004/05Sistemi multimediali Disegno dellinterazione 75 Amplificatore virtuale Interfaccia di un plugin che ricrea perfettamente linterfaccia del processore fisico, incluso i quattro bottoni per controllare la ratio

AA 2004/05Sistemi multimediali Disegno dellinterazione 76

AA 2004/05Sistemi multimediali Disegno dellinterazione 77 Finalizer virtuale integra e comprime diversi canali audio

AA 2004/05Sistemi multimediali Disegno dellinterazione 78

Metafore dellassistente

AA 2004/05Sistemi multimediali Disegno dellinterazione 80 Metafora dellagente Una guida che segue durante linterazione. Cerca di capire la vostra intenzione e di suggerire al meglio. Deve poter essere disattivata.

AA 2004/05Sistemi multimediali Disegno dellinterazione 81

AA 2004/05Sistemi multimediali Disegno dellinterazione 82

AA 2004/05Sistemi multimediali Disegno dellinterazione 83

AA 2004/05Sistemi multimediali Disegno dellinterazione 84

AA 2004/05Sistemi multimediali Disegno dellinterazione 85

AA 2004/05Sistemi multimediali Disegno dellinterazione 86 Assistenti Windows 95

AA 2004/05Sistemi multimediali Disegno dellinterazione 87