grafica ed interfacce per la comunicazione - paolavocca.it · o traduzioni tra linguaggi di utente...
TRANSCRIPT
![Page 1: Grafica ed interfacce per la comunicazione - paolavocca.it · o Traduzioni tra linguaggi di utente e di sistema ... o migliorare la qualità della vita Grafica ed interfacce per la](https://reader031.vdocuments.pub/reader031/viewer/2022022800/5c6d582409d3f214088ba49c/html5/thumbnails/1.jpg)
Grafica ed interfacce per la comunicazione Scienze della
Comunicazione A.A.2014/15
Paola Vocca
Lezione 2: Interazione
Lucidi tradotti e adattati da materiale presente su
http://www.hcibook.com/e3/resources/ e
http://www.robertopolillo.it
![Page 2: Grafica ed interfacce per la comunicazione - paolavocca.it · o Traduzioni tra linguaggi di utente e di sistema ... o migliorare la qualità della vita Grafica ed interfacce per la](https://reader031.vdocuments.pub/reader031/viewer/2022022800/5c6d582409d3f214088ba49c/html5/thumbnails/2.jpg)
Cos’è interazione?
• Modelli di interazione
o Traduzioni tra linguaggi di utente e di sistema
• Ergonomia
o Caratteristiche fisiche interazione
• Contesto
o Sociale, organizzativo, motivazionale
Grafica ed interfacce per la comunicazione A.A. 2014/15 2
![Page 3: Grafica ed interfacce per la comunicazione - paolavocca.it · o Traduzioni tra linguaggi di utente e di sistema ... o migliorare la qualità della vita Grafica ed interfacce per la](https://reader031.vdocuments.pub/reader031/viewer/2022022800/5c6d582409d3f214088ba49c/html5/thumbnails/3.jpg)
Cos’è interazione?
• Comunicazione
Due sistemi A e B interagiscono se azioni di A
provocano cambiamenti in stato di B e viceversa.
Grafica ed interfacce per la comunicazione A.A. 2014/15 3
![Page 4: Grafica ed interfacce per la comunicazione - paolavocca.it · o Traduzioni tra linguaggi di utente e di sistema ... o migliorare la qualità della vita Grafica ed interfacce per la](https://reader031.vdocuments.pub/reader031/viewer/2022022800/5c6d582409d3f214088ba49c/html5/thumbnails/4.jpg)
Sistemi e interfacce d’uso
Grafica ed interfacce per la comunicazione A.A. 2014/15 4
dialogo
uomo-sistema sistema utente
mondo esterno
Interfaccia d’uso
![Page 5: Grafica ed interfacce per la comunicazione - paolavocca.it · o Traduzioni tra linguaggi di utente e di sistema ... o migliorare la qualità della vita Grafica ed interfacce per la](https://reader031.vdocuments.pub/reader031/viewer/2022022800/5c6d582409d3f214088ba49c/html5/thumbnails/5.jpg)
Varietà dei sistemi interattivi
Grafica ed interfacce per la comunicazione A.A. 2014/15 5
a
b
c
d
![Page 6: Grafica ed interfacce per la comunicazione - paolavocca.it · o Traduzioni tra linguaggi di utente e di sistema ... o migliorare la qualità della vita Grafica ed interfacce per la](https://reader031.vdocuments.pub/reader031/viewer/2022022800/5c6d582409d3f214088ba49c/html5/thumbnails/6.jpg)
Il dialogo utente-sistema
Grafica ed interfacce per la comunicazione A.A. 2014/15 6
sistema utente
azioni
dell’utente
(input)
risposte
del sistema
(output)
![Page 7: Grafica ed interfacce per la comunicazione - paolavocca.it · o Traduzioni tra linguaggi di utente e di sistema ... o migliorare la qualità della vita Grafica ed interfacce per la](https://reader031.vdocuments.pub/reader031/viewer/2022022800/5c6d582409d3f214088ba49c/html5/thumbnails/7.jpg)
I dispositivi per l’interazione
Grafica ed interfacce per la comunicazione A.A. 2014/15 7
mani tastiera, mouse,touchpad,
joystick, touch screen,
tavoletta grafica, guanto,
riconoscimento scrittura voce riconoscimento vocale
sguardo eye tracking
postura sensori
tatto guanto
vista schermi video, stampanti,
occhiali, caschi
udito dispositivi sonori,
sintesi vocale
DIS
PO
SIT
IVI
DI O
UT
PU
T
DIS
PO
SIT
IVI D
I
INP
UT
![Page 8: Grafica ed interfacce per la comunicazione - paolavocca.it · o Traduzioni tra linguaggi di utente e di sistema ... o migliorare la qualità della vita Grafica ed interfacce per la](https://reader031.vdocuments.pub/reader031/viewer/2022022800/5c6d582409d3f214088ba49c/html5/thumbnails/8.jpg)
Evoluzione della complessità
Grafica ed interfacce per la comunicazione A.A. 2014/15 8
![Page 9: Grafica ed interfacce per la comunicazione - paolavocca.it · o Traduzioni tra linguaggi di utente e di sistema ... o migliorare la qualità della vita Grafica ed interfacce per la](https://reader031.vdocuments.pub/reader031/viewer/2022022800/5c6d582409d3f214088ba49c/html5/thumbnails/9.jpg)
Dimensioni della complessità
Grafica ed interfacce per la comunicazione A.A. 2014/15 9
![Page 10: Grafica ed interfacce per la comunicazione - paolavocca.it · o Traduzioni tra linguaggi di utente e di sistema ... o migliorare la qualità della vita Grafica ed interfacce per la](https://reader031.vdocuments.pub/reader031/viewer/2022022800/5c6d582409d3f214088ba49c/html5/thumbnails/10.jpg)
Dimensioni della complessità
Grafica ed interfacce per la comunicazione A.A. 2014/15 10
complessità
strutturale
complessità
funzionale bassa alta
ba
ssa
a
lta
![Page 11: Grafica ed interfacce per la comunicazione - paolavocca.it · o Traduzioni tra linguaggi di utente e di sistema ... o migliorare la qualità della vita Grafica ed interfacce per la](https://reader031.vdocuments.pub/reader031/viewer/2022022800/5c6d582409d3f214088ba49c/html5/thumbnails/11.jpg)
Dimensioni della complessità
Grafica ed interfacce per la comunicazione A.A. 2014/15 11
![Page 12: Grafica ed interfacce per la comunicazione - paolavocca.it · o Traduzioni tra linguaggi di utente e di sistema ... o migliorare la qualità della vita Grafica ed interfacce per la](https://reader031.vdocuments.pub/reader031/viewer/2022022800/5c6d582409d3f214088ba49c/html5/thumbnails/12.jpg)
Dimensioni della complessità
Grafica ed interfacce per la comunicazione A.A. 2014/15 12
SISTEMAn FP (x 103)
SLOC (x 106)
SLOC/FP
U.S. Air Traffic Control 306 65.3 213
SAP 297 23.7 80
MS Vista 158 10.1 64
MS Office Professional 93 6.0 64
MS Word 2007 3 0.2 64
MS DOS 1.3 0.3 213
Google search engine 19 1.2 64
Amazon.com 18 0.5 27
Mozilla Firefox 1.3 0.075 53
F115 avionics package 22 2.1 91
![Page 13: Grafica ed interfacce per la comunicazione - paolavocca.it · o Traduzioni tra linguaggi di utente e di sistema ... o migliorare la qualità della vita Grafica ed interfacce per la](https://reader031.vdocuments.pub/reader031/viewer/2022022800/5c6d582409d3f214088ba49c/html5/thumbnails/13.jpg)
Dimensioni della complessità
Grafica ed interfacce per la comunicazione A.A. 2014/15 13
complessità
d’uso
complessità
funzionale bassa alta
ba
ssa
a
lta
![Page 14: Grafica ed interfacce per la comunicazione - paolavocca.it · o Traduzioni tra linguaggi di utente e di sistema ... o migliorare la qualità della vita Grafica ed interfacce per la](https://reader031.vdocuments.pub/reader031/viewer/2022022800/5c6d582409d3f214088ba49c/html5/thumbnails/14.jpg)
Le cause dell’evoluzione
Grafica ed interfacce per la comunicazione A.A. 2014/15 14
![Page 15: Grafica ed interfacce per la comunicazione - paolavocca.it · o Traduzioni tra linguaggi di utente e di sistema ... o migliorare la qualità della vita Grafica ed interfacce per la](https://reader031.vdocuments.pub/reader031/viewer/2022022800/5c6d582409d3f214088ba49c/html5/thumbnails/15.jpg)
L’interfaccia utente come “filtro
semplificatore
Grafica ed interfacce per la comunicazione A.A. 2014/15 15
L’interfaccia utente come
“filtro semplificatore”
R.Polillo - Ottobre 2010 16
Sistema interattivo utente
Filtro
Complessità
- funzionale
- strutturale Complessità d’uso
![Page 16: Grafica ed interfacce per la comunicazione - paolavocca.it · o Traduzioni tra linguaggi di utente e di sistema ... o migliorare la qualità della vita Grafica ed interfacce per la](https://reader031.vdocuments.pub/reader031/viewer/2022022800/5c6d582409d3f214088ba49c/html5/thumbnails/16.jpg)
Perché necessario semplificare l’uso
• Complessità crescente della tecnologia
• Pervasività della tecnologia nel mondo di oggi
• Chi non la sa o non la piò usare viene “tagliato
fuori”
o digital divide: – Per motivi materiali o di competenza
• Necessità di semplificarne l’utilizzo e di renderla
accessibile a tutti
o Universal design
• Necessità di comprendere ruoli e possibilità della
tecnologia
o migliorare la qualità della vita
Grafica ed interfacce per la comunicazione A.A. 2014/15 16
![Page 17: Grafica ed interfacce per la comunicazione - paolavocca.it · o Traduzioni tra linguaggi di utente e di sistema ... o migliorare la qualità della vita Grafica ed interfacce per la](https://reader031.vdocuments.pub/reader031/viewer/2022022800/5c6d582409d3f214088ba49c/html5/thumbnails/17.jpg)
Messaggio principale
• Progettare sistemi interattivi non significa solo
risolvere problemi tecnici,
ma anche (e soprattutto)
• individuare nuovi modi di utilizzare la tecnologia per
migliorare la qualità della vita di tutti
Grafica ed interfacce per la comunicazione A.A. 2014/15 17
![Page 18: Grafica ed interfacce per la comunicazione - paolavocca.it · o Traduzioni tra linguaggi di utente e di sistema ... o migliorare la qualità della vita Grafica ed interfacce per la](https://reader031.vdocuments.pub/reader031/viewer/2022022800/5c6d582409d3f214088ba49c/html5/thumbnails/18.jpg)
Grafica ed interfacce per la comunicazione A.A. 2014/15 18
R.Polillo - Ottobre 2010 19
![Page 19: Grafica ed interfacce per la comunicazione - paolavocca.it · o Traduzioni tra linguaggi di utente e di sistema ... o migliorare la qualità della vita Grafica ed interfacce per la](https://reader031.vdocuments.pub/reader031/viewer/2022022800/5c6d582409d3f214088ba49c/html5/thumbnails/19.jpg)
Obiettivi
• Comprendere principi e strumenti per:
o progettazione sistemi interattivi
o realizzazione sistemi interattivi
o valutazione sistemi interattivi
Grafica ed interfacce per la comunicazione A.A. 2014/15 19
![Page 20: Grafica ed interfacce per la comunicazione - paolavocca.it · o Traduzioni tra linguaggi di utente e di sistema ... o migliorare la qualità della vita Grafica ed interfacce per la](https://reader031.vdocuments.pub/reader031/viewer/2022022800/5c6d582409d3f214088ba49c/html5/thumbnails/20.jpg)
Human –Computer Interaction
• “HCI è una disciplina che si occupa della
progettazione, valutazione e realizzazione di sistemi
interattivi basati su computer destinati all’uso
umano e dello studio dei principali fenomeni che li
circondano”
Da. ACM SIGCHI Curricula for Human Computer Interaction, 1982.
http://www.acm .org/sigchi/cdg
Grafica ed interfacce per la comunicazione A.A. 2014/15 20
![Page 21: Grafica ed interfacce per la comunicazione - paolavocca.it · o Traduzioni tra linguaggi di utente e di sistema ... o migliorare la qualità della vita Grafica ed interfacce per la](https://reader031.vdocuments.pub/reader031/viewer/2022022800/5c6d582409d3f214088ba49c/html5/thumbnails/21.jpg)
Origine dell’HCI
• HCI ha le sue origini in due aree disciplinari molto
diverse:
o l’ergonomia
(ergon: lavoro; nomos: legge)
o la scienza dei computer
Grafica ed interfacce per la comunicazione A.A. 2014/15 21
![Page 22: Grafica ed interfacce per la comunicazione - paolavocca.it · o Traduzioni tra linguaggi di utente e di sistema ... o migliorare la qualità della vita Grafica ed interfacce per la](https://reader031.vdocuments.pub/reader031/viewer/2022022800/5c6d582409d3f214088ba49c/html5/thumbnails/22.jpg)
Ergonomia: esempio
Grafica ed interfacce per la comunicazione A.A. 2014/15 22
![Page 23: Grafica ed interfacce per la comunicazione - paolavocca.it · o Traduzioni tra linguaggi di utente e di sistema ... o migliorare la qualità della vita Grafica ed interfacce per la](https://reader031.vdocuments.pub/reader031/viewer/2022022800/5c6d582409d3f214088ba49c/html5/thumbnails/23.jpg)
Temi dell’HCI
• Metodologie e processi per la progettazione delle
interfacce fra uomo e computer
• Metodi e strumenti per la realizzazione delle
interfacce
• Tecniche per la valutazione e il confronto di
interfacce
• Progettazione di nuove tecniche di interazione
• Sviluppo di modelli descrittivi e predittivi
dell’interazione
• •...
Grafica ed interfacce per la comunicazione A.A. 2014/15 23
![Page 24: Grafica ed interfacce per la comunicazione - paolavocca.it · o Traduzioni tra linguaggi di utente e di sistema ... o migliorare la qualità della vita Grafica ed interfacce per la](https://reader031.vdocuments.pub/reader031/viewer/2022022800/5c6d582409d3f214088ba49c/html5/thumbnails/24.jpg)
Interdisciplinarietà dell’HCI
Grafica ed interfacce per la comunicazione A.A. 2014/15 24
![Page 25: Grafica ed interfacce per la comunicazione - paolavocca.it · o Traduzioni tra linguaggi di utente e di sistema ... o migliorare la qualità della vita Grafica ed interfacce per la](https://reader031.vdocuments.pub/reader031/viewer/2022022800/5c6d582409d3f214088ba49c/html5/thumbnails/25.jpg)
La sfida dell’HCI
“Progettare interfacce utente e ̀ un mestiere molto difficile.
Esso mette insieme due discipline complicate: la psicologia e la programmazione.
Queste discipline hanno background culturali molto diversi: la psicologia si occupa delle persone, la programmazione dei computer.
Gli psicologi dovrebbero essere empatici e comprensivi; i programmatori matematici e precisi.
Gli psicologi hanno già abbastanza problemi nel capire le persone anche quando queste non usano i computer.
I programmatori hanno abbastanza problemi nel far funzionare i programmi anche quando questi non sono utilizzati da alcuna persona.
Progettare una buona interfaccia utente richiede che queste queste due prospettive vengano messe insieme.” H.Thimbleby, User Interface Design, 1990
Grafica ed interfacce per la comunicazione A.A. 2014/15 25