SlideShare une entreprise Scribd logo
1  sur  52
Corso di Interazione Uomo Macchina
AA 2014-2015
Roberto Polillo
Corso di laurea in Informatica
Università di Milano Bicocca
Dipartimento di Informatica, Sistemistica e Comunicazione
Conoscere l'utente: visione
La visione
3
cono
bastoncello
Luce
R.Polillo - Marzo 2015
Acuità visiva

Capacità dell’occhio di distinguere due punti vicini
E’ misurata dall’angolo minimo sotto cui devono essere visti
perché l’occhio li percepisca separatamente
Se tale angolo vale 1’, le loro immagini si trovano sulla retina a una
distanza di 5 µm e stimolano due elementi non contigui della stessa,
condizione indispensabile perché siano visti distinti da un occhio normale.
NB: 1° (grado) = 60’ (minuti) = 3600’’ (secondi)
R.Polillo - Marzo 2015
4
Misura dell’acuità visiva
Si misura in valori reciproci dell’angolo visivo minimo alla quale
due punti non appaiono più separati
Esempio:
Se tale l’angolo è di 2’ l’acuità visiva è pari a 1/2, ossia a 5/10
(non è la metà del normale, poiché l’acuità visiva normale è 11/10).
L’acuità visiva dipende dall’età del soggetto (tende a diminuire dopo i 70
anni), dallo stimolo, dalle caratteristiche dell’occhio, dall’integrità dei coni,
ecc.
L’acuità visiva è massima in corrispondenza della fovea centrale, e
diminuisce verso la periferia.
R.Polillo - Marzo 2015
5
400 450 500 550 600 650
Lunghezza d’onda
Rispostarelativadeiconi
100%
80%
60%
40%
20%
Coni
R
Coni
G
Coni
B
azzurro arancione
Spettro visibile380
680 nm= 10-9 m
La visione del colore
R.Polillo - Marzo 2015
6
Daltonismo
 Se alcuni tipi di coni mancano, alcuni colori non
vengono distinti
 Vari tipi di daltonismo, a seconda dei tipi di coni
mancanti
 Quello più comune: incapacità a distinguere i colori
compresi fra 540 e 700 nm (dal verde al rosso)
(8% degli uomini e 0,4% delle donne)
R.Polillo - Marzo 2015
7
Esempio: insensibilità al rosso
R.Polillo - Marzo 2015
8
Il test di Ishihara
Visione normale: 5; Daltonismo per rosso/verde: 2R.Polillo - Marzo 2015
9
Esempio
Un daltonico non può comprendere questa immagine
R.Polillo - Marzo 2015
10
R.Polillo - Marzo 2015
R.Polillo - Marzo 2015
Esempio: SmartMoney.com
R.Polillo - Marzo 2015
Esempi
 http://www.bbc.com/sport/football/tables
 http://wearecolorblind.com/example/google-
analytics/
 http://wearecolorblind.com/example/wordfeud/
R.Polillo - Marzo 2015
14
Movimenti oculari
Saccadi
Movimenti oculari molto veloci (possono superare i 400°/sec) e molto
brevi (20~50 msec, durante i quali la visione è soppressa), che hanno
il compito di spostare l’asse visivo durante l’esplorazione di una scena
(fino a 4/5 volte al sec).
Fissazione
Pausa tra due saccadi successive; rappresenta l’intervallo di tempo
durante il quale viene acquisita l’informazione visiva (~60-700 msec)
Scanpath
Tracciato bidimensionale che gli occhi compiono durante
l’esplorazione di una scena, composta da una successione di saccadi
e di fissazioni (durata tipica saccade+fissazione: 230 msec)
R.Polillo - Marzo 2015
15
Movimenti oculari: esempio
Fissazione
(60-700 msec)
Saccade
(20-50 msec)
fissazione
16
R.Polillo - Marzo 2015
Eye tracking
17
R.Polillo - Marzo 2015
Scanpath
R.Polillo - Marzo 2015
18
Eye tracking: video
Nella lettura di pagine web:
 http://it.youtube.com/watch?v=OiYZyPqrqsA
 http://www.youtube.com/watch?v=ilq9qeyVjT0
Lettura di una rivista:
 http://www.youtube.com/watch?v=S_u2hhc6O
ng
19
R.Polillo - Marzo 2015
R.Polillo - Marzo 2015
Heat-map di tre pagine web (da J.Nielsen)
Heat map
21
R.Polillo - Marzo 2015
Percorsi visivi
R.Polillo - Marzo 2015
22
1
2 3
4 5
6 7
Yarbus, 1967
R.Polillo - Marzo 2015
23
R.Polillo - Marzo 2015
Percorsi visivi: siete d’accordo con questo layout?
25
R.Polillo - Marzo 2015
26
PowerPoint 2008 e 2011, Mac
R.Polillo - Marzo 2015
27
PowerPoint
2010, Windows
Visione e pensiero
 I dati ricevuti dall’apparato visivo vengono elaborati
