Este documento discute la percepción humana del color. Brevemente describe el sistema visual humano, incluyendo la retina y los conos. Explica cómo los humanos perciben el color y las deficiencias de color. Proporciona guías para el uso efectivo del color en el diseño, como evitar ciertas combinaciones de colores. Finalmente, asigna una tarea de investigación sobre la percepción humana.

1. 5 Percepción Humana

2. Contenido
 Repaso
 Sistema de visión humana
 Percepción del color
 Deficiencia de colores
 Guías para el diseño
 Tarea 4
2 HCI-UTM

3. Resumen
 Responda estas preguntas antes de diseñar
 Quién, qué, dónde, cuándo, cada cuándo?
 Relaciones entre usuarios y datos?
 Qué otras herramientas tienen los usuarios?
 Qué pasa si las cosas salen mal?
 Seleccionar tareas
 Tareas reales con cobertura funcional racional
 Cómo deben verse las tareas?
 Completas, tareas específicas que los usuarios
quieren hacer
3 HCI-UTM

4. Porqué estudiar el color?
El color puede ser una poderosa
herramienta para mejorar las interfaces
de usuario, pero su uso inapropiado
puede reducir severamente el rendimiento
de los sistemas que desarrollamos.
4 HCI-UTM

5. Espectro visible
5 HCI-UTM

6. Sistema de visión humana
 La luz pasa a través del lente
 Se enfoca en la retina
6 HCI-UTM

7. Sistema de visión humana
7 HCI-UTM

8. El ojo y una cámara
8 HCI-UTM

9. Retina
 La retina está cubierta de receptores
sensibles a la luz
 Principalmente para visión nocturna y percepción
del movimiento
 Es sensible a un amplio espectro de luz
 No puede diferenciar entre colores
 Percibe intensidades o grados de gris
 Conos
 Sirven para percibir los colores
9 HCI-UTM

10. Cont.
10 HCI-UTM

11. Retina cont.
 El centro de la retina tiene la mayoría de
los conos
 El centro del ojo está lleno del humor vítreo
 El límite de la retina está dominado por
bastones
 Permiten detectar movimientos en los
extremos de la periferia
11 HCI-UTM

12. Percepción del color por conos
 Los fotopigmentos sirven para percibir el color
 Tres tipos: azul, verde, “rojo” (amarillo
realmente)
 Cada uno es sensitivo a una banda diferente del
spectrum
 La cantidad de actividad de cada uno de los tres
genera el color
 Registrado y se envía al cerebro como
 R-V da una percepción de color rojo o verde
 R+V da una percepción de brillantes y amarillo
 Am-Az da amarillo o una percepción de color azul
12 HCI-UTM

13. Sensibilidad de Color
Really yellow
http://www.cs.gsu.edu/classes/hypgraph/color/coloreff.htm
13 HCI-UTM

14. Distribución de los fotopigmentos
 No están distribuidos de igual forma
 Principalmente rojos (64%) y algunos azules (4%)
 Insensibles a longitudes de onda cortas
 Morado a azul fuerte
 Alta sensibilidad a longitudes de onda largas
 Amarillo y naranja
 Centro de la retina no tiene conos azules
 Desaparición de pequeños objetos azules si fijamos
la vista cuidadosamente
14 HCI-UTM

15. Sensibilidad del color y detección
de imágenes
 Más sensible al centro del espectro
 Azules y rojos deben ser más brillantes que
los verdes y amarillos
 La brillantes está determinada por rojos
con verdes
 La brillantez está expresada en una escala de
luminosidad
 La energía de la luz está corregida por la
sensibilidad de la longitud de onda
15 HCI-UTM

16. Cont.
 Las formas están detectadas al encontrar
los márgenes
 Combinar brillantez y color para crear una
mejor definición en la imagen
 Qué significa?
 Que es difícil trabajar con márgenes y figuras
azules
16 HCI-UTM

17. SENSIBILIDAD AL COLOR
(cont.)
 Mientras envejecemos
 Los lentes se tornan amarillos y absorben
longitudes de onda más cortas
 La sensibilidad al azul se reduce
 Los fluídos entre los lentes y la retina absorbe más luz
 Percibe un menor nivel de brillantez
 Qué significa?
 No utilice azul para textos pequeños
 No utilice azul para textos pequeños!!
17 HCI-UTM

18. Sensibilidad del ojo
18 HCI-UTM

