Estratto dalle slides di Roberto Polillo

Presentazione sul tema: "Estratto dalle slides di Roberto Polillo"— Transcript della presentazione:

1 Estratto dalle slides di Roberto Polillo
USO DEL COLORE Estratto dalle slides di Roberto Polillo

2 Che cos’è il colore “Sensazione ottica variabile, a seconda della lunghezza d’onda della luce che colpisce l’occhio”

3 IL COLORE: Che cos’è e come lo vediamo

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

5 Lo spettro visibile

6 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à lung d’onda luce bianca luce rossa oggetto rosso

7 Il colore che vediamo Un oggetto bianco riflette tutte le lunghezze d’onda Un oggetto nero assorbe tutte le lunghezze d’onda

8 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.

9 Come l’occhio vede i colori
I coni sono di tre tipi, ciascuno sensibile a luce di lunghezza d’onda diversa bastoncelli rosso verde-giallo blu-violetto

10 Esempio

11 Sensibilità relativa La sensibilità al blu è ridotta rispetto a rosso e giallo-verde

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

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

14 (fasci di luci che si sommano)
Mescolanze additive (fasci di luci che si sommano) rosso giallo magenta bianco verde blu cyan

15 Sintesi additiva Modello additivo: creazione degli altri colori mediante la combinazione additiva dei colori primari RGB. Es.: R + G = giallo se riduco l’intensità del verde mantenendo quella del rosso allora ho un arancione G R Y G R Y

16 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

17 La ruota dei colori Complementary Colors: Magenta & Green
Yellow & Blue Red & Cyan Subtractive Colors: Cyan, Magenta, Yellow Additive Colors: Red, Green, and Blue Warming Colors: Magenta, Red, Yellow Cooling Colors: Blue, Cyan, Green

18 RGB Color Display 1 pixel = 3 fosfori R,G,B, illuminati con intensità variabile

19 Esempio

20 Come descrivere un colore
Sono necessarie tre grandezze; si possono anche scegliere: Tonalità o Tinta (“Hue”) Saturazione (“Saturation”) Luminosità o Intensità (“Lightness”)

21 Tonalità (o Tinta) Corrisponde a ciò che solitamente chiamiamo colore, e cambia al mutare della lunghezza d’onda della luce

22 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

23 Tonalità costante, saturazione decrescente
Esempio Tonalità costante, saturazione decrescente

24 Luminosità Intensità della luce Lo spazio dei colori
Non basta il cerchio dei colori, occorre una terza dimensione: Lo spazio dei colori

25 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.

26

27 Da POWER POINT 97 Power Point

28 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.

29 Ecco perché non otteniamo il bianco quando mescoliamo i pigmenti: la sintesi è sottrattiva!

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

31 Linee guida per l’uso del colore:
Aspetti percettivi Aspetti cognitivi Aspetti culturali

32 ASPETTI PERCETTIVI

33 Aspetti percettivi: punti importanti
Messa a fuoco Colori caldi e colori freddi Accostamenti di colori Disturbi nella percezione dei colori

34 Messa a fuoco Blu Verde Rosso Blu Verde Rosso A B C
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

35 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.

36 Esempio di rosso e blu in uno stesso testo

37 Colori caldi e freddi colori freddi colori caldi I colori caldi tendono ad avanzare, i colori freddi a recedere

38 Victor Vasarely

39 Victor Vasarely

40 Accostamenti di colori
L’occhio “desidera” i colori complementari rosso verde arancione blu viola giallo

41 gennio 2001

42 Accostamento di colori
Colori adiacenti possono influenzarsi

43 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à)

44

45

46

47

48 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

49 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

50 Alcune linee guida Testo chiaro su sfondo scuro Sfondo: colori scuri agli estremi dello spettro; Testo: colori chiari non saturi, al centro dello spettro Testo scuro su sfondo chiaro Sfondo: colori chiari non saturi Testo: colori scuri, evitando il blu

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

52 Evitare il blu per testi, linee sottili, forme piccole; il blu è un ottimo colore di sfondo

53 Evitare il blu per testi, linee sottili, forme piccole; il blu è un ottimo colore di sfondo

54 Disturbi nella percezione dei colori

55 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!

56 Un semplice test: quale numero? (Ishihara)
Visione normale: 5; Daltonismo per rosso/verde: 2

57 Altri test: quale numero?
Chi non riesce a distinguere il rosso e il verde non vede i numeri: 29, 45, 6, 8 (Ishihara)

58 Tipi di daltonismo: esempio

59

60

61

62

63

64 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.

65 Pagina originale

66 Pagina elaborata da vischeck.com (deuteranopia)

67 Pagina originale

68 Pagina elaborata da vischeck.com (deuteranopia)

69 ASPETTI COGNITIVI

70 QUANTI COLORI? Usare pochi colori contemporaneamente (5 +/- 2)

71 Esempi (negativi) The improper use of color can really detract from the aesthetic quality of an application. The toolbar used in Compuserve's WinCim 2.0 application reminds us of a child's paint-by-numbers set. The images not only lend themselves to an unprofessional appearance, they are distracting. The toolbar used in Microsoft Word, in contrast, uses a much more limited set of colors, and the colors are themselves subtle. Despite these differences, Word's toolbar provides far more information in less space, because it primarily relies on shape to distinguish among the functions. In addition to presenting a more professional appearance, the judicious of color is less likely to give rise to unintended interpretation based on the user's personal and cultural color associations.

72 Options dialog from MultiEdit 8
Options dialog from MultiEdit 8.0. To date, we consider this the definitive example of how not to design a tabbed dialog. The sheer number of tabs, combined with the use of iconic labels and the gratuitous use of graphics on the tabs themselves results in a veritable visual assault. Once your eyes recover from the initial assault, you may be able to spot another problem: the use of nested tabs (note that two separate tabs on the dialog are highlighted).

73 ebay.com, ottobre 1999

74 Semantica dei colori Associare i colori ai vari significati in modo consistente

75 Associazione Usare lo stesso colore per raggruppare oggetti simili

76 Focus Usare colori brillanti e saturi per attirare l’attenzione

77 Aspetti cognitivi: punti importanti
Usare i diversi colori in modo consistente, associando a colori diversi significati diversi Usare comunque pochi colori contempora-neamente (5  2)

78 ASPETTI CULTURALI

79 Aspetti culturali: punti importanti
Usare i colori in modo coerente con le associazioni “normali” in una determinata cultura

80 Codici familiari: esempio
ROSSO: stop, pericolo, caldo, fuoco GIALLO: attenzione, rallentamento VERDE: avanti, ok, sicurezza, vegetazione GRIGIO, BIANCO: neutralità

81 STOP EXIT PERICOLO ! AVANTI

82

83 Sometimes the best intentions of the developer go unrealized
Sometimes the best intentions of the developer go unrealized. This image was borrowed from one particular application that hard-coded the colors of the text in the command buttons such that all affirmative buttons (OK, Yes, Open) have green-colored text and all negative buttons (Cancel, No, Close) have red- colored text. Unfortunately, doing so can cause a number of problems. In the first place, the background color of the button is determined by the Windows color preferences. As shown above, hard-coding the color of the text can make it difficult, and in some cases, impossible to read. Secondly, as shown in this example, Green/Red-Affirmative/Negative distinction may be inconsistent with a particular task. In western society, users may interpret the green label as indicating the "good" or proper response. As shown in this example however, deleting all records is more than likely not a good thing to do.

84 Good question! We believe we determined how the designers at AST Software came up with the name for their In/Out whiteboard application Who's Where?: is the individual 'in' or 'out'? Obviously, given the bright green color and the raised appearance of the In button, the individual is 'in'. Obvious, that is, to most people, but not to the application's developers. Actually, the individual is 'out'.

85 Colori caldi e freddi Freddi Caldi

86 Colori caldi e freddi COLORI CALDI COLORI FREDDI
azione, urgenza richiesta di risposta, vicinanza COLORI FREDDI lontananza, tranquillità, informazioni di stato

87 Ma le associazioni possono cambiare nelle diverse culture!

88 Culture diverse hanno associazioni diverse
(Russo & Boor, 1993)

89 GESTALT

90 “Nella percezione visiva, il tutto è più della somma delle sue parti”
GESTALT “Nella percezione visiva, il tutto è più della somma delle sue parti” Luci “in movimento”

91 Salvador Dalì Face of Mae West which may be used as an apartement, circa 1935 S.Dalì, 1935

92 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

93 Legge della vicinanza Le parti di un insieme percettivo vengono raccolte in unità conformi alla minima distanza, a parità di altre condizioni

94 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

95 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

96 Legge della chiusura: esempio
Con separatori Senza separatori

97 Legge della chiusura: esempio
Con separatori Senza separatori

98

99

100 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 Questa legge è detta anche “legge della continuità di direzione”

101 Legge della “buona forma”
Il campo percettivo si segmenta in modo che risultino entità per quanto possibile equilibrate, armoniche, costi-tuite secondo un medesimo principio in tutte le loro parti

102 Legge dell’esperienza
L’esperienza modella le nostre impressioni This experiment shows that past experience can affect your perception of such properties as form or depth. Consider what happens when you view this illustration. At first most people cannot tell what this picture depicts, but with continued inspection or a hint, the fragments suddenly are perceptually reorganized and recognized, in this case, as a Dalmatian dog. A recognizable image emerges that had no perceptual reality before. Hence, there is some sort of perceptual change among the neurons in your brain. This also leads to a change in the way in which you perceive the shape and depth of the scene. Perhaps most importantly, the figure now looks like the object it was supposed to represent - it now has the shape and depth relations of a Dalmatian dog. Once you have recognized the Dalmatian dog, it becomes almost impossible to see the picture in its original meaningless interpretation. The picture becomes permanently meaningful. This is in contrast to a truly bistable or ambiguous figure that has two equally likely interpretations. The bistable or ambiguous figure will "flip" between two states perennially, because your brain cannot decide which one is more meaningfully biased over the other one. In the case of the Dalmatian dog, however, once your brain perceives the "correct" image and ascribes meaning to the picture, your brain will not be able to perceive a meaningless image again, because the meaningless interpretation is no longer equally biased with that of your past experience with Dalmatian dogs. During all the time you were staring at the picture, the image on your retina did not change. Rather, your brain worked to construct a correct interpretation of the image, trying out different interpretations, until your brain "recognized" something. This emphasizes that perception is an active process of constructing a scene description.

103 Ambiguità visiva

104 Ambiguità

105 This type of reversible figure concerns the meaningful content of what is interpreted by your brain from the same static image. Your perception of each figure tends to remain stable until you attend to different regions or contours. Certain regions and contours tend to favor one perception, others the alternative. Even though certain contours in this figure are ambiguous, your perceptual change in this case does not involve a figure/ground reversal. “Immagine bistabile”

106 Salvador Dalì, Slave market with the disappearing bust of Voltaire, 1940

107 AMBIGUITA’ VISIVA Salvador Dali The Great Paranoiac, 1936

108 Salvador Dali Head of a woman in form of a battle, 1936

109 Nel design delle interfacce occorre evitare l’ambiguità

110 BOTTONI O TITOLI? Many programmers admit to this problem in their early GUI applications. In this image, the developer has chosen to give the section labels a raised appearance. That's one way of ensuring that the user doesn't confuse them with the editable fields, but does it come as any surprise that users try to click on them?

111

112

113 Tipografia

114 Il nostro primo obbiettivo nell’uso delle fonti
Massimizzare la leggibilità e la comprensibilità

115 Leggibilità? Single Leaf from a Book of Hours, by a French Scribe x 117 mm France, ca. 1440

116 Lettura su carta e sul video
Il testo a video (72 dpi) è di qualità molto inferiore al testo a stampa ( 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)

117 Antialiasing

118 Tipi di fonti New York, corpo 28
con grazie (serif) senza grazie (sans serif) New York, corpo 28 Normale, neretto, corsivo, sottolineato Helvetica, corpo 28 Courier, corpo 28 spaziatura proporzionale spaziatura fissa

119 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? Sopra: New York corpo 24 Sotto: Helvetica corpo 24

120 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 * Prova con 35 partecipanti, con vista 20/20, con monitor 1024x768. Il materiale letto ad ogni prova era di circa 2 pagine di testo (1041 parole in media) M.Bernard & M.Mills, So, What Size and Type of Font Should I Use on My Website?, Usability News, Summer 2000 *

121 Le font preferite: risultati di un esperimento
Arial Verdana Courier Times (Bernard et al, 2001)

122 Corsivo Il corsivo comunque si legge male sul video, perchè enfatizza l’effetto sega

123 Maiuscole e minuscole L’uso delle minuscole associa ad ogni parola un “pattern” riconoscibile

124 Sopra e sotto

125 Maiuscole o minuscole? È POSSIBILE VERIFICARE CON ESPERIMENTI CHE LA LEGGIBILITÁ DI UN TESTO SCRITTO ESCLUSIVAMEN-TE 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

126 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