Docsity
Docsity

Prepare for your exams
Prepare for your exams

Study with the several resources on Docsity


Earn points to download
Earn points to download

Earn points by helping other students or get them with a premium plan


Guidelines and tips
Guidelines and tips

Use of Color in Design - Lecture Slides | 547 230, Study notes of Information Technology

Material Type: Notes; Professor: Gwizdka; Class: 547 - HUMAN COMPU INTERACT; Subject: INFORMATION TECHNOLOGY AND INFORMATICS; University: Rutgers University; Term: Unknown 1989;

Typology: Study notes

Pre 2010

Uploaded on 09/17/2009

koofers-user-jv8-1
koofers-user-jv8-1 🇺🇸

10 documents

1 / 6

Toggle sidebar

This page cannot be seen from the preview

Don't miss anything!

bg1
1
ITI 230
ITI 230 -
-HCI
HCI
04:547:230(01)
Lecture #13
Lecture #13
Use of Color in Design
Use of Color in Design
Dr. Jacek Gwizdka
http://www.scils.rutgers.edu/~jacekg/teaching/
ITI 230 –HCI – © Jacek Gwizdka 2
Dilbert & UI Colours
Dilbert & UI Colours
ITI 230 –HCI – © Jacek Gwizdka 3
Iterative Design Process
Iterative Design Process
1. Identify user needs and establish requirements
2. Develop alternative designs
3. Build interactive prototypes – each time more refined
to evaluate them
to communicate them to other people (managers, users)
4. Evaluate the prototypes
1. with Experts
2. with Users
3. involving no people
5. Repeat the process… (go to 2)
ITI 230 –HCI – © Jacek Gwizdka 4
Visual Course Outline
Visual Course Outline
Future Trends
End!
Evaluation w.
experts
Lo-Fi & Hi-Fi
Prototyping
Conceptual
Design
Week 8
Info
Design
Week 5
Week 10
Week 7
Week 8
User Needs &
Requirements
Evaluation
w. users
Color
Design
Info
Architecture
Week 3
Understanding users –
Human Cognition
Week 14 & 15
Evaluation
w/o people
Week 4
Data Gathering
Week 6
Design
Evaluate
Prototype /
Implement
Requirements
Weeks 11…14
ITI 230 –HCI – © Jacek Gwizdka 5
Why study color?
Why study color?
Color can be a powerful tool to improve user
interfaces
Æbut its inappropriate use can severely reduce
user performance and even make user interaction
impossible
ITI 230 –HCI – © Jacek Gwizdka 6
Color Uses
Color Uses
Use color to assist in formatting a screen:
Grouping related elements (same color)
Breaking apart separate groupings of information
(different colors)
Associating information that is widely separated on the
screen (same color)
Highlighting or calling attention to important information
pop-out effects (different color)
Other -Use color to:
Realistically portray natural objects
Increase screen appeal
pf3
pf4
pf5

Partial preview of the text

Download Use of Color in Design - Lecture Slides | 547 230 and more Study notes Information Technology in PDF only on Docsity!

ITI 230ITI 230 -- HCIHCI

Lecture #13Lecture

““ Use of Color in DesignUse of Color in Design ””

Dr. Jacek Gwizdka

http://www.scils.rutgers.edu/~jacekg/teaching/

ITI 230 – HCI – © Jacek Gwizdka (^2)

Dilbert & UI ColoursDilbert & UI Colours……

ITI 230 – HCI – © Jacek Gwizdka 3

Iterative Design ProcessIterative Design Process

1. Identify user needs and establish requirements

2. Develop alternative designs

3. Build interactive prototypes – each time more refined

  • to evaluate them
  • to communicate them to other people (managers, users)

4. Evaluate the prototypes

  1. with Experts
  2. with Users
  3. involving no people

5. Repeat the process… (go to 2)

ITI 230 – HCI – © Jacek Gwizdka 4

Visual Course Outline Visual Course Outline

Future Trends End!

Evaluation w. experts

Lo-Fi & Hi-Fi Prototyping

Conceptual Design

Week 8

Info Design

Week 5

Week 10

Week 7 Week 8

User Needs & Requirements

Evaluation w. users

Color Design

Info Architecture

Week 3 Understanding users – Human Cognition

Week 14 & 15

Evaluation w/o people

Week 4 Data Gathering

Week 6

Design

Evaluate

Prototype / Implement

Requirements Weeks 11…

ITI 230 – HCI – © Jacek Gwizdka (^5)

Why study color? Why study color?

Color can be a powerful tool to improve user

interfaces

Æ but its inappropriate use can severely reduce

user performance and even make user interaction

impossible

ITI 230 – HCI – © Jacek Gwizdka (^6)

Color UsesColor Uses

• Use color to assist in formatting a screen:

  • Grouping related elements (same color)
  • Breaking apart separate groupings of information (different colors)
  • Associating information that is widely separated on the screen (same color)
  • Highlighting or calling attention to important information
    • pop-out effects (different color)

• Other - Use color to:

  • Realistically portray natural objects
  • Increase screen appeal

ITI 230 – HCI – © Jacek Gwizdka (^7)

Visible Spectrum Visible Spectrum

ITI 230 – HCI – © Jacek Gwizdka (^8)

Color Dimensions Color Dimensions

  • Hue
    • property of the wavelengths of light (i.e., “color”)
  • Saturation (or chroma)
    • purity of the hue - from gray to the most vivid version of the color ƒ e.g., red is more saturated than pink
    • color is mixture of pure hue & achromatic color ƒ portion of pure hue is the degree of saturation
  • Value (or lightness)
    • how much light appears to be reflected from a surface
    • some hues are inherently lighter or darker