dal nostro cervello in modo molto complesso
 Noi “vediamo” la profondità del campo visivo, la
dimensione relativa degli oggetti, riconosciamo uno
stesso oggetto anche quando è parzialmente
nascosto, vediamo in modo diverso a seconda del
contesto…
 … a volte i meccanismi di elaborazione vengono
“ingannati” dall’immagine che percepiamo (“illusioni
ottiche”)
 In sintesi: noi non vediamo “quello che c’è”, ma ciò
che il nostro cervello ci fa vedere
R.Polillo - Marzo 2015
28
Bande di Mach
Anche se ogni banda è
uniforme, vediamo la zona
di sinistra più scura,
perché vicina a una banda
più chiara…
… e la zona di destra più
chiara, perché vicina a una
banda più scura
R.Polillo - Marzo 2015
30
Bande di Mach
R.Polillo - Marzo 2015
31
I riquadri chiari in ombra hanno lo
stesso tono di grigio dei riquadri scuri
alla luce
R.Polillo - Marzo 2015
I riquadri chiari in ombra hanno lo
stesso tono di grigio dei riquadri scuri
alla luce
R.Polillo - Marzo 2015
Esempio: percezione della dimensione e
della distanza
Due oggetti della stessa dimensione a distanze diverse hanno
angoli visuali diversi: le immagini sulla retina hanno dimensioni
diverse…
…tuttavia riconosciamo che hanno la stessa dimensione (“legge
della costanza della dimensione”)

’
R.Polillo - Marzo 2015
34
Gustave Caillebotte R.Polillo - Marzo 2015
Esempio: percezione della dimensione e
della distanza (segue)
Due oggetti di dimensioni diverse a distanze diverse possono
avere lo stesso angolo visuale…
… eppure riconosciamo che hanno dimensioni diverse

R.Polillo - Marzo 2015
36
R.Polillo - Marzo 2015
Ma il contesto può anche ingannarci…
R.Polillo - Marzo 2015
R.Polillo - Marzo 2015
Le linee rosse orizzontali sono parrallele o
no?
R.Polillo - Marzo 2015
R.Polillo - Marzo 2015
Il contesto visivo, le nostre attese e la nostra
esperienza passata ci permettono di “vedere” le
immagini dubbie in un determinato modo:
Qui vediamo un segmento “dietro”
una figura verticale
Qui vediamo un cubo “dietro”
una superficie bucataR.Polillo - Marzo 2015
Degli studi hanno mostrato
che i bambini non
riconoscono questa
immagine, perchè la loro
memoria non conosce
ancora questa situazione.
Ciò che vedono i bambini
sono 9 delfini.R.Polillo - Marzo 2015
Un altro esempio
Auto oasa
Qui
vediamo
una “o”
Qui
vediamo
una “c”
R.Polillo - Marzo 2015
44
La camera di Ames (1946)
R.Polillo - Marzo 2015
Viewing point
R.Polillo - Marzo 2015
R.Polillo - Marzo 2015
In assenza di contesto, alcune figure possono
essere ambigue
R.Polillo - Marzo 2015
48
R.Polillo - Marzo 2015
R.Polillo - Marzo 2015
R.Polillo - Marzo 2015
R.Polillo - Marzo 2015
Cosa vedi? Una spirale o dei cerchi?
R.Polillo - Marzo 2015
Fissa il puntino e muovi la testa avanti e indietro .R.Polillo - Marzo 2015
Concentrati sulla croce al centro.
I cerchi rosa diventano verdi… e poi scompaiono..
R.Polillo - Marzo 2015

Contenu connexe

Tendances

8. Valutare la usabilita'
8. Valutare la usabilita'8. Valutare la usabilita'
8. Valutare la usabilita'Roberto Polillo
 
5. progettare per l'utente (i)
5. progettare per l'utente (i)5. progettare per l'utente (i)
5. progettare per l'utente (i)Roberto Polillo
 
20. Principi e linee guida (I)
20. Principi e linee guida (I)20. Principi e linee guida (I)
20. Principi e linee guida (I)Roberto Polillo
 
20. Principi e linee guida (II)
20. Principi e linee guida (II)20. Principi e linee guida (II)
20. Principi e linee guida (II)Roberto Polillo
 
7. Ingegneria e creativita'
7. Ingegneria e creativita'7. Ingegneria e creativita'
7. Ingegneria e creativita'Roberto Polillo
 
15. Ancora sulla grafica
15. Ancora sulla grafica15. Ancora sulla grafica
15. Ancora sulla graficaRoberto Polillo
 
Figure dal libro Facile da Usare
Figure dal libro Facile da UsareFigure dal libro Facile da Usare
Figure dal libro Facile da UsareRoberto Polillo
 
16. Evoluzione dei paradigmi di interazione uomo macchina (I)
16. Evoluzione dei paradigmi di interazione uomo macchina (I)16. Evoluzione dei paradigmi di interazione uomo macchina (I)
16. Evoluzione dei paradigmi di interazione uomo macchina (I)Roberto Polillo
 
