USO DEL
COLORE
Estratto dalle slides di Roberto Polillo
Che cos’è il colore
“Sensazione ottica variabile, a seconda
della lunghezza d’onda della luce che
colpisce l’occhio”
IL COLORE:
Che cos’è
e come lo vediamo
Luce bianca e luce monocromatica
Un fascio di luce bianca viene
scomposto da un prisma in
fasci di luce monocromatica,
cioè di lunghezze d’onda
fissata
(“i colori dell’iride”)
Lo spettro visibile
Come l’occhio vede i colori
• Noi vediamo la luce riflessa dagli oggetti
• Un oggetto rosso è un oggetto che riflette la luce di
lunghezza d’onda corrispondente al rosso e assorbe tutte
le altre
riflettività
luce bianca
luce rossa
oggetto rosso
lung d’onda
Il colore che vediamo
Un oggetto bianco riflette tutte le
lunghezze d’onda
Un oggetto nero assorbe tutte le
lunghezze d’onda
Caratteristiche spettrali
• Un colore e’ la sensazione visiva prodotta da una
specifica distribuzione spettrale che raggiunge la
retina
• Se si misura la luce con un spettrofotometro si
ottiene lo spettrogramma, che rappresenta la
funzione di stimolo del colore, ie., la distribuzione
dell’energia radiante sullo spettro di frequenze del
visibile.
Come l’occhio vede i colori
• I coni sono di tre tipi, ciascuno sensibile a
luce di lunghezza d’onda diversa
blu-violetto
verde-giallo
rosso
bastoncelli
Esempio
Sensibilità relativa
La sensibilità al blu è ridotta rispetto a rosso e giallo-verde
Mescolanza di colori
• Quando due luci di lunghezza d’onda
diversa vengono mescolate, noi non
vediamo più due colori, ma un nuovo
colore (mescolanza additiva)
Tristimolo
• Tutti i colori percepibili possono essere
sintetizzati mescolando in varia misura tre
colori detti primari: Rosso, Verde, Blu (RGB)
• Differenti distribuzioni spettrali possono dare
origine alla stessa sensazione visiva di
colore (metemerismo)
Mescolanze additive
(fasci di luci che si sommano)
rosso
giallo magenta
bianco
verde
cyan
blu
Sintesi additiva
• Modello additivo: creazione degli altri colori
mediante la combinazione additiva dei colori
primari RGB.
– Es.: R + G = giallo
G
Y
R
– se riduco l’intensità del verde mantenendo
quella del rosso allora ho un arancione
G
R
Y
Sintesi additiva
• La somma di due colori primari produce un
colore secondario
– Es.: R+G= giallo, R+B=magenta, B+G=ciano
• Ciano (C), magenta (M) e giallo (Y) sono
colori secondari o complementari
• Miscelando i tre primari o
un secondario con il
suo primario opposto,
nella giusta intensità,
produce bianco.
Vedi esempi @ http://www.cs.rit.edu/~ncs/color/a_spaces.html
La ruota dei colori
RGB Color Display
1 pixel = 3 fosfori R,G,B,
illuminati con intensità
variabile
Esempio
Come descrivere un colore
Sono necessarie tre grandezze; si
possono anche scegliere:
• Tonalità o Tinta
(“Hue”)
• Saturazione
(“Saturation”)
• Luminosità o Intensità (“Lightness”)
Tonalità (o Tinta)
Corrisponde a ciò che solitamente chiamiamo colore,
e cambia al mutare della lunghezza d’onda della luce
Saturazione
Quantità di luce monocromatica pura che deve
essere mescolata alla luce bianca per produrre il
colore percepito
Non basta la ruota dei colori, occorre una seconda dimensione:
Il cerchio
dei colori
Esempio
Tonalità costante, saturazione decrescente
Luminosità
Intensità della luce
Non basta il cerchio dei colori, occorre una terza dimensione:
Lo spazio
dei colori
Caratteristiche spettrali
• Il valore più elevato della
funzione stimolo fornisce
informazione sulla tinta
del colore.
• Più elevato e scoscesa è
la curva in prossimità del
valore massimo, più puro
è il colore associato.
Power
Point
Sintesi Additiva/Sottrativa
• Sintesi additiva: somma di onde luminose di
diversa frequenza che raggiungono il nostro
occhio
– Esempio: TV e monitor.
• Sintesi sottrativa: la luce bianca (emessa
dal una sorgente luminosa) colpisce il
pigmento e ne viene selettivamente riflessa
(ovvero selettivamente assorbita).
– Esempio: un pigmento giallo assorbe il blu e
riflette rosso e verde.
• Ecco perché non otteniamo il bianco
quando mescoliamo i pigmenti: la
sintesi è sottrattiva!
Colori primari in tipografia
• Si usano normalmente YMC
(stampa in tricromia)
• A volte si usa un quarto colore
acromatico (bianco o nero)
(stampa in quadricromia)
Linee guida per l’uso del colore:
• Aspetti percettivi
• Aspetti cognitivi
• Aspetti culturali
ASPETTI PERCETTIVI
Aspetti percettivi: punti importanti
•
•
•
•
Messa a fuoco
Colori caldi e colori freddi
Accostamenti di colori
Disturbi nella percezione dei colori
Messa a fuoco
Difficoltà di messa a fuoco contemporanea di colori diversi agli
estremi dello spettro (es.: rosso-blu; giallo-porpora) (per
diversoangolo di rifrazione sul cristallino)
Blu Verde Rosso
LUCE
BIANCA
Blu Verde Rosso
LENTE
A B C
FUOCO SULLA RETINA
Messa a fuoco
Difficoltà di messa a fuoco contemporanea di colori “lontani”
sullo spettro
Da questo esempio si vede la difficoltà di messa a fuoco
contemporanea del rosso e del blu: da molti le righe di questi
due colori vengono viste, per i motivi descritti, come se fossero
collocate a distanze diverse dagli occhi.
Questo fenomeno non si verifica se si usano due colori che
si trovino fra loro più vicini sullo spettro visibile, come si può
facilmente verificare da questo secondo esempio, che non
dovrebbe presentare l’effetto tridimensionale di cui sopra.
Esempio di rosso e blu in uno stesso testo
Esempio di rosso e blu in uno stesso testo
Esempio di rosso e blu in uno stesso testo
Esempio di rosso e blu in uno
stesso testo
Colori caldi e freddi
colori freddi
colori caldi
I colori caldi tendono ad avanzare, i colori freddi a recedere
Accostamenti di colori
L’occhio “desidera” i colori complementari
rosso
blu
verde
arancione
giallo
viola
Accostamento di colori
Colori adiacenti possono influenzarsi
Uso di bordi
Usare bordi per separare meglio zone di
diverso colore
(Per una agevole messa a fuoco, oltre a
differenza di colore è necessaria anche
una differenza di luminosità)
Il colore del testo
Scegliere con cura il colore del testo in
relazione al colore dello sfondo
• caratteri chiari su sfondo scuro
tendono ad apparire più grandi
• caratteri scuri su sfondo chiaro
tendono ad apparire più sottili
Caratteri scuri su
fondo chiaro
Caratteri scuri su
fondo chiaro
Caratteri scuri su
fondo chiaro
Caratteri scuri su
fondo chiaro
Caratteri scuri su
fondo chiaro
Caratteri scuri su
fondo chiaro
Caratteri scuri su
fondo chiaro
Caratteri scuri su
fondo chiaro
Caratteri scuri su
fondo chiaro
Caratteri chiari
su fondo scuro
Caratteri chiari
su fondo scuro
Caratteri chiari
su fondo scuro
Caratteri chiari
su fondo scuro
Caratteri chiari
su fondo scuro
Caratteri chiari
su fondo scuro
Caratteri chiari
su fondo scuro
Caratteri chiari
su fondo scuro
Caratteri chiari
su fondo scuro
Alcune linee guida
Testo chiaro su sfondo scuro
Sfondo:
Testo:
colori scuri agli estremi dello spettro;
colori chiari non saturi, al centro dello spettro
Testo scuro su sfondo chiaro
Sfondo:
Testo:
colori chiari non saturi
colori scuri, evitando il blu
Il blu
Evitare il blu per testi, linee sottili, forme
piccole; il blu è un ottimo colore di
sfondo
(Bassa - e calante con l’età - sensibilità
al blu dell’occhio umano; difficoltà di
messa a fuoco)
Evitare il blu per testi, linee sottili, forme piccole; il blu
è un ottimo colore di sfondo
Evitare il blu per testi, linee sottili, forme piccole; il blu
è un ottimo colore di sfondo
Disturbi nella percezione
dei colori
Daltonismo
• Disturbi nella percezione del colore sono presenti:
– nel 9% dei maschi (1 ogni 12)
– nel 0,5% delle femmine (1 ogni 165)
• Sono dovuti a difetti di pigmentazione dei coni della
retina
• I disturbi più frequenti riguardano la capacità di
distinguere il rosso dal verde (circa nel 5% delle
persone), ma ci sono diversi tipi di disturbi
Non assumere che tutti gli utenti possano
distinguere correttamente i vari colori!
Un semplice test: quale numero?
(Ishihara)
Visione normale: 5; Daltonismo per rosso/verde: 2
Altri test: quale numero?
Alcune indicazioni
•
•
•
•
Non usare mai rosso e verde vicini
Normalmente il giallo e il blu vengono riconosciuti bene
Usare colori brillanti
Accostare i colori a uno sfondo appropriato:
–
–
–
–
rosso e bianco
verde e nero
turchese e nero
magenta e nero
• Le linee guida sono complesse, ma oggi esistono
strumenti automatici per verificare come una
immagine verrebbe vista da un daltonico:
usarli per verificare le scelte cromatiche
(es. www.vischeck.com)
Pagina
originale
Pagina
elaborata da
vischeck.com
(deuteranopia)
Pagina
originale
Pagina
elaborata da
vischeck.com
(deuteranopia)
ASPETTI COGNITIVI
QUANTI COLORI?
Usare pochi colori
contemporaneamente
(5 +/- 2)
Esempi (negativi)
Semantica dei colori
Associare i colori ai vari significati in
modo consistente
Associazione
Usare lo stesso colore per raggruppare
oggetti simili
Focus
Usare colori brillanti e saturi per attirare
l’attenzione
Aspetti cognitivi: punti importanti
• Usare i diversi colori in modo consistente,
associando a colori diversi significati diversi
• Usare comunque pochi colori contemporaneamente (5  2)
ASPETTI CULTURALI
Aspetti culturali: punti importanti
Usare i colori in modo coerente con le
associazioni “normali” in una determinata
cultura
Codici familiari: esempio
ROSSO:
GIALLO:
VERDE:
GRIGIO, BIANCO:
stop, pericolo, caldo, fuoco
attenzione, rallentamento
avanti, ok, sicurezza, vegetazione
neutralità
STOP
EXIT
PERICOLO !
AVANTI
Colori caldi e freddi
Caldi
Freddi
Colori caldi e freddi
COLORI CALDI
COLORI FREDDI
azione,
urgenza
richiesta di risposta,
vicinanza
lontananza,
tranquillità,
informazioni di stato
Ma le associazioni possono
cambiare nelle diverse culture!
Culture diverse hanno associazioni diverse
(Russo & Boor, 1993)
GESTALT
GESTALT
“Nella percezione visiva, il tutto è più della
somma delle sue parti”
Luci “in movimento”
S.Dalì, 1935
Le leggi della gestalt (M.Wertheimer, 1923)
•
•
•
•
•
•
Legge della vicinanza
Legge della somiglianza
Legge della chiusura
Legge della “curva buona”
Legge della “buona forma”
Legge dell’esperienza
Legge della vicinanza
Le parti di un insieme percettivo vengono raccolte in unità
conformi alla minima distanza, a parità di altre condizioni
Legge della somiglianza
Di fronte a una moltitudine di elementi diversi, vengono raccolti
in gruppo gli elementi fra loro simili - a parità di altre condizioni
Legge della chiusura
Le linee delimitanti una superficie chiusa si percepiscono
come unità più facilmente di quelle che non si chiudono, a
parità di altre condizioni
Legge della chiusura: esempio
Senza separatori
Con separatori
Legge della chiusura: esempio
Con separatori
Senza separatori
Legge della “curva buona”
Quelle parti di una figura che formano una “curva buona” o
che vanno nella stessa direzione si costituiscono in unità
più facilmente delle altre
Legge della “buona forma”
Il campo percettivo si segmenta in modo che risultino
entità per quanto possibile equilibrate, armoniche, costituite secondo un medesimo principio in tutte le loro parti
Legge dell’esperienza
L’esperienza modella le nostre impressioni
Ambiguità visiva
Ambiguità
Nel design delle interfacce occorre
evitare l’ambiguità
BOTTONI O
TITOLI?
E’ un
Link ?
Quello sotto e’ un link ? o e’ la descrizione della
funzione della textbox?
Tipografia
Il nostro primo obbiettivo
nell’uso delle fonti
Massimizzare
la leggibilità e la
comprensibilità
Leggibilità?
Lettura su carta e sul video
• Il testo a video (72 dpi) è di qualità molto inferiore al
testo a stampa (1200-2400 dpi)
• Alcuni caratteri vengono resi male sul video, a causa
dell’ “effetto sega” causato dalla rappresentazione a
pixel
• Leggiamo più lentamente e più faticosamente sul
video che sulla carta
Uno studio del 1987 (ma la tecnologia migliora velocemente…):
la lettura sullo schermo è del 25% circa più lenta della lettura
sulla carta (poichè le fissazioni sono il 15% in più per riga)
Antialiasing
Tipi di fonti
con grazie (serif)
senza grazie
(sans serif)
New York, corpo 28
Normale, neretto, corsivo, sottolineato
spaziatura
proporzionale
Helvetica, corpo 28
Normale, neretto, corsivo, sottolineato
spaziatura
fissa
Courier, corpo 28
Normale, neretto, corsivo, sottolineato
Con o senza grazie?
Alcuni studi hanno mostrato che, sulla carta, i caratteri
con le grazie hanno una leggibilità leggermente superiore
rispetto a quelli senza grazie. Pertanto, sulla carta,
sarebbe meglio usare fonti con le grazie per testi lunghi,
che altrimenti potrebbero risultare di lettura faticosa. Fonti
senza grazie sono più leggibili in testi brevi o titoli. Ma sul
video?
Alcuni studi hanno mostrato che, sulla carta, i caratteri
con le grazie hanno una leggibilità leggermente superiore
rispetto a quelli senza grazie. Pertanto, sulla carta,
sarebbe meglio usare fonti con le grazie per testi lunghi,
che altrimenti potrebbero risultare di lettura faticosa. Fonti
senza grazie sono più leggibili in testi brevi o titoli.Ma sul
video?
Una prova di leggibilità sul video
Arial 10
Arial 12 (senza grazie)
Times New Roman 10
Times New Roman 12 (con grazie)
*
*
Tempo di lettura in sec
Le font preferite: risultati di un esperimento
Arial
Verdana
Courier
Times
(Bernard et al, 2001)
Corsivo
Il corsivo comunque si legge male sul video,
perchè enfatizza l’effetto sega
Maiuscole e minuscole
L’uso delle minuscole
associa ad ogni parola
un “pattern” riconoscibile
Sopra e sotto
Maiuscole o minuscole?
È POSSIBILE VERIFICARE CON ESPERIMENTI CHE LA
LEGGIBILITÁ DI UN TESTO SCRITTO ESCLUSIVAMENTE IN CARATTERI MAIUSCOLI È MINORE DI QUELLA
DI UN TESTO SCRITTO IN CARATTERI MAIUSCOLI E
MINUSCOLI
È possibile verificare con esperimenti che la leggibilità di
un testo scritto esclusivamente in caratteri maiuscoli è
minore di quella di un testo scritto in caratteri maiuscoli e
minuscoli
In sintesi
• La leggibilità sul video dipende fortemente dal tipo di
•
•
•
•
font, e dalla sua dimensione
Normalmente si raccomanda sul video di utilizzare fonti
senza grazie, evitando comunque per quanto è
possibile il corsivo
Poichè la lettura sul video è faticosa, occorre
comunque evitare per quanto è possibile testi lunghi
Testi lunghi in caratteri maiuscoli vanno comunque
sempre evitati
Usare poche fonti contemporaneamente, e usarle in
modo consistente per veicolare informazione