Grafica ed interfacce per la comunicazione Scienze della Comunicazione

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

La visione bastoncello Luce Grafica ed interfacce per la comunicazione A.A. 2013/14 2 cono

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

Risposta relativa dei coni La visione del colore azzurro arancione 100% Coni B Coni G Coni R 80% 60% 40% 20% 400 450 500 550 600 650 Lunghezza d onda 380 Spettro visibile 680 nm= 10-9 m 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

Esempio: insensibilità al rosso Grafica ed interfacce per la comunicazione A.A. 2013/14 7

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

Esempio: SmartMoney.com Grafica ed interfacce per la comunicazione A.A. 2013/14 10

Grafica ed interfacce per la comunicazione A.A. 2013/14 11

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) fissazione Grafica ed interfacce per la comunicazione A.A. 2013/14 Saccade (20-50 msec) 15

Eye tracking Grafica ed interfacce per la comunicazione A.A. 2013/14 16

Scanpath Grafica ed interfacce per la comunicazione A.A. 2013/14 17

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 Grafica ed interfacce per la comunicazione A.A. 2013/14 18

Heat map Heat-map di tre pagine web (da J.Nielsen, www.useit.com/alertbox/reading_pattern) Grafica ed interfacce per la comunicazione A.A. 2013/14 20

Percorsi visivi Grafica ed interfacce per la comunicazione A.A. 2013/14 21

1 2 3 4 5 6 7 Yarbus, 1967 Grafica ed interfacce per la comunicazione A.A. 2013/14 22

Movimenti oculari in funzione del compito (spiegazione della slide precedente) 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? Grafica ed interfacce per la comunicazione A.A. 2013/14 23

Percorsi visivi: siete d accordo con questo layout? Grafica ed interfacce per la comunicazione A.A. 2013/14 24

25 PowerPoint 2008 e 2011, Mac Grafica ed interfacce per la comunicazione A.A. 2013/14

26 PowerPoint 2010, Windows Grafica ed interfacce per la comunicazione A.A. 2013/14

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

Bande di Mach Grafica ed interfacce per la comunicazione A.A. 2013/14 30

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

Gustave Caillebotte Grafica ed interfacce per la comunicazione A.A. 2013/14 34

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

Ma il contesto può anche ingannarci Grafica ed interfacce per la comunicazione A.A. 2013/14 37

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

Grafica ed interfacce per la comunicazione A.A. 2013/14 44 La camera di Ames (1946)

Viewing point Grafica ed interfacce per la comunicazione A.A. 2013/14 45

In assenza di contesto, alcune figure possono essere ambigue Grafica ed interfacce per la comunicazione A.A. 2013/14 47

Cosa vedi? Una spirale o dei cerchi? Grafica ed interfacce per la comunicazione A.A. 2013/14 52

Fissa il puntino e muovi la testa avanti e indietro. Grafica ed interfacce per la comunicazione A.A. 2013/14 53

Concentrati sulla croce al centro. I cerchi rosa diventano verdi e poi scompaiono.. Grafica ed interfacce per la comunicazione A.A. 2013/14 54