Interazione Avanzata:introduzione

Stefano Levialdi9 marzo, 2010

2

definizione

studia la relazione tra le persone (utenti) e computer (programmi) per la progettazione e lo sviluppo di sistemi interattivi

che siano usabili ed accessibili, affidabili e che supportino e facilitino le attività� umane

utilizzando informatica, psicologia, scienze cognitive,

ergonomia, design, teorie della comunicazione

3

interazione

fra umani: casuale

fra umani e macchine: deterministica

comunicativa multimodale monomodale ripetuta (-) multimediale (+)

4

CS vs WS:informatica vs scienza

della rete IMetrica

Legge di Moore Viste di pagine

Ordine (n) algor. Visitatore/mese

Gygabytes N° canzoni/video

(Sir Tim Berners-Lee - 2007)

5

CS vs WS:informatica vs scienza

della rete IIArgomenti

Reti calcolatori Reti sociali

Commut- pachetti Voce su IP, condiv. musicale

Informazione Relazioni

Linguaggi prog. Wikis, blogs,tags

Basi dati, sistemi operativi, e-government, e-learning,

Compilatori info medica, finanziaria

Grafica 3-D, algo di rendering, Creazione e condivisione,

Mappe, geometria computazionale Animazione, musica, foto,video clips.

6

CS vs WS:informatica vs scienza

della rete IIIFuoco

Tecnologia Applicazioni

Calcolatori Utenti

Supercalcolatori Dispositivi mobili

Programmatori efficaci Usabilità universale

7

i “soci”

8

i 5 (?) sensi umani elemento base è il sensore ogni sensore è mirato ad una specifica sensazione gli occhi per il rilevamento della luce nelle orecchie abbiamo sensori che rivelano l’orientamento sulla lingua abbiamo ricettori per il gusto nei muscoli abbiamo sensori che rivelano il movimento e

tensione relativi nella vescica abbiamo sensori che indicano il bisogno di

urinare ecc. ecc. sommando tutti riusciamo ad elencare fra 14 e 20 sensi

diversi !

9

i sensi e l’interazione

la vista: GUI - linguaggi visivi - frasi visive sguardo - movimenti oculari

il tatto: mouse - tastiera - guanto - abito gesti - sensori di superficie

l’udito/parlato: risposte vocali/comandi vocali

il gusto - l’olfatto: nulla per ora...

10

quale è il “nocciolo duro” della interazione?

sostenere e facilitare le diverse attività umanein situazioni di elevato numero di dati - anche multimediali

utilizzare sensori di varia natura sviluppare nuovi paradigmi per consentire

la ricerca, l’organizzazione, l’integrazione dell’informazione e l’apprendimento

in breve: lavorare, comunicare, prendere cura, giocare, apprendere, monitorare...

11

i seminariCasi di studio - 1 - e-learning

Casi di studio - 2 - sup. all’hand.

Casi di studio - 3 - gener. artefatti

Interazione avanzata su Web: dai plugin ad AJAX

Metodi formali nel progetto di modelli di utente

Progettazione di sistemi collaborativi

Progettazione di sistemi context-aware: gestione di contesti culturali, geografici, di dispositivo

Sistemi di progettazione di contenuti informativi e multimediali

Sistemi di gestione di contenuti informativi e multimediali

Realtà virtuale, realtà aumentata e realtà interpretata

Progettazione di strumenti virtuali e performance artistiche

Metodi formali nel progetto dell'interazione

Progettazione di Sistemi Interattivi relativamente al Contesto ed al Tempo

Rappresentazione e accesso a grandi quantità di dati/visualizzazione

Usabilità per i sistemi mobili

prove studenti

12

umano vs calcolatore

influenza mutua mutuacomportam. non preved. preved. (fortunatamente)

irreversibile reversibleconoscenza non codificata codificata

distribuita distribuitamemoria associativa indirizzi logici

con decadim. cancellab.terminazione da ogni uomo impossibile -

