Facets of Interaction Color

1. Facets of InteractionColor Dewan Tanvir Ahmed, PhD University of Ottawa dahmed@site.uottawa.ca

2. Chapter 9 - Color • The Human Perceptual System • Using color in Interaction Design • Color Concerns for Interaction Design • Technical Issues Concerning Color Dewan Tanvir Ahmed

3. 9.1 The Human Perceptual System • Color Perception • Color Deficiencies • Individual and Cultural Issues Dewan Tanvir Ahmed

4. The Color Spectrum • Isaac Newton was the first to make a systematic study of color - by passing a narrow beam of sunlight through a triangular-shaped glass prism • He showed that sunlight is composed of a mixture of all the colors of the rainbow. • This selection of colors is called a spectrum: red, orange, yellow, green, blue, and violet. Dewan Tanvir Ahmed

5. Triangular Prism Dewan Tanvir Ahmed

6. Color Perception • 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 • Opaque • Not transmitting light • Translucent • permitting light to pass through but diffusing it so that persons, objects, etc., on the opposite side are not clearly visible • Transparent • Allowing light to pass through so that objects behind can be distinctly seen • When light hits an object some of the waves that are not allowed to pass through are absorbed and some of them are reflected Dewan Tanvir Ahmed

7. Color Perception • The frequencies of the reflected waves determine the color we perceive Dewan Tanvir Ahmed

8. Color Perception The perceived color of an object can change drastically under different lighting situations • The color of an object depends on the light source and the nature of the light it emits • Metamerism Dewan Tanvir Ahmed

9. Color Perception • Human Visual System • Eyes, optic nerve, parts of the brain • Transforms electromagnetic energy

10. Color Perception • Image Formation • cornea, sclera, pupil,iris, lens, retina, fovea • Transduction • retina, rods, and cones • Processing • optic nerve, brain

11. Color Perception • Retina has photosensitive receptors at back of eye • Fovea is small, dense region of receptors • only cones (no rods) • gives visual acuity • Outside fovea • fewer receptors overall • larger proportion of rods

12. Contain photo-pigment Respond to low energy Enhance sensitivity Concentrated in retina, but outside of fovea One type, sensitive to grayscale changes Contain photo-pigment Respond to high energy Enhance perception Concentrated in fovea, exist sparsely in retina Three types, sensitive to different wavelengths Color Perception Cones Rods Dewan Tanvir Ahmed

13. Color Perception • The Human Visual System (Rods and Cones) • The cones are sensitive to color and are more prevalent in the central part of the retina • The rods are situated mostly in the periphery of the retina and are sensitive to motion and low-light environments Dewan Tanvir Ahmed

14. Color Perception - Visual Limitations Avoid using blue for text and small screen elements • Eyes are the most sensitive to the middle frequencies (green and yellow) • Sensitivity to blue is weak • Jacob Neilson suggest • WWW – we would not choose blue as the default link Dewan Tanvir Ahmed

15. Color Perception - Visual Limitations Our ability to distinguish color is directly related to the size of an object • Difficulty in determining the color of small objects – small object means we perceive less color • This cause dark colors to appear black and lighter colors loose their vibrancy Dewan Tanvir Ahmed

16. Color Perception - Visual Limitations Color perception is weak in our peripheral vision • Most of the color receptor are located in the center of the visual field – fovea, and • Decrease toward the periphery – peripheral vision • Weak at distinguishing red and green hues • Little better with the blue and yellow frequencies Dewan Tanvir Ahmed

17. Color Perception - Visual Limitations Movement in our peripheral vision is distracting • Our peripheral vision has a greater sensitivity to movement • The rods are more numerous at the perimeter • Consistent movement at our peripheral vision can be distracting as our attention is naturally directed to these stimuli Dewan Tanvir Ahmed

18. Color Perception - Visual Limitations Do not rely only on color to delineate shape • We understand shapes by looking at the edges • A clearly defined shape has • A great deal of contrast between an object and its background • Advisable – to use a delineating line between objects as opposed to simply using color Dewan Tanvir Ahmed

