11. Conoscere l'utente (II)
-
Upload
roberto-polillo -
Category
Education
-
view
269 -
download
2
Transcript of 11. Conoscere l'utente (II)
![Page 1: 11. Conoscere l'utente (II)](https://reader030.fdocument.pub/reader030/viewer/2022032616/55a70dd71a28ab15628b45a1/html5/thumbnails/1.jpg)
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
![Page 2: 11. Conoscere l'utente (II)](https://reader030.fdocument.pub/reader030/viewer/2022032616/55a70dd71a28ab15628b45a1/html5/thumbnails/2.jpg)
La visione 3
cono
bastoncello
Luce
R.Polillo - Marzo 2015
![Page 3: 11. Conoscere l'utente (II)](https://reader030.fdocument.pub/reader030/viewer/2022032616/55a70dd71a28ab15628b45a1/html5/thumbnails/3.jpg)
Acuità visiva
Capacità dell’occhio di distinguere due punti vicini
E’ misurata dall’angolo minimo sotto cui devono essere vistiperché l’occhio li percepisca separatamente
Se tale angolo vale 1’, le loro immagini si trovano sulla retina a unadistanza 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
![Page 4: 11. Conoscere l'utente (II)](https://reader030.fdocument.pub/reader030/viewer/2022032616/55a70dd71a28ab15628b45a1/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.
R.Polillo - Marzo 2015
5
![Page 5: 11. Conoscere l'utente (II)](https://reader030.fdocument.pub/reader030/viewer/2022032616/55a70dd71a28ab15628b45a1/html5/thumbnails/5.jpg)
400 450 500 550 600 650
Lunghezza d’onda
Ris
posta
rela
tiva d
ei coni
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 2015
6
![Page 6: 11. Conoscere l'utente (II)](https://reader030.fdocument.pub/reader030/viewer/2022032616/55a70dd71a28ab15628b45a1/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 2015
7
![Page 7: 11. Conoscere l'utente (II)](https://reader030.fdocument.pub/reader030/viewer/2022032616/55a70dd71a28ab15628b45a1/html5/thumbnails/7.jpg)
Esempio: insensibilità al rosso
R.Polillo - Marzo 2015
8
![Page 8: 11. Conoscere l'utente (II)](https://reader030.fdocument.pub/reader030/viewer/2022032616/55a70dd71a28ab15628b45a1/html5/thumbnails/8.jpg)
Il test di Ishihara
Visione normale: 5; Daltonismo per rosso/verde: 2R.Polillo - Marzo 2015
9
![Page 9: 11. Conoscere l'utente (II)](https://reader030.fdocument.pub/reader030/viewer/2022032616/55a70dd71a28ab15628b45a1/html5/thumbnails/9.jpg)
Esempio
Un daltonico non può comprendere questa immagine
R.Polillo - Marzo 2015
10
![Page 10: 11. Conoscere l'utente (II)](https://reader030.fdocument.pub/reader030/viewer/2022032616/55a70dd71a28ab15628b45a1/html5/thumbnails/10.jpg)
R.Polillo - Marzo 2015
![Page 11: 11. Conoscere l'utente (II)](https://reader030.fdocument.pub/reader030/viewer/2022032616/55a70dd71a28ab15628b45a1/html5/thumbnails/11.jpg)
R.Polillo - Marzo 2015
![Page 12: 11. Conoscere l'utente (II)](https://reader030.fdocument.pub/reader030/viewer/2022032616/55a70dd71a28ab15628b45a1/html5/thumbnails/12.jpg)
Esempio: SmartMoney.com
R.Polillo - Marzo 2015
![Page 13: 11. Conoscere l'utente (II)](https://reader030.fdocument.pub/reader030/viewer/2022032616/55a70dd71a28ab15628b45a1/html5/thumbnails/13.jpg)
Esempi
http://www.bbc.com/sport/football/tables
http://wearecolorblind.com/example/google-
analytics/
http://wearecolorblind.com/example/wordfeud/
R.Polillo - Marzo 2015
14
![Page 14: 11. Conoscere l'utente (II)](https://reader030.fdocument.pub/reader030/viewer/2022032616/55a70dd71a28ab15628b45a1/html5/thumbnails/14.jpg)
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
![Page 15: 11. Conoscere l'utente (II)](https://reader030.fdocument.pub/reader030/viewer/2022032616/55a70dd71a28ab15628b45a1/html5/thumbnails/15.jpg)
Movimenti oculari: esempio
Fissazione
(60-700 msec)
Saccade
(20-50 msec)
fissazione
16
R.Polillo - Marzo 2015
![Page 16: 11. Conoscere l'utente (II)](https://reader030.fdocument.pub/reader030/viewer/2022032616/55a70dd71a28ab15628b45a1/html5/thumbnails/16.jpg)
Eye tracking17
R.Polillo - Marzo 2015
![Page 17: 11. Conoscere l'utente (II)](https://reader030.fdocument.pub/reader030/viewer/2022032616/55a70dd71a28ab15628b45a1/html5/thumbnails/17.jpg)
Scanpath
R.Polillo - Marzo 2015
18
![Page 18: 11. Conoscere l'utente (II)](https://reader030.fdocument.pub/reader030/viewer/2022032616/55a70dd71a28ab15628b45a1/html5/thumbnails/18.jpg)
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
![Page 19: 11. Conoscere l'utente (II)](https://reader030.fdocument.pub/reader030/viewer/2022032616/55a70dd71a28ab15628b45a1/html5/thumbnails/19.jpg)
R.Polillo - Marzo 2015
![Page 20: 11. Conoscere l'utente (II)](https://reader030.fdocument.pub/reader030/viewer/2022032616/55a70dd71a28ab15628b45a1/html5/thumbnails/20.jpg)
Heat-map di tre pagine web (da J.Nielsen)
Heat map21
R.Polillo - Marzo 2015
![Page 21: 11. Conoscere l'utente (II)](https://reader030.fdocument.pub/reader030/viewer/2022032616/55a70dd71a28ab15628b45a1/html5/thumbnails/21.jpg)
Percorsi visivi
R.Polillo - Marzo 2015
22
![Page 22: 11. Conoscere l'utente (II)](https://reader030.fdocument.pub/reader030/viewer/2022032616/55a70dd71a28ab15628b45a1/html5/thumbnails/22.jpg)
1
2 3
4 5
6 7Yarbus, 1967
R.Polillo - Marzo 2015
23
![Page 23: 11. Conoscere l'utente (II)](https://reader030.fdocument.pub/reader030/viewer/2022032616/55a70dd71a28ab15628b45a1/html5/thumbnails/23.jpg)
R.Polillo - Marzo 2015
Percorsi visivi: siete d’accordo con questo layout?
25
![Page 24: 11. Conoscere l'utente (II)](https://reader030.fdocument.pub/reader030/viewer/2022032616/55a70dd71a28ab15628b45a1/html5/thumbnails/24.jpg)
R.Polillo - Marzo 2015
26
PowerPoint 2008 e 2011, Mac
![Page 25: 11. Conoscere l'utente (II)](https://reader030.fdocument.pub/reader030/viewer/2022032616/55a70dd71a28ab15628b45a1/html5/thumbnails/25.jpg)
R.Polillo - Marzo 2015
27
PowerPoint
2010, Windows
![Page 26: 11. Conoscere l'utente (II)](https://reader030.fdocument.pub/reader030/viewer/2022032616/55a70dd71a28ab15628b45a1/html5/thumbnails/26.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
R.Polillo - Marzo 2015
28
![Page 27: 11. Conoscere l'utente (II)](https://reader030.fdocument.pub/reader030/viewer/2022032616/55a70dd71a28ab15628b45a1/html5/thumbnails/27.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
R.Polillo - Marzo 2015
30
![Page 28: 11. Conoscere l'utente (II)](https://reader030.fdocument.pub/reader030/viewer/2022032616/55a70dd71a28ab15628b45a1/html5/thumbnails/28.jpg)
Bande di Mach
R.Polillo - Marzo 2015
31
![Page 29: 11. Conoscere l'utente (II)](https://reader030.fdocument.pub/reader030/viewer/2022032616/55a70dd71a28ab15628b45a1/html5/thumbnails/29.jpg)
I riquadri chiari in ombra hanno lo
stesso tono di grigio dei riquadri scuri
alla luce
R.Polillo - Marzo 2015
![Page 30: 11. Conoscere l'utente (II)](https://reader030.fdocument.pub/reader030/viewer/2022032616/55a70dd71a28ab15628b45a1/html5/thumbnails/30.jpg)
I riquadri chiari in ombra hanno lo
stesso tono di grigio dei riquadri scuri
alla luce
R.Polillo - Marzo 2015
![Page 31: 11. Conoscere l'utente (II)](https://reader030.fdocument.pub/reader030/viewer/2022032616/55a70dd71a28ab15628b45a1/html5/thumbnails/31.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”)
’
R.Polillo - Marzo 2015
34
![Page 32: 11. Conoscere l'utente (II)](https://reader030.fdocument.pub/reader030/viewer/2022032616/55a70dd71a28ab15628b45a1/html5/thumbnails/32.jpg)
Gustave Caillebotte R.Polillo - Marzo 2015
![Page 33: 11. Conoscere l'utente (II)](https://reader030.fdocument.pub/reader030/viewer/2022032616/55a70dd71a28ab15628b45a1/html5/thumbnails/33.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
R.Polillo - Marzo 2015
36
![Page 34: 11. Conoscere l'utente (II)](https://reader030.fdocument.pub/reader030/viewer/2022032616/55a70dd71a28ab15628b45a1/html5/thumbnails/34.jpg)
R.Polillo - Marzo 2015
![Page 35: 11. Conoscere l'utente (II)](https://reader030.fdocument.pub/reader030/viewer/2022032616/55a70dd71a28ab15628b45a1/html5/thumbnails/35.jpg)
Ma il contesto può anche ingannarci…
R.Polillo - Marzo 2015
![Page 36: 11. Conoscere l'utente (II)](https://reader030.fdocument.pub/reader030/viewer/2022032616/55a70dd71a28ab15628b45a1/html5/thumbnails/36.jpg)
R.Polillo - Marzo 2015
![Page 37: 11. Conoscere l'utente (II)](https://reader030.fdocument.pub/reader030/viewer/2022032616/55a70dd71a28ab15628b45a1/html5/thumbnails/37.jpg)
Le linee rosse orizzontali sono parrallele o
no?
R.Polillo - Marzo 2015
![Page 38: 11. Conoscere l'utente (II)](https://reader030.fdocument.pub/reader030/viewer/2022032616/55a70dd71a28ab15628b45a1/html5/thumbnails/38.jpg)
R.Polillo - Marzo 2015
![Page 39: 11. Conoscere l'utente (II)](https://reader030.fdocument.pub/reader030/viewer/2022032616/55a70dd71a28ab15628b45a1/html5/thumbnails/39.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 bucataR.Polillo - Marzo 2015
![Page 40: 11. Conoscere l'utente (II)](https://reader030.fdocument.pub/reader030/viewer/2022032616/55a70dd71a28ab15628b45a1/html5/thumbnails/40.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.R.Polillo - Marzo 2015
![Page 41: 11. Conoscere l'utente (II)](https://reader030.fdocument.pub/reader030/viewer/2022032616/55a70dd71a28ab15628b45a1/html5/thumbnails/41.jpg)
Un altro esempio
Auto oasaQui
vediamo
una “o”
Qui
vediamo
una “c”
R.Polillo - Marzo 2015
44
![Page 42: 11. Conoscere l'utente (II)](https://reader030.fdocument.pub/reader030/viewer/2022032616/55a70dd71a28ab15628b45a1/html5/thumbnails/42.jpg)
La camera di Ames (1946)R.Polillo - Marzo 2015
![Page 43: 11. Conoscere l'utente (II)](https://reader030.fdocument.pub/reader030/viewer/2022032616/55a70dd71a28ab15628b45a1/html5/thumbnails/43.jpg)
Viewing point
R.Polillo - Marzo 2015
![Page 44: 11. Conoscere l'utente (II)](https://reader030.fdocument.pub/reader030/viewer/2022032616/55a70dd71a28ab15628b45a1/html5/thumbnails/44.jpg)
R.Polillo - Marzo 2015
![Page 45: 11. Conoscere l'utente (II)](https://reader030.fdocument.pub/reader030/viewer/2022032616/55a70dd71a28ab15628b45a1/html5/thumbnails/45.jpg)
In assenza di contesto, alcune figure possono
essere ambigue
R.Polillo - Marzo 2015
48
![Page 46: 11. Conoscere l'utente (II)](https://reader030.fdocument.pub/reader030/viewer/2022032616/55a70dd71a28ab15628b45a1/html5/thumbnails/46.jpg)
R.Polillo - Marzo 2015
![Page 47: 11. Conoscere l'utente (II)](https://reader030.fdocument.pub/reader030/viewer/2022032616/55a70dd71a28ab15628b45a1/html5/thumbnails/47.jpg)
R.Polillo - Marzo 2015
![Page 48: 11. Conoscere l'utente (II)](https://reader030.fdocument.pub/reader030/viewer/2022032616/55a70dd71a28ab15628b45a1/html5/thumbnails/48.jpg)
R.Polillo - Marzo 2015
![Page 49: 11. Conoscere l'utente (II)](https://reader030.fdocument.pub/reader030/viewer/2022032616/55a70dd71a28ab15628b45a1/html5/thumbnails/49.jpg)
R.Polillo - Marzo 2015
![Page 50: 11. Conoscere l'utente (II)](https://reader030.fdocument.pub/reader030/viewer/2022032616/55a70dd71a28ab15628b45a1/html5/thumbnails/50.jpg)
Cosa vedi? Una spirale o dei cerchi?
R.Polillo - Marzo 2015
![Page 51: 11. Conoscere l'utente (II)](https://reader030.fdocument.pub/reader030/viewer/2022032616/55a70dd71a28ab15628b45a1/html5/thumbnails/51.jpg)
Fissa il puntino e muovi la testa avanti e indietro .R.Polillo - Marzo 2015
![Page 52: 11. Conoscere l'utente (II)](https://reader030.fdocument.pub/reader030/viewer/2022032616/55a70dd71a28ab15628b45a1/html5/thumbnails/52.jpg)
Concentrati sulla croce al centro.
I cerchi rosa diventano verdi… e poi scompaiono..
R.Polillo - Marzo 2015