a meno di crash!modi amodale generalmente modalestato storia passata classe di prog. equival.

scopo programmi

13

di cosa si occupa l’interazione avanzata?

l’interazione mira a sfruttare i contenuti esistenti in diverse discipline, necessari per la progettazione di sistemi

e ad implementare sistemi di calcolo che possano sostenere le diverse attività degli utenti

in particolare, l’interazione uomo-macchina, tende ad integrare diverse discipline:

sociali, cognitive, percettive informatiche, elaborazione di segnali, apprendimento delle macchine

14

il ruolo dell’interazione nuovi paradigmi computazionali per progettare e costruire sistemi

che sostengono ed arrichiscono la vita delle persone: lavorativa, ludica, sportiva

alcuni temi rilevanti: interazione multimodale: corporale, gestuale, orale, verbale, oculare interazione fra umano e calcolatore e quella fra umani via calcolatore in modo

naturale e flessibile basi di dati di immagini per facilitare l’organizzazione, indicizzazione e

recupero di elementi della base attività sperimentali, emotive, culturali e sociali durante la computazione ricerca interattiva, interfacce ad agenti collaborazione via computer, calcolo ubiquo contesto dell’utente, modellazione del compito modellazione rispetto alle dinamiche sociali, etnocomputing

15

com. interattiva ed i media

Gesso e lavagna

Lucidi e lavagna luminosa

Diapositive e videoproiezione

Pagine web, documenti multimediali

1) Acqua2) Aria

Gesso e lavagna

Lucidi e lavagna luminosa

Diapositive e videoproiezione

Pagine web, documenti multimediali

16

obiettivi della progettazione della

interazione I Usabilità

facilità di apprendimento efficacia efficienza d’uso sicurezza d’uso utilità coerenza facilità di rammentazione

Regola dei 10 minuti (Nelson 1980)

17

obiettivi della progettazione della

interazione II Esperienza d’uso

sistemi in grado di dare soddisfazione all’utente

piacevoli da usare - divertenti - utili capaci di sostenere le motivazioni capaci di alimentare la creatività gratificanti che soddisfino i bisogni emotivi

18

divertimento

soddisfazione

+ motivazione

usabilità

bisogni emotivi

godibilità

+ creatività

gratificazione

+ intrattenere

+ aiuto + estetica

efficienza

utilità

efficacia+ ricordo

sicurezza+ apprendim.

usabilità ed esperienza d’uso

non tutti i requisiti sono sempre compatibili: bisognerà trovare compromessi...

19

concettualizzando l’interazione

comprensione dello spazio del problema i modelli concettuali:

il sistema, come insieme di idee e concetti integrati su ciò che esso deve fare e come esso viene visualizzato in modo tale da essere compreso dall’utente

i diversi modelli concettuali: basati su attività basati su oggetti

20

modelli basati su attività

attività: istruire conversare manipolare e navigare esplorare e sfogliare

non sono mutuamente esclusive esempio dell’assistente turistico

21

istruire

l’interazione si basa su comandi, istruzioni precise che ottengono effetti prevedibili

adeguata per compiti ripetitivi è veloce ed efficiente esempio: VCR, HiFi, etc.

22

conversare analogo ad una interazione fra umani il sistema risponde come se...fosse un altro individuo esempio: sistemi di assistenza, motori di ricerca,

supporto alle decisioni può basarsi sul riconoscimento del parlato, su

interrogazioni è sicuramente semplice per non esperti può risultare lento e tedioso (automated call centers) sono anche stati introdotti agenti animati per creare

l’illusione di avere un interlocutore umano

23

manipolare e navigare

rappresentazione continua degli oggetti ed azioni rilevanti

azioni rapidamente reversibili azioni fisiche ed impiego di tasti invece

della sottomissione di comandi in sintesi: manipolazione diretta: m.d.

24

vantaggi della m.d.

1. aiuta i principianti ad apprendere le azioni elementari

