Effective use of color
Download
1 / 36

Effective Use of Color - PowerPoint PPT Presentation


  • 97 Views
  • Uploaded on

Effective Use of Color. IS 485, Professor Matt Thatcher. Agenda. Administrivia Use of color in design Other human abilities. Color as a Design Element. We wish to seek means through which the careful use of color can enhance human performance when dealing with computer displays

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Effective Use of Color' - raziya


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Effective use of color

Effective Use of Color

IS 485, Professor Matt Thatcher


Agenda
Agenda

  • Administrivia

  • Use of color in design

  • Other human abilities


Color as a design element
Color as a Design Element

  • We wish to seek means through which the careful use of color can enhance human performance when dealing with computer displays

  • The meaningless introduction of color to an interface can reduce user performance to 1/3 of what it was without color


Physiology of the eye
Physiology of the Eye

  • Physical structure of the eye

  • Limits of perception

  • Guidelines for use of color


Physiology of the eye1
Physiology of the Eye

  • Lens is not color corrected chromostereopsis, produces 3D effect

Lens

White Light

Retina

(separated wavelengths)


Lens

Focus on Red Light

Retina

Lens

Focus on Blue Light

Retina


Implication of chromostereopsis
Implication of Chromostereopsis

  • Spectrally extreme colors produce eye strain (refocusing)



Physiology of the eye2

Rods

B&W

Cones

color

Physiology of the Eye

  • Composition of the eye (retina), wavelength sensitivity

65%

2%

33%


Physiology of the eye3
Physiology of the Eye

  • Lens is not color corrected, Murch, 1984

  • Adjacent, opposite colors produce eye strain, Schneiderman, 1992

  • Cone composition of the eye, Murch, 1984

Composition of the Eye

65%

2%

33%


The aging process
The Aging Process

  • Lens tends to yellow and absorbs shorter wavelengths

    • causing increased insensitivity to blue

  • Fluids in the eye suffer from reduced transparency

    • Perceive a lower level of brightness

  • Implications

    • don’t rely on blue for text or small objects

    • older users need brighter colors


Color deficiency or color blindness
Color Deficiency(or Color Blindness)

  • Trouble discriminating colors

  • Percentage of population affected

    • men: 8 - 10%

    • women: 0.5 - 1.5 %

  • Shape and contours defined by color alone can appear invisible

  • Most common color deficiency

    • R&G!




Effective color combinations
Effective Color Combinations

  • Opponent colors go well together

    • complementary colors (R&G or B&Y)

  • Pick non-adjacent colors



Color illusions
Color Illusions

  • Color adaptation

    • colors appear less saturated after prolonged exposure

  • McCullough effect

    • shifts in color perception toward complementary colors



Commonality difference of color by profession
Commonality/Difference of Color by Profession

  • Machine industry: white = hot

  • Chemical engineer: red=hot, blue=cold

  • Medical: green, purple = tumor

  • red, yellow = normal

  • Control engineers: green = safe

  • Financial: red=loss, black=gain, green = profitable

  • Health care: green = infected

  • Map makers: blue=water, green=forests, yellow=deserts

  • Automobile industry: green=go, yellow=caution, red=stop


Difference of color by culture
Difference of Color by Culture

Culture Red Yellow Green Blue

European danger caution,coward safe,sour masculine

Japanese anger, danger grace,nobility youth villany

Chinese joy,festive honor,royalty

Arabic happiness, prosperity strength virtue,faith




Difference in color
Difference in Color

  • Source of colors

  • Texture or finish of surface

  • Ambient light sources

  • Size, orientation of surface

  • Other colors in field of vision

  • Distance from object


Color and commercialism
Color and Commercialism

  • Softwarenow evaluated based on its interface

  • Competition and focus may not be functionality, but usability


Review of color guidelines
Review of Color Guidelines

  • Avoid the simultaneous display of spectrally extreme colors

  • Avoid red and green in the periphery of a large-scale display

    • lack of RG cones there -- yellows & blues work in periphery

  • Avoid pure blue for text, thin lines, and small shapes

  • Opponent (or complementary) colors on the color wheel go well together

  • Older operators need higher brightness levels to perceive and distinguish colors

  • Ensure that color coding supports the user and the task

  • Use color as a “redundant” clue


The best advice
The Best Advice

  • Color can be very helpful, but

  • Pay attention to

    • how colors combine

    • human perception

    • people with color deficiency

    • established color coding

  • Best advice

    • perform user, task, environment analysis

    • conduct user tests

    • use color sparingly


Use color sparingly
Use Color Sparingly

compared to


Human abilities some more interesting stuff
Human Abilities(Some More Interesting Stuff)

  • Fitts’ Law

    • moving hand is a series of microcorrections

      • correction takes Tperception + Tcognition + Tmotor = 240 msec

    • time Tpos to move the hand (or mouse) to target size S which is distance D away is given by:

      • Tpos = a + b log2 (D/S + 1)

    • summary

      • time to move the hand depends only on the relative precision required


Fitts law example

Pop-up Linear Menu

Pop-up Pie Menu

Today

Sunday

Monday

Tuesday

Wednesday

Thursday

Friday

Saturday

Fitts’ Law Example

  • Which will be faster on average?

    • pie menu (bigger targets & less distance)


Simple experiment
Simple Experiment

  • Volunteer

  • Start saying colors you see in list of words

    • when slide comes up

    • as fast as you can

  • Say “done” when finished

  • Everyone else time it…


ZYP

QLEKF

SUWRG

XCIDB

WOPR

ZYP

QLEKF

XCIDB

SUWRG

WOPR

SUWRG

ZYP

XCIDB

QLEKF

WOPR

QLEKF

WOPR

ZYP

XCIDB

SUWRG


Simple experiment1
Simple Experiment

  • Do it again

  • Say “done” when finished


RED

BLACK

YELLOW

BLUE

RED

GREEN

YELLOW

BLACK

BLUE

BLACK

RED

YELLOW

GREEN

BLUE

GREEN

BLUE

RED

YELLOW

BLACK

GREEN


Memory
Memory

  • Interference

    • two strong cues in working memory

    • link to different chunks in long term memory

  • Why learn about memory?

    • know what’s behind many HCI techniques

    • helps you understand what users will “get”

    • aging population of users


Next class
Next Class

  • Web Design Patterns (Homepage)


ad