22. Conclusioni del corso
22. Conclusioni del corso22. Conclusioni del corso
22. Conclusioni del corsoRoberto Polillo
 
13. Conoscere l'utente: il sistema motorio
13. Conoscere l'utente: il sistema motorio13. Conoscere l'utente: il sistema motorio
13. Conoscere l'utente: il sistema motorioRoberto Polillo
 
8. Valutare la usabilita'
8. Valutare la usabilita'8. Valutare la usabilita'
8. Valutare la usabilita'Roberto Polillo
 
10. Conoscere l'utente (Parte I)
10. Conoscere l'utente (Parte I)10. Conoscere l'utente (Parte I)
10. Conoscere l'utente (Parte I)Roberto Polillo
 
12.Visione e progettazione grafica
12.Visione e progettazione grafica12.Visione e progettazione grafica
12.Visione e progettazione graficaRoberto Polillo
 
17. Principi e linee guida (ii)
17. Principi e linee guida (ii)17. Principi e linee guida (ii)
17. Principi e linee guida (ii)Roberto Polillo
 
5. Pprogettare per l'utente (i)
5. Pprogettare per l'utente (i)5. Pprogettare per l'utente (i)
5. Pprogettare per l'utente (i)Roberto Polillo
 
11. Conoscere l'utente (ii): la visione
11. Conoscere l'utente (ii): la visione11. Conoscere l'utente (ii): la visione
11. Conoscere l'utente (ii): la visioneRoberto Polillo
 

Tendances (20)

8. Valutare la usabilita'
8. Valutare la usabilita'8. Valutare la usabilita'
8. Valutare la usabilita'
 
5. progettare per l'utente (i)
5. progettare per l'utente (i)5. progettare per l'utente (i)
5. progettare per l'utente (i)
 
20. Principi e linee guida (I)
20. Principi e linee guida (I)20. Principi e linee guida (I)
20. Principi e linee guida (I)
 
20. Principi e linee guida (II)
20. Principi e linee guida (II)20. Principi e linee guida (II)
20. Principi e linee guida (II)
 
7. Ingegneria e creativita'
7. Ingegneria e creativita'7. Ingegneria e creativita'
7. Ingegneria e creativita'
 
15. Ancora sulla grafica
15. Ancora sulla grafica15. Ancora sulla grafica
15. Ancora sulla grafica
 
Figure dal libro Facile da Usare
Figure dal libro Facile da UsareFigure dal libro Facile da Usare
Figure dal libro Facile da Usare
 
16. Evoluzione dei paradigmi di interazione uomo macchina (I)
16. Evoluzione dei paradigmi di interazione uomo macchina (I)16. Evoluzione dei paradigmi di interazione uomo macchina (I)
16. Evoluzione dei paradigmi di interazione uomo macchina (I)
 
22. Conclusioni del corso
22. Conclusioni del corso22. Conclusioni del corso
22. Conclusioni del corso
 
13. Conoscere l'utente: il sistema motorio
13. Conoscere l'utente: il sistema motorio13. Conoscere l'utente: il sistema motorio
13. Conoscere l'utente: il sistema motorio
 
8. Valutare la usabilita'
8. Valutare la usabilita'8. Valutare la usabilita'
8. Valutare la usabilita'
 
4. Usabilita
4. Usabilita4. Usabilita
4. Usabilita
 
10. Conoscere l'utente (Parte I)
10. Conoscere l'utente (Parte I)10. Conoscere l'utente (Parte I)
10. Conoscere l'utente (Parte I)
 
12.Visione e progettazione grafica
12.Visione e progettazione grafica12.Visione e progettazione grafica
12.Visione e progettazione grafica
 
9. Mobile design
9. Mobile design9. Mobile design
9. Mobile design
 
17. Principi e linee guida (ii)
17. Principi e linee guida (ii)17. Principi e linee guida (ii)
17. Principi e linee guida (ii)
 
5. Pprogettare per l'utente (i)
5. Pprogettare per l'utente (i)5. Pprogettare per l'utente (i)
5. Pprogettare per l'utente (i)
 
14.Progettare il testo
14.Progettare il testo14.Progettare il testo
14.Progettare il testo
 
9. Mobile design
9. Mobile design9. Mobile design
9. Mobile design
 
11. Conoscere l'utente (ii): la visione
11. Conoscere l'utente (ii): la visione11. Conoscere l'utente (ii): la visione
11. Conoscere l'utente (ii): la visione
 

En vedette

17. Evoluzione dei paradigmi di interazione uomo macchina (I)
17. Evoluzione dei paradigmi di interazione uomo macchina (I)17. Evoluzione dei paradigmi di interazione uomo macchina (I)
17. Evoluzione dei paradigmi di interazione uomo macchina (I)Roberto Polillo
 
18. Paradigmi di interazione uomo macchina (III)
18. Paradigmi di interazione uomo macchina (III)18. Paradigmi di interazione uomo macchina (III)
18. Paradigmi di interazione uomo macchina (III)Roberto Polillo
 
