Interazione Avanzata:
introduzione
Stefano Levialdi
9 marzo, 2010
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
2
interazione

fra umani: casuale

fra umani e macchine: deterministica

comunicativa



multimodale
monomodale ripetuta (-)
multimediale (+)
3
CS vs WS:
informatica vs scienza della
rete I
Metrica
Legge di Moore
Viste di pagine
Ordine (n) algor.
Visitatore/mese
Gygabytes
N° canzoni/video
(Sir Tim Berners-Lee - 2007)
4
CS vs WS:
informatica vs scienza della
Argomenti
rete II
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
5
clips.
CS vs WS:
informatica vs scienza della
rete
III
Fuoco
Tecnologia
Applicazioni
Calcolatori
Utenti
Supercalcolatori
Dispositivi mobili
Programmatori efficaci
Usabilità universale
6
i “soci”
7
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 !
8
i sensi e l’interazione

la vista:



il tatto:



mouse - tastiera - guanto - abito
gesti - sensori di superficie
l’udito/parlato:


GUI - linguaggi visivi - frasi visive
sguardo - movimenti oculari
risposte vocali/comandi vocali
il gusto - l’olfatto:

nulla per ora...
9
quale è il “nocciolo duro” della
interazione?



sostenere e facilitare le diverse attività umane
in 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...
10
i seminari
Casi 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 contextaware:
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
11
umano vs calcolatore
influenza
comportam.
conoscenza
memoria
terminazione
modi
stato
mutua
non preved.
irreversibile
non codificata
distribuita
associativa
con decadim.
da ogni uomo
mutua
preved. (fortunatamente)
reversible
codificata
distribuita
indirizzi logici
cancellab.
impossibile a meno di crash!
amodale
generalmente modale
storia passata classe di prog. equival.
scopo
programmi
12
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
13
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
14
com. interattiva ed i media

Gesso e lavagna

Lucidi e lavagna luminosa

Diapositive e videoproiezione
1) Acqua
2) Aria
Gesso
e lavagna
Lucidi
e lavagna luminosa
Diapositive
Pagine

e videoproiezione
web, documenti multimediali
Pagine web, documenti multimediali
15
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)
16
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






17
usabilità ed esperienza d’uso
divertimento
soddisfazione
bisogni emotivi
efficienza
godibilità
gratificazione
+ ricordo
efficacia
usabilità
+ apprendim.
+ intrattenere
sicurezza
+ creatività
utilità
+ aiuto
+ estetica
+ motivazione
non tutti i requisiti sono sempre compatibili:
bisognerà trovare compromessi...
18
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
19
modelli basati su attività

attività:





istruire
conversare
manipolare e navigare
esplorare e sfogliare
non sono mutuamente esclusive

esempio dell’assistente turistico
20
istruire




l’interazione si basa su comandi,
istruzioni precise che ottengono effetti
prevedibili
adeguata per compiti ripetitivi
è veloce ed efficiente
esempio: VCR, HiFi, etc.
21
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 22
creare l’illusione di avere un interlocutore umano
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.
23
vantaggi della m.d.
1.
2.
3.
4.
5.
6.
aiuta i principianti ad apprendere le azioni
elementari
gli utenti esperti possono lavorare
velocemente
gli utenti casuali possono ricordare le azioni
senza oblio
gli utenti vedono inmediatamente i risultati
gli utenti soffrono di minore ansietà
gli utenti rapidamente diventano pratici e si
sentono padroni delle applicazioni
24
Apple Computer © (1987)

metafore visive della scrivania
uice
kT
im F
e™
euncom p
cces
omsprares
sQor
(N
o
so
node
e
n
iper
visTIua
lizzar
enqu
est r'imess
mo
g)ine.
a

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
25
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
26
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”
27
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
28




personalizzando un avatar amichevole
29
Price Wormer
30
metafore per l’interfaccia

basate sulla combinazione di conoscenza
famigliare con nuovi concetti



pro:



files
gomma...
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)
31
...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
32
interagire con il Titanic

747 Jumbo:70.683 m
(Boeing 747)

RMS Titanic:268.986 m
33
≠ realtà... ≠ interazioni
real objects
canale ottico

telepresence
canale tattile

virtual reality
canale visuale

enacted reality
canale presenziale

