desi slidesweek3 1.ppt

15
26/08/2010 1 Diseño y Evaluación de Sistemas Interactivos COM-14112-001 Visión en Color 24 de Agosto de 2010 Dr. Víctor M. González y González [email protected] Agenda 1. Pioneros: Jorge Sotomayor y Luis Mendoza 2. Proyecto del Curso – discusión de avances 3. Visión en Color

Upload: others

Post on 03-Feb-2022

2 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: DESI SlidesWeek3 1.ppt

26/08/2010

1

Diseño y Evaluación de Sistemas InteractivosCOM-14112-001

Visión en Color 24 de Agosto de 2010

Dr. Víctor M. González y Gonzá[email protected]

Agenda

1. Pioneros: Jorge Sotomayor y Luis Mendoza2. Proyecto del Curso – discusión de avances3. Visión en Color

Page 2: DESI SlidesWeek3 1.ppt

26/08/2010

2

Proyecto del Curso• Concurso de Diseño

– Método general de trabajo• Definir el estado del arte – Descripción de 6-8 estudios que abordan

aspectos similares a lo que se propone pero que ayudan a entender la aportación o innovación de la idea. No cronológico, temático.

• Encapsular la propuesta en un escenario – describiendo la idea a través de una narrativa (ilustrada) donde se detalla su uso, aplicación y contexto.

• Llevar a cabo entrevistas – 5-6 personas que incluyen una muestra suficientemente diversa con quienes discutir la idea. La entrevista inicia con una discusión de su situación actual (relevante al diseño), continua con la presentación del escenario, y concluye con la discusión y análisis de la propuesta desde la perspectiva del entrevistado.

• La propuesta a MexIHC 2010 se envía en el formato de la ACM para resúmenes extendidos (máximo seis páginas). http://www.sigchi.org/chi2010/authors/format.html

Proyecto del Curso• Proyecto Energía

– Método general de trabajo• Estudio de adopción (par de semanas). Llevar una memoria de la

adopción detallando vivencias (investigador y usuario). • Llevar a cabo entrevista – con los usuarios del trial. Explorar:

beneficios del monitor, prácticas comunes de uso, posibles mejoras. • Definir el estado del arte – Descripción de 6-8 estudios que abordan

aspectos similares a lo que se propone pero que ayudan a entender la aportación o innovación de la idea. No cronológico, temático.

• Encapsular la propuesta en un escenario – describiendo la idea a través de una narrativa (ilustrada) donde se detalla su uso, aplicación y contexto.

Page 3: DESI SlidesWeek3 1.ppt

26/08/2010

3

Our Color Vision is LimitedChapter 5

Designing with the Mind in Mind - Jeff Johnson– 2010 Elsevier

Our Color Vision is Limited

• Human color perception has both strengths and limitations. Many of those strengths and limitations are relevant to user interface design:– 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.

Page 4: DESI SlidesWeek3 1.ppt

26/08/2010

4

How Color Vision Works

Rods – detect light levels but not colorsCones – three types , sensitive to red, green and blue light

The rods are sensitive to overall brightnessThe three types of cones are sensitive to different frequencies of light

The Equation

Page 5: DESI SlidesWeek3 1.ppt

26/08/2010

5

Sensitivity of Three Types of Retinal Cones

Low frequency – sensitive to light over almost the entire rangeMedium frequency – less sensitive than low frequency cones

High frequency – less sensitive and less numerous

How does our brain combine the signals from the cones?

• Subtraction: Neurons in the visual cortex at the back of our brain subtract the signals coming over the optic nerves – medium- and low-frequency cones - “red-

green” difference signal channel. – high- and low-frequency cones - “yellow-

blue” difference signal channel. – low- and medium-frequency cones -an

overall luminance (or “black-white”) signal channel.

These three channels are called color-opponent channels.

The brain then applies additional subtractive processes to all three color-opponent channels: signals are effectively subtracted from similar.

Page 6: DESI SlidesWeek3 1.ppt

26/08/2010

6

1. Vision is Optimized for Edge Contrast, Not Brightness

• Subtraction makes our visual system much more sensitive to differences in color and brightness—i.e., to contrasting edges—than to absolute brightness levels.

1. Vision is Optimized for Edge Contrast, Not Brightness

• Subtraction makes our visual system much more sensitive to differences in color and brightness—i.e., to contrasting edges—than to absolute brightness levels.

Page 7: DESI SlidesWeek3 1.ppt

26/08/2010