Teaching HCI to Undergraduate Computing Students: the Quest for the Golden Rules
Teaching HCI to Undergraduate Computing Students: the Quest for the Golden RulesTeaching HCI to Undergraduate Computing Students: the Quest for the Golden Rules
Teaching HCI to Undergraduate Computing Students: the Quest for the Golden RulesRoberto Polillo
 
Il Terzo Settore di fronte all'evoluzione dell'ICT
Il Terzo Settore di fronte all'evoluzione dell'ICTIl Terzo Settore di fronte all'evoluzione dell'ICT
Il Terzo Settore di fronte all'evoluzione dell'ICTRoberto Polillo
 
La presenza sul web delle organizzazioni non profit: esperienze e lezioni app...
La presenza sul web delle organizzazioni non profit: esperienze e lezioni app...La presenza sul web delle organizzazioni non profit: esperienze e lezioni app...
La presenza sul web delle organizzazioni non profit: esperienze e lezioni app...Roberto Polillo
 
Modello Excel per assessment siti Web 1.0
Modello Excel per assessment siti Web 1.0Modello Excel per assessment siti Web 1.0
Modello Excel per assessment siti Web 1.0Roberto Polillo
 
Rapporto valutazione sito Web
Rapporto valutazione sito WebRapporto valutazione sito Web
Rapporto valutazione sito WebRoberto Polillo
 
Template Piano Di Qualita
Template Piano Di QualitaTemplate Piano Di Qualita
Template Piano Di QualitaRoberto Polillo
 
Template Intervista al commitente
Template Intervista al commitenteTemplate Intervista al commitente
Template Intervista al commitenteRoberto Polillo
 
Evoluzione dei sii web delle ONG italiane
Evoluzione dei sii web delle ONG italianeEvoluzione dei sii web delle ONG italiane
Evoluzione dei sii web delle ONG italianeRoberto Polillo
 
Il Non profit in rete: la presenza sul Web delle organizzazioni non profit
Il Non profit in rete: la presenza sul Web delle organizzazioni non profitIl Non profit in rete: la presenza sul Web delle organizzazioni non profit
Il Non profit in rete: la presenza sul Web delle organizzazioni non profitRoberto Polillo
 

En vedette (12)

17. Evoluzione dei paradigmi di interazione uomo macchina (I)
17. Evoluzione dei paradigmi di interazione uomo macchina (I)17. Evoluzione dei paradigmi di interazione uomo macchina (I)
17. Evoluzione dei paradigmi di interazione uomo macchina (I)
 
18. Paradigmi di interazione uomo macchina (III)
18. Paradigmi di interazione uomo macchina (III)18. Paradigmi di interazione uomo macchina (III)
18. Paradigmi di interazione uomo macchina (III)
 
Template Test Usabilita
Template Test UsabilitaTemplate Test Usabilita
Template Test Usabilita
 
Teaching HCI to Undergraduate Computing Students: the Quest for the Golden Rules
Teaching HCI to Undergraduate Computing Students: the Quest for the Golden RulesTeaching HCI to Undergraduate Computing Students: the Quest for the Golden Rules
Teaching HCI to Undergraduate Computing Students: the Quest for the Golden Rules
 
Il Terzo Settore di fronte all'evoluzione dell'ICT
Il Terzo Settore di fronte all'evoluzione dell'ICTIl Terzo Settore di fronte all'evoluzione dell'ICT
Il Terzo Settore di fronte all'evoluzione dell'ICT
 
La presenza sul web delle organizzazioni non profit: esperienze e lezioni app...
La presenza sul web delle organizzazioni non profit: esperienze e lezioni app...La presenza sul web delle organizzazioni non profit: esperienze e lezioni app...
La presenza sul web delle organizzazioni non profit: esperienze e lezioni app...
 
Modello Excel per assessment siti Web 1.0
Modello Excel per assessment siti Web 1.0Modello Excel per assessment siti Web 1.0
Modello Excel per assessment siti Web 1.0
 
Rapporto valutazione sito Web
Rapporto valutazione sito WebRapporto valutazione sito Web
Rapporto valutazione sito Web
 
Template Piano Di Qualita
Template Piano Di QualitaTemplate Piano Di Qualita
Template Piano Di Qualita
 
Template Intervista al commitente
Template Intervista al commitenteTemplate Intervista al commitente
Template Intervista al commitente
 
Evoluzione dei sii web delle ONG italiane
Evoluzione dei sii web delle ONG italianeEvoluzione dei sii web delle ONG italiane
Evoluzione dei sii web delle ONG italiane
 
Il Non profit in rete: la presenza sul Web delle organizzazioni non profit
Il Non profit in rete: la presenza sul Web delle organizzazioni non profitIl Non profit in rete: la presenza sul Web delle organizzazioni non profit
Il Non profit in rete: la presenza sul Web delle organizzazioni non profit
 

Similaire à 11. Conoscere l'utente (II)

Similaire à 11. Conoscere l'utente (II) (12)