2. gli utenti esperti possono lavorare velocemente

3. gli utenti casuali possono ricordare le azioni senza oblio

4. gli utenti vedono inmediatamente i risultati5. gli utenti soffrono di minore ansietà6. gli utenti rapidamente diventano pratici e si

sentono padroni delle applicazioni

25

Apple Computer © (1987)

metafore visive della scrivania

metafore auditive della scrivania shhhlicc - per “aprire”i files crouik - per “chiudere” i files

m.d. anche in videogiochi, strumenti per la visualizzazione, e sistemi CAD

QuickTime™ e undecompressore TIFF (Non compresso)sono necessari per visualizzare quest'immagine.

26

esplorare e sfogliare

consentire agli utenti di esplorare e sfogliare come se si trovassero nel mondo reale su media fisici

i media fisici: biblioteche, depliants, riviste, libri...

esempi: portali, siti web, CDRoms, DVD...vengono concettualizzati come se fossero fisicamente esistenti

27

modelli basati su oggetti

come viene impiegato un oggetto in un particolare contesto

esempio: il foglio elettronico (Bricklin) esso simula un rapporto aggiornabile di movimenti finanziari (mirato ai contabili)

creare un foglio analogo al “movimento di cassa” renderlo interattivo, consentendo all’utente di

inserire dati e modificare i calcoli a volontà per potere osservare i risultati

fare eseguire i calcoli “necessari”

28

acquisti su web le modalità interattive sono diverse:

esplorazione su web conversazione con un agente

commerciale istruzioni di completamento del modulo

di pagamento con carta di credito i modelli concettuali d’interazione sono

ibridi e dipendono fortemente dall’applicazione

29

personalizzando un avatar amichevole

30

Price Wormer

31

metafore per l’interfaccia basate sulla combinazione di conoscenza famigliare

con nuovi concetti files gomma...

pro: facili da capire ed usare uso di “pipe” in Unix

contro: dalla emulazione alla simulazione (le cose funzionano in

modo diverso nel mondo reale) contradizioni logiche e culurali (cestino sotto la scrivania) troppo vincolanti (eccessivi annidamenti)

32

...ancora contro impediscono di comprendere il vero meccanismo

del sistema al di là della metafora (la metafora limita la comprensione alle azioni elementari)

ereditano sistemi mal progettati (calcolatori da tavolo)

limita la fantasia del progettista alle metafore (anelli di catena per rappresentare connessione)

Le metafore vanno usate con criterio, in genere sono utili e valide ma non possono essere l’unica forma di concettualizzazione

33

interagire con il Titanic 747 Jumbo:70.683 m

RMS Titanic:268.986 m

(Boeing 747)

34

≠ realtà... ≠ interazioni real objectscanale ottico

telepresencecanale tattile

virtual realitycanale visuale

enacted realitycanale presenziale

35

paradigmi di interazione inizialmente si pensava:

singolo utente una sola unità centrale di elaborazione un monitor una tastiera un mouse

ora le tecnologie senza fili, mobili, pervasive, ubique, indossabili, ... hanno modificato radicalmente i paradigmi di interazione

36

calcolo ubiquo I la prima generazione era quella dei grossi calcolatori degli anni ’50 – a valvole – la seconda è stata quella dei personal computerso PC – anni 70-80 e la terza è quella attuale, detta di calcolo ubiquo, anche chiamata della tecnologia morbida Alan Kay, della Apple, ha chiamato il calcolo ubiquo

il “Terzo Paradigma”. la computazione viene integrata con l’ambiente

37

calcolo ubiquo II gli utenti sfruttano le potenze di calcolo (e di comunicazione)

presenti su sistemi integrati ad edifici, pareti, mobili, etc. interagiscono con essi attraverso gesti, parole, sguardi o movimenti

corporali i sistemi integrati nell’ambiente dovranno essere sensibili ai

cambiamenti del loro habitat adeguandosi ad esso automaticamente

