View
10
Download
0
Category
Preview:
Citation preview
Grafica ed interfacce per la comunicazione
Scienze della Comunicazione
Paola Vocca
Lezione 13: Conoscere l’utente: visione
Lucidi tradotti e adattati da materiale presente su
http://www.hcibook.com/e3/resources/ e
http://www.robertopolillo.it
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)
Grafica ed interfacce per la comunicazione A.A. 2013/14 3
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.
Grafica ed interfacce per la comunicazione A.A. 2013/14 4
400 450 500 550 600 650 Lunghezza d’onda
Ris
po
sta
rela
tiv
a d
ei c
on
i
100%
80%
60%
40%
20%
Coni R
Coni G
Coni B
azzurro arancione
Spettro visibile 380 680 nm= 10-9 m
La visione del colore
Grafica ed interfacce per la comunicazione A.A. 2013/14 5
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)
Grafica ed interfacce per la comunicazione A.A. 2013/14 6
Il test di Ishihara
Visione normale: 5; Daltonismo per rosso/verde: 2 Grafica ed interfacce per la comunicazione A.A. 2013/14 8
Esempio
Un daltonico non può comprendere questa immagine
Grafica ed interfacce per la comunicazione A.A. 2013/14 9
Esempi
• http://www.bbc.com/sport/football/tables
• http://wearecolorblind.com/example/google-analytics/
• http://wearecolorblind.com/example/wordfeud
Grafica ed interfacce per la comunicazione A.A. 2013/14 13
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)
Grafica ed interfacce per la comunicazione A.A. 2013/14 14
Movimenti oculari: esempio
Fissazione
(60-700 msec)
Saccade
(20-50 msec)
fissazione
15 Grafica ed interfacce per la comunicazione A.A. 2013/14
Eye tracking: video
Nella lettura di pagine web:
• http://www.youtube.com/watch?v=xKdOMgu0
C5Q
• 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
18 Grafica ed interfacce per la comunicazione A.A. 2013/14
Heat-map di tre pagine web (da J.Nielsen, www.useit.com/alertbox/reading_pattern)
Heat map
20 Grafica ed interfacce per la comunicazione A.A. 2013/14
1. Esame libero del quadro
2. Esame dell’ambiente materiale
3. Esame dell’età delle persone
4. Che cosa facevano prima dell’arrivo del visitatore
inatteso?
5. Ricordare gli abiti indossati dalle persone
6. Ricordare la posizione delle persone e degli oggetti nella
stanza
7. Quanto tempo il visitatore inatteso è stato lontano dalla
famiglia?
Movimenti oculari in funzione del compito
(spiegazione della slide precedente)
Grafica ed interfacce per la comunicazione A.A. 2013/14 23
Grafica ed interfacce per la comunicazione A.A. 2013/14
Percorsi visivi: siete d’accordo con questo layout?
24
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
Grafica ed interfacce per la comunicazione A.A. 2013/14 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
Grafica ed interfacce per la comunicazione A.A. 2013/14 29
I riquadri chiari in ombra hanno lo stesso
tono di grigio dei riquadri scuri alla luce
Grafica ed interfacce per la comunicazione A.A. 2013/14 31
I riquadri chiari in ombra hanno lo stesso
tono di grigio dei riquadri scuri alla luce
Grafica ed interfacce per la comunicazione A.A. 2013/14 32
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”)
’
Grafica ed interfacce per la comunicazione A.A. 2013/14 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
Grafica ed interfacce per la comunicazione A.A. 2013/14 35
Le linee rosse orizzontali sono parrallele o no?
Grafica ed interfacce per la comunicazione A.A. 2013/14 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 bucata Grafica ed interfacce per la comunicazione A.A. 2013/14 41
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.
Grafica ed interfacce per la comunicazione A.A. 2013/14 42
Un altro esempio
Auto oasa
Qui
vediamo
una “o”
Qui
vediamo
una “c”
Grafica ed interfacce per la comunicazione A.A. 2013/14 43
In assenza di contesto, alcune figure possono essere
ambigue
Grafica ed interfacce per la comunicazione A.A. 2013/14 47
Fissa il puntino e muovi la testa avanti e indietro . Grafica ed interfacce per la comunicazione A.A. 2013/14 53
Recommended