Effective use of color
This presentation is the property of its rightful owner.
Sponsored Links
1 / 36

Effective Use of Color PowerPoint PPT Presentation


  • 74 Views
  • Uploaded on
  • Presentation posted in: General

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

Download Presentation

Effective Use of 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.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)


Effective use of color

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)


Visible spectrum

Visible Spectrum


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!


Problem for color deficient users

Problem for Color Deficient Users


Color wheel

Color Wheel


Effective color combinations

Effective Color Combinations

  • Opponent colors go well together

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

  • Pick non-adjacent colors


Poor color contrast

Poor Color Contrast


Color illusions

Color Illusions

  • Color adaptation

    • colors appear less saturated after prolonged exposure

  • McCullough effect

    • shifts in color perception toward complementary colors


Simultaneous contrast

Simultaneous Contrast


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

CultureRedYellowGreenBlue

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


Poor color coding

Poor Color Coding


Experimental results

Experimental Results


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…


Effective use of color

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


Effective use of color

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)


  • Login