Grafica ed interfacce per la comunicazione · La visione del colore Grafica ed interfacce per la...

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

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

cono

bastoncello

Luce

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)


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.


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


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)


Esempio: insensibilità al rosso


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


Esempio: SmartMoney.com


Esempi

• http://www.bbc.com/sport/football/tables

• http://wearecolorblind.com/example/google-analytics/

• http://wearecolorblind.com/example/wordfeud


http://www.bbc.com/sport/football/tables

http://wearecolorblind.com/example/google-analytics/




http://wearecolorblind.com/example/wordfeud

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)


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


Scanpath


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


http://www.youtube.com/watch?v=xKdOMgu0C5Q



http://it.youtube.com/watch?v=OiYZyPqrqsA

http://www.youtube.com/watch?v=ilq9qeyVjT0

http://www.youtube.com/watch?v=ilq9qeyVjT0

http://www.youtube.com/watch?v=S_u2hhc6Ong

http://www.youtube.com/watch?v=S_u2hhc6Ong

Heat-map di tre pagine web (da J.Nielsen, www.useit.com/alertbox/reading_pattern)

Heat map


http://www.useit.com/alertbox/reading_pattern

Percorsi visivi


1

2 3

4 5

6 7 Yarbus, 1967


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

Percorsi visivi: siete d’accordo con questo layout?

24


25

PowerPoint 2008 e 2011, Mac


26

PowerPoint 2010, Windows

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


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


Bande di Mach


I riquadri chiari in ombra hanno lo stesso

tono di grigio dei riquadri scuri alla luce


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”)

’


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


Ma il contesto può anche ingannarci…


Le linee rosse orizzontali sono parrallele o no?


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.


Un altro esempio

Auto oasa

Qui

vediamo

una “o”

Qui

vediamo

una “c”


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

Viewing point


In assenza di contesto, alcune figure possono essere

ambigue


Cosa vedi? Una spirale o dei cerchi?


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 · La visione del colore Grafica ed interfacce per la...

Documents

Transcript of Grafica ed interfacce per la comunicazione · La visione del colore Grafica ed interfacce per la...