pengkayaan materi : guidelines, principles, and theories -> color
DESCRIPTION
Pengkayaan Materi : Guidelines, Principles, and Theories -> COLOR. Course : T0084 – Interaksi Manusia dan Komputer Year: 2013. OUTLINE. Introduction Strength and limitation References. INTRODUCTION. Color is a visual perception Color can get user’s attention - PowerPoint PPT PresentationTRANSCRIPT
Course : T0084 – Interaksi Manusia dan KomputerYear : 2013
Pengkayaan Materi:Guidelines, Principles, and Theories
-> COLOR
OUTLINE
• Introduction• Strength and limitation• References
INTRODUCTION• Color is a visual perception• Color can get user’s attention• Look and feel user interface
STRENGTH AND LIMITATION
• Our vision is optimized to detect contrasts (edges), not absolute brightness.
• Our ability to distinguish colors depends on how colors are presented.
• Some people have color-blindness. • The user’s display and the viewing conditions
affect color perception
VISION IS OPTIMIZED FOR EDGE CONTRAST, NOT BRIGHTNESS
our visual system much more sensitive to differences in color and brightness
The circles appear as different shades because their backgrounds are different, but they are the same.
ABILITY TO DISCRIMINATE COLORS DEPENDS ON HOW COLORS ARE PRESENTED
Paleness: The paler (less saturated) two colors are, the harder it is to tell them apart
Color patch size: The smaller or thinner objects are, the harder it is to distinguish their colors
Separation: The more separated color patches are, the more difficult it is to distinguish their colors, especially if the separation is great enough to require eye motion between patches
Example
ITN.net (2003): Pale color marking current step makes it hard for users to see which step in the airline reservation process they are on.
Bad Example:
Good Example:
ITN.net: The current step is highlighted in two ways: with color and shape.
Example
Tiny color patches in this chart legend are hard to distinguish
Large color patches make it easier to distinguish the colors
Bad Example:
Good Example:
Example
MinneapolisFed.org: The difference in color between visited and unvisited links is too subtle.2
MinneapolisFed.org: Graph uses color differences visible to all sighted people, on any display.
Bad Example:
Good Example:
COLOR-BLINDNESS
Having color-blindness doesn’t mean an inability to see colors.
It just means that one or more of the color subtraction channels don’t function normally, making it difficult to distinguish certain pairs of colors
Red/green color-blind people can’t distinguish: (A) dark red from black, (B) blue from purple, (C) light green from white.
Bad Example
MoneyDance: Graph uses colors some users can’t distinguish.
EXTERNAL FACTORS THAT INFLUENCE THE ABILITY TO DISTINGUISH COLORS
• Variation among color displays• Grayscale displays• Display angle• Ambient illumination
Supporting Material• http://www.ics.uci.edu/~
majumder/vispercep/student08/colorappearence.pdf
• Johnson J. (2010), Designing with the Mind in Mind, Morgan Kaufmann, USA, chapter 5