10. Conoscere l'utente (ii)
10. Conoscere l'utente (ii)10. Conoscere l'utente (ii)
10. Conoscere l'utente (ii)
 
L'occhio del fotografo
L'occhio del fotografoL'occhio del fotografo
L'occhio del fotografo
 
12.Progettare la grafica (ii)
12.Progettare la grafica (ii)12.Progettare la grafica (ii)
12.Progettare la grafica (ii)
 
9. Conoscere l utente
9. Conoscere l utente9. Conoscere l utente
9. Conoscere l utente
 
Progettare per l'errore
Progettare per l'erroreProgettare per l'errore
Progettare per l'errore
 
6. Progettare per l'utente (ii)
6. Progettare per l'utente (ii)6. Progettare per l'utente (ii)
6. Progettare per l'utente (ii)
 
9. Conoscere l'utente (I)
9. Conoscere l'utente (I)9. Conoscere l'utente (I)
9. Conoscere l'utente (I)
 
12. Progettare la grafica
12. Progettare la grafica12. Progettare la grafica
12. Progettare la grafica
 
6. Progettare per l'utente (ii)
6. Progettare per l'utente (ii)6. Progettare per l'utente (ii)
6. Progettare per l'utente (ii)
 
Comunicazione visiva
Comunicazione visivaComunicazione visiva
Comunicazione visiva
 
7. Ingegneria e creativita'
7. Ingegneria e creativita'7. Ingegneria e creativita'
7. Ingegneria e creativita'
 
15. Progettare per l'errore
15. Progettare per l'errore15. Progettare per l'errore
15. Progettare per l'errore
 

Plus de Roberto Polillo

Future City, Ipotesi sulla città del futuro
Future City, Ipotesi sulla città del futuroFuture City, Ipotesi sulla città del futuro
Future City, Ipotesi sulla città del futuroRoberto Polillo
 
Teaching HCI to computing students: some considerations
Teaching HCI to computing students: some considerationsTeaching HCI to computing students: some considerations
Teaching HCI to computing students: some considerationsRoberto Polillo
 
ICT e sviluppo sociale: alcune riflessioni
ICT e sviluppo sociale: alcune riflessioniICT e sviluppo sociale: alcune riflessioni
ICT e sviluppo sociale: alcune riflessioniRoberto Polillo
 
Editoria e industria dei media di fronte alla rivoluzione digitale
Editoria e industria dei media di fronte alla rivoluzione digitaleEditoria e industria dei media di fronte alla rivoluzione digitale
Editoria e industria dei media di fronte alla rivoluzione digitaleRoberto Polillo
 
19. Le organnizzazioni sul web e segg
19. Le organnizzazioni sul web e segg19. Le organnizzazioni sul web e segg
19. Le organnizzazioni sul web e seggRoberto Polillo
 
18. Content sharing sites
18. Content sharing sites18. Content sharing sites
18. Content sharing sitesRoberto Polillo
 
17. Web feed e aggregatori
17. Web feed e aggregatori17. Web feed e aggregatori
17. Web feed e aggregatoriRoberto Polillo
 
15. La forma breve e il microblogging
15. La forma  breve e il microblogging15. La forma  breve e il microblogging
15. La forma breve e il microbloggingRoberto Polillo
 
13. Internet business models
13. Internet business models13. Internet business models
13. Internet business modelsRoberto Polillo
 
Internet and sustainable telemedicine: an introduction
Internet and sustainable telemedicine: an introductionInternet and sustainable telemedicine: an introduction
Internet and sustainable telemedicine: an introductionRoberto Polillo
 
11. Evoluzione del Web (I)
11. Evoluzione del Web (I)11. Evoluzione del Web (I)
11. Evoluzione del Web (I)Roberto Polillo
 
Slides delle lezioni del corso di Strumenti e applicazioni del Web per il cor...
Slides delle lezioni del corso di Strumenti e applicazioni del Web per il cor...Slides delle lezioni del corso di Strumenti e applicazioni del Web per il cor...
Slides delle lezioni del corso di Strumenti e applicazioni del Web per il cor...Roberto Polillo
 

Plus de Roberto Polillo (19)

Future City, Ipotesi sulla città del futuro
Future City, Ipotesi sulla città del futuroFuture City, Ipotesi sulla città del futuro
Future City, Ipotesi sulla città del futuro
 
Teaching HCI to computing students: some considerations
Teaching HCI to computing students: some considerationsTeaching HCI to computing students: some considerations
Teaching HCI to computing students: some considerations
 
Conclusioni del corso
Conclusioni del corsoConclusioni del corso
Conclusioni del corso
 
ICT e sviluppo sociale: alcune riflessioni
ICT e sviluppo sociale: alcune riflessioniICT e sviluppo sociale: alcune riflessioni
ICT e sviluppo sociale: alcune riflessioni
 
Editoria e industria dei media di fronte alla rivoluzione digitale
Editoria e industria dei media di fronte alla rivoluzione digitaleEditoria e industria dei media di fronte alla rivoluzione digitale
Editoria e industria dei media di fronte alla rivoluzione digitale
 
