grafica ed interfacce per la comunicazione - paolavocca.it · o la scienza dei computer grafica ed...

25
Grafica ed interfacce per la comunicazione Scienze della Comunicazione Paola Vocca Lezione 2: Interazione Lucidi tradotti e adattati da materiale presente su http://www.hcibook.com/e3/resources/ e http://www.robertopolillo.it

Upload: dothien

Post on 13-Jul-2019

217 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Grafica ed interfacce per la comunicazione - paolavocca.it · o la scienza dei computer Grafica ed interfacce per la comunicazione A.A. 2013/14 21 . Ergonomia: esempio Grafica ed

Grafica ed interfacce per la comunicazione Scienze della

Comunicazione

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 la scienza dei computer Grafica ed interfacce per la comunicazione A.A. 2013/14 21 . Ergonomia: esempio Grafica ed

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. 2013/14 2

Page 3: Grafica ed interfacce per la comunicazione - paolavocca.it · o la scienza dei computer Grafica ed interfacce per la comunicazione A.A. 2013/14 21 . Ergonomia: esempio Grafica ed

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. 2013/14 3

Page 4: Grafica ed interfacce per la comunicazione - paolavocca.it · o la scienza dei computer Grafica ed interfacce per la comunicazione A.A. 2013/14 21 . Ergonomia: esempio Grafica ed

Sistemi e interfacce d’uso

Grafica ed interfacce per la comunicazione A.A. 2013/14 4

dialogo

uomo-sistema sistema utente

mondo esterno

Interfaccia d’uso

Page 5: Grafica ed interfacce per la comunicazione - paolavocca.it · o la scienza dei computer Grafica ed interfacce per la comunicazione A.A. 2013/14 21 . Ergonomia: esempio Grafica ed

Varietà dei sistemi interattivi

Grafica ed interfacce per la comunicazione A.A. 2013/14 5

a

b

c

d

Page 6: Grafica ed interfacce per la comunicazione - paolavocca.it · o la scienza dei computer Grafica ed interfacce per la comunicazione A.A. 2013/14 21 . Ergonomia: esempio Grafica ed

Il dialogo utente-sistema

Grafica ed interfacce per la comunicazione A.A. 2013/14 6

sistema utente

azioni

dell’utente

(input)

risposte

del sistema

(output)

Page 7: Grafica ed interfacce per la comunicazione - paolavocca.it · o la scienza dei computer Grafica ed interfacce per la comunicazione A.A. 2013/14 21 . Ergonomia: esempio Grafica ed

I dispositivi per l’interazione

Grafica ed interfacce per la comunicazione A.A. 2013/14 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 la scienza dei computer Grafica ed interfacce per la comunicazione A.A. 2013/14 21 . Ergonomia: esempio Grafica ed

Evoluzione della complessità

Grafica ed interfacce per la comunicazione A.A. 2013/14 8

Page 9: Grafica ed interfacce per la comunicazione - paolavocca.it · o la scienza dei computer Grafica ed interfacce per la comunicazione A.A. 2013/14 21 . Ergonomia: esempio Grafica ed

Dimensioni della complessità

Grafica ed interfacce per la comunicazione A.A. 2013/14 9

Page 10: Grafica ed interfacce per la comunicazione - paolavocca.it · o la scienza dei computer Grafica ed interfacce per la comunicazione A.A. 2013/14 21 . Ergonomia: esempio Grafica ed

Dimensioni della complessità

Grafica ed interfacce per la comunicazione A.A. 2013/14 10

complessità

strutturale

complessità

funzionale bassa alta

ba

ssa

a

lta

Page 11: Grafica ed interfacce per la comunicazione - paolavocca.it · o la scienza dei computer Grafica ed interfacce per la comunicazione A.A. 2013/14 21 . Ergonomia: esempio Grafica ed

Dimensioni della complessità

Grafica ed interfacce per la comunicazione A.A. 2013/14 11