agiscono sulla base del fabbisogno dell’utente e delle sue preferenze.

esempi di applicazioni: q sistema GPS collegato ad un navigatore in un automobile fornendo

le indicazioni necessarie per arrivare a destinazione, q un lettore di codice a barre di prodotti di un supermercato

38

evoluzione della computazione

Mark Weiser, Mediated Spaces, http://www.research.ibm.com/journal/sj/384/mark.html

39

calcolo affettivo I L’affetto include il modo, l’emozione ed i sentimenti:

caratteristiche fondamentali dell’umano cheinfluenzano notevolmente i suoi riflessi, la suapercezione, la sua conoscenza ed il suo comportamento

Il sistema affettivo è: giudicante, assegna in modo veloce ed efficientevalenze positive e negative all’ambiente

mentre il sistema cognitivo: interpreta tali valenze e fornisceun significato al mondo circostante.

40

calcolo affettivo II La qualità affettiva:

abilità di un oggetto o stimolo a modificare l’attaccamentodi una persona a quell’oggetto.

I dati sperimentali ottenuti sulla interazione uomo-macchina: la qualità affettiva o edonistica di una interfaccia ha un impatto positivo sulla usabilità percepita dall’utente rispetto a tale interfaccia.

Stato di una persona (affettivo, sentimentale, modale):di natura fisiologica, consciamente accessibile e semplice, non riflessivo: una miscela, a livello sentimentale di piacere/dispiacere avendo quindi valori buoni/cattivi che generano interesse/repulsione in misura proporzionale all’impegno che la persona ritiene di volere assumere.

Questo stato è:di natura primitiva, universale, ubiqua ed è il cuore di ogni tipodi evento portatore di emozioni.

41

calcolo indossabile Calcolatore assorbito nello spazio personale dell’utente

operatività, interattività, sempre accesibile ed utilizzabile. Uno (o più) dispositivi sempre in grado di ricevere ed eseguire i comandi

che ricevono in qualunque situazione il calcolatore indossabile (WearComp) ha tutte le funzionalità di un sistema

programmabile: valido per applicazioni generali riconfigurabile essendo però anche intimamente legato a chi lo indossa.

Tre modalità operative: 1) costanza (constancy) 2) magnificazione (augmentation) 3) mediazione (mediation)

42

criteri di usabilità

rendere le cose visibili fornire controreazione fornire vincoli fornire una applicazione naturale fornire affordance

43

interazione nel contesto interazione “ricca” - reale contesto fisico e sociale dell’interazione analisi posizione-evento (semi-formale) uno strato del sistema a tutti i livelli di astrazione aspetti del lavoro catturati da una rigorosa analisi dei compiti nella collaborazione:

chi fa che cosa, cosa dobbiamo sapere e quando, eventi: iniziano attività, modelli degli artefatti e segnaposti per mantenere la traccia della

evoluzione.

44

notazioni orientate alle posizioni

orientate agli eventiaction:

user-event x (current/history of) input-status x stateresponse-event x (new) state

interstitial behaviour:(current history of) input-status x state output-status

Paint submenu

Text submenuMainmenu

select ‘graphics”pop-up

graphics submenu

select ‘text”pop-up

text submenu

select ‘paint”pop-up

paint submenu

Graphics submenu

45

status ed event l’interazione deve potere rappresentare sia le posizioni che gli

eventi (situazioni) posizioni* stati ad esempio: posizione del mouse, contenuti dello schermo e

anche stato del sistema posizione essere evento fare

si può sempre interrogare “la posizione” ma l’evento avviene e...ci si chiede “quando”

l’approccio situazione-evento si basa su: 1) modello semi-formale di interazione 2) previsioni psicologiche sulla reazione dell’utente

* con valore persistente

46

diversi livelli... astrazione a diversi livelli

1. di utente2. schermo3. dialogo4. applicazione

eventi percepiti ad ogni livello e le relative modifiche di posizione + le

