Chapter 10 Facets of Interaction Color June 22

Chapter 10 Facets of Interaction: Color June 22, 2007 Mohamad Eid

Facets of Interaction - Color l l The Human Perceptual System Using color in Interaction Design Color Concerns for Interaction Design Technical Issues Concerning Color June 22, 2007 Mohamad Eid

The Human Perceptual System l l l June 22, 2007 Color Perception Color Deficiencies Individual and Cultural Issues Mohamad Eid

Color Perception l The frequencies of the reflected waves determine the color we perceive June 22, 2007 Mohamad Eid

Color Perception l l Human color perception depends on the way in which light waves interact with objects in the environment Some light waves are absorbed some pass through l l Opaque Translucent Transparent When light hits an object some of the waves that are not allowed to pass through are absorbed and some of them are reflected June 22, 2007 Mohamad Eid

Color Perception l The Human Visual System (Rods and Cones) l The cones are sensitive to color and are more prevalent in the central part of the retina l The rods are situated mostly in the periphery of the retina and are sensitive to motion and low-light environments June 22, 2007 Mohamad Eid

Color Perception - Visual Limitations Avoid using blue for text and small screen elements Our ability to distinguish color is directly related to the size of an object Color perception is weak in our peripheral vision Do not rely on color to delineate shape June 22, 2007 Mohamad Eid

Color Deficiencies l l Photoreceptors vary greatly from person to person People with photoreceptors that do not respond to certain frequencies do not perceive those colors in the same way that other people do l l l 8% of male individuals 0. 4% of female individuals The most common form is a reduced sensitivity to green, known as deuteranomaly l l June 22, 2007 5% of male individuals 95% of color deficiencies in female individuals Mohamad Eid

Color Deficiencies - Types of Color Blindness Color deficiency and human subjectivity must be considered important factors in interaction design l Factors affecting color perception: l l l l June 22, 2007 Culture Age Fatigue Emotions Ambient light Light sources Blood oxygen levels Mohamad Eid

Individual and Cultural Issues l Ask a person to name a favorite color and what it reminds him of, then ask another person about the same color l Some colors carry natural associations that are universally consistent. l June 22, 2007 We should stick to these common associations when we find them Mohamad Eid

The Meaning of Colour in Cultures Colour June 22, 2007 Western Europe & USA China Japan Middle East Danger, Anger, Stop Joy, Festive Occasions Anger, Danger, Evil Caution, Cowardice Honour, Royalty Grace, Nobility, Childish, Gaiety Happiness, Prosperity Sexual Arousal, Safe, Go Youth, Growth Future, Youth, Energy Fertility, Strength Purity, Virtue Mourning, Humility Death, Mourning Purity, Mourning Masculinity, Calm, Authority Strength, Power Villainy, (dirty work) Masculinity, Calm Death, Evil Mystery, Evil Mohamad Eid

Individual and Cultural Issues l Preference and Expectations Inappropriate Colors It is important to understand the target user’s color associations and expectations June 22, 2007 Mohamad Eid

Individual and Cultural Issues l Globalization—Localization l l June 22, 2007 Emotions: Associations with yellow range from grace and nobility in Japan, to cowardice and caution in the United States, to happiness and prosperity in Egypt (Russo & Boor, 1993) Age: People of different generations have observable and often contrasting preferences in color Gender: In most cultures gender can greatly influence color decisions Physical Appearance: Mail box colors Mohamad Eid

Using Color in Interaction Design l l l June 22, 2007 Clarification, Relation, and Differentiation Searching Comprehension, Retention, and Recall Tasks and Performance Redundant Coding Mohamad Eid

Using Color in Interaction Design l Clarification, Relation, and Differentiation Color can be used to clarify differences and similarities and communicate relationships l June 22, 2007 Color codes can be used to support a logical information structure. Mohamad Eid

Using Color in Interaction Design l Clarification, Relation, and Differentiation Ethernet wires Parallel coordinate plot. June 22, 2007 Map of the Boston subway system Mohamad Eid

Using Color in Interaction Design l Clarification, Relation, and Differentiation l The spectrum has been shown to be an intuitive means of presentation. Color code alert system June 22, 2007 Mohamad Eid