19. Color Deficiencies • 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 • 8% of male individuals • 0.4% of female individuals • The most common form is a reduced sensitivity to green, known as deuteranomaly • 5% of male individuals • 95% of color deficiencies in female individuals Dewan Tanvir Ahmed

20. Color Deficiencies - Types of Color Blindness • Anomalous trichromatic vision results when all cones are present but some are misaligned: • Protanomaly: Diminished sensitivity to red • Deuteranomaly: Diminished sensitivity to green • Tritanomaly: Diminished sensitivity to blue • Dichromatic vision anomalies occur when one of the cone types is missing: • Protanopia: No ability to perceive red • Deuteranopia: No ability to perceive green • Tritanopia: No ability to perceive blue Dewan Tanvir Ahmed

21. Color Deficiencies - Types of Color Blindness Protanopic color vision. Normal trichromatic color vision. Deuteranopic color vision. PhotoShop Plug-in http://www.vischeck.com/downloads/ Online version http://www.vischeck.com/vischeck/vischeckImage.php Dewan Tanvir Ahmed

22. Color Deficiencies - Types of Color Blindness Normal color vision Deuteranopic color vision Dewan Tanvir Ahmed

23. Color Deficiencies - Types of Color Blindness Color Deficient Dichromatic Color Normal Dewan Tanvir Ahmed

24. Color Deficiencies - Types of Color Blindness • http://colorvisiontesting.com/what%20colorblind%20people%20see.htm / Color Deficient Dichromatic Color Normal Dewan Tanvir Ahmed

25. Color Deficiencies - Types of Color Blindness Color deficiency and human subjectivity must be considered important factors in interaction design • Factors affecting color perception: • Culture • Age • Fatigue • Emotions • Ambient light • Light sources • Blood oxygen levels Dewan Tanvir Ahmed

26. Individual and Cultural Issues • Ask a person to name a favorite color and what it reminds him of, then ask another person about the same color • Some colors carry natural associations that are universally consistent. • We should stick to these common associations when we find them Dewan Tanvir Ahmed

27. Individual and Cultural Issues • Preference and Expectations Inappropriate Colors It is important to understand the target user’s color associations and expectations Dewan Tanvir Ahmed

28. Individual and Cultural Issues • Emotional Response Color can evoke emotional responses “Light warm red has a certain similarity to medium yellow, alike in texture and appeal, and gives a feeling of strength, vigour, determination, triumph. In music, it is a sound of trumpets, strong, harsh, and ringing” (Kandinsky, 1977, 40) Dewan Tanvir Ahmed

29. Individual and Cultural Issues Mexico #282 Mexico #268 www.jimnilsen.com Dewan Tanvir Ahmed

30. Individual and Cultural Issues • Globalization—Localization • Emotions: Associations with Yellow range from (Russo & Boor, 1993) • grace and nobility in Japan • cowardice and caution in the United States • happiness and prosperity in Egypt • 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 Dewan Tanvir Ahmed

31. Individual and Cultural Issues • Globalization—Localization • Industrial or professional communities: • Academic robes • Corporate identity and product recognition: • Coca-Cola • American Express • UPS Dewan Tanvir Ahmed

32. 9.2 Using Color in Interaction Design • Color can be used to make information more accessible • Help people to find information • Accomplish difficult decision making tasks • Aaron Marcus suggests six ways – color can be integrated into an interface to support the user experience • Clarification, Relation, and Differentiation • Add coding dimensions • Identify subsystems or structure • Searching • Emphasize important information • Comprehension, Retention, and Recall • Increase comprehensibility • Reduce errors of interpretation • Emotional responses • Tasks and Performance • Redundant Coding Dewan Tanvir Ahmed

33. Using Color in Interaction Design • Clarification, Relation, and Differentiation Color can be used to clarify differences and similarities and communicate relationships • Color codes can be used to support a logical information structure. Dewan Tanvir Ahmed