risposte psicologiche dell’utente evidenziano eventuali eccezioni fra schermo ed

utente quindi da evitarsi nel progetto

47

Giovanni e Laura

Giovanni ha un appuntamento con Laura ogni pochi minuti G. guarda l’orologio e vede che

si avvicina l’ora dell’appuntamento

Laura deve fare un regalo a Giovanni L. vede sul suo calendario che fra pochi giorni G.

compie gli anni e decide di fargli un regalo

48

esempi applicativi posizione: data dall’orologio di G. che fornisce sempre il tempo

(analogico) - data dal calendario che fornisce sempre la data (discreta) eventi: superata la soglia temporale per andare all’appuntamento, G.

esce - se avesse usato la sveglia, l’orologio ha sia posizione che evento (suona) - L. va ad acquistare il regalo, il giorno del compleanno

polling: G. guardava periodicamente il suo orologio. E’ un modo standard per trasformare una posizione in un evento.

reale vs. percepito: vi sono spesso intervalli fra gli eventi accaduti e quelli percepiti (G. ha visto l’orologio prima e...qualche minuto dopo la sua soglia)

granularità: l’appuntamento e la data di compleanno hanno scale temporali molto diverse - cambia l’interpretazione di eventi e posizioni in funzione della scala temporale.

49

implicazioni progettuali

le applicazioni devono generare eventi per gli utenti, impiegando rappresentazioni

bisogna tenere conto della scala dei tempi non generando eventi troppo velocemente o

lentamente G. può semplicemente usare un “tempo

max”(sveglia) L. non può trovare il “momento giusto” per la sua

sveglia

50

percezioni... analisi e previsione di stimoli per catturare l’attenzione

dell’utente dove guarda?

spostando il mouse guarderà al bersaglio tipicamente, ma non sempre, sul punto di inserimento nel testo ad intervalli, sullo schermo, l’apparizione di un messaggio garantirà

necessariamente l’attenzione bisogna mettere le informazioni dove esse siano visibili eventi non previsti devono catturare l’attenzione via suoni,

campanelli, etc. la visione periferica nota rapidamente eventuali spostamenti anche cambiamenti repentini di colore sono facilmente visibili

51

evento-posizione: e-mail

G. invia un messaggio a L.

tempo

il messaggioè ricevuto

filesystem

vede se il fileè cambiato

polling

applicazionee-mail

cambiaicona

schermoutente

polls

eventopercepito

dall’utente

evento

cambiamentodi posizione

52

analisi vari agenti attivi (G., l’applic. e-mail, ed L.)

generano eventi mediati da elementi di posizione (il deposito di files e lo schermo)

vi sono anche sistemi con connessioni dirette: eventi-eventi o anche posizioni-posizioni - x esempio: mouse-cursore su schermo

vediamo il fuzionamento: se il messaggio era “Fuoco: scappate!” allora la scala dei tempi lo rendeva

poco utilizzabile (il polling della applic. e-mail è ciclico ad intervalli) è possibile cambiare gli intervalli: minuti, quarto d’ora, ora...

53

interfacce x e-mail esame esplicito

polling a scala ridotta suoneria udibile

appena arriva il messaggio di posta facce animate

secondo chi scrive, esiste un volto animato che lo rappresenta, la posta ricevuta viene così identificata

ciò che si vuole è: un evento garantito in una scala temmporale di

minuti

54

evento-posizione: tasto

tasto: widget standard l’interazione è determinata

dall’ambiente di widgets disponibili problema: l’utente pensa di avere

attivato il tasto...ed invece NO esempio: cancellazione di testo

55

cancellazione I

L. seleziona del testo (mouse down) L. sposta il mouse (mouse up) fino al tasto

“delete” L. preme (mouse down) sul tasto “delete” Il testo selezionato non viene eliminato

dall’applicazione Il tasto funziona solamente per mouse up Non vi è feedback per l’utente sull’azione

compiuta

delete

56

cancellazione II - nil