Wikipedia
WikipediaWikipedia
Wikipedia
 
Open internet
Open internetOpen internet
Open internet
 
20. Social networks
20. Social networks20. Social networks
20. Social networks
 
19. Le organnizzazioni sul web e segg
19. Le organnizzazioni sul web e segg19. Le organnizzazioni sul web e segg
19. Le organnizzazioni sul web e segg
 
18. Content sharing sites
18. Content sharing sites18. Content sharing sites
18. Content sharing sites
 
17. Web feed e aggregatori
17. Web feed e aggregatori17. Web feed e aggregatori
17. Web feed e aggregatori
 
16. Social media
16. Social media16. Social media
16. Social media
 
15. La forma breve e il microblogging
15. La forma  breve e il microblogging15. La forma  breve e il microblogging
15. La forma breve e il microblogging
 
14. I blog
14. I blog14. I blog
14. I blog
 
13. Internet business models
13. Internet business models13. Internet business models
13. Internet business models
 
12. Mobile web
12. Mobile web12. Mobile web
12. Mobile web
 
Internet and sustainable telemedicine: an introduction
Internet and sustainable telemedicine: an introductionInternet and sustainable telemedicine: an introduction
Internet and sustainable telemedicine: an introduction
 
11. Evoluzione del Web (I)
11. Evoluzione del Web (I)11. Evoluzione del Web (I)
11. Evoluzione del Web (I)
 
Slides delle lezioni del corso di Strumenti e applicazioni del Web per il cor...
Slides delle lezioni del corso di Strumenti e applicazioni del Web per il cor...Slides delle lezioni del corso di Strumenti e applicazioni del Web per il cor...
Slides delle lezioni del corso di Strumenti e applicazioni del Web per il cor...
 

Dernier

Confronto tra Sparta e Atene classiche.ppt
Confronto tra Sparta e Atene classiche.pptConfronto tra Sparta e Atene classiche.ppt
Confronto tra Sparta e Atene classiche.pptcarlottagalassi
 
Quadrilateri e isometrie studente di liceo
Quadrilateri e isometrie studente di liceoQuadrilateri e isometrie studente di liceo
Quadrilateri e isometrie studente di liceoyanmeng831
 
discorso generale sulla fisica e le discipline.pptx
discorso generale sulla fisica e le discipline.pptxdiscorso generale sulla fisica e le discipline.pptx
discorso generale sulla fisica e le discipline.pptxtecongo2007
 
Scrittura seo e scrittura accessibile
Scrittura seo e scrittura accessibileScrittura seo e scrittura accessibile
Scrittura seo e scrittura accessibileNicola Rabbi
 
Lorenzo D'Emidio_Francesco Petrarca.pptx
Lorenzo D'Emidio_Francesco Petrarca.pptxLorenzo D'Emidio_Francesco Petrarca.pptx
Lorenzo D'Emidio_Francesco Petrarca.pptxlorenzodemidio01
 
Lorenzo D'Emidio_Vita e opere di Aristotele.pptx
Lorenzo D'Emidio_Vita e opere di Aristotele.pptxLorenzo D'Emidio_Vita e opere di Aristotele.pptx
Lorenzo D'Emidio_Vita e opere di Aristotele.pptxlorenzodemidio01
 
Lorenzo D'Emidio_Vita di Cristoforo Colombo.pptx
Lorenzo D'Emidio_Vita di Cristoforo Colombo.pptxLorenzo D'Emidio_Vita di Cristoforo Colombo.pptx
Lorenzo D'Emidio_Vita di Cristoforo Colombo.pptxlorenzodemidio01
 
Lorenzo D'Emidio- Lavoro sulla Bioarchittetura.pptx
Lorenzo D'Emidio- Lavoro sulla Bioarchittetura.pptxLorenzo D'Emidio- Lavoro sulla Bioarchittetura.pptx
Lorenzo D'Emidio- Lavoro sulla Bioarchittetura.pptxlorenzodemidio01
 
Presentazioni Efficaci e lezioni di Educazione Civica
Presentazioni Efficaci e lezioni di Educazione CivicaPresentazioni Efficaci e lezioni di Educazione Civica
Presentazioni Efficaci e lezioni di Educazione CivicaSalvatore Cianciabella
 
descrizioni della antica civiltà dei sumeri.pptx
descrizioni della antica civiltà dei sumeri.pptxdescrizioni della antica civiltà dei sumeri.pptx
descrizioni della antica civiltà dei sumeri.pptxtecongo2007
 
Descrizione Piccolo teorema di Talete.pptx
Descrizione Piccolo teorema di Talete.pptxDescrizione Piccolo teorema di Talete.pptx
Descrizione Piccolo teorema di Talete.pptxtecongo2007
 

Dernier (11)

Confronto tra Sparta e Atene classiche.ppt
Confronto tra Sparta e Atene classiche.pptConfronto tra Sparta e Atene classiche.ppt
Confronto tra Sparta e Atene classiche.ppt
 
