Visualización de Información

Transcripción

1 Visualización de Información Uso del color Dr. Ivo H. Pineda Torres Facultad de Ciencias de la Computación Benemérita Universidad Autónoma de Puebla Ototño 2012

2 Pero, que es colorrrrrrrrr? que es color? 2 of 33

3 Pero, que es colorrrrrrrrr? que es color?newton nos demostró que la luz es color; solo podemos percibir este atributo de los objetos cuando hay luz. Fue el primero en descubrir durante sus experimentos sobre la naturaleza de la luz que esta se encuentra formada por una banda de colores (rojo, naranja, amarillo, verde, cian, azul y violeta) que podían ser separados por medio de un prisma. 2 of 33

4 color y su uso inteligente 3 of 33

5 color y su uso inteligente El color es una percepción visual que resulta de la interacción entre millones de células especializadas ubicadas en nuestros ojos y nuestro cerebro; este último es el que finalmente se encarga de interpretar las señales nerviosas enviadas por las células fotoreceptoras para codificar las distintas longitudes de ondas que captan de la luz. 3 of 33

6 color y su uso inteligente ciertos colores tienen impacto gradual en el estado anímico de las personas 70 % de las células de nuestro cuerpo que nos permiten percibir sensaciones residen en nuestros ojos. entender en realidad que información estamos tratando de transmitir y como el color puede o no ayudar a mejorar y aclarar el sentido de nuestro mensaje. El uso más importante del color es el de distinguir un elemento de otro. 4 of 33

7 disyuntiva del color Qué paleta de colores elegimos para representar y aclarar la información? Una gran estrategia consiste en utilizar los colores que se encuentran en la naturaleza... Los colores de la naturaleza son familiares y coherentes, poseen una armonía ampliamente aceptada por el ojo humano... 5 of 33

8 contraste y analogía Contraste y analogía son los grandes principios usados por la naturaleza y que nos son "tan familiares y coherentes". Por el contraste percibimos los colores como diferentes, por analogía los percibimos como similares. El contraste llama nuestra atención, la analogía agrupa. 6 of 33

9 Atributos del color El matiz es el color en sí mismo; representa el atributo que nos permite diferenciar un color de otro. El círculo cromático nos puede facilitares el resultante de distribuir alrededor de un círculo los colores que conforman el segmento de luz que denominamos espectro visible. la comprensión de este particular. 7 of 33

10 Atributos del color El matiz es el color en sí mismo; representa el atributo que nos permite diferenciar un color de otro. El círculo cromático nos puede facilitares el resultante de distribuir alrededor de un círculo los colores que conforman el segmento de luz que denominamos espectro visible. la comprensión de este particular. Se organiza en el círculo cromático que es el resultante de distribuir alrededor de un círculo los colores que conforman el segmento de luz que denominamos espectro visible. 7 of 33

11 cículo cromático 8 of 33

12 contraste por matriz El matiz nos ofrece una primera forma de contraste que podemos fácilmente encontrar en el círculo cromático como colores diametralmente opuestos. Les anexamos algunos ejemplos de contraste por matiz: 9 of 33

13 círculo De igual forma el matiz nos ofrece una primera forma de analogía que podemos encontrar dentro del círculo cromático como colores cercanos unos a los otros, por más simple que consideremos la variación entre sus nombres (como naranja y naranja amarillento, amarillo y verde amarillento) Algunos ejemplos de analogía por matiz son: 10 of 33

14 La luminosidad Como segundo atributo del color encontramos la luminosidad, que representa la intensidad lumínica de un color, o lo que es similar el nivel de claridad u oscuridad que exhibe el mismo. Podemos entenderlo como la cercanía al blanco o al negro que este color posee. 11 of 33

15 La luminosidad Como segundo atributo del color encontramos la luminosidad, que representa la intensidad lumínica de un color, o lo que es similar el nivel de claridad u oscuridad que exhibe el mismo. Podemos entenderlo como la cercanía al blanco o al negro que este color posee. Esta dimensión es visualmente la más importante: un contraste de luminosidad ejerce un poderoso efecto sobre la atención y brinda legibilidad a nuestros datos. En la escala de luminosidad usualmente se define el negro como igual a cero (0) y el blanco igual a cien (100). 11 of 33

16 Azul. Caso 1 En el primer caso incrementaremos gradualmente la luminosidad del matiz (aclararemos) azul de nuestro círculo cromático, obteniendo como resultado: 12 of 33

