11. Conoscere l'utente (II)

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

Transcript of 11. Conoscere l'utente (II)

Page 1: 11. Conoscere l'utente (II)

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)

La visione 3

cono

bastoncello

Luce

R.Polillo - Marzo 2015

Page 3: 11. Conoscere l'utente (II)

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)

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)

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)

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)

Esempio: insensibilità al rosso

R.Polillo - Marzo 2015

8

Page 8: 11. Conoscere l'utente (II)

Il test di Ishihara

Visione normale: 5; Daltonismo per rosso/verde: 2R.Polillo - Marzo 2015

9

Page 9: 11. Conoscere l'utente (II)

Esempio

Un daltonico non può comprendere questa immagine

R.Polillo - Marzo 2015

10

Page 10: 11. Conoscere l'utente (II)

R.Polillo - Marzo 2015

Page 11: 11. Conoscere l'utente (II)

R.Polillo - Marzo 2015

Page 12: 11. Conoscere l'utente (II)

Esempio: SmartMoney.com

R.Polillo - Marzo 2015

Page 13: 11. Conoscere l'utente (II)

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)

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)

Movimenti oculari: esempio

Fissazione

(60-700 msec)

Saccade

(20-50 msec)

fissazione

16

R.Polillo - Marzo 2015

Page 16: 11. Conoscere l'utente (II)

Eye tracking17

R.Polillo - Marzo 2015

Page 17: 11. Conoscere l'utente (II)

Scanpath

R.Polillo - Marzo 2015

18

Page 18: 11. Conoscere l'utente (II)

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)

R.Polillo - Marzo 2015

Page 20: 11. Conoscere l'utente (II)

Heat-map di tre pagine web (da J.Nielsen)

Heat map21

R.Polillo - Marzo 2015

Page 21: 11. Conoscere l'utente (II)

Percorsi visivi

R.Polillo - Marzo 2015

22

Page 22: 11. Conoscere l'utente (II)

1

2 3

4 5

6 7Yarbus, 1967

R.Polillo - Marzo 2015

23

Page 23: 11. Conoscere l'utente (II)

R.Polillo - Marzo 2015

Percorsi visivi: siete d’accordo con questo layout?

25

Page 24: 11. Conoscere l'utente (II)

R.Polillo - Marzo 2015

26

PowerPoint 2008 e 2011, Mac

Page 25: 11. Conoscere l'utente (II)

R.Polillo - Marzo 2015

27

PowerPoint

2010, Windows

Page 26: 11. Conoscere l'utente (II)

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)

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)

Bande di Mach

R.Polillo - Marzo 2015

31

Page 29: 11. Conoscere l'utente (II)

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)

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)

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)

Gustave Caillebotte R.Polillo - Marzo 2015

Page 33: 11. Conoscere l'utente (II)

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)

R.Polillo - Marzo 2015

Page 35: 11. Conoscere l'utente (II)

Ma il contesto può anche ingannarci…

R.Polillo - Marzo 2015

Page 36: 11. Conoscere l'utente (II)

R.Polillo - Marzo 2015

Page 37: 11. Conoscere l'utente (II)

Le linee rosse orizzontali sono parrallele o

no?

R.Polillo - Marzo 2015

Page 38: 11. Conoscere l'utente (II)

R.Polillo - Marzo 2015

Page 39: 11. Conoscere l'utente (II)

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)

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)

Un altro esempio

Auto oasaQui

vediamo

una “o”

Qui

vediamo

una “c”

R.Polillo - Marzo 2015

44

Page 42: 11. Conoscere l'utente (II)

La camera di Ames (1946)R.Polillo - Marzo 2015

Page 43: 11. Conoscere l'utente (II)

Viewing point

R.Polillo - Marzo 2015

Page 44: 11. Conoscere l'utente (II)

R.Polillo - Marzo 2015

Page 45: 11. Conoscere l'utente (II)

In assenza di contesto, alcune figure possono

essere ambigue

R.Polillo - Marzo 2015

48

Page 46: 11. Conoscere l'utente (II)

R.Polillo - Marzo 2015

Page 47: 11. Conoscere l'utente (II)

R.Polillo - Marzo 2015

Page 48: 11. Conoscere l'utente (II)

R.Polillo - Marzo 2015

Page 49: 11. Conoscere l'utente (II)

R.Polillo - Marzo 2015

Page 50: 11. Conoscere l'utente (II)

Cosa vedi? Una spirale o dei cerchi?

R.Polillo - Marzo 2015

Page 51: 11. Conoscere l'utente (II)

Fissa il puntino e muovi la testa avanti e indietro .R.Polillo - Marzo 2015

Page 52: 11. Conoscere l'utente (II)

Concentrati sulla croce al centro.

I cerchi rosa diventano verdi… e poi scompaiono..

R.Polillo - Marzo 2015