1 / 89

Facets of Interaction Color

Facets of Interaction Color. Dewan Tanvir Ahmed, PhD University of Ottawa dahmed@site.uottawa.ca. Chapter 9 - Color. The Human Perceptual System Using color in Interaction Design Color Concerns for Interaction Design Technical Issues Concerning Color. 9.1 The Human Perceptual System.

briar
Download Presentation

Facets of Interaction Color

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

More Related