Using Color in Interaction Design l Searching Color can be used to catch the attention of the user Blue squares and a blue circle June 22, 2007 Blue squares and a red circle Mohamad Eid

Using Color in Interaction Design Searching June 22, 2007 Mohamad Eid

Using Color in Interaction Design l Comprehension, Retention, and Recall Color can enable us to comprehend patterns in complex data structures Color-coded scatter plot June 22, 2007 Mohamad Eid

Using Color in Interaction Design l Comprehension, Retention, and Recall Color can aid in remembering and recalling information Color-coded dials June 22, 2007 Mohamad Eid

Using Color in Interaction Design l Redundant Coding A clear structure and presentation must already be present before color is introduced l Studies have shown that people are better at search tasks when the targets of the search are coded using more than one parameter, for instance, color and shape (Thorell & Smith, 1990) June 22, 2007 Mohamad Eid

Color Concerns for Interaction Design l l l June 22, 2007 Indistinguishable Differences Optimal Colors Number of Colors Incompatible Differences Color Backgrounds Mohamad Eid

Color Concerns for Interaction Design l Indistinguishable Differences Our ability to perceive subtle changes varies from color to color Target objects must use highly diverse colors from those in their surroundings Similar colors in close proximity June 22, 2007 Mohamad Eid

Color Concerns for Interaction Design l Optimal Colors l It has been found that the colors red, blue, green, and yellow are the most beneficial in learning environments. (Thorell & Smith, 1990) Color code using red, blue, green, and yellow June 22, 2007 Mohamad Eid

Color Concerns for Interaction Design l Number of Colors l l To remember a color and then recognize it later, we should use only a few distinct colors To be able to tell the difference between two adjacent color-coded objects, we can use more colors Interface colors should never distract the user or compete with content June 22, 2007 Mohamad Eid

Color Concerns for Interaction Design l l Incompatible Differences Some specific color combinations cause unique problems: l l June 22, 2007 Colors at opposing ends of the spectrum such as red and blue require the eye to use two different focal lengths Positive contrast makes characters appear to glow (Halation) Mohamad Eid

Color Concerns for Interaction Design l Incompatible Differences Color Combinations to Avoid: Problematic Color Combinations June 22, 2007 Saturated yellow and green Saturated yellow on green Yellow on white Blue on black Green on white Saturated red on blue Saturated red on green Magenta on green Saturated blue on green Yellow on purple Red on black Magenta on black Mohamad Eid

Color Concerns for Interaction Design l Color Backgrounds The perceived color of an object is affected by the color of its background June 22, 2007 Mohamad Eid

Technical Issues Concerning Color l l l Colors are produced from three primary colors: l Red, Green and Blue Our eye is fooled into thinking there is just one color Independent dimensions of color that can be used for coding (the HSV system) l Hue § § June 22, 2007 Position of the colour in the spectrum: blue, violet, red, orange, yellow, green A coding scheme for hue might follow the spectrum: § starting with red at 0 § green at 0. 33 § blue at 0. 66 § and wrapping around back to red at 1. 0. Mohamad Eid

Technical Issues Concerning Color l Saturation: § l Purity of the colour – pastel shades are impure, they mix red, green and blue § pure red vs. pink vs. white § pure green vs. pale green vs. white Value or brightness: § June 22, 2007 Amount of light: Intensity. It is a measure of how 'bright' the colour is. § black vs. dark green vs. bright green § black vs. dark red vs. bright red Mohamad Eid

Technical Issues Concerning Color l Web-Based Color l Web pages, uses hexadecimal coding to specify the RGB values of a color Increasing levels of blue and green June 22, 2007 Mohamad Eid

Technical Issues Concerning Color l Web-Based Color l A computer with a monitor set to 8 -bit color (256 colors) only allows for 216 colors to be shown in a Web browser because the operating system restricts 40 of the possible 256 colors for its own use l Colors are referenced according to their position in the Color Look-up Table (CLUT) An 8 -bit monitor requires a browser-safe palate June 22, 2007 Mohamad Eid

Technical Issues Concerning Color l The Color Picker Hue June 22, 2007 Saturation Brightness Mohamad Eid