19. Enfoque
 Diferentes longitudes de onda se enfocan
a diferentes distancias a través de los
lentes del ojo
 Existe la necesidad de renfocar
constantemente
 Causa fatiga
 Debemos ser cuidadosos con la combinación
de colores seleccionada
19 HCI-UTM

20. Cont.
 Los objetos rojos parecen más cercanos
que los azules
 Colores puros (saturados) requieren de
más enfocamiento que los de colores
menos puros (desaturados)
20 HCI-UTM

21. Daltonismo
 Problema identificando colores
 El 9% de la población
 Diferentes respuesta a los fotopigmentos
 Reducen la capacidad de identificar tonos o cambios
de colores
 Particularmente aquellos de baja brillantez
 Deficiencia de color rojo y verde, la más común
 Causado por la carencia de fotopigmentos rojos y
verdes?
 No pueden discriminar colores que tengan que ver con
pigmentos R y V
21 HCI-UTM

22. Salón de la Fama o Infamia?
 Caja de diálogo
 Pregunta si desea
borrar o no
 yes (verde)
 no (rojo)
22 HCI-UTM

23. Cont.
 Caja de diálogo
 Pregunta si desea borrar o no
 yes (verde)
 no (rojo)
 Problemas?
 Deficiencia en colores R y V
 Identificación cultural
 Occidental
 Verde bueno
 Rojo malo
 Oriental y otros difieren
23 HCI-UTM

24. Componentes del color
 Matiz (Hue)
 Propiedad de la longitud de onda (eg. “color”)
 Brillantez
 Cuánta luz parece ser reflejada de la superficie
 Algunos son inherentemente claro u obscuro
 Saturación
 Pureza del matiz
 Eg. El rojo es más saturado que el rosa
 El color es una mezcla del matiz y un color
acromático
 La porción de matiz puro es el grado de saturación
24 HCI-UTM

25. Cont.
 Brillantez  Saturación
25 HCI-UTM

26. Ilusiones ópticas
Puede Vd identificar la edad de la mujer?
26 HCI-UTM

27. Guías del color
 Evite el despliege simultáneo de colores
altamente saturados, colores extremos
 Eg. No morados o azules al mismo tiempo
que rojos
 Eso causaría reenfocar la mirada frecuentemente
 Colores desaturados son mejores (pastel)
 Colores opuestos van bien juntos
 (rojo y verde) o (amarillo y azul)
27 HCI-UTM

28. Seleccione colores no conjuntos
en la rueda de hue
28 HCI-UTM

29. Cont.
 Es difícil detectar cambios de algunos colores
 Difícil en rojos, morados y verdes
 Fácil en amarillos, y verde-azul
 Usuarios de edad necesitan altos grados de
brillantez para distinguir colores
 Difícil identificar los márgenes de una figura si
sólo están creados por el color mismo
 Use brillantez y definición de colores
29 HCI-UTM

30. Guías de color (Cont.)
 Evite rojo y verde en los márgenes (why?)
 Amarillos y azules en la periferia
 Evite azul puro para textos, líneas y figuras
pequeñas
 El azul es un muy buen color de fondo
 Evite colores adyacentes que difieran solo por el
color azul (evite azul para límites de figuras)
30 HCI-UTM

31. Cont.
 Evite distinciones de color sencillo
 Las combinaciones de colores deben diferir
en 2 o 3 colores únicamente
 Eg. 2 colores no deben diferir sólo en la cantidad
de rojo
 Ayuda para personas que no distingan bien
los colores
31 HCI-UTM

32. Resumen
 El color puede ser muy útil, sin embargo
 Ponga atención a
 Cómo se combinan los colores
 La percepción humana
 Personas con algún grado de daltonismo
 Mostrar información con color
32 HCI-UTM

33. Tarea 3
 Trabajo de Investigación 2 Consideraciones de la
“Percepción Humana” percepción humana
 Debe contener los durante el diseño de GUI
siguientes temas: (conclusiones)
1 Los sentidos (intro) +  Fecha de entrega: martes
 Visión 8 de diciembre, 2009,
 Audición hora de clase
 Tacto (Aniversario 28 de la
 Gusto muerte de John Lennon)
33 HCI-UTM

34. Lecturas
 Leer Capítulo 2 “The user’s physical
capabilities”,
 The Essence of Human-Computer
Interaction, por Christine Faulkner,
 Ed Prentice Hall
34 HCI-UTM