Quadrilateri e isometrie studente di liceo
Quadrilateri e isometrie studente di liceoQuadrilateri e isometrie studente di liceo
Quadrilateri e isometrie studente di liceo
 
discorso generale sulla fisica e le discipline.pptx
discorso generale sulla fisica e le discipline.pptxdiscorso generale sulla fisica e le discipline.pptx
discorso generale sulla fisica e le discipline.pptx
 
Scrittura seo e scrittura accessibile
Scrittura seo e scrittura accessibileScrittura seo e scrittura accessibile
Scrittura seo e scrittura accessibile
 
Lorenzo D'Emidio_Francesco Petrarca.pptx
Lorenzo D'Emidio_Francesco Petrarca.pptxLorenzo D'Emidio_Francesco Petrarca.pptx
Lorenzo D'Emidio_Francesco Petrarca.pptx
 
Lorenzo D'Emidio_Vita e opere di Aristotele.pptx
Lorenzo D'Emidio_Vita e opere di Aristotele.pptxLorenzo D'Emidio_Vita e opere di Aristotele.pptx
Lorenzo D'Emidio_Vita e opere di Aristotele.pptx
 
Lorenzo D'Emidio_Vita di Cristoforo Colombo.pptx
Lorenzo D'Emidio_Vita di Cristoforo Colombo.pptxLorenzo D'Emidio_Vita di Cristoforo Colombo.pptx
Lorenzo D'Emidio_Vita di Cristoforo Colombo.pptx
 
Lorenzo D'Emidio- Lavoro sulla Bioarchittetura.pptx
Lorenzo D'Emidio- Lavoro sulla Bioarchittetura.pptxLorenzo D'Emidio- Lavoro sulla Bioarchittetura.pptx
Lorenzo D'Emidio- Lavoro sulla Bioarchittetura.pptx
 
Presentazioni Efficaci e lezioni di Educazione Civica
Presentazioni Efficaci e lezioni di Educazione CivicaPresentazioni Efficaci e lezioni di Educazione Civica
Presentazioni Efficaci e lezioni di Educazione Civica
 
descrizioni della antica civiltà dei sumeri.pptx
descrizioni della antica civiltà dei sumeri.pptxdescrizioni della antica civiltà dei sumeri.pptx
descrizioni della antica civiltà dei sumeri.pptx
 
Descrizione Piccolo teorema di Talete.pptx
Descrizione Piccolo teorema di Talete.pptxDescrizione Piccolo teorema di Talete.pptx
Descrizione Piccolo teorema di Talete.pptx
 

