Atributos preatentivos la clave para mejores visualizaciones

Venimos de una serie de post donde les contamos sobre los tipos de variables, los niveles de medición, y en el post pasado empezamos a hablar sobre las estadísticas descriptivas que podemos utilizar para explorar datos del tipo cualitativo. Además de las estadísticas como la moda y las tablas de frecuencia, algo con lo que siempre debemos contar es con las visualizaciones, tanto de datos cualitativos como de datos cuantitativos, incluso podemos mezclar ambos tipos de visualización en una misma gráfica. Hoy nos vamos a centrar en los atributos preatentivos o preattentive atributes por su nombre en inglés. Les contaremos qué son, les daremos ejemplos y  por qué son importantes que los tengan en cuenta cuando están haciendo visualizaciones de la información.

Definición

Los atributos preatentivos de las visualizaciones son aquellos que se procesan en nuestra memoria sensorial sin nuestro pensamiento consciente. Es decir que son muy útiles porque transmitimos ideas de la forma correcta al aprovechar las propiedades de la percepción visual humana, la cual es la más desarrollada entre todos nuestros sentidos.

Colin Ware, en su libro “Information Visualization: Perception for Design” define cuatro propiedades visuales preatentivas:

  • Color
  • Forma
  • Movimiento
  • Posicionamiento espacial

Veamos cada una de ellas:

Color

El color se puede expresar de muchas maneras diferentes. Desde la escala RGB (Rojo, Verde, Azul) hasta la escala CMYK (Cian, Magenta, Amarillo y Clave) a la escala HSL (Tono, Saturación y Luminosidad) 1  Para hoy nos es útil la escala HSL (ver Imagen 1). El tono es lo que normalmente llamamos color, por ejemplo, rojo, zapote, verde, morado, azul, entre otros. Mientras que saturación y luminosidad son una medida de la intensidad del color. Para mí a veces es difícil diferenciar visualmente entre ambas propiedades de los colores. Básicamente la saturación de un color cambia a medida que ese color tiene más o menos cantidad de gris, mientras que, el brillo lo que representa es qué tan claro u oscuro es un color respecto a su color patrón (Artes visuales, 2016).

El color sirve para llamar la atención sobre algo de los datos, eso lo que hace es que el usuario no tenga realizar una búsqueda visual, en otras palabras utilice para su observador vaya directamente al grano de lo que usted quiere que él observe.

Forma

La forma tiene muchos sub atributos con los cuales podemos llamar la atención o por el contrario para reducir su atención en ese objetivo (ver Imagen 2). Por ejemplo, podemos aumentar el tamaño de un objeto como una señal de que ese objeto es importante. Mientras que lo podemos hacer pequeño si queremos reducir su importancia.

Movimiento

Movimiento tiene dos subatributos: dirección del movimiento y la frecuencia del movimiento o parpadeo como diríamos algunos. Mucho ojo con este atributo, si lo usas efectivamente será un éxito y lograras llamar la atención, de lo contrario puede convertirse en algo que distraiga al observador del resto de elementos que estés presentado, o incluso se puede volver molesto o mareador.

Posicionamiento espacial

Tres sub atributos tienes que tener en cuenta según la Interaction Design Foundation (2018):

  • Posicionamiento 2D: esta es a menudo la mejor forma de entregar datos que puedan reconocerse y procesarse visualmente fácilmente. Es particularmente efectivo para representaciones de datos cuantitativos. Tiene que ver no solo con la posición también con el agrupamiento que se genera partir de las posiciones que toman los datos.
  • Profundidad estereoscópica: percibimos la profundidad al combinar las imágenes generadas por los ojos izquierdo y derecho en el cerebro. Esta profundidad es procesada de forma preatentiva. Es posible recrear la profundidad estereoscópica utilizando dos cámaras separadas configuradas en diferentes ángulos para un sujeto e imponiendo las imágenes una sobre la otra.
  • Posicionamiento cóncavo y convexo: esto se puede crear mediante el uso de sombreado (ver imagen del eclipse de luna).

Fuente: Pixabay.

Para finalizar

Ya sabemos cuáles son esos atributos, y sabemos que son poderosos porque nuestro cerebro los procesa rápidamente sin hacer mucho esfuerzo. Lo anterior no quiere decir que vamos a hacer un sancocho con esos atributos en nuestra visualizaciones. Tenemos que pensar quién es nuestro público, qué mensaje queremos transmitir, y probar con varias visualizaciones hasta que logremos llegar a la mejor visualización para el contexto y el público al que le estamos presentando. Un ejemplo de esto lo ven en la próxima imágenes, por un lado una gráfica que combina color (tono) y largo para mostrar lo que aparenta ser la satisfacción con el trabajo dependiendo de ciertas cualidades del gerente. En la primera imagen, espero que les pase a ustedes también, fue difícil encontrar algo, me quede observando intentando ver si había algún patrón pero el uso de esos colores dificultó la tarea. En la segunda imagen el color facilita entender el mensaje.

Referencias

  1. Artes Visuales. (Noviembre 8, 2016). ¿Qué Es El Color? | Teoría Del Color Y Sus Propiedades. Disponible en: https://artesvisuales.mx/2016/11/08/que-es-el-color-teoria-del-color-y-sus-propiedades/
  2. Colin Ware. (2004). Information Visualization: Perception for Design. Morgan Kaufmann, San Francisco, CA, 2nd edition.
  3. Interaction Design Foundation (Abril, 2018). Preattentive Visual Properties and How to Use Them in Information Visualization Disponible en https://www.interaction-design.org/literature/article/preattentive-visual-properties-and-how-to-use-them-in-information-visualization
  1.  Esta semana de hecho aprendí que CMYK se necesita cuando vas a hacer impresiones, por ejemplo, unas tarjetas de presentación o material promocional; mientras que, el RBK está bien que lo utilices en las aplicaciones web, cuando vas a hacer presentaciones en prezi o power point.