SlideShare ist ein Scribd-Unternehmen logo
1 von 52
Corso di Interazione Uomo Macchina
AA 2013-2014
Roberto Polillo
Corso di laurea in Informatica
Università di Milano Bicocca
Dipartimento di Informatica, Sistemistica e Comunicazione
Conoscere l'utente: visione1
R.Polillo - Marzo 2014
La visione
3
cono
bastoncello
Luce
R.Polillo - Marzo 2014
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 2014
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 2014
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 2014
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 2014
7
Esempio: insensibilità al rosso
R.Polillo - Marzo 2014
8
Il test di Ishihara
Visione normale: 5; Daltonismo per rosso/verde: 2R.Polillo - Marzo 2014
9
Esempio
Un daltonico non può comprendere questa immagine
R.Polillo - Marzo 2014
10
R.Polillo - Marzo 2014
R.Polillo - Marzo 2014
Esempio: SmartMoney.com
R.Polillo - Marzo 2014
Esempi
 http://www.bbc.com/sport/football/tables
 http://wearecolorblind.com/example/google-
analytics/
 http://wearecolorblind.com/example/wordfeud/
R.Polillo - Marzo 2014
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 2014
15
Movimenti oculari: esempio
Fissazione
(60-700 msec)
Saccade
(20-50 msec)
fissazione
16
R.Polillo - Marzo 2014
Eye tracking
17
R.Polillo - Marzo 2014
Scanpath
R.Polillo - Marzo 2014
18
Eye tracking: video
Nella lettura di pagine web:
 http://www.youtube.com/watch?v=xKdOMgu0C5
Q
 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 2014
R.Polillo - Marzo 2014
Heat-map di tre pagine web (da J.Nielsen)
Heat map
21
R.Polillo - Marzo 2014
Percorsi visivi
R.Polillo - Marzo 2014
22
1
2 3
4 5
6 7
Yarbus, 1967
R.Polillo - Marzo 2014
23
R.Polillo - Marzo 2014
Percorsi visivi: siete d’accordo con questo layout?
25
R.Polillo - Marzo 2014
26
PowerPoint 2008 e 2011, Mac
R.Polillo - Marzo 2014
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 2014
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 2014
30
Bande di Mach
R.Polillo - Marzo 2014
31
I riquadri chiari in ombra hanno lo
stesso tono di grigio dei riquadri scuri
alla luce
R.Polillo - Marzo 2014
I riquadri chiari in ombra hanno lo
stesso tono di grigio dei riquadri scuri
alla luce
R.Polillo - Marzo 2014
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 2014
34
Gustave Caillebotte R.Polillo - Marzo 2014
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 2014
36
R.Polillo - Marzo 2014
Ma il contesto può anche ingannarci…
R.Polillo - Marzo 2014
R.Polillo - Marzo 2014
Le linee rosse orizzontali sono parrallele o
no?
R.Polillo - Marzo 2014
R.Polillo - Marzo 2014
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 2014
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 2014
Un altro esempio
Auto oasa
Qui
vediamo
una “o”
Qui
vediamo
una “c”
R.Polillo - Marzo 2014
44
La camera di Ames (1946)
R.Polillo - Marzo 2014
Viewing point
R.Polillo - Marzo 2014
R.Polillo - Marzo 2014
In assenza di contesto, alcune figure possono
essere ambigue
R.Polillo - Marzo 2014
48
R.Polillo - Marzo 2014
R.Polillo - Marzo 2014
R.Polillo - Marzo 2014
R.Polillo - Marzo 2014
Cosa vedi? Una spirale o dei cerchi?
R.Polillo - Marzo 2014
Fissa il puntino e muovi la testa avanti e indietro .R.Polillo - Marzo 2014
Concentrati sulla croce al centro.
I cerchi rosa diventano verdi… e poi scompaiono..
R.Polillo - Marzo 2014

Weitere ähnliche Inhalte

Was ist angesagt? (6)

19. Evoluzione dei paradigmi di interazione (I)
19. Evoluzione dei paradigmi di interazione (I)19. Evoluzione dei paradigmi di interazione (I)
19. Evoluzione dei paradigmi di interazione (I)
 
1.Introduzione al corso
1.Introduzione al corso1.Introduzione al corso
1.Introduzione al corso
 
13. Conoscere l'utente (III): Il sistema motorio
13. Conoscere l'utente (III): Il sistema motorio13. Conoscere l'utente (III): Il sistema motorio
13. Conoscere l'utente (III): Il sistema motorio
 
Progettare per l'errore
Progettare per l'erroreProgettare per l'errore
Progettare per l'errore
 