applicazione dialogo schermo utente

mouse “down”su delete

evidenzia delete spostamento

da delete

eliminaevidenzia

mouse “up”nessunfeedback

57

cancellazione II - ok

applicazione dialogo schermo utente

mouse “down”su delete

evidenzia delete mouse “up”

eliminaevidenzia

eseguidelete

modificail testo chiusura

non si percepiscefeedback

58

soluzioni

il dialogo deve fornire un evento: flash suono

un utente esperto può ignorare il risultato di errare l’azione sul tasto

un utente principiante controllerà ogni passo e quindi scorgerà se il “delete” ha funzionato

valutazioni di usabilità con utenti “non esperti” potrebbero fornire dati invalidi...

59

conclusioni l’interazione avviene fra due soci: l’utente/i ed il

programma il primo non è prevedibile - il secondo lo deve

essere gli strumenti ed i metodi che descrivono

l’interazione, dipendono dalla tecnologia scelta, dalla applicazione e dalla classe di utenti

i modelli formali, l’analisi dei requisiti, ed il modello dell’utente, sono i ferri del mestiere dell’informatico esperto nella Interazione

60

bibliografia ISuggested Readings in

Human Computer Interaction (HCI), User Interface (UI) Development, & Human Factors (HF)

Gary Perlman http://hcibib.org/readings.html

Designing Web UsabilityJakob Nielsen, MacMillan Computer Publishing, New York, 2000

Jared Spool sito commerciale www.useit.com

Human-Computer Interaction, A. Dix, J. Finlay, G. Abowd, R. Beale, 3rd edition, 2004 Prentice Hall,

www.hiraeth.com/books/hciDesigning the User

Interface Ben Shneiderman, Addison-Wesley, New York, 1998, 3rd Edition

http://www.aw.com/DTUIInteraction Design

Preece, Rogers, Sharp, John Wiley & Sons, New York, 2002

61

bibliografia II IADIS International Conference Interfaces and

Human Computer Interaction 2010. 28 Jul 2010 → 30 Jul 2010; Freiburg, Germany,

www.ihci-conf.org/

CHI (ACM Conference on Human Factors in Computing Systems) 28th Conference http://chi2010.org/ Atlanta USA

Oct 3, 2010 - Oct 6, 2010, New York City, Apr 2, 2010. HCI-Aero 2010, International Conference on Human-Computer Interaction in Aeronautics, http://www.interaction-design.org/

2010-09-07 2010-09-10, Mobile HCI 2010, 12th International Conference on Human-Computer Interaction with Mobile Devices and Services, Lisbon, Portugal, http://mobilehci2010.di.fc.ul.pt/

HCI 2010 conference details for the World Computer Congress 2010, Brisbane, Australia,

and part of IFIP, www.wcc2010.com/HCI2010/

IHCI 2010 has a wide scope covering various facets of HCI. Allahabad, India, http://hci.iiita.ac.in/

Designing Interactive Systems Conference 201016 Aug 2010 → 20 Aug 2010, Aarhus, Denmarkhttp://www.dis2010.org

NordiCHI 2010October 16-20 Reykjavic, Icelandwww.nordichi2010.org

62

HCI Topics @ Interfaces & HCI 2010 in Freiburg- Affective User-centred analysis, design and evaluation- The value of Affective Interfaces/ Systems/Application/ Interaction- Generational differences and technology design- Measurement of success of emotional technology/interfaces- Supporting user populations from difference generations- Supporting user populations with Physical Disabilities- Supporting user populations with Intellectual Disabilities- Creativity Support Systems- Emotional Design issues/methods/experiences for novel interfaces including tangible,

mixed reality interfaces and multi-modal interfaces- Emotional Design issues/methods/experiences for mobile and ubiquitous computing- Usability- User studies and fieldwork- Methodological implications of emotional user studies. - Participatory design and cooperative design techniques- Ethical issues in emotional design- HCI education and design education- Eliciting User Requirements

63