Post on 01-May-2015
transcript
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