2. Progettazione per prototipi successivi
2. Progettazione per prototipi successivi2. Progettazione per prototipi successivi
2. Progettazione per prototipi successivi
 
3. Progettare per l’utente
3. Progettare per l’utente3. Progettare per l’utente
3. Progettare per l’utente
 

Andere mochten auch

Facile da usare - Una moderna introduzione all'ingegneria dell'usabilità
Facile da usare - Una moderna introduzione all'ingegneria dell'usabilitàFacile da usare - Una moderna introduzione all'ingegneria dell'usabilità
Facile da usare - Una moderna introduzione all'ingegneria dell'usabilità
Roberto Polillo
 
Sviluppo sistema visivo
Sviluppo sistema visivoSviluppo sistema visivo
Sviluppo sistema visivo
imartini
 
Coordinazione 1
Coordinazione 1Coordinazione 1
Coordinazione 1
imartini
 

Andere mochten auch (20)

9. Mobile design
9. Mobile design9. Mobile design
9. Mobile design
 
21. Evoluzione dei paradigmi di interazione (III)
21. Evoluzione dei paradigmi di interazione (III) 21. Evoluzione dei paradigmi di interazione (III)
21. Evoluzione dei paradigmi di interazione (III)
 
Diventare ricchi con Python
Diventare ricchi con PythonDiventare ricchi con Python
Diventare ricchi con Python
 
Come diventare data scientist - Paolo Pellegrini
Come diventare data scientist - Paolo PellegriniCome diventare data scientist - Paolo Pellegrini
Come diventare data scientist - Paolo Pellegrini
 
6. Il browser
6. Il browser6. Il browser
6. Il browser
 
Corso completo di web marketing (1108 slides), di Roberto Ghislandi con contr...
Corso completo di web marketing (1108 slides), di Roberto Ghislandi con contr...Corso completo di web marketing (1108 slides), di Roberto Ghislandi con contr...
Corso completo di web marketing (1108 slides), di Roberto Ghislandi con contr...
 
Come si costruisce un piano di marketing
Come si costruisce un piano di marketingCome si costruisce un piano di marketing
Come si costruisce un piano di marketing
 
Facile da usare - Una moderna introduzione all'ingegneria dell'usabilità
Facile da usare - Una moderna introduzione all'ingegneria dell'usabilitàFacile da usare - Una moderna introduzione all'ingegneria dell'usabilità
Facile da usare - Una moderna introduzione all'ingegneria dell'usabilità
 
Sviluppo sistema visivo
Sviluppo sistema visivoSviluppo sistema visivo
Sviluppo sistema visivo
 
Optometria e scuola P. Traù Optometrist
Optometria e scuola  P. Traù  OptometristOptometria e scuola  P. Traù  Optometrist
Optometria e scuola P. Traù Optometrist
 
Coordinazione 1
Coordinazione 1Coordinazione 1
Coordinazione 1
 
7.Ingegneria e creativita'
7.Ingegneria e creativita'7.Ingegneria e creativita'
7.Ingegneria e creativita'
 
3. Il progetto di esame
3. Il progetto di esame3. Il progetto di esame
3. Il progetto di esame
 
Mobile strategy-2010
Mobile strategy-2010Mobile strategy-2010
Mobile strategy-2010
 
iPhone Apps Marketing
iPhone Apps MarketingiPhone Apps Marketing
iPhone Apps Marketing
 
8. Valutare la usabilita'
8. Valutare la usabilita'8. Valutare la usabilita'
8. Valutare la usabilita'
 
16. Principi e linee guida (i)
16. Principi e linee guida (i)16. Principi e linee guida (i)
16. Principi e linee guida (i)
 
Article Marketig
Article MarketigArticle Marketig
Article Marketig
 
Manuale python
Manuale pythonManuale python
Manuale python
 
Psi sviluppo e edu infanzia
Psi sviluppo e edu  infanzia Psi sviluppo e edu  infanzia
Psi sviluppo e edu infanzia
 

Mehr von Roberto Polillo

Mehr von Roberto Polillo (20)

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
 
22. Conclusioni del corso
22. Conclusioni del corso22. Conclusioni del corso
22. 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
 
21. Progettare per l'errore
21. Progettare per l'errore21. Progettare per l'errore
21. Progettare per l'errore
 
20. Principi e linee guida (II)
20. Principi e linee guida (II)20. Principi e linee guida (II)
20. Principi e linee guida (II)
 
20. Principi e linee guida (I)
20. Principi e linee guida (I)20. Principi e linee guida (I)
20. Principi e linee guida (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)
 
Wikipedia
WikipediaWikipedia
Wikipedia
 
Open internet
Open internetOpen internet
Open internet
 
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)
 
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)
 
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
 
