AA 2004/05 Sistemi multimedialiDisegno dell’interazione

1

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

Il processo di produzione

AA 2004/05 Sistemi multimedialiDisegno dell’interazione

2

Potere dell’interazione

Vuoi che cancelli tutto

dal tuo hard disk?

Okay 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 dell’interfaccia.

AA 2004/05 Sistemi multimedialiDisegno dell’interazione

3

Potere dell’interazione

Respirate profondamente ...

Ah, ah ...

AA 2004/05 Sistemi multimedialiDisegno dell’interazione

4

Passi critici del disegno dell’interfaccia

• Disegnare la navigazione e i cammini.• Definire ogni schermata.• Definire 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.

• Creare una guida per orientare l’utente.

AA 2004/05 Sistemi multimedialiDisegno dell’interazione

5

Dall’informazione all’esperienza

• Motivare all’interazione• Dando una guida e opzioni chiare

• Creare cammini interessanti• O almeno chiari tra le informazioni

• Dare all’utente il controllo• Su dove andare, su cosa fare e su come

arrivarci

• Rendere l’esperienza intuitiva

AA 2004/05 Sistemi multimedialiDisegno dell’interazione

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/05 Sistemi multimedialiDisegno dell’interazione

7

Quanta interazione ?

lucidi realtà virtuali immersiveritmo sequenza media variabili transazioni oggetti simulazione

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 dell’interazione che caratterizza le possibili applicazioni in termini di controllo

Orientamento

AA 2004/05 Sistemi multimedialiDisegno dell’interazione

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/05 Sistemi multimedialiDisegno dell’interazione

10

Mappe del sito

• Panoramica sul sito• Anche a 3D

• Aiutano l’orientamento

• Visite guidate

AA 2004/05 Sistemi multimedialiDisegno dell’interazione

11

AA 2004/05 Sistemi multimedialiDisegno dell’interazione

12

AA 2004/05 Sistemi multimedialiDisegno dell’interazione

13

AA 2004/05 Sistemi multimedialiDisegno dell’interazione

14

AA 2004/05 Sistemi multimedialiDisegno dell’interazione

15

AA 2004/05 Sistemi multimedialiDisegno dell’interazione

16

AA 2004/05 Sistemi multimedialiDisegno dell’interazione

17

AA 2004/05 Sistemi multimedialiDisegno dell’interazione

18

Home page

AA 2004/05 Sistemi multimedialiDisegno dell’interazione

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/05 Sistemi multimedialiDisegno dell’interazione

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/05 Sistemi multimedialiDisegno dell’interazione

22

AA 2004/05 Sistemi multimedialiDisegno dell’interazione

23

AA 2004/05 Sistemi multimedialiDisegno dell’interazione

24

AA 2004/05 Sistemi multimedialiDisegno dell’interazione

25

AA 2004/05 Sistemi multimedialiDisegno dell’interazione

26

AA 2004/05 Sistemi multimedialiDisegno dell’interazione

27

Corporate identity

AA 2004/05 Sistemi multimedialiDisegno dell’interazione

29

Il marchio

• Creare influenza attraverso l’uso 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/05 Sistemi multimedialiDisegno dell’interazione

30

AA 2004/05 Sistemi multimedialiDisegno dell’interazione

31

AA 2004/05 Sistemi multimedialiDisegno dell’interazione

32

AA 2004/05 Sistemi multimedialiDisegno dell’interazione

33

AA 2004/05 Sistemi multimedialiDisegno dell’interazione

34

AA 2004/05 Sistemi multimedialiDisegno dell’interazione

35

AA 2004/05 Sistemi multimedialiDisegno dell’interazione

36

AA 2004/05 Sistemi multimedialiDisegno dell’interazione

37

Immagini e metafore

AA 2004/05 Sistemi multimedialiDisegno dell’interazione

39

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; figura retorica del discorso.

AA 2004/05 Sistemi multimedialiDisegno dell’interazione

40

AA 2004/05 Sistemi multimedialiDisegno dell’interazione

41

AA 2004/05 Sistemi multimedialiDisegno dell’interazione

42

AA 2004/05 Sistemi multimedialiDisegno dell’interazione

43

AA 2004/05 Sistemi multimedialiDisegno dell’interazione

44

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.

Metafore di navigazione

AA 2004/05 Sistemi multimedialiDisegno dell’interazione

46

AA 2004/05 Sistemi multimedialiDisegno dell’interazione

47

AA 2004/05 Sistemi multimedialiDisegno dell’interazione

48

AA 2004/05 Sistemi multimedialiDisegno dell’interazione

49

AA 2004/05 Sistemi multimedialiDisegno dell’interazione

50

Metafore funzionali

AA 2004/05 Sistemi multimedialiDisegno dell’interazione

52

