AA 2004/05Sistemi multimediali Disegno dellinterazione 1 Il disegno dellinterazione Decidere dove mettere interazione Decidere come dare il controllo.

Presentazione sul tema: "AA 2004/05Sistemi multimediali Disegno dellinterazione 1 Il disegno dellinterazione Decidere dove mettere interazione Decidere come dare il controllo."— Transcript della presentazione:

1

2 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

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

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

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

6 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

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

8 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

9 Orientamento

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

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

12 AA 2004/05Sistemi multimediali Disegno dellinterazione 11

13 AA 2004/05Sistemi multimediali Disegno dellinterazione 12

14 AA 2004/05Sistemi multimediali Disegno dellinterazione 13

15 AA 2004/05Sistemi multimediali Disegno dellinterazione 14

16 AA 2004/05Sistemi multimediali Disegno dellinterazione 15

17 AA 2004/05Sistemi multimediali Disegno dellinterazione 16

18 AA 2004/05Sistemi multimediali Disegno dellinterazione 17

19 AA 2004/05Sistemi multimediali Disegno dellinterazione 18

20 Home page

21 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

22 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

23 AA 2004/05Sistemi multimediali Disegno dellinterazione 22

24 AA 2004/05Sistemi multimediali Disegno dellinterazione 23

25 AA 2004/05Sistemi multimediali Disegno dellinterazione 24

26 AA 2004/05Sistemi multimediali Disegno dellinterazione 25

27 AA 2004/05Sistemi multimediali Disegno dellinterazione 26

28 AA 2004/05Sistemi multimediali Disegno dellinterazione 27

29 Corporate identity

30 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

31 AA 2004/05Sistemi multimediali Disegno dellinterazione 30

32 AA 2004/05Sistemi multimediali Disegno dellinterazione 31

33 AA 2004/05Sistemi multimediali Disegno dellinterazione 32

34 AA 2004/05Sistemi multimediali Disegno dellinterazione 33

35 AA 2004/05Sistemi multimediali Disegno dellinterazione 34

36 AA 2004/05Sistemi multimediali Disegno dellinterazione 35

37 AA 2004/05Sistemi multimediali Disegno dellinterazione 36

38 AA 2004/05Sistemi multimediali Disegno dellinterazione 37

39 Immagini e metafore

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

41 AA 2004/05Sistemi multimediali Disegno dellinterazione 40

42 AA 2004/05Sistemi multimediali Disegno dellinterazione 41

43 AA 2004/05Sistemi multimediali Disegno dellinterazione 42

44 AA 2004/05Sistemi multimediali Disegno dellinterazione 43

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

46 Metafore di navigazione

47 AA 2004/05Sistemi multimediali Disegno dellinterazione 46

48 AA 2004/05Sistemi multimediali Disegno dellinterazione 47

49 AA 2004/05Sistemi multimediali Disegno dellinterazione 48

50 AA 2004/05Sistemi multimediali Disegno dellinterazione 49

51 AA 2004/05Sistemi multimediali Disegno dellinterazione 50

52 Metafore funzionali

53 AA 2004/05Sistemi multimediali Disegno dellinterazione 52

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

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

56 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

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

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

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

60 AA 2004/05Sistemi multimediali Disegno dellinterazione 59 QuickTime4

61 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

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

63 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:

64 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 3. 1 2 3

65 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

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

67 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. http://www.ibm.com/ibm/hci/exhibits/cd/realcd.html

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

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

70 AA 2004/05Sistemi multimediali Disegno dellinterazione 69

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

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

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

74 AA 2004/05Sistemi multimediali Disegno dellinterazione 73 Real Player

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

76 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

77 AA 2004/05Sistemi multimediali Disegno dellinterazione 76

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

79 AA 2004/05Sistemi multimediali Disegno dellinterazione 78

80 Metafore dellassistente

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

82 AA 2004/05Sistemi multimediali Disegno dellinterazione 81

83 AA 2004/05Sistemi multimediali Disegno dellinterazione 82

84 AA 2004/05Sistemi multimediali Disegno dellinterazione 83

85 AA 2004/05Sistemi multimediali Disegno dellinterazione 84

86 AA 2004/05Sistemi multimediali Disegno dellinterazione 85

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

88 AA 2004/05Sistemi multimediali Disegno dellinterazione 87