15. Ancora sulla grafica
15. Ancora sulla grafica15. Ancora sulla grafica
15. Ancora sulla grafica
 
16. Social media
16. Social media16. Social media
16. Social media
 

Kürzlich hochgeladen

presentazione varietà allotropiche del carbonio.pptx
presentazione varietà allotropiche del carbonio.pptxpresentazione varietà allotropiche del carbonio.pptx
presentazione varietà allotropiche del carbonio.pptx
michelacaporale12345
 
Presentazione tre geni della tecnologia informatica
Presentazione tre geni della tecnologia informaticaPresentazione tre geni della tecnologia informatica
Presentazione tre geni della tecnologia informatica
nico07fusco
 
Adducchio.Samuel-Steve_Jobs.ppppppppppptx
Adducchio.Samuel-Steve_Jobs.ppppppppppptxAdducchio.Samuel-Steve_Jobs.ppppppppppptx
Adducchio.Samuel-Steve_Jobs.ppppppppppptx
sasaselvatico
 

Kürzlich hochgeladen (20)

Una breve introduzione ad Elsa Morante, vita e opere
Una breve introduzione ad Elsa Morante, vita e opereUna breve introduzione ad Elsa Morante, vita e opere
Una breve introduzione ad Elsa Morante, vita e opere
 
Educazione civica-Asia Pancia powerpoint
Educazione civica-Asia Pancia powerpointEducazione civica-Asia Pancia powerpoint
Educazione civica-Asia Pancia powerpoint
 
Le forme allotropiche del C-Palestini e Pancia.docx
Le forme allotropiche del C-Palestini e Pancia.docxLe forme allotropiche del C-Palestini e Pancia.docx
Le forme allotropiche del C-Palestini e Pancia.docx
 
PalestiniAurora-la conoscenzatestoita.docx
PalestiniAurora-la conoscenzatestoita.docxPalestiniAurora-la conoscenzatestoita.docx
PalestiniAurora-la conoscenzatestoita.docx
 