11. Conoscere l'utente (II)

  • 1. Corso di Interazione Uomo Macchina AA 2014-2015 Roberto Polillo Corso di laurea in Informatica Università di Milano Bicocca Dipartimento di Informatica, Sistemistica e Comunicazione Conoscere l'utente: visione
  • 3. Acuità visiva  Capacità dell’occhio di distinguere due punti vicini E’ misurata dall’angolo minimo sotto cui devono essere visti perché l’occhio li percepisca separatamente Se tale angolo vale 1’, le loro immagini si trovano sulla retina a una distanza di 5 µm e stimolano due elementi non contigui della stessa, condizione indispensabile perché siano visti distinti da un occhio normale. NB: 1° (grado) = 60’ (minuti) = 3600’’ (secondi) R.Polillo - Marzo 2015 4
  • 4. Misura dell’acuità visiva Si misura in valori reciproci dell’angolo visivo minimo alla quale due punti non appaiono più separati Esempio: Se tale l’angolo è di 2’ l’acuità visiva è pari a 1/2, ossia a 5/10 (non è la metà del normale, poiché l’acuità visiva normale è 11/10). L’acuità visiva dipende dall’età del soggetto (tende a diminuire dopo i 70 anni), dallo stimolo, dalle caratteristiche dell’occhio, dall’integrità dei coni, ecc. L’acuità visiva è massima in corrispondenza della fovea centrale, e diminuisce verso la periferia. R.Polillo - Marzo 2015 5
  • 5. 400 450 500 550 600 650 Lunghezza d’onda Rispostarelativadeiconi 100% 80% 60% 40% 20% Coni R Coni G Coni B azzurro arancione Spettro visibile380 680 nm= 10-9 m La visione del colore R.Polillo - Marzo 2015 6
  • 6. Daltonismo  Se alcuni tipi di coni mancano, alcuni colori non vengono distinti  Vari tipi di daltonismo, a seconda dei tipi di coni mancanti  Quello più comune: incapacità a distinguere i colori compresi fra 540 e 700 nm (dal verde al rosso) (8% degli uomini e 0,4% delle donne) R.Polillo - Marzo 2015 7
  • 7. Esempio: insensibilità al rosso R.Polillo - Marzo 2015 8
  • 8. Il test di Ishihara Visione normale: 5; Daltonismo per rosso/verde: 2R.Polillo - Marzo 2015 9
  • 9. Esempio Un daltonico non può comprendere questa immagine R.Polillo - Marzo 2015 10
  • 14. Movimenti oculari Saccadi Movimenti oculari molto veloci (possono superare i 400°/sec) e molto brevi (20~50 msec, durante i quali la visione è soppressa), che hanno il compito di spostare l’asse visivo durante l’esplorazione di una scena (fino a 4/5 volte al sec). Fissazione Pausa tra due saccadi successive; rappresenta l’intervallo di tempo durante il quale viene acquisita l’informazione visiva (~60-700 msec) Scanpath Tracciato bidimensionale che gli occhi compiono durante l’esplorazione di una scena, composta da una successione di saccadi e di fissazioni (durata tipica saccade+fissazione: 230 msec) R.Polillo - Marzo 2015 15
  • 15. Movimenti oculari: esempio Fissazione (60-700 msec) Saccade (20-50 msec) fissazione 16 R.Polillo - Marzo 2015
  • 18. Eye tracking: video Nella lettura di pagine web:  http://it.youtube.com/watch?v=OiYZyPqrqsA  http://www.youtube.com/watch?v=ilq9qeyVjT0 Lettura di una rivista:  http://www.youtube.com/watch?v=S_u2hhc6O ng 19 R.Polillo - Marzo 2015
  • 20. Heat-map di tre pagine web (da J.Nielsen) Heat map 21 R.Polillo - Marzo 2015
  • 22. 1 2 3 4 5 6 7 Yarbus, 1967 R.Polillo - Marzo 2015 23
  • 23. R.Polillo - Marzo 2015 Percorsi visivi: siete d’accordo con questo layout? 25
  • 24. R.Polillo - Marzo 2015 26 PowerPoint 2008 e 2011, Mac
  • 25. R.Polillo - Marzo 2015 27 PowerPoint 2010, Windows
  • 26. Visione e pensiero  I dati ricevuti dall’apparato visivo vengono elaborati dal nostro cervello in modo molto complesso  Noi “vediamo” la profondità del campo visivo, la dimensione relativa degli oggetti, riconosciamo uno stesso oggetto anche quando è parzialmente nascosto, vediamo in modo diverso a seconda del contesto…  … a volte i meccanismi di elaborazione vengono “ingannati” dall’immagine che percepiamo (“illusioni ottiche”)  In sintesi: noi non vediamo “quello che c’è”, ma ciò che il nostro cervello ci fa vedere R.Polillo - Marzo 2015 28
  • 27. Bande di Mach Anche se ogni banda è uniforme, vediamo la zona di sinistra più scura, perché vicina a una banda più chiara… … e la zona di destra più chiara, perché vicina a una banda più scura R.Polillo - Marzo 2015 30
  • 28. Bande di Mach R.Polillo - Marzo 2015 31
  • 29. I riquadri chiari in ombra hanno lo stesso tono di grigio dei riquadri scuri alla luce R.Polillo - Marzo 2015
  • 30. I riquadri chiari in ombra hanno lo stesso tono di grigio dei riquadri scuri alla luce R.Polillo - Marzo 2015
  • 31. Esempio: percezione della dimensione e della distanza Due oggetti della stessa dimensione a distanze diverse hanno angoli visuali diversi: le immagini sulla retina hanno dimensioni diverse… …tuttavia riconosciamo che hanno la stessa dimensione (“legge della costanza della dimensione”)  ’ R.Polillo - Marzo 2015 34
  • 33. Esempio: percezione della dimensione e della distanza (segue) Due oggetti di dimensioni diverse a distanze diverse possono avere lo stesso angolo visuale… … eppure riconosciamo che hanno dimensioni diverse  R.Polillo - Marzo 2015 36
  • 35. Ma il contesto può anche ingannarci… R.Polillo - Marzo 2015
  • 37. Le linee rosse orizzontali sono parrallele o no? R.Polillo - Marzo 2015
  • 39. Il contesto visivo, le nostre attese e la nostra esperienza passata ci permettono di “vedere” le immagini dubbie in un determinato modo: Qui vediamo un segmento “dietro” una figura verticale Qui vediamo un cubo “dietro” una superficie bucataR.Polillo - Marzo 2015
  • 40. Degli studi hanno mostrato che i bambini non riconoscono questa immagine, perchè la loro memoria non conosce ancora questa situazione. Ciò che vedono i bambini sono 9 delfini.R.Polillo - Marzo 2015
  • 41. Un altro esempio Auto oasa Qui vediamo una “o” Qui vediamo una “c” R.Polillo - Marzo 2015 44
  • 42. La camera di Ames (1946) R.Polillo - Marzo 2015
  • 45. In assenza di contesto, alcune figure possono essere ambigue R.Polillo - Marzo 2015 48
  • 50. Cosa vedi? Una spirale o dei cerchi? R.Polillo - Marzo 2015
  • 51. Fissa il puntino e muovi la testa avanti e indietro .R.Polillo - Marzo 2015
  • 52. Concentrati sulla croce al centro. I cerchi rosa diventano verdi… e poi scompaiono.. R.Polillo - Marzo 2015