17 Caso 2 Como segundo caso disminuiremos gradualmente la luminosidad del matiz (oscureceremos) azul de nuestro círculo cromático, obteniendo como resultado: 13 of 33

18 Caso 3 En el caso del contraste por luminosidad nace del juego entre claridad y oscuridad, aun y cuando estemos empleando un mismo matiz. Cuanto mayor sea la diferencia entre los niveles de luminosidad de un mismo matiz mayor será el contraste. (version aclarada) 14 of 33

19 Caso 4 Contraste por Luminosidad (versión oscurecida) 15 of 33

20 Tercer atributo:saturación Saturación, que define el nivel de pureza de un color. 16 of 33

21 Tercer atributo:saturación Saturación, que define el nivel de pureza de un color. Se mide con respecto al gris. Los colores muy saturados poseen un mayor grado de pureza y se exhiben con mayor intensidad lumínica. 16 of 33

22 Tercer atributo:saturación Saturación, que define el nivel de pureza de un color. Se mide con respecto al gris. Los colores muy saturados poseen un mayor grado de pureza y se exhiben con mayor intensidad lumínica. Los colores con menos saturación se muestran más agrisados, con mayor cantidad de impurezas y por ende con una intensidad lumínica menor. 16 of 33

23 Saturación. ejemplo azul cromático Ubicaremos en el centro nuestro matiz de partida, aumentando el nivel de saturación gradualmente hacia la derecha y disminuyendo de forma igualmente gradual la saturación de este matiz hacia la izquierda, obteniendo como resultado: 17 of 33

24 Saturación. Contraste por saturación Viene determinado de la manipulacvión entre el nivel de pureza o impurezas en el matiz; esto significa que cuanto mayor sea la diferencia entre los niveles de saturación de un mismo matiz mayor será el contraste. 18 of 33

25 Saturación. Contraste por saturación La analogía por saturación viene determinada igualmente por manipulación del nivel de pureza o impureza en el matiz; esto representa que cuanto menor sea la diferencia entre los niveles de saturación de un mismo matiz mayor será la analogía. 19 of 33

26 Principios básicos Para la visualización de información: Usar siempre un fondo unicolor y neutral. 20 of 33

27 Principios básicos Para la visualización de información: Usar siempre un fondo unicolor y neutral. Usar el color solo para etiquetar los datos. 20 of 33

28 Principios básicos Para la visualización de información: Usar siempre un fondo unicolor y neutral. Usar el color solo para etiquetar los datos. Emplear siempre un mismo color salvo cuando se necesite resaltar diferencias. 20 of 33

29 Principios básicos Para la visualización de información: Usar siempre un fondo unicolor y neutral. Usar el color solo para etiquetar los datos. Emplear siempre un mismo color salvo cuando se necesite resaltar diferencias. Cuando sea necesario emplear color usar la analogía para agrupar los elementos del gráfico y dar mayor énfasis a tendencias generales o el contraste si se requiere llamar la atención sobre elementos en específico. 20 of 33

30 Principios básicos Para la visualización de información: Usar siempre un fondo unicolor y neutral. Usar el color solo para etiquetar los datos. Emplear siempre un mismo color salvo cuando se necesite resaltar diferencias. Cuando sea necesario emplear color usar la analogía para agrupar los elementos del gráfico y dar mayor énfasis a tendencias generales o el contraste si se requiere llamar la atención sobre elementos en específico. Cuando sea necesario emplear color preferir colores suaves (baja saturación) a colores fuertes (alta saturación). 20 of 33

31 Fondo neutral El sistema visual humano no se encuentra diseñado para percibir colores absolutos; percibimos diferencias de color en relación con otros. 21 of 33

32 Fondo neutral El sistema visual humano no se encuentra diseñado para percibir colores absolutos; percibimos diferencias de color en relación con otros. Esto significa, en otras palabras, que un color que exhibe exactamente el mismo matiz, la misma luminosidad y la misma saturación puede lucir ligeramente diferente dependiendo de los colores que lo rodean. 21 of 33

33 Fondo neutral, cont A tu juicio a partir de cual mes las barras exhiben un matiz de gris más oscuro? 22 of 33

34 Fondo neutral, cont La verdadera respuesta es que ninguna de las barras es más oscura que otra. Hemos creado todas las barras con exactamente el mismo matiz de gris, sin alteración ninguna de su luminosidad o saturación. La ligera diferencia que aparentemente exhiben es producto de un efecto que produce el gradiente de color del fondo sobre nuestro sistema visual. 23 of 33