34. Using Color in Interaction Design • Clarification, Relation, and Differentiation Ethernet wires Map of the Boston subway system Parallel coordinate plot Dewan Tanvir Ahmed

35. Using Color in Interaction Design • Searching • Color can be used to help people search things Color can be used to catch the attention of the user Blue squares and a blue circle Blue squares and a red circle Dewan Tanvir Ahmed

36. Using Color in Interaction Design • Color can be used to emphasize important information by increasing the impact of a screen element • A bright color or a large shape – will catch the viewer’s attention • The spectrum has been shown to be an intuitive means of presentation. Color code alert system A red, orange and yellow scale seems naturally to lend itself to descending values Dewan Tanvir Ahmed

37. Using Color in Interaction Design WYSIGYW (what you see is what you get) Dewan Tanvir Ahmed

38. Using Color in Interaction Design • Comprehension, Retention, and Recall Color can enable us to comprehend patterns in complex data structures Color-coded scatter plot Dewan Tanvir Ahmed

39. Using Color in Interaction Design • Comprehension, Retention, and Recall Color can aid in remembering and recalling information Color-coded dials Dewan Tanvir Ahmed

40. Using Color in Interaction Design • Tasks and Performance • Color improves performance in the following tasks: (Hoadley) • Recall task • Search-and-locate task • Retention task • Decision judgment task Dewan Tanvir Ahmed

41. Using Color in Interaction Design • Redundant Coding • Color enhance HCI but it can also create confusion A clear structure and presentation must already be present before color is introduced • 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) Dewan Tanvir Ahmed

42. 9.3 Color Concerns for Interaction Design • Proper use of color in interaction design – a big concern • Poor application of color • add no benefits • Degrade the performance as the user can be distracted • Concerns • Indistinguishable Differences • Optimal Colors • Number of Colors • Incompatible Differences • Color Backgrounds Dewan Tanvir Ahmed

43. Color Concerns for Interaction Design • Indistinguishable Differences • Color can aid recognition and recall but there is a limit to how many colors we can remember Our ability to perceive subtle changes varies from color to color Eye has limitations to its ability to detect subtle variations in color’s properties Example: Difficult to detect small changes in reds and purples than small changes in other colors Dewan Tanvir Ahmed

44. Color Concerns for Interaction Design • Indistinguishable Differences Target objects must use highly diverse colors from those in their surroundings better at making comparison if we can see two colors side by side difference but that is also a matter of degree Similar colors in close proximity Dewan Tanvir Ahmed

45. Color Concerns for Interaction Design • Optimal Colors • It has been found that the colors red, blue, green, and yellow are the most beneficial in learning environments. (Thorell & Smith, 1990) • Using colors we can limit the number of choices Color code using red, blue, green, and yellow Dewan Tanvir Ahmed

46. Color Concerns for Interaction Design • Number of Colors • 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 • Shneiderman (1998) – color choice • Within a limit of four colors on a single screen • Within a limit of seven colors for an entire interface Dewan Tanvir Ahmed

47. Color Concerns for Interaction Design • Incompatible Differences • Certain color combination cause jarring effect • Combining saturated red and blue create focusing difficulties because of extreme disparity of their wavelengths. • Some specific color combinations cause unique problems: • Colors at opposing ends of the spectrum such as red and blue require the eye to use two different focal lengths • Positive contrast (white text on black background) makes characters appear to glow (Halation) Dewan Tanvir Ahmed

48. Color Concerns for Interaction Design Color Combinations to Avoid: Problematic Color Combinations

49. Color Concerns for Interaction Design • Color Backgrounds The perceived color of an object is affected by the color of its background Dewan Tanvir Ahmed

50. 9.4 Technical Issues Concerning Color • Color Displays • Computing Environment • Color Systems • Color Contrast • Color Space • Web-Based Color • The Color Picker Dewan Tanvir Ahmed