7

1. Vision is Optimized for Edge Contrast, Not Brightness

Brain researcher Edward H. Adelson at the MIT developed an outstanding illustration of our visual system’s insensitivity to absolute brightness and its sensitivity to contrast

2. Ability to Discriminate Color Depends on How Colors

are Presented

• Three presentation factors affect our ability to distinguish colors from each other:– 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. Text is often thin, so the exact color of text is often hard to determine.

– 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.

Page 8: DESI SlidesWeek3 1.ppt

26/08/2010

8

2. Ability to Discriminate Color Depends on How Colors

are Presented

• Paleness (A), Color patch size (B) and Separation (C)

2. Ability to Discriminate Color Depends on How Colors

are Presented

• Paleness

• 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.

Page 9: DESI SlidesWeek3 1.ppt

26/08/2010

9

2. Ability to Discriminate Color Depends on How Colors

are Presented

• Color Patch Size

Tiny color patches in this chart legend are hard to distinguish.

2. Ability to Discriminate Color Depends on How Colors

are Presented

• Color Patch Size

Large color patches make it easier to distinguish the colors.

Page 10: DESI SlidesWeek3 1.ppt

26/08/2010

10

3. Color-Blindness

• Having color-blindness means that one or more of the color subtraction channels don’t function normally, making it difficult to distinguish certain pairs of colors.

• Approximately 8% of men and slightly under 0.5% of women have a color perception deficit: difficulty discriminating certain pairs of colors.

• The most common type of color-blindness is red/green; other types are much rarer.

3. Color-Blindness

• Red/green type of color-blindness

Red/green color-blind people can’t distinguish: (A) dark red from black, (B) blue from purple, (C) light green from white.

Page 11: DESI SlidesWeek3 1.ppt

26/08/2010

11

3. Color-Blindness

MoneyDance: Graph uses colors some users can’t distinguish.

3. Color-Blindness

MoneyDance graph rendered in grayscale.

Page 12: DESI SlidesWeek3 1.ppt

26/08/2010

12

3. External Factors That Influence our Ability to

Distinguish Colors

• Variation among color displays: Computer displays vary in how they display colors, depending on their technologies, driver software, or color settings.

• Grayscale displays: Although most displays these days are color, there are devices, especially small hand-held ones, with grayscale displays.

• Display angle: Some computer displays, particularly LCD ones, work much better when viewed straight on than when viewed from an angle.

• Ambient illumination: Strong light on a display washes out colors before it washes out light and dark areas, reducing color displays to grayscale ones.

Guidelines for Using Color

1. Make sure the contrast between colors is high. – Avoid subtle color differences. – Distinguish colors by saturation and brightness as well as

hue. – One way to test whether colors are different enough is to

view them in grayscale. If you can’t distinguish the colors when they are rendered in grays, they aren’t different enough.

Page 13: DESI SlidesWeek3 1.ppt

26/08/2010

13

Guidelines for Using Color

2. Use distinctive colors – Our visual system combines the signals from retinal cone

cells to produce three “color opponent” channels: red-green, yellow-blue, and black-white (luminance).

– The colors that people can distinguish most easily are those that cause a strong signal (positive or negative) on one of the three color-perception channels, and neutral signals on the other two channels.

– Those colors are red, green, yellow, blue, black, and white.

Guidelines for Using Color

3. Avoid color pairs that color-blind people cannot distinguish– Such pairs include dark red versus black, dark red versus

dark green, blue versus purple, light green versus white. – Don’t use dark reds, blues, or violets against any dark

colors. Instead, use dark reds, blues, and violets against light yellows and greens.

– Vischeck.com to check Web pages and images to see how people with various color vision deficiencies would see them.

– http://www.vischeck.com/

Page 14: DESI SlidesWeek3 1.ppt

26/08/2010

14

Guidelines for Using Color

4. Use color redundantly with other cues– Don’t rely on color alone. If you use color to mark

something, mark it another way as well.

5. Separate strong opponent colors. – Placing opponent colors right next to or on top of each

other causes a disturbing shimmering sensation, and so should be avoided

Guidelines for Using Color

Page 15: DESI SlidesWeek3 1.ppt

26/08/2010

15

Guidelines for Using Color

MinneapolisFed.org: Graph uses color differences visible to all sighted people, on any display.

Resumen

1. Próxima clase : a) Visión, Lectura y Atención b) Más Pioneros: Miriam Seth y Luis Eduardo Perez

Dudas: [email protected]