ch 9 colors
DESCRIPTION
Ch 9 Colors. Yonglei Tao School of Computing & Info Systems GVSU. Example – Use of Colors. Using Color. As a formatting aid Relating elements in groups Breaking up separate groups Highlighting important information As a visual code to identify Screen elements - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Ch 9 Colors](https://reader035.vdocuments.site/reader035/viewer/2022062321/56813dfd550346895da7d6e1/html5/thumbnails/1.jpg)
Ch 9 Colors
Yonglei Tao
School of Computing & Info Systems
GVSU
![Page 2: Ch 9 Colors](https://reader035.vdocuments.site/reader035/viewer/2022062321/56813dfd550346895da7d6e1/html5/thumbnails/2.jpg)
Example – Use of Colors
![Page 3: Ch 9 Colors](https://reader035.vdocuments.site/reader035/viewer/2022062321/56813dfd550346895da7d6e1/html5/thumbnails/3.jpg)
Using Color
As a formatting aid Relating elements in groups Breaking up separate groups Highlighting important information
As a visual code to identify Screen elements Logical structure of ideas, processes, and
sequences Source or status of information
![Page 4: Ch 9 Colors](https://reader035.vdocuments.site/reader035/viewer/2022062321/56813dfd550346895da7d6e1/html5/thumbnails/4.jpg)
Using Color
Aid in understanding, remembering, and recalling information
Color-coded dials
![Page 5: Ch 9 Colors](https://reader035.vdocuments.site/reader035/viewer/2022062321/56813dfd550346895da7d6e1/html5/thumbnails/5.jpg)
Using Color
Used to catch user’s attention
![Page 6: Ch 9 Colors](https://reader035.vdocuments.site/reader035/viewer/2022062321/56813dfd550346895da7d6e1/html5/thumbnails/6.jpg)
1-6
Using Color
Clarification, Relation, and Differentiation
Ethernet wires
![Page 7: Ch 9 Colors](https://reader035.vdocuments.site/reader035/viewer/2022062321/56813dfd550346895da7d6e1/html5/thumbnails/7.jpg)
1-7
Color and Performance
Color improves performance in tasks Recall Search-and-locate Retention Decision judgment
![Page 8: Ch 9 Colors](https://reader035.vdocuments.site/reader035/viewer/2022062321/56813dfd550346895da7d6e1/html5/thumbnails/8.jpg)
Using Color
Search
![Page 9: Ch 9 Colors](https://reader035.vdocuments.site/reader035/viewer/2022062321/56813dfd550346895da7d6e1/html5/thumbnails/9.jpg)
Color Concerns
It has been found that the colors red, blue, green, and yellow are the most beneficial in learning environments
![Page 10: Ch 9 Colors](https://reader035.vdocuments.site/reader035/viewer/2022062321/56813dfd550346895da7d6e1/html5/thumbnails/10.jpg)
Color Concerns (Cont.)
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
![Page 11: Ch 9 Colors](https://reader035.vdocuments.site/reader035/viewer/2022062321/56813dfd550346895da7d6e1/html5/thumbnails/11.jpg)
1-11
Color Background
The perceived color of an object is affected by the color of its background
![Page 12: Ch 9 Colors](https://reader035.vdocuments.site/reader035/viewer/2022062321/56813dfd550346895da7d6e1/html5/thumbnails/12.jpg)
1-12
Color Pairing
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 makes characters appear to glow
A test of 24 color combinations found that error rates ranged from 1 to 4 errors per 1,000 characters read Low: black on light blue, blue on white High: magenta on green, green on white
![Page 13: Ch 9 Colors](https://reader035.vdocuments.site/reader035/viewer/2022062321/56813dfd550346895da7d6e1/html5/thumbnails/13.jpg)
1-13
Color Combinations to Avoid
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 14: Ch 9 Colors](https://reader035.vdocuments.site/reader035/viewer/2022062321/56813dfd550346895da7d6e1/html5/thumbnails/14.jpg)
Color Tips
Use contrasting colors to emphasize separation Such as red and green, blue and yellow
Use similar colors to emphasize similarity Such as orange and yellow, blue and violet.
Use bright colors to attract attention Use less bright colors to deemphasize
elements
![Page 15: Ch 9 Colors](https://reader035.vdocuments.site/reader035/viewer/2022062321/56813dfd550346895da7d6e1/html5/thumbnails/15.jpg)
Color Tips (Cont.)
Use warm colors to indicate necessary actions Red, orange, yellow
Use cool colors to show status or background information Green, blue, violet, purple
Use color in a thoughtful and consistent way Be careful about coloring pairings
![Page 16: Ch 9 Colors](https://reader035.vdocuments.site/reader035/viewer/2022062321/56813dfd550346895da7d6e1/html5/thumbnails/16.jpg)
Color Tips (Cont.)
Make default conservative neutral backgrounds (gray, white, off-white) dark foreground (black, dark blue)
Limit the number of colors used four or fewer colors in a window no more than seven in a system
Use bright colors in small amounts Allow users to pick their colors
![Page 17: Ch 9 Colors](https://reader035.vdocuments.site/reader035/viewer/2022062321/56813dfd550346895da7d6e1/html5/thumbnails/17.jpg)
Uses of Color to Avoid
Relying on color exclusively Use too many colors in a display or the
colors are too bright May confuse or disturb users
Low-brightness colors for extended viewing Using color in unexpected ways
![Page 18: Ch 9 Colors](https://reader035.vdocuments.site/reader035/viewer/2022062321/56813dfd550346895da7d6e1/html5/thumbnails/18.jpg)
Individual and Cultural Issues
Factors affecting color perception Culture Age Fatigue Emotions Light sources
Color deficiency and human subjectivity must be considered important factors in interaction design
![Page 19: Ch 9 Colors](https://reader035.vdocuments.site/reader035/viewer/2022062321/56813dfd550346895da7d6e1/html5/thumbnails/19.jpg)
1-19
Color Deficiencies
Types of Color Blindness
Normal color vision Deuteranopic color vision
![Page 20: Ch 9 Colors](https://reader035.vdocuments.site/reader035/viewer/2022062321/56813dfd550346895da7d6e1/html5/thumbnails/20.jpg)