Pancia Asia_relazione laboratorio(forza d'attrito).docx
Pancia Asia_relazione laboratorio(forza d'attrito).docxPancia Asia_relazione laboratorio(forza d'attrito).docx
Pancia Asia_relazione laboratorio(forza d'attrito).docx
 
Esame di Stato 2024 - Materiale conferenza online 09 aprile 2024
Esame di Stato 2024 - Materiale conferenza online 09 aprile 2024Esame di Stato 2024 - Materiale conferenza online 09 aprile 2024
Esame di Stato 2024 - Materiale conferenza online 09 aprile 2024
 
Storia-CarloMagno-TeccarelliLorenzo.pptx
Storia-CarloMagno-TeccarelliLorenzo.pptxStoria-CarloMagno-TeccarelliLorenzo.pptx
Storia-CarloMagno-TeccarelliLorenzo.pptx
 
Gli isotopi scienze naturale seconda pres
Gli isotopi scienze naturale seconda presGli isotopi scienze naturale seconda pres
Gli isotopi scienze naturale seconda pres
 
presentazione varietà allotropiche del carbonio.pptx
presentazione varietà allotropiche del carbonio.pptxpresentazione varietà allotropiche del carbonio.pptx
presentazione varietà allotropiche del carbonio.pptx
 
Piccole Personetestoitaliano-AuroraPalestini.docx
Piccole Personetestoitaliano-AuroraPalestini.docxPiccole Personetestoitaliano-AuroraPalestini.docx
Piccole Personetestoitaliano-AuroraPalestini.docx
 
TeccarelliLorenzo-PrimadiSteveJobselasuaconcorrenza.pptx
TeccarelliLorenzo-PrimadiSteveJobselasuaconcorrenza.pptxTeccarelliLorenzo-PrimadiSteveJobselasuaconcorrenza.pptx
TeccarelliLorenzo-PrimadiSteveJobselasuaconcorrenza.pptx
 
magia, stregoneria, inquisizione e medicina.pptx
magia, stregoneria, inquisizione e medicina.pptxmagia, stregoneria, inquisizione e medicina.pptx
magia, stregoneria, inquisizione e medicina.pptx
 
magia, stregoneria, inquisizione e medicina.pptx
magia, stregoneria, inquisizione e medicina.pptxmagia, stregoneria, inquisizione e medicina.pptx
magia, stregoneria, inquisizione e medicina.pptx
 
a scuola di biblioVerifica: come utilizzare il test TRAAP
a scuola di biblioVerifica: come utilizzare il test TRAAPa scuola di biblioVerifica: come utilizzare il test TRAAP
a scuola di biblioVerifica: come utilizzare il test TRAAP
 
TeccarelliLorenzo-Mitodella.cavernaa.pdf
TeccarelliLorenzo-Mitodella.cavernaa.pdfTeccarelliLorenzo-Mitodella.cavernaa.pdf
TeccarelliLorenzo-Mitodella.cavernaa.pdf
 
Presentazione tre geni della tecnologia informatica
Presentazione tre geni della tecnologia informaticaPresentazione tre geni della tecnologia informatica
Presentazione tre geni della tecnologia informatica
 
Adducchio.Samuel-Steve_Jobs.ppppppppppptx
Adducchio.Samuel-Steve_Jobs.ppppppppppptxAdducchio.Samuel-Steve_Jobs.ppppppppppptx
Adducchio.Samuel-Steve_Jobs.ppppppppppptx
 
Le forme allotropiche del C-Palestini e Pancia.docx
Le forme allotropiche del C-Palestini e Pancia.docxLe forme allotropiche del C-Palestini e Pancia.docx
Le forme allotropiche del C-Palestini e Pancia.docx
 
Pancia Asia-La vita di Steve Jobs-Adriano Olivetti-Bill Gates.pptx
Pancia Asia-La vita di Steve Jobs-Adriano Olivetti-Bill Gates.pptxPancia Asia-La vita di Steve Jobs-Adriano Olivetti-Bill Gates.pptx
Pancia Asia-La vita di Steve Jobs-Adriano Olivetti-Bill Gates.pptx
 
Pancia Asia-Pelusi Sara-La pittura romana - Copia (1).pptx
Pancia Asia-Pelusi Sara-La pittura romana - Copia (1).pptxPancia Asia-Pelusi Sara-La pittura romana - Copia (1).pptx
Pancia Asia-Pelusi Sara-La pittura romana - Copia (1).pptx
 

11. Conoscere l'utente (ii): la visione

  • 1. Corso di Interazione Uomo Macchina AA 2013-2014 Roberto Polillo Corso di laurea in Informatica Università di Milano Bicocca Dipartimento di Informatica, Sistemistica e Comunicazione Conoscere l'utente: visione1 R.Polillo - Marzo 2014
  • 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 2014 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 2014 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 2014 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 2014 7
  • 7. Esempio: insensibilità al rosso R.Polillo - Marzo 2014 8
  • 8. Il test di Ishihara Visione normale: 5; Daltonismo per rosso/verde: 2R.Polillo - Marzo 2014 9
  • 9. Esempio Un daltonico non può comprendere questa immagine R.Polillo - Marzo 2014 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 2014 15
  • 15. Movimenti oculari: esempio Fissazione (60-700 msec) Saccade (20-50 msec) fissazione 16 R.Polillo - Marzo 2014
  • 18. Eye tracking: video Nella lettura di pagine web:  http://www.youtube.com/watch?v=xKdOMgu0C5 Q  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 2014
  • 20. Heat-map di tre pagine web (da J.Nielsen) Heat map 21 R.Polillo - Marzo 2014
  • 22. 1 2 3 4 5 6 7 Yarbus, 1967 R.Polillo - Marzo 2014 23
  • 23. R.Polillo - Marzo 2014 Percorsi visivi: siete d’accordo con questo layout? 25
  • 24. R.Polillo - Marzo 2014 26 PowerPoint 2008 e 2011, Mac
  • 25. R.Polillo - Marzo 2014 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 2014 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 2014 30
  • 28. Bande di Mach R.Polillo - Marzo 2014 31
  • 29. I riquadri chiari in ombra hanno lo stesso tono di grigio dei riquadri scuri alla luce R.Polillo - Marzo 2014
  • 30. I riquadri chiari in ombra hanno lo stesso tono di grigio dei riquadri scuri alla luce R.Polillo - Marzo 2014
  • 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 2014 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 2014 36
  • 35. Ma il contesto può anche ingannarci… R.Polillo - Marzo 2014
  • 37. Le linee rosse orizzontali sono parrallele o no? R.Polillo - Marzo 2014
  • 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 2014
  • 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 2014
  • 41. Un altro esempio Auto oasa Qui vediamo una “o” Qui vediamo una “c” R.Polillo - Marzo 2014 44
  • 42. La camera di Ames (1946) R.Polillo - Marzo 2014
  • 45. In assenza di contesto, alcune figure possono essere ambigue R.Polillo - Marzo 2014 48
  • 50. Cosa vedi? Una spirale o dei cerchi? R.Polillo - Marzo 2014
  • 51. Fissa il puntino e muovi la testa avanti e indietro .R.Polillo - Marzo 2014
  • 52. Concentrati sulla croce al centro. I cerchi rosa diventano verdi… e poi scompaiono.. R.Polillo - Marzo 2014