Sources Addison Wesley and Plimmer 2009 The Human Perceptual System Using Colour in Interaction...
-
Upload
meagan-briggs -
Category
Documents
-
view
217 -
download
2
description
Transcript of Sources Addison Wesley and Plimmer 2009 The Human Perceptual System Using Colour in Interaction...
![Page 1: Sources Addison Wesley and Plimmer 2009 The Human Perceptual System Using Colour in Interaction Design Colour Concerns for Interaction Design Technical.](https://reader036.fdocuments.in/reader036/viewer/2022081605/5a4d1af57f8b9ab059981347/html5/thumbnails/1.jpg)
Sources Addison Wesley and Plimmer 2009
•The Human Perceptual System
•Using Colour in Interaction Design
•Colour Concerns for Interaction Design
•Technical Issues Concerning Colour
Chapter 9: Colour
![Page 2: Sources Addison Wesley and Plimmer 2009 The Human Perceptual System Using Colour in Interaction Design Colour Concerns for Interaction Design Technical.](https://reader036.fdocuments.in/reader036/viewer/2022081605/5a4d1af57f8b9ab059981347/html5/thumbnails/2.jpg)
Sources Addison Wesley and Plimmer 2009
The Human Perceptual System
• Colour Perception• Colour Deficiencies• Individual and Cultural Issues
![Page 3: Sources Addison Wesley and Plimmer 2009 The Human Perceptual System Using Colour in Interaction Design Colour Concerns for Interaction Design Technical.](https://reader036.fdocuments.in/reader036/viewer/2022081605/5a4d1af57f8b9ab059981347/html5/thumbnails/3.jpg)
Sources Addison Wesley and Plimmer 2009
Colour Perception• Human colour perception depends on the way in which light waves interact with objects in the environment
• Some light waves are absorbed some pass through– Opaque– Translucent– Transparent
• Those that are blocked are what we see– The frequencies of the reflected waves determine the colour we perceive
![Page 4: Sources Addison Wesley and Plimmer 2009 The Human Perceptual System Using Colour in Interaction Design Colour Concerns for Interaction Design Technical.](https://reader036.fdocuments.in/reader036/viewer/2022081605/5a4d1af57f8b9ab059981347/html5/thumbnails/4.jpg)
Sources Addison Wesley and Plimmer 2009
Colour Perception
The perceived colour of an object can change drastically under different lighting situations
• The colour of an object depends on the light source and the nature of the light it emits (Metamerism)– Red/blue light bulb party
• However computer screens usually emit enough light for colour not be effected.– Too much external light is of course a problem outside
![Page 5: Sources Addison Wesley and Plimmer 2009 The Human Perceptual System Using Colour in Interaction Design Colour Concerns for Interaction Design Technical.](https://reader036.fdocuments.in/reader036/viewer/2022081605/5a4d1af57f8b9ab059981347/html5/thumbnails/5.jpg)
Sources Addison Wesley and Plimmer 2009
Colour Perception• The Human Visual System (rods and cones)
– The cones are sensitive to colour and are more prevalent in the central part of the retina•Cones don’t work well in low light (ie night)
– The rods are situated mostly in the periphery of the retina and are sensitive to motion and low-light environments•Rods are dominant vision receptors at night•Interesting site http://www.hhmi.org/senses
![Page 6: Sources Addison Wesley and Plimmer 2009 The Human Perceptual System Using Colour in Interaction Design Colour Concerns for Interaction Design Technical.](https://reader036.fdocuments.in/reader036/viewer/2022081605/5a4d1af57f8b9ab059981347/html5/thumbnails/6.jpg)
Sources Addison Wesley and Plimmer 2009
Colour Perception - Visual Limitations
Avoid using blue for text and small screen elements
Our ability to distinguish colour is directly related to the size of an object
colour perception is weak in our peripheral vision
Do not rely only on colour to delineate shape
![Page 7: Sources Addison Wesley and Plimmer 2009 The Human Perceptual System Using Colour in Interaction Design Colour Concerns for Interaction Design Technical.](https://reader036.fdocuments.in/reader036/viewer/2022081605/5a4d1af57f8b9ab059981347/html5/thumbnails/7.jpg)
Sources Addison Wesley and Plimmer 2009
Colour Deficiencies – colour blindness• Photoreceptors vary greatly from person to person
• Many people are colour blind– 8% of male individuals– 0.4% of female individuals
• The most common form is red-green, known as deuteranomaly– 5% of male individuals – 95% of colour deficiencies in female individuals
• Online checker http://www.vischeck.com/vischeck/vischeckImage.php
![Page 8: Sources Addison Wesley and Plimmer 2009 The Human Perceptual System Using Colour in Interaction Design Colour Concerns for Interaction Design Technical.](https://reader036.fdocuments.in/reader036/viewer/2022081605/5a4d1af57f8b9ab059981347/html5/thumbnails/8.jpg)
Sources Addison Wesley and Plimmer 2009
Colour Deficiencies
•Factors affecting colour perception:– Culture– Age– Fatigue– Emotions– Ambient light– Light sources– Blood oxygen levels
![Page 9: Sources Addison Wesley and Plimmer 2009 The Human Perceptual System Using Colour in Interaction Design Colour Concerns for Interaction Design Technical.](https://reader036.fdocuments.in/reader036/viewer/2022081605/5a4d1af57f8b9ab059981347/html5/thumbnails/9.jpg)
Sources Addison Wesley and Plimmer 2009
Individual and Cultural Issues• Ask a person to name a favorite colour and what it reminds him of, then ask another person about the same colour
• There are some (not many), standards…
• Unfortunately this one isn’t good if you are red green colour blind
![Page 10: Sources Addison Wesley and Plimmer 2009 The Human Perceptual System Using Colour in Interaction Design Colour Concerns for Interaction Design Technical.](https://reader036.fdocuments.in/reader036/viewer/2022081605/5a4d1af57f8b9ab059981347/html5/thumbnails/10.jpg)
Sources Addison Wesley and Plimmer 2009
Individual and Cultural Issues
• Globalization—Localization– 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 colour
– Gender: In most cultures gender can greatly influence colour decisions
– Fashion: colours fashions come and go (even on computer interfaces
– Physical Appearance: Mail box colours
![Page 11: Sources Addison Wesley and Plimmer 2009 The Human Perceptual System Using Colour in Interaction Design Colour Concerns for Interaction Design Technical.](https://reader036.fdocuments.in/reader036/viewer/2022081605/5a4d1af57f8b9ab059981347/html5/thumbnails/11.jpg)
Sources Addison Wesley and Plimmer 2009
Using colour in Interaction Design
• Clarification, Relation, and Differentiation
• Searching• Comprehension, Retention, and Recall
• Tasks and Performance• Redundant Coding
![Page 12: Sources Addison Wesley and Plimmer 2009 The Human Perceptual System Using Colour in Interaction Design Colour Concerns for Interaction Design Technical.](https://reader036.fdocuments.in/reader036/viewer/2022081605/5a4d1af57f8b9ab059981347/html5/thumbnails/12.jpg)
Sources Addison Wesley and Plimmer 2009
Using colour in Interaction Design
• Clarification, Relation, and Differentiation
• Colour can be used to clarify differences and similarities and communicate relationships
• Colour codes can be used to support a logical information structure.
![Page 13: Sources Addison Wesley and Plimmer 2009 The Human Perceptual System Using Colour in Interaction Design Colour Concerns for Interaction Design Technical.](https://reader036.fdocuments.in/reader036/viewer/2022081605/5a4d1af57f8b9ab059981347/html5/thumbnails/13.jpg)
Sources Addison Wesley and Plimmer 2009
Using Colour in Interaction Design
Colour can be used to catch the attention of the user
![Page 14: Sources Addison Wesley and Plimmer 2009 The Human Perceptual System Using Colour in Interaction Design Colour Concerns for Interaction Design Technical.](https://reader036.fdocuments.in/reader036/viewer/2022081605/5a4d1af57f8b9ab059981347/html5/thumbnails/14.jpg)
Sources Addison Wesley and Plimmer 2009
Using Colour in Interaction Design
• Tasks and Performance• Colour improves performance in the following tasks: (Hoadley)– Recall task– Search-and-locate task– Retention task– Decision judgment task
![Page 15: Sources Addison Wesley and Plimmer 2009 The Human Perceptual System Using Colour in Interaction Design Colour Concerns for Interaction Design Technical.](https://reader036.fdocuments.in/reader036/viewer/2022081605/5a4d1af57f8b9ab059981347/html5/thumbnails/15.jpg)
Sources Addison Wesley and Plimmer 2009
Using Colour in Interaction Design• Redundant Coding
A clear structure and presentation must already be present before colour 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, colour and shape (Thorell & Smith, 1990)
![Page 16: Sources Addison Wesley and Plimmer 2009 The Human Perceptual System Using Colour in Interaction Design Colour Concerns for Interaction Design Technical.](https://reader036.fdocuments.in/reader036/viewer/2022081605/5a4d1af57f8b9ab059981347/html5/thumbnails/16.jpg)
Sources Addison Wesley and Plimmer 2009
Colour Concerns for Interaction Design
• Indistinguishable Differences• Optimal colours• Number of colours• Incompatible Differences• colour Backgrounds
![Page 17: Sources Addison Wesley and Plimmer 2009 The Human Perceptual System Using Colour in Interaction Design Colour Concerns for Interaction Design Technical.](https://reader036.fdocuments.in/reader036/viewer/2022081605/5a4d1af57f8b9ab059981347/html5/thumbnails/17.jpg)
Sources Addison Wesley and Plimmer 2009
Colour Concerns for Interaction Design
• Indistinguishable Differences
Our ability to perceive subtle changes varies from colour to colour
Target objects must use highly diverse colours from those in their surroundings
![Page 18: Sources Addison Wesley and Plimmer 2009 The Human Perceptual System Using Colour in Interaction Design Colour Concerns for Interaction Design Technical.](https://reader036.fdocuments.in/reader036/viewer/2022081605/5a4d1af57f8b9ab059981347/html5/thumbnails/18.jpg)
Sources Addison Wesley and Plimmer 2009
Colour Concerns for Interaction Design
• Number of colours– To remember a colour and then recognize it later, we should use only a few distinct colours
– To be able to tell the difference between two adjacent colour-coded objects, we can use more colours
Interface colours should never distract the user or compete with content
![Page 19: Sources Addison Wesley and Plimmer 2009 The Human Perceptual System Using Colour in Interaction Design Colour Concerns for Interaction Design Technical.](https://reader036.fdocuments.in/reader036/viewer/2022081605/5a4d1af57f8b9ab059981347/html5/thumbnails/19.jpg)
Sources Addison Wesley and Plimmer 2009
Colour Concerns for Interaction Design• Incompatible Differences– colours 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)
Saturated yellow and green
Saturated yellow on green
Yellow on white Yellow on white
Blue on black Blue on black
Green on white Green on white
Saturated red on blue Saturated red on blue
Saturated red on green Saturated red on green
Magenta on green Magenta on green
Saturated blue on green Saturated blue on green
Yellow on purple Yellow on purple
Red on black Red on black
Magenta on black Magenta on black
![Page 20: Sources Addison Wesley and Plimmer 2009 The Human Perceptual System Using Colour in Interaction Design Colour Concerns for Interaction Design Technical.](https://reader036.fdocuments.in/reader036/viewer/2022081605/5a4d1af57f8b9ab059981347/html5/thumbnails/20.jpg)
Sources Addison Wesley and Plimmer 2009
Colour Concerns for Interaction Design
• Colour Backgrounds
The perceived colour of an object is affected by the colour of its background
![Page 21: Sources Addison Wesley and Plimmer 2009 The Human Perceptual System Using Colour in Interaction Design Colour Concerns for Interaction Design Technical.](https://reader036.fdocuments.in/reader036/viewer/2022081605/5a4d1af57f8b9ab059981347/html5/thumbnails/21.jpg)
Sources Addison Wesley and Plimmer 2009
Technical Issues Concerning Colour• Self study from the text book• colour Displays • Computing Environment• Colour Systems• Colour Contrast• Colour Space• Web-Based colour• The Colour Picker
![Page 22: Sources Addison Wesley and Plimmer 2009 The Human Perceptual System Using Colour in Interaction Design Colour Concerns for Interaction Design Technical.](https://reader036.fdocuments.in/reader036/viewer/2022081605/5a4d1af57f8b9ab059981347/html5/thumbnails/22.jpg)
Sources Addison Wesley and Plimmer 2009
Technical Issues Concerning Colour• Colour Displays
– Computer screens create colour by mixing red, green, and blue (RGB) light
– This is an additive process
• We must work within the limitations of the human perceptual system and within the limitations of computer screen technology
![Page 23: Sources Addison Wesley and Plimmer 2009 The Human Perceptual System Using Colour in Interaction Design Colour Concerns for Interaction Design Technical.](https://reader036.fdocuments.in/reader036/viewer/2022081605/5a4d1af57f8b9ab059981347/html5/thumbnails/23.jpg)
Sources Addison Wesley and Plimmer 2009
Technical Issues Concerning Colour
• The use of colour in interaction design involves the following four components:– Human perception – Display technology – User tasks – Computing environment
![Page 24: Sources Addison Wesley and Plimmer 2009 The Human Perceptual System Using Colour in Interaction Design Colour Concerns for Interaction Design Technical.](https://reader036.fdocuments.in/reader036/viewer/2022081605/5a4d1af57f8b9ab059981347/html5/thumbnails/24.jpg)
Sources Addison Wesley and Plimmer 2009
Technical Issues Concerning Colour
• Colours with the same brightness levels can appear lighter or darker than each other
• a really quick check is to print in black and white
Light and dark colours Light and dark colours—grayscale
![Page 25: Sources Addison Wesley and Plimmer 2009 The Human Perceptual System Using Colour in Interaction Design Colour Concerns for Interaction Design Technical.](https://reader036.fdocuments.in/reader036/viewer/2022081605/5a4d1af57f8b9ab059981347/html5/thumbnails/25.jpg)
Sources Addison Wesley and Plimmer 2009
Technical Issues Concerning Colour
• Colour Space
• There are numerous colour pickers and generally you work with what is available.
The hue, saturation, and value (HSV) colour space
![Page 26: Sources Addison Wesley and Plimmer 2009 The Human Perceptual System Using Colour in Interaction Design Colour Concerns for Interaction Design Technical.](https://reader036.fdocuments.in/reader036/viewer/2022081605/5a4d1af57f8b9ab059981347/html5/thumbnails/26.jpg)
Sources Addison Wesley and Plimmer 2009
Making a Colour scheme
• Quite a number of tools have predefined colour schemes
• Companies often have an existing colour scheme (look at logos, stationary, brochures)
![Page 27: Sources Addison Wesley and Plimmer 2009 The Human Perceptual System Using Colour in Interaction Design Colour Concerns for Interaction Design Technical.](https://reader036.fdocuments.in/reader036/viewer/2022081605/5a4d1af57f8b9ab059981347/html5/thumbnails/27.jpg)
Sources Addison Wesley and Plimmer 2009
Finally
• Colour is part of the aesthetics of a interface
• and
• Aesthetics are very important!!! – ‘nice’ interfaces work better.