AA 2004/05 Sistemi multimedialiDisegno dell’interazione

53

Le icone del menu creano la metafora, suggerendo

la funzione

Le icone del menu creano la metafora, suggerendo

la funzione

Paint per Windows

AA 2004/05 Sistemi multimedialiDisegno dell’interazione

54

asWedit per Unix

Microsoft PowerPoint

Real Player 7

QuickTime Player 4

AA 2004/05 Sistemi multimedialiDisegno dell’interazione

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 l’usabilità dell’applicazione

AA 2004/05 Sistemi multimedialiDisegno dell’interazione

56

La metafora del cestino

• Perfetta• per eliminare documenti

• Errata• per rilasciare dischetti

AA 2004/05 Sistemi multimedialiDisegno dell’interazione

57

La metafora del VCR

• Finestra di dialogo per la stampante

• Cosa fa il bottone rewind:• Riavvolge la carta?

• Cancella il file?

AA 2004/05 Sistemi multimedialiDisegno dell’interazione

58

Metafore iper-realistiche

• Interfacce realizzate per assomigliare realisticamente ad oggetti fisici.

• Il trasferimento di conoscenza dall’oggetto fisico all’applicazione deve avvenire attraverso l’interazione con il computer.

• Spesso è controintuitivo.

• Il software è soggetto alle inutili limitazioni del mondo fisico.

AA 2004/05 Sistemi multimedialiDisegno dell’interazione

59

QuickTime4

AA 2004/05 Sistemi multimedialiDisegno dell’interazione

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

dell’applicazione

• Impossibile il ridimensionamento della finestra

AA 2004/05 Sistemi multimedialiDisegno dell’interazione

61

QuickTime4

Un controllo

Un controllo

NON è un controllo

AA 2004/05 Sistemi multimedialiDisegno dell’interazione

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 all’utente.

Il modo con cui gli utenti interagiscono con l’applicazione. La qualità dipende da:

AA 2004/05 Sistemi multimedialiDisegno dell’interazione

63

QuickTime4

• Mancanza d’indizi 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

AA 2004/05 Sistemi multimedialiDisegno dell’interazione

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 l’interfaccia non lo suggerisce

• Meglio sarebbe uno slider

AA 2004/05 Sistemi multimedialiDisegno dell’interazione

65

Infatti, QuickTime5 …

• Modifiche al controllo del volume

• Funzionalità tipiche delle finestre

AA 2004/05 Sistemi multimedialiDisegno dell’interazione

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

AA 2004/05 Sistemi multimedialiDisegno dell’interazione

67

RealCD: come si apre ?

AA 2004/05 Sistemi multimedialiDisegno dell’interazione

68

RealCD: come si esce ?

AA 2004/05 Sistemi multimedialiDisegno dell’interazione

69

AA 2004/05 Sistemi multimedialiDisegno dell’interazione

70

RealPhone della IBM

AA 2004/05 Sistemi multimedialiDisegno dell’interazione

71

Creative PC-DVD

Un telecomando per modellare l’interfaccia di un software !

AA 2004/05 Sistemi multimedialiDisegno dell’interazione

72

Net2Phone

da The RealNetworks Team - Seattle, WA USA

AA 2004/05 Sistemi multimedialiDisegno dell’interazione

73

RealPlayer

AA 2004/05 Sistemi multimedialiDisegno dell’interazione

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 l’aumento di volume viene visualizzato meglio con uno slider.

AA 2004/05 Sistemi multimedialiDisegno dell’interazione

75

Amplificatore virtuale

Interfaccia di un plugin che ricrea perfettamente l’interfaccia del processore fisico, incluso i quattro bottoni per controllare la ratio

AA 2004/05 Sistemi multimedialiDisegno dell’interazione

76

AA 2004/05 Sistemi multimedialiDisegno dell’interazione

77

Finalizer virtuale integra e comprime diversi canali audio

AA 2004/05 Sistemi multimedialiDisegno dell’interazione

78

Metafore dell’assistente

AA 2004/05 Sistemi multimedialiDisegno dell’interazione

80

Metafora dell’agente

• Una guida che segue durante l’interazione.

• Cerca di capire la vostra intenzione e di suggerire al meglio.

• Deve poter essere disattivata.

AA 2004/05 Sistemi multimedialiDisegno dell’interazione

81

AA 2004/05 Sistemi multimedialiDisegno dell’interazione

82

AA 2004/05 Sistemi multimedialiDisegno dell’interazione

83

AA 2004/05 Sistemi multimedialiDisegno dell’interazione

84

AA 2004/05 Sistemi multimedialiDisegno dell’interazione

85

AA 2004/05 Sistemi multimedialiDisegno dell’interazione

86

Assistenti Windows 95

AA 2004/05 Sistemi multimedialiDisegno dell’interazione

87