Tercer articulo de la serie Uso del Color donde se sustenta principios de visualizacion de informacion aplicados al correcto empleo del color en graficos.
Hola,
Luego de abordar en nuestros anteriores artículos (Visualizacion: Uso del Color I y Visualizacion: Uso del Color II) algunos principios fundamentales del color, en esta oportunidad comenzaremos de lleno a aplicarlos al diseño de gráficos que ayuden a comunicar un mensaje claro, estético y eficaz.
A este respecto recomendamos el empleo de los siguientes principios básicos, siguiendo el ejemplo de maestros de la visualización de información o infovis como Edward Tufte y Stephen Few:
¿A su juicio a partir de cual mes las barras exhiben un matiz de gris más oscuro?
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.
Este efecto visual lo experimentamos ante cualquier gradiente de fondo que sea empleado, independientemente del matiz de partida; de hecho 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.
Por regla general recomendamos 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. Los efectos visuales que generan estas combinaciones de color afectan significativamente nuestros gráficos dificultando la simple interpretación de la información y degradando el contenido a transmitir al alterar las proporciones de ciertos objetos haciéndolos lucir diferentes a otros, cuando deberían lucir exactamente igual.
Partiendo de nuestro ejemplo original, veamos que sucede si tan solo efectuamos un simple cambio de fondo, sustituyendo el gradiente por un fondo blanco:
¿Mejora la legibilidad de los datos verdad? Este cambio hace más sencillo comparar los volúmenes mensuales permitiendo analizar mejor los datos y determinar comportamientos.
Recordemos siempre esta premisa: el blanco es la luz total, y por ende 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 exhibe adicionalmente el valor agregado de que la mayoría de las veces nuestros gráficos serán impresos y la legibilidad se mantiene si empleamos un fondo blanco desde su diseño digital original.
En caso que no deseen emplear blanco entonces empleen el color más claro, neutral y cercano al blanco (con mayor nivel de luminosidad) que puedan emplear.
En el gráfico anexo se empleó el color para identificar cada una de las regiones de ventas involucradas. De hecho se empló fuertes contrastes entre matices; no obstante ¿Fue necesario tal empleo del color? ¿El contraste aporta valor agregado a nuestros datos de partida?
El color solo debe ser usado para codificar diferencias en el significado de los datos. Cuando empleamos varios colores en un gráfico y estas diferencias de color en el mismo no tienen un significado evidente estamos distrayendo y desviando a nuestros lectores del mensaje original.
En nuestro ejemplo el tipo de gráfico que empleamos, en consonancia con los datos, debe permitir siempre establecer de forma sencilla comparaciones entre los volúmenes de cada región. Los distintos matices empleados en la gráfica más bien nos desvían de nuestro sentido original distorsionando el mensaje a transmitir. Estas distorsiones se mantienen incluso en el caso de que imprimamos este gráfico en blanco y negro.
Una buena opción para dar genuino sentido a los datos de este ejemplo es la siguiente, donde suprimimos completamente el color:
¿A su juicio cuál de las dos gráficas permite una mejor visualización de los datos?
Otro ejemplo de correcto uso del color que podemos emplear es el siguiente:
En la gráfica de dispersión anexa de ventas por grupo por día diferenciamos el comportamiento de cada grupo de ventas a través de formas (seleccionamos rombos para el Grupo A y círculos para el Grupo B). En este caso suprimimos el color para sustentarnos unicamente en las diferencias entre formas como fuente de diferenciación entre los dos grupos de datos.
¿Puede usted distinguir algún comportamiento en especial de cada Grupo? ¿Puede identificar cual de los dos grupos exhibe mayores volúmenes de ventas por día?
Cambiemos un poco la gráfica solo para dar un color diferente a cada grupo de datos, dando un matiz rojizo a los datos del grupo B:
Ahora resulta claro que el Grupo B exhibe mejores números de ventas por día. La gráfica anexa es un claro ejemplo de hacer un correcto uso del color empleándolo como inequívoca etiqueta de nuestros datos. Cuando no empleamos color se dificultaba la lectura de los datos. Es evidente en este caso la necesidad de emplear color para poder etiquetar los datos y facilitar su compresión a través del contraste.
En este caso emplearemos Color Hunter, herramienta web especializada en generar paletas de colores a partir de fotos que le suministremos. Inicialmente accederemos a la página de Color Hunter y cargaremos nuestra foto.
Color Hunter nos prepara de forma rápida y eficiente una paleta de colores partiendo de los matices, luminosidad y saturación presentes en los colores de la foto que empleamos.
En nuestro ejemplo el resultado es el siguiente:
Copiaremos estos codigos de colores para prepararlos en Excel y emplearlos en nuestros gráficos. La paleta de colores que nos arroja Color Hunter viene por defecto en código hexadecimal. Los nuevos colores en Excel son creados empleando un código RGB (Reg - Rojo, Green - Verde, Blue - Azul). Por ello necesitamos transformar el código hexadecimal a RGB directamente desde Excel, empleando para ello la función HEX.A.DEC().
En el código hexadecimal los dos primeros caracteres (excluyendo el numeral "#") representan el valor para R (Red - Rojo), los dos siguientes para G (Green - Verde) y los dos últimos para B (Blue - Azul). Si copiamos los códigos hexadecimales de Color Hunter en una hoja Excel y aplicamos unas sencillas fórmulas podemos obtener la combinación RGB necesaria para preparar nuestra paleta de colores personalizada.
Basándonos en nuestro ejemplo los códigos a transformar en este caso son:
#0E3000
#037000
#288300
#29B500
#62C09E
Carguemos estos códigos en Excel en una columna y preparemos tres fórmulas para su transformación a formato RGB:
Siguiendo con nuestro ejemplo el resultado de la transformación de los códigos de Color Hunter en nuestro archivo es:
Una vez traducidos estos códigos a RGB preparemos ahora nuestra paleta de colores, al "estilo de la naturaleza", en Excel, tal como en la imagen anexa. Para ello ahacemos click en el "cubo de pintura" en nuestra cinta de opciones, seleccionamos la opción "Más colores", luego la pestaña "Personalizado" e introducimos color por color los códigos RGB que hemos generado, tal como lo ilustramos en la imagen anexa:
A partir de paletas de colores como esta podemos construir gráficos de mútiples series como el siguiente:
En nuestro próximo artículo de esta serie estaremos describiéndoles otras herramientas web que nos permiten generar paletas de colores personalizadas; también estaremos trabajando sobre el principio que nos resta: Cuando sea necesario emplear color preferir colores suaves (de baja saturación) a colores fuertes (de alta saturación).
¿Interesante no? Pues en el siguiente enlace podras encontrar mas informacion relacionada que de seguro sera de tu interes:
Visualización de Información
Estaremos pronto en contacto,
El Equipo EXCELLENTIAS.COM
Fuentes y Referencias:
“El Gran Libro del Color”; Birren, Faber; Primera Edición; 1982; Editorial Blume, Barcelona, España. ISBN: 84-7031-502-1.
"Envisioning Information"; Tufte, Edward; Cuarta Edición; 1990; .Graphics Press; ISBN: 978-0961392116.
"Now You See"; Few, Stephen; Primera Edición; 2009; Analytics Press; ISBN: 978-0970601988.
"Círculo Cromático"; Wikipedia.
"Teoría del Color"; correodelmaestro.com.
"Choosing Colors for Data Visualization"; Maureen Stone; Enero 2006; Perceptual Edge.
- 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).
1.- Usar siempre un fondo unicolor y 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. Por ejemplo en la imagen anexa vemos un ejemplo de este particular:
¿A su juicio a partir de cual mes las barras exhiben un matiz de gris más oscuro?
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.
Este efecto visual lo experimentamos ante cualquier gradiente de fondo que sea empleado, independientemente del matiz de partida; de hecho 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.
Por regla general recomendamos 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. Los efectos visuales que generan estas combinaciones de color afectan significativamente nuestros gráficos dificultando la simple interpretación de la información y degradando el contenido a transmitir al alterar las proporciones de ciertos objetos haciéndolos lucir diferentes a otros, cuando deberían lucir exactamente igual.
Partiendo de nuestro ejemplo original, veamos que sucede si tan solo efectuamos un simple cambio de fondo, sustituyendo el gradiente por un fondo blanco:
¿Mejora la legibilidad de los datos verdad? Este cambio hace más sencillo comparar los volúmenes mensuales permitiendo analizar mejor los datos y determinar comportamientos.
Recordemos siempre esta premisa: el blanco es la luz total, y por ende 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 exhibe adicionalmente el valor agregado de que la mayoría de las veces nuestros gráficos serán impresos y la legibilidad se mantiene si empleamos un fondo blanco desde su diseño digital original.
En caso que no deseen emplear blanco entonces empleen el color más claro, neutral y cercano al blanco (con mayor nivel de luminosidad) que puedan emplear.
2.- 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. Edward Tufte ya mencionaba en su libro “Envisoning Information” que el principal uso que debemos dar al color en los gráficos es el de etiquetar la información. No obstante nos encontramos con frecuencia casos donde se emplea el color de forma no discriminada. Por ejemplo, veamos la siguiente gráfica:
En el gráfico anexo se empleó el color para identificar cada una de las regiones de ventas involucradas. De hecho se empló fuertes contrastes entre matices; no obstante ¿Fue necesario tal empleo del color? ¿El contraste aporta valor agregado a nuestros datos de partida?
El color solo debe ser usado para codificar diferencias en el significado de los datos. Cuando empleamos varios colores en un gráfico y estas diferencias de color en el mismo no tienen un significado evidente estamos distrayendo y desviando a nuestros lectores del mensaje original.
En nuestro ejemplo el tipo de gráfico que empleamos, en consonancia con los datos, debe permitir siempre establecer de forma sencilla comparaciones entre los volúmenes de cada región. Los distintos matices empleados en la gráfica más bien nos desvían de nuestro sentido original distorsionando el mensaje a transmitir. Estas distorsiones se mantienen incluso en el caso de que imprimamos este gráfico en blanco y negro.
Una buena opción para dar genuino sentido a los datos de este ejemplo es la siguiente, donde suprimimos completamente el color:
¿A su juicio cuál de las dos gráficas permite una mejor visualización de los datos?
Otro ejemplo de correcto uso del color que podemos emplear es el siguiente:
En la gráfica de dispersión anexa de ventas por grupo por día diferenciamos el comportamiento de cada grupo de ventas a través de formas (seleccionamos rombos para el Grupo A y círculos para el Grupo B). En este caso suprimimos el color para sustentarnos unicamente en las diferencias entre formas como fuente de diferenciación entre los dos grupos de datos.
¿Puede usted distinguir algún comportamiento en especial de cada Grupo? ¿Puede identificar cual de los dos grupos exhibe mayores volúmenes de ventas por día?
Cambiemos un poco la gráfica solo para dar un color diferente a cada grupo de datos, dando un matiz rojizo a los datos del grupo B:
Ahora resulta claro que el Grupo B exhibe mejores números de ventas por día. La gráfica anexa es un claro ejemplo de hacer un correcto uso del color empleándolo como inequívoca etiqueta de nuestros datos. Cuando no empleamos color se dificultaba la lectura de los datos. Es evidente en este caso la necesidad de emplear color para poder etiquetar los datos y facilitar su compresión a través del contraste.
3.- 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.
Como hemos evidenciado existen casos en los que es necesario emplear más de un color y donde el gris o sus gradientes no pueden ayudarnos a darle sentido a nuestros datos. En estos caso el contraste y la analogía son nuestros mejores aliados permitiéndonos identificar gráficamente elementos que difieren significativamente o agruparlos para resaltar tendecias generales. La luminosidad es una de las mejores forma de etiquetar datos que exhiben diferencias secuenciales. Los mejores resultados podemos alcanzarlos si no diversificamos muchos los matices empleados y más bien empleamos contrastes por luminosidad para etiquetar los datos. En otros tiempos era mucho más complejo generar paletas de color especializadas más hoy en día, afortundamente, existen múltiples opciones para ayudarnos a preparar una adecuada paleta de colores. Exploremos algunas de estas opciones. Tomemos entonces como punto de partida para preparar nuestra paleta de colores una foto, por ejemplo, de una selva tropical como la anexa. ¡La selva es buen ejemplo de uso del color! Edward Tufte ya nos recomendaba emplear colores como los de la naturaleza para simular el contraste y la analogía, tal como hemos mencionado con anterioridad.
En este caso emplearemos Color Hunter, herramienta web especializada en generar paletas de colores a partir de fotos que le suministremos. Inicialmente accederemos a la página de Color Hunter y cargaremos nuestra foto.
Color Hunter nos prepara de forma rápida y eficiente una paleta de colores partiendo de los matices, luminosidad y saturación presentes en los colores de la foto que empleamos.
En nuestro ejemplo el resultado es el siguiente:
Copiaremos estos codigos de colores para prepararlos en Excel y emplearlos en nuestros gráficos. La paleta de colores que nos arroja Color Hunter viene por defecto en código hexadecimal. Los nuevos colores en Excel son creados empleando un código RGB (Reg - Rojo, Green - Verde, Blue - Azul). Por ello necesitamos transformar el código hexadecimal a RGB directamente desde Excel, empleando para ello la función HEX.A.DEC().
En el código hexadecimal los dos primeros caracteres (excluyendo el numeral "#") representan el valor para R (Red - Rojo), los dos siguientes para G (Green - Verde) y los dos últimos para B (Blue - Azul). Si copiamos los códigos hexadecimales de Color Hunter en una hoja Excel y aplicamos unas sencillas fórmulas podemos obtener la combinación RGB necesaria para preparar nuestra paleta de colores personalizada.
Basándonos en nuestro ejemplo los códigos a transformar en este caso son:
#0E3000
#037000
#288300
#29B500
#62C09E
Carguemos estos códigos en Excel en una columna y preparemos tres fórmulas para su transformación a formato RGB:
- Para el código R emplearemos la fórmula =HEX.A.DEC(IZQUIERDA("Código Hexadecimal";2))
- Para el código G emplearemos la fórmula =HEX.A.DEC(EXTRAE("Código Hexadecimal";;2;2))
- Para el código B emplearemos la fórmula =HEX.A.DEC(DERECHA("Código Hexadecimal";2))
Siguiendo con nuestro ejemplo el resultado de la transformación de los códigos de Color Hunter en nuestro archivo es:
Una vez traducidos estos códigos a RGB preparemos ahora nuestra paleta de colores, al "estilo de la naturaleza", en Excel, tal como en la imagen anexa. Para ello ahacemos click en el "cubo de pintura" en nuestra cinta de opciones, seleccionamos la opción "Más colores", luego la pestaña "Personalizado" e introducimos color por color los códigos RGB que hemos generado, tal como lo ilustramos en la imagen anexa:
A partir de paletas de colores como esta podemos construir gráficos de mútiples series como el siguiente:
En nuestro próximo artículo de esta serie estaremos describiéndoles otras herramientas web que nos permiten generar paletas de colores personalizadas; también estaremos trabajando sobre el principio que nos resta: Cuando sea necesario emplear color preferir colores suaves (de baja saturación) a colores fuertes (de alta saturación).
¿Interesante no? Pues en el siguiente enlace podras encontrar mas informacion relacionada que de seguro sera de tu interes:
Visualización de Información
Estaremos pronto en contacto,
El Equipo EXCELLENTIAS.COM
Fuentes y Referencias:
[...] Ya alcanzamos el cuarto artículo de esta serie enfocada en el color y su correcta aplicación en la creación de gráficos que comuniquen un mensaje claro, estético y efectivo. Pueden consultar en cualquier momento nuestros anteriores artículos (Visualización: Uso del Color I, Visualización: Uso del Color II y Visualización: Uso del Color III). [...]
[...] detallado en otros artículos (Visualizacion: Uso del Color I, Visualizacion: Uso del Color II, Visualizacion: Uso del Color III y Visualizacion: Uso del Color IV). Resumiendo a este respecto, recomendamos el uso de colores [...]
[...] detallado en otros artículos (Visualizacion: Uso del Color I, Visualizacion: Uso del Color II, Visualizacion: Uso del Color III y Visualizacion: Uso del Color IV). Resumiendo a este respecto, recomendamos el uso de colores [...]