34
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
35
calcolo ubiquo I
la prima generazione era quella dei grossi
calcolatori degli anni ’50 – a valvole –
la seconda è stata quella dei personal computers
o 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





36
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:
1. sistema GPS collegato ad un navigatore in un automobile
fornendo le indicazioni necessarie per arrivare a
destinazione,
37
2. un lettore di codice a barre di prodotti di un supermercato





evoluzione della
computazione
Mark Weiser, Mediated Spaces,
http://www.research.ibm.com/journal/sj/384/mark.html
38
calcolo affettivo I

L’affetto include il modo, l’emozione ed i sentimenti:
caratteristiche fondamentali dell’umano che
influenzano notevolmente i suoi riflessi, la sua
percezione, la sua conoscenza ed il suo comportamento
Il sistema affettivo è:
giudicante,
assegna in modo veloce ed efficiente
valenze positive e negative all’ambiente
mentre il sistema cognitivo:
interpreta tali valenze e fornisce
un significato al mondo circostante.






39
calcolo affettivo II

La qualità affettiva:
abilità di un oggetto o stimolo a modificare l’attaccamento
di 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 tipo
di evento portatore di emozioni.
40
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)
41









criteri di usabilità





rendere le cose visibili
fornire controreazione
fornire vincoli
fornire una applicazione naturale
fornire affordance
42
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
43
della evoluzione.
notazioni

orientate alle posizioni select ‘graphics”
pop-up
graphics submenu
Main
menu

orientate agli eventi
select ‘text”
pop-up
text submenu
Graphics submenu
Text submenu
select ‘paint” Paint submenu
pop-up
paint submenu
action:
user-event x (current/history of) input-status x state
response-event x (new) state
interstitial behaviour:
(current history of) input-status x state
output-status
44
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
45
diversi livelli...

astrazione a diversi livelli
1.
2.
3.
4.




di utente
schermo
dialogo
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
46
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
47
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 di48
eventi e posizioni in funzione della scala temporale.
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
49
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
50
visibili
cambiamento
di posizione
evento-posizione: e-mail
evento
G. invia un messaggio a L.
il messaggio
è ricevuto
polling
vede se il file
è cambiato
cambia
icona
polls
evento
percepito
dall’utente
file
system
applicazione
e-mail
schermo
utente
tempo
51
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...
52
 interfacce x e-mail

esame esplicito


suoneria udibile


appena arriva il messaggio di posta
facce animate


polling a scala ridotta
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
53
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
54
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
delete
dall’applicazione
Il tasto funziona solamente per mouse up
Non vi è feedback per l’utente sull’azione
compiuta
55
cancellazione II - nil
mouse “down”
su delete
evidenzia
delete
spostamento
da delete
elimina
evidenzia
nessun
feedback
applicazione
dialogo
mouse “up”
schermo
utente
56
cancellazione II - ok
mouse “down”
su delete
esegui
delete
evidenzia
delete
mouse “up”
elimina
evidenzia
modifica
il testo
applicazione
dialogo
chiusura
non si percepisce
feedback
schermo
utente
57
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...
58
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
59
bibliografia I
Suggested Readings in Human
Computer Interaction (HCI), User
Interface (UI) Development, &
Human Factors (HF)
Gary Perlman
http://hcibib.org/readings.html
Designing Web Usability
Jakob 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/hci
Designing the User Interface
Ben Shneiderman, AddisonWesley, New York, 1998, 3rd
Edition
http://www.aw.com/DTUI
Interaction Design
Preece, Rogers, Sharp, John
Wiley & Sons, New York, 2002
60
bibliografia II

IADIS International Conference Interfaces and
Human Computer Interaction 2010. 28 Jul 2010
→ 30 Jul 2010; Freiburg, Germany,
www.ihci-conf.org/

and part of IFIP, www.wcc2010.com/HCI2010/




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,


IHCI 2010 has a wide scope covering various
facets of HCI. Allahabad, India,
http://hci.iiita.ac.in/
Designing Interactive Systems Conference 2010
16 Aug 2010 → 20 Aug 2010, Aarhus, Denmark
http://www.dis2010.org
NordiCHI 2010
October 16-20 Reykjavic, Iceland
www.nordichi2010.org
61
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
62
- Eliciting User Requirements
63