The key to better visualizations: Preattentive attributes

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.

Definition

The pre-intentional attributes of the visualizations are those that are processed in our sensory memory without our conscious thought. That is to say, they are very useful because we transmit ideas in the right way by taking advantage of the properties of human visual perception, which is the most developed among all our senses.

Colin Ware, in his book “Information Visualization: Perception for Design” defines four prettentive visual properties:

  • Color
  • Form
  • Movement
  • Spatial positioning

Let’s see each one of them:

Color

Color can be expressed in many different ways. From the RGB scale (Red, Green, Blue) to the CMYK scale (Cyan, Magenta, Yellow and Clave) to the HSL scale (Hue, Saturation and Luminosity) 1 This week I actually learned that CMYK is needed when you are going to print, for example, business cards or promotional material; while, the RBK is fine to use it in web applications, when you are going to make presentations in prezi or power point. [/ note] For today the HSL scale is useful (see Image 1). The tone is what we normally call color, for example, red, orange, green, purple, blue, among others.

While saturation and luminosity are measures of the intensity of the color. The saturation changes as that color has more or less amount of gray, while, the brightness represents how clear or dark is a color with respect to its color pattern (Visual Arts, 2016). The color serves to draw attention to something of the data, therefore the user does not have to perform a visual search.

Form

The form has many sub attributes that can be used to draw or reduce attention over something (see Image 2). For example, we can increase the size of an object as a sign that this object is important. While we can make it small if we want to reduce its importance.

Movement

Movement has two sub-attributes: direction and frequency. Be careful with this attribute, if you use it effectively it will be a success and you will get attention, otherwise it can become something that distracts the observer from the rest of the elements that you are presenting, or can even become annoying.

Spatial positioning

Three sub attributes you have to take into account according to the Interaction Design Foundation (2018):

  • 2D positioning: this is often the best way to deliver data that can be easily recognized and processed visually. It is particularly effective for representations of quantitative data. It has to do not only with the position also with the grouping that is generated from the positions that take the data.
  • Stereoscopic depth: we perceive depth by combining the images generated by the left and right eyes in the brain. This depth is processed pre-intentionally. It is possible to recreate the stereoscopic depth using two separate cameras configured at different angles for a subject and imposing the images one on the other.
  • Concave and convex positioning: this can be created by using shades (see image of the moon eclipse).

Source: Pixabay.

Final Comments

We already know what those attributes are, and we know that they are powerful because our brain processes them quickly without much effort. The above does not mean that we are going to make a stew with those attributes in our visualizations. We have to think about who our audience is, what message we want to convey, and try several visualizations until we reach the best visualization for the context and the audience we are presenting to. An example of this is seen in the next images, on the one hand a graphic that combines color (tone) and long to show what appears to be job satisfaction depending on certain qualities of the manager. In the first image, I hope it happens to you too, it was difficult to find something, I was trying to see if there was a pattern but the use of those colors made the task difficult. In the second image the color makes it easier to understand the message.

References

  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

Leave a comment

en_USEnglish