Page 12: Grafica ed interfacce per la comunicazione - paolavocca.it · o la scienza dei computer Grafica ed interfacce per la comunicazione A.A. 2013/14 21 . Ergonomia: esempio Grafica ed

Dimensioni della complessità

Grafica ed interfacce per la comunicazione A.A. 2013/14 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 la scienza dei computer Grafica ed interfacce per la comunicazione A.A. 2013/14 21 . Ergonomia: esempio Grafica ed

Dimensioni della complessità

Grafica ed interfacce per la comunicazione A.A. 2013/14 13

complessità

d’uso

complessità

funzionale bassa alta

ba

ssa

a

lta

Page 14: Grafica ed interfacce per la comunicazione - paolavocca.it · o la scienza dei computer Grafica ed interfacce per la comunicazione A.A. 2013/14 21 . Ergonomia: esempio Grafica ed

Le cause dell’evoluzione

Grafica ed interfacce per la comunicazione A.A. 2013/14 14

Page 15: Grafica ed interfacce per la comunicazione - paolavocca.it · o la scienza dei computer Grafica ed interfacce per la comunicazione A.A. 2013/14 21 . Ergonomia: esempio Grafica ed

L’interfaccia utente come “filtro

semplificatore

Grafica ed interfacce per la comunicazione A.A. 2013/14 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 la scienza dei computer Grafica ed interfacce per la comunicazione A.A. 2013/14 21 . Ergonomia: esempio Grafica ed

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. 2013/14 16

Page 17: Grafica ed interfacce per la comunicazione - paolavocca.it · o la scienza dei computer Grafica ed interfacce per la comunicazione A.A. 2013/14 21 . Ergonomia: esempio Grafica ed

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. 2013/14 17

Page 18: Grafica ed interfacce per la comunicazione - paolavocca.it · o la scienza dei computer Grafica ed interfacce per la comunicazione A.A. 2013/14 21 . Ergonomia: esempio Grafica ed

Grafica ed interfacce per la comunicazione A.A. 2013/14 18

R.Polillo - Ottobre 2010 19

Page 19: Grafica ed interfacce per la comunicazione - paolavocca.it · o la scienza dei computer Grafica ed interfacce per la comunicazione A.A. 2013/14 21 . Ergonomia: esempio Grafica ed

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. 2013/14 19

Page 20: Grafica ed interfacce per la comunicazione - paolavocca.it · o la scienza dei computer Grafica ed interfacce per la comunicazione A.A. 2013/14 21 . Ergonomia: esempio Grafica ed

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. 2013/14 20

Page 21: Grafica ed interfacce per la comunicazione - paolavocca.it · o la scienza dei computer Grafica ed interfacce per la comunicazione A.A. 2013/14 21 . Ergonomia: esempio Grafica ed

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. 2013/14 21

Page 22: Grafica ed interfacce per la comunicazione - paolavocca.it · o la scienza dei computer Grafica ed interfacce per la comunicazione A.A. 2013/14 21 . Ergonomia: esempio Grafica ed

Ergonomia: esempio

Grafica ed interfacce per la comunicazione A.A. 2013/14 22

Page 23: Grafica ed interfacce per la comunicazione - paolavocca.it · o la scienza dei computer Grafica ed interfacce per la comunicazione A.A. 2013/14 21 . Ergonomia: esempio Grafica ed

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. 2013/14 23

Page 24: Grafica ed interfacce per la comunicazione - paolavocca.it · o la scienza dei computer Grafica ed interfacce per la comunicazione A.A. 2013/14 21 . Ergonomia: esempio Grafica ed

Interdisciplinarietà dell’HCI

Grafica ed interfacce per la comunicazione A.A. 2013/14 24

Page 25: Grafica ed interfacce per la comunicazione - paolavocca.it · o la scienza dei computer Grafica ed interfacce per la comunicazione A.A. 2013/14 21 . Ergonomia: esempio Grafica ed

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. 2013/14 25