10. conoscere l'utente (ii)
DESCRIPTION
Slides dalle lezioni del corso di "Interazione uomo macchina" per il corso di laurea in Informatica - Università di Milano Bicocca - Prof.R.Polillo Lezione del 10 aprile 2013 Vedi anche www.rpolillo.itTRANSCRIPT
![Page 1: 10. Conoscere l'utente (ii)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54847efcb4af9f640d8b4b7f/html5/thumbnails/1.jpg)
Corso di Interazione Uomo MacchinaAA 2012-2013
Roberto Polillo
Corso di laurea in InformaticaUniversità di Milano BicoccaDipartimento di Informatica, Sistemistica e Comunicazione
Conoscere l'utente: visione1
R.Polillo - Marzo 2013 Edizione 2
012-13
![Page 2: 10. Conoscere l'utente (ii)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54847efcb4af9f640d8b4b7f/html5/thumbnails/2.jpg)
La visione 4
cono
bastoncello
Luce
R.Polillo - Marzo 2013
![Page 3: 10. Conoscere l'utente (ii)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54847efcb4af9f640d8b4b7f/html5/thumbnails/3.jpg)
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)
![Page 4: 10. Conoscere l'utente (ii)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54847efcb4af9f640d8b4b7f/html5/thumbnails/4.jpg)
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.
![Page 5: 10. Conoscere l'utente (ii)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54847efcb4af9f640d8b4b7f/html5/thumbnails/5.jpg)
400 450 500 550 600 650Lunghezza d’onda
Ris
po
sta
rel
ativ
a d
ei c
oni
100%
80%
60%
40%
20%
Coni R
Coni G
Coni B
azzurro arancione
Spettro visibile380680 nm= 10-9 m
La visione del colore
R.Polillo - Marzo 2013
7
![Page 6: 10. Conoscere l'utente (ii)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54847efcb4af9f640d8b4b7f/html5/thumbnails/6.jpg)
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 2013
8
![Page 7: 10. Conoscere l'utente (ii)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54847efcb4af9f640d8b4b7f/html5/thumbnails/7.jpg)
Esempio: insensibilità al rosso
R.Polillo - Marzo 2013
9
![Page 8: 10. Conoscere l'utente (ii)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54847efcb4af9f640d8b4b7f/html5/thumbnails/8.jpg)
Il test di Ishihara
Visione normale: 5; Daltonismo per rosso/verde: 2R.Polillo - Marzo 2013
10
![Page 9: 10. Conoscere l'utente (ii)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54847efcb4af9f640d8b4b7f/html5/thumbnails/9.jpg)
Esempio
Un daltonico non può comprendere questa immagine
R.Polillo - Marzo 2013
11
![Page 10: 10. Conoscere l'utente (ii)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54847efcb4af9f640d8b4b7f/html5/thumbnails/10.jpg)
Esempio: SmartMoney.com
R.Polillo - Marzo 2013
![Page 11: 10. Conoscere l'utente (ii)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54847efcb4af9f640d8b4b7f/html5/thumbnails/11.jpg)
![Page 12: 10. Conoscere l'utente (ii)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54847efcb4af9f640d8b4b7f/html5/thumbnails/12.jpg)
![Page 13: 10. Conoscere l'utente (ii)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54847efcb4af9f640d8b4b7f/html5/thumbnails/13.jpg)
Movimenti oculariSaccadi
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).
FissazionePausa tra due saccadi successive; rappresenta l’intervallo di tempo durante il quale viene acquisita l’informazione visiva (~60-700 msec)
ScanpathTracciato 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)
![Page 14: 10. Conoscere l'utente (ii)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54847efcb4af9f640d8b4b7f/html5/thumbnails/14.jpg)
Movimenti oculari: esempio
Fissazione(60-700 msec)
Saccade (20-50 msec)
fissazione
16
R.Polillo - Marzo 2013
![Page 15: 10. Conoscere l'utente (ii)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54847efcb4af9f640d8b4b7f/html5/thumbnails/15.jpg)
Eye tracking17
R.Polillo - Marzo 2013
![Page 16: 10. Conoscere l'utente (ii)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54847efcb4af9f640d8b4b7f/html5/thumbnails/16.jpg)
Scanpath
R.Polillo - Marzo 2013
18
![Page 17: 10. Conoscere l'utente (ii)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54847efcb4af9f640d8b4b7f/html5/thumbnails/17.jpg)
Eye tracking: video
Nella lettura di pagine web: http://
www.youtube.com/watch?v=xKdOMgu0C5Q
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_u2hhc6Ong
19
R.Polillo - Marzo 2013
![Page 18: 10. Conoscere l'utente (ii)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54847efcb4af9f640d8b4b7f/html5/thumbnails/18.jpg)
![Page 19: 10. Conoscere l'utente (ii)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54847efcb4af9f640d8b4b7f/html5/thumbnails/19.jpg)
Heat-map di tre pagine web (da J.Nielsen, www.useit.com/alertbox/reading_pattern)
Heat map21
R.Polillo -Marzo 2013
![Page 20: 10. Conoscere l'utente (ii)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54847efcb4af9f640d8b4b7f/html5/thumbnails/20.jpg)
Percorsi visivi
R.Polillo -Marzo 2013
22
![Page 21: 10. Conoscere l'utente (ii)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54847efcb4af9f640d8b4b7f/html5/thumbnails/21.jpg)
1
2 3
4 5
6 7Yarbus, 1967
R.Polillo -Marzo 2013
23
![Page 22: 10. Conoscere l'utente (ii)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54847efcb4af9f640d8b4b7f/html5/thumbnails/22.jpg)
R.Polillo -Marzo 2013
Percorsi visivi: siete d’accordo con questo layout?
25
![Page 23: 10. Conoscere l'utente (ii)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54847efcb4af9f640d8b4b7f/html5/thumbnails/23.jpg)
R.Polillo -Marzo 2013
26
PowerPoint 2008 e 2011, Mac
![Page 24: 10. Conoscere l'utente (ii)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54847efcb4af9f640d8b4b7f/html5/thumbnails/24.jpg)
R.Polillo -Marzo 2013
27
PowerPoint 2010, Windows
![Page 25: 10. Conoscere l'utente (ii)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54847efcb4af9f640d8b4b7f/html5/thumbnails/25.jpg)
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
![Page 26: 10. Conoscere l'utente (ii)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54847efcb4af9f640d8b4b7f/html5/thumbnails/26.jpg)
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
![Page 27: 10. Conoscere l'utente (ii)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54847efcb4af9f640d8b4b7f/html5/thumbnails/27.jpg)
Bande di Mach
![Page 28: 10. Conoscere l'utente (ii)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54847efcb4af9f640d8b4b7f/html5/thumbnails/28.jpg)
I riquadri chiari in ombra hanno lo stesso tono di grigio dei riquadri scuri alla luce
![Page 29: 10. Conoscere l'utente (ii)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54847efcb4af9f640d8b4b7f/html5/thumbnails/29.jpg)
I riquadri chiari in ombra hanno lo stesso tono di grigio dei riquadri scuri alla luce
![Page 30: 10. Conoscere l'utente (ii)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54847efcb4af9f640d8b4b7f/html5/thumbnails/30.jpg)
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”)
’
![Page 31: 10. Conoscere l'utente (ii)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54847efcb4af9f640d8b4b7f/html5/thumbnails/31.jpg)
Gustave Caillebotte
![Page 32: 10. Conoscere l'utente (ii)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54847efcb4af9f640d8b4b7f/html5/thumbnails/32.jpg)
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
![Page 33: 10. Conoscere l'utente (ii)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54847efcb4af9f640d8b4b7f/html5/thumbnails/33.jpg)
![Page 34: 10. Conoscere l'utente (ii)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54847efcb4af9f640d8b4b7f/html5/thumbnails/34.jpg)
Ma il contesto può anche ingannarci…
![Page 35: 10. Conoscere l'utente (ii)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54847efcb4af9f640d8b4b7f/html5/thumbnails/35.jpg)
![Page 36: 10. Conoscere l'utente (ii)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54847efcb4af9f640d8b4b7f/html5/thumbnails/36.jpg)
Le linee rosse orizzontali sono parrallele o no?
![Page 37: 10. Conoscere l'utente (ii)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54847efcb4af9f640d8b4b7f/html5/thumbnails/37.jpg)
![Page 38: 10. Conoscere l'utente (ii)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54847efcb4af9f640d8b4b7f/html5/thumbnails/38.jpg)
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 bucata
![Page 39: 10. Conoscere l'utente (ii)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54847efcb4af9f640d8b4b7f/html5/thumbnails/39.jpg)
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.
![Page 40: 10. Conoscere l'utente (ii)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54847efcb4af9f640d8b4b7f/html5/thumbnails/40.jpg)
Un altro esempio
Auto oasa
Qui vediamo una “o”
Qui vediamo una “c”
![Page 41: 10. Conoscere l'utente (ii)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54847efcb4af9f640d8b4b7f/html5/thumbnails/41.jpg)
La camera di Ames (1946)
![Page 42: 10. Conoscere l'utente (ii)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54847efcb4af9f640d8b4b7f/html5/thumbnails/42.jpg)
Viewing point
![Page 43: 10. Conoscere l'utente (ii)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54847efcb4af9f640d8b4b7f/html5/thumbnails/43.jpg)
![Page 44: 10. Conoscere l'utente (ii)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54847efcb4af9f640d8b4b7f/html5/thumbnails/44.jpg)
In assenza di contesto, alcune figure possono essere ambigue
![Page 45: 10. Conoscere l'utente (ii)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54847efcb4af9f640d8b4b7f/html5/thumbnails/45.jpg)
![Page 46: 10. Conoscere l'utente (ii)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54847efcb4af9f640d8b4b7f/html5/thumbnails/46.jpg)
![Page 47: 10. Conoscere l'utente (ii)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54847efcb4af9f640d8b4b7f/html5/thumbnails/47.jpg)
![Page 48: 10. Conoscere l'utente (ii)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54847efcb4af9f640d8b4b7f/html5/thumbnails/48.jpg)
![Page 49: 10. Conoscere l'utente (ii)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54847efcb4af9f640d8b4b7f/html5/thumbnails/49.jpg)
Cosa vedi? Una spirale o dei cerchi?
![Page 50: 10. Conoscere l'utente (ii)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54847efcb4af9f640d8b4b7f/html5/thumbnails/50.jpg)
Fissa il puntino e muovi la testa avanti e indietro .
![Page 51: 10. Conoscere l'utente (ii)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54847efcb4af9f640d8b4b7f/html5/thumbnails/51.jpg)
Concentrati sulla croce al centro.I cerchi rosa diventano verdi… e poi scompaiono..