AA 2004/05Sistemi multimediali Disegno dellinterazione 1 Il disegno dellinterazione Decidere dove...

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


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.


3

Potere dell’interazione

Respirate profondamente ...

Ah, ah ...


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.


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


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


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


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.


10

Mappe del sito

• Panoramica sul sito• Anche a 3D

• Aiutano l’orientamento

• Visite guidate


11


12


13


14


15


16


17


18

Home page


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


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


22


23


24


25


26


27

Corporate identity


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


30


31


32


33


34


35


36


37

Immagini e metafore


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.


40


41


42


43


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


46


47


48


49


50

Metafore funzionali


52


53

Le icone del menu creano la metafora, suggerendo

la funzione

Le icone del menu creano la metafora, suggerendo

la funzione

Paint per Windows


54

asWedit per Unix

Microsoft PowerPoint

Real Player 7

QuickTime Player 4


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


56

La metafora del cestino

• Perfetta• per eliminare documenti

• Errata• per rilasciare dischetti


57

La metafora del VCR

• Finestra di dialogo per la stampante

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

• Cancella il file?


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.


59

QuickTime4


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


61

QuickTime4

Un controllo

Un controllo

NON è un controllo


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:


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


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


65

Infatti, QuickTime5 …

• Modifiche al controllo del volume

• Funzionalità tipiche delle finestre


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


67

RealCD: come si apre ?


68

RealCD: come si esce ?


69


70

RealPhone della IBM


71

Creative PC-DVD

Un telecomando per modellare l’interfaccia di un software !


72

Net2Phone

da The RealNetworks Team - Seattle, WA USA


73

RealPlayer


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.


75

Amplificatore virtuale

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


76


77

Finalizer virtuale integra e comprime diversi canali audio


78

Metafore dell’assistente


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.


81


82


83


84


85


86

Assistenti Windows 95


87

AA 2004/05Sistemi multimediali Disegno dellinterazione 1 Il disegno dellinterazione Decidere dove...

Documents

Transcript of AA 2004/05Sistemi multimediali Disegno dellinterazione 1 Il disegno dellinterazione Decidere dove...