35 Fondo neutral, cont La verdadera respuesta es que ninguna de las barras es más oscura que otra. Hemos creado todas las barras con exactamente el mismo matiz de gris, sin alteración ninguna de su luminosidad o saturación. La ligera diferencia que aparentemente exhiben es producto de un efecto que produce el gradiente de color del fondo sobre nuestro sistema visual. En otras palabras, emplear este gradiente de fondo dificulta nuestra percepción del color de las barras y afecta la legibilidad de los datos de la gráfica. 23 of 33

36 Fondo neutral, conclusiones Los efectos de distorsión sobre la percepción visual pueden ser aun mayores si existen contrastes por matiz entre el color de fondo y el color que representa los datos, por ejemplo contrastes del tipo rojo-verde, naranja-azul, amarillo-violeta, etc. 24 of 33

37 Fondo neutral, conclusiones Los efectos de distorsión sobre la percepción visual pueden ser aun mayores si existen contrastes por matiz entre el color de fondo y el color que representa los datos, por ejemplo contrastes del tipo rojo-verde, naranja-azul, amarillo-violeta, etc. Regla general Evitar emplear múltiples colores de fondo, cualquier tipo de gradientes de un mismo matiz, o contrastes por matiz entre el color del fondo y el color que represente los datos. 24 of 33

38 nuestro ejmplo queda 25 of 33

39 Premisa El blanco es la luz total, es un color que al ser empleado de fondo nos permite percibir mejor otros colores. 26 of 33

40 Premisa El blanco es la luz total, es un color que al ser empleado de fondo nos permite percibir mejor otros colores. En consecuencia, nuestra recomendación es que siempre empleen el blanco como matiz de fondo. el blanco es la luz total, y por ende es un color que al ser empleado de fondo nos permite percibir mejor otros colores. 26 of 33

41 Premisa El blanco es la luz total, es un color que al ser empleado de fondo nos permite percibir mejor otros colores. En consecuencia, nuestra recomendación es que siempre empleen el blanco como matiz de fondo. el blanco es la luz total, y por ende es un color que al ser empleado de fondo nos permite percibir mejor otros colores. Siempre usar el blanco como matiz de fondo. o un color claro. 26 of 33

42 Recomendación para los datos Emplear siempre un mismo color salvo cuando se necesite resaltar diferencias. Cuando sea necesario emplear color usar la analogía para agrupar los elementos del gráfico y dar mayor énfasis a tendencias generales o el contraste si se requiere llamar la atención sobre elementos en específico. 27 of 33

43 Recomendación para los datos Emplear siempre un mismo color salvo cuando se necesite resaltar diferencias. Cuando sea necesario emplear color usar la analogía para agrupar los elementos del gráfico y dar mayor énfasis a tendencias generales o el contraste si se requiere llamar la atención sobre elementos en específico. NO HAGAS ESTO: 27 of 33

44 Receta. Cont. Cuando sea necesario emplear color preferir colores suaves (de baja saturación) a colores fuertes (de alta saturación). "La naturaleza utiliza colores intensos para atraer la atención; tenemos que hacer lo mismo". Cuando empleamos colores más suaves para codificar nuestros datos el resultado puede ser analizado de una forma más agradable, con menos distracción de cuando empleamos colores más fuertes. 28 of 33

45 Nuestro ejemplo queda, alto nivel saturación 29 of 33

46 Nuestro ejemplo queda, bajo nivel saturación 30 of 33

47 Pregunta cuál de las dos opciones se hace visualmente más agradable y sencilla para su lectura y análisis? El empleo de colores muy fuertes afectan nuestra visión; cuando nuestros ojos son expuestos a ellos por cierto tiempo pueden generar ilusiones sobre nuestra percepción visual, efectos por supuesto no deseados cuando se trata de representar y comunicar un mensaje gráfico claro. 31 of 33

48 Prueba 32 of 33

49 Fuentes y Referencias: El Gran Libro del Color; Birren, Faber; Primera Edición; 1982; Editorial Blume, Barcelona, España. ISBN: Envisioning Information; Tufte, Edward; Cuarta Edición; 1990;.Graphics Press; ISBN: Now You See; Few, Stephen; Primera Edición; 2009; Analytics Press; ISBN: Uses and Misuses of Color; Few, Stephen; Noviembre 2005; Perceptual Edge. El Por Que del Efecto Óptico; Junio 2007; sabercurioso.com. 33 of 33