ITI 230 – HCI – © Jacek Gwizdka 9

Color Dimensions (cont.) Color Dimensions (cont.)

  • Value (Lightness) • Saturation (Chroma)

from http://www2.ncsu.edu/scivis/lessons/colormodels/color_models2.html#saturation. ITI 230 – HCI – © Jacek Gwizdka 10

Color models Color models

  • RGB – Red+Green+Blue
    • primary colors
    • additive
    • used by monitors (nothing = black)
  • CMYK – Cyan+Magenta+Yellow+blacK
    • complements of the primary colors
    • subtractive
    • used by printers (nothing = white)
  • Hue, Saturation, Value (HSV) model

ITI 230 – HCI – © Jacek Gwizdka (^11)

Color models (cont.)Color models (cont.)

  • Hue, Saturation, Value (HSV) model

from http://www2.ncsu.edu/scivis/lessons/colormodels/color_models2.html#saturation. ITI 230 – HCI – © Jacek Gwizdka (^12)

Human Visual SystemHuman Visual System

  • Light passes through lens
  • Focuses on retina

ITI 230 – HCI – © Jacek Gwizdka (^19)

Color Sensitivity (cont.) Color Sensitivity (cont.)

  • As we age
    • eye lens yellows & absorbs shorter wavelengths Æ ƒ sensitivity to blue is even more reduced
    • fluid between lens and retina absorbs more light ƒ we perceive a lower level of brightness
  • Implications

Blue text on a dark background to be avoided. We have few short- wavelength sensitive cones in the retina and they are not very sensitive. Older users need brighter colors

Blue text on a dark background to be avoided. We have few short- wavelength sensitive cones in the retina and they are not very sensitive. Older users need brighter colors ITI 230 – HCI – © Jacek Gwizdka (^20)

FocusFocus

  • Different wavelengths of light focus at different distances behind eye’s lens - need for constant refocusing → causes fatigue - careful about color combinations
  • Pure (saturated) colors require more focusing then less pure (desaturated) - don’t use saturated colors in UIs unless you really need something to stand out (e.g., stop sign)

ITI 230 – HCI – © Jacek Gwizdka 21

Color great for classification Color great for classification

  • Rapid visual segmentation
  • Helps determine type
  • Only about six categories

white black red

green yellow

yellow green

blue brown

pink purple orange grey

ITI 230 – HCI – © Jacek Gwizdka 22

Color coding/labelingColor coding/labeling

  • Large areas: low saturation
  • Small areas: high saturation
  • Recommended colors for information coding:
  • Widely agreed upon names
  • First 4 + black & white are unique and mark ends of opponent color axes
  • Entire set correspond to most common color names found across cultures
  • Choose from set of first six, then from second set of six

ITI 230 – HCI – © Jacek Gwizdka (^23)

Color coding/labeling (cont.) Color coding/labeling (cont.)

The same rules apply to color coding text and other similar information. Small areas can have high saturation colors

Large areas should be coded with low saturation colors

Avoid high saturation colors for large areas

ITI 230 – HCI – © Jacek Gwizdka (^24)

Color guidelinesColor guidelines

  • Avoid simultaneous display of highly saturated, spectrally extreme colors - e.g., no cyans/blues at the same time as reds, why? ƒ refocusing necessary! - desaturated combinations are better → use pastels
  • Opponent colors go well together
    • (red & green) or (yellow & blue)

ITI 230 – HCI – © Jacek Gwizdka (^25)

Color guidelines (cont.)Color guidelines (cont.)

  • Pick non-adjacent colors on hue circle

ITI 230 – HCI – © Jacek Gwizdka (^26)

Color guidelines (cont.) Color guidelines (cont.)

  • Size of detectable changes in color varies
    • hard to detect changes in reds, purples, & greens
    • easier to detect changes in yellows & blue-greens
  • Older users need higher brightness levels to distinguish colors
  • Hard to focus on edges created by color alone →
    • use both brightness & color differences

ITI 230 – HCI – © Jacek Gwizdka 27

Color guidelines (cont.)Color guidelines (cont.)

  • Avoid red & green in the periphery - why?
    • lack of RG cones there -- yellows & blues work in periphery
  • Avoid pure blue for text, lines, & small shapes
    • blue makes a fine background color
    • avoid adjacent colors that differ only in blue
  • Avoid single-color distinctions
    • mixtures of colors should differ in 2 or 3 colors ƒ e.g., 2 colors shouldn’t differ only by amount of red
    • helps color-deficient users

ITI 230 – HCI – © Jacek Gwizdka 28

Differences in ColorDifferences in Color Perception & InterpretationPerception & Interpretation

  • Color blindness
  • Age differences
  • Cultural differences
  • Domain differences

ITI 230 – HCI – © Jacek Gwizdka (^29)

Color blindness Color blindness

  • Trouble discriminating colors
    • besets about 9% of population
  • Different photo-pigment response
    • reduces capability to discern small color differences ƒ particularly those of low brightness
  • Red-green deficiency is best known
    • lack of either green or red photo-pigment → ƒ can’t discriminate colors dependent on Red & Green
  • Color blind acceptable palette?
    • Yellow-blue, and grey variation ok

ITI 230 – HCI – © Jacek Gwizdka (^30)

Cultural Differences Cultural Differences

Green % Red % Yellow % Safe 62.2 Hot 31.1 Caution 44. Go 44.7 Danger 64. On 22.3 Stop 48. Americans Safe 61.4 Hot 94.5 Caution 81. Go 99.2 Danger 89. Stop 100

HK

Chinese