Estratto dalle slides di Roberto Polillo 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à lung d’onda luce bianca luce rossa oggetto rosso

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 bastoncelli rosso verde-giallo blu-violetto

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)

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

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

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

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

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

Luminosità Intensità della luce Lo spazio dei colori 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.

Da POWER POINT 97 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 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

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

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

Victor Vasarely

Victor Vasarely

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

Www.wind.it gennio 2001

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 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: 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

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? http://www.toledo-bend.com/colorblind/Ishihara.html Chi non riesce a distinguere il rosso e il verde non vede i numeri: 29, 45, 6, 8 (Ishihara)

Tipi di daltonismo: esempio

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

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

ebay.com, ottobre 1999

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 contempora-neamente (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: stop, pericolo, caldo, fuoco GIALLO: attenzione, rallentamento VERDE: avanti, ok, sicurezza, vegetazione GRIGIO, BIANCO: neutralità

STOP EXIT PERICOLO ! AVANTI

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.

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

Colori caldi e freddi Freddi Caldi

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

Ma le associazioni possono cambiare nelle diverse culture!

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

GESTALT

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

Salvador Dalì Face of Mae West which may be used as an apartement, circa 1935 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 Con separatori Senza 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 Questa legge è detta anche “legge della continuità di direzione”

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

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.

Ambiguità visiva

Ambiguità

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”

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

AMBIGUITA’ VISIVA Salvador Dali The Great Paranoiac, 1936

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

Nel design delle interfacce occorre evitare l’ambiguità

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?

Tipografia

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

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

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

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

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 *

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

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