Also available in English

Inf@Vis!

La revista digital de InfoVis.net

Procesos que saltan a la vista
por Juan C. Dürsteler [mensaje nº 179]

Una de las razones por las que la visualización puede llegar a ser muy potente radica en el hecho de que hay una serie de operaciones de identificación y reconocimiento que el cerebro realiza de forma "automática" sin la necesidad de centrar nuestra atención. Manejar correctamente los elementos cuyo procesado es "pre-atentivo" puede marcar la diferencia en una interfaz de usuario.

Concavo.gif (10247 bytes)
Procesado pre-atentivo. Encontrar la concavidad es inmediato, "salta a la vista".
Fuente
: autor, a partir de un ejemplo de Colin Ware en Information Visualization: Perception for Design. (pág. 163)

A veces ocurre que en una representación gráfica ciertos elementos, quizá un color o un icono "saltan a la vista". Los detectamos de manera instantánea.

Estos fenómenos cuya identificación visual se realiza en un término muy corto (entre 200 y 250 milisegundos o menos) se denominan pre-atentivos  ya que ocurren sin la intervención de la conciencia. No hay que concentrarse en la tarea de búsqueda. Aunque estén ocultos entre muchos otros objetos, los identificamos de forma inmediata.

Qué mejor que un ejemplo para entender de qué hablamos. El párrafo anterior y casi todos los que le siguen tienen letras en negrita. Esta es una forma de resaltar texto, típico de la web, donde los usuarios no tenemos mucho tiempo para leer a fondo textos en la pantalla, en un entorno en el que saltar de una página a otra es habitual.

El objetivo de este uso común es el de facilitar las ideas clave del texto. Puesto que la iluminación se procesa de froma preatentiva, la vista identifica antes las frases en negrita que, si están bien construidas permiten leer lo esencial del texto sintetizado en unas pocas líneas.

Para saber si un fenómeno es pre-atentivo lo que se suele hacer es medir el tiempo que se tarda en identificar uno o varios objetos dentro de un conjunto de otros objetos denominados "distractores". Si el proceso es pre-atentivo, da igual el número de distractores que pongamos, su identificación dura aproximadamente el mismo tiempo, que suele ser del orden de algunos centenares de milisegundos. Si no, cuantos más distractores pongamos, más tiempo se tarda en encontrar nuestro objetivo.

Según Colin Ware en su libro Information Visualization: Perception for Design la lista de características que se procesan de forma pre-atentiva se puede agrupar en cuatro categorías básicas: Color, Forma, Movimiento y Localización Espacial. Veámoslo con más detalle.

Color:

Tanto la tonalidad del color (diferencia entre elementos) como la diferencia en intensidad son procesados preatentivamente. Algunos ejemplos:

Color.gif (5303 bytes) Intensidad.gif (4889 bytes)
Tonalidad Intensidad
Forma:
  • Orientación de línea. Una línea con una orientación distinta de las de los distractores

  • Longitud de línea. Un cambio en la longitud de la linea respecto a los distractores.

  • Anchura de línea. Lo mismo de antes pero con la anchura de la línea.

  • Colinealidad. Lineas que siguen una misma dirección respecto de líneas separadas.

  • Tamaño. Un objeto de tamaño sensiblemente diferente del resto
  • Curvatura. Una linea recta entre curvas también salta a la vista de forma inmediata

  • Agrupación espacial. Grupos de objetos en un fondo aleatorio

  • Marcas. Hacer un círculo cuadrado o marca alrededor o al lado de un elemento hace que se detecte preatentivamente

  • Numero de elementos. Grupos con un numero homogéneo de elementos en los que un grupo tiene un numero diferente de elementos.

De nuevo la mejor manera de comprender a que nos referimos es viendo algunos ejemplos 

Orienta.gif (5573 bytes) Long.gif (4582 bytes) Ancho.gif (4074 bytes)
Orientación Longitud Ancho de línea
Tamano.gif (4867 bytes) Marcas.gif (10623 bytes) Forma.gif (4805 bytes)
Tamaño Marcas Forma
Curvatura.gif (6207 bytes) Agrupacion.gif (9856 bytes) Numero.gif (5110 bytes)
Curvatura Agrupación espacial Número
Movimiento:
  • Dirección de movimiento Un objeto moviéndose contra un fondo quieto o en movimiento en otra dirección a la del objeto se detecta de forma preatentiva. 

  • Parpadeo o intermitencia. Un elemento que aparece y desaparece, el intermitente de un coche o los flashes de las luces anticolisión de los aviones se detectan también de forma inmediata. Por ello es que se usan como elementos de seguridad aérea, poblando aviones, antenas y obstáculos potencialmente peligrosos.
Movimiento Parpadeo o Intermitencia

Localización espacial:

  • Localización 2D

  • Profundidad estereoscópica. En este caso, que no podemos reproducir aqui debido a la dificultad de proporcionar una visión estereoscópica, los objetos situados en un plano de visión diferente al plano o planos en los que están situados el resto de los objetos se proceso preatentivamente y también "salta a la vista".

  • Concavidad / convexidad, proveniente del sombreado. Este es el caso que hemos colocado al inicio de este artículo. El sistema visual humano tiende a considerar que las sombras se producen debido a luz que procede de la parte superior de la escena. Por ello los objetos cuya parte superior es más brillante y cuyas sombras se proyectan en la parte inferior nos aparecen como convexos o protruyentes. 

    Inversamente, los objetos cuyas sombras están arriba y cuya parte inferior brilla tendemos a considerarlos como cóncavos. Un objeto cuya iluminación sugiere concavidad entre otros muchos objetos de apariencia convexa se detecta preatentivamente. Lo inverso también es cierto: un objeto convexo salta a la vista entre muchos cóncavos.

Si nos fijamos lo que tienen en común todos estos fenómenos es que hay una clara diferencia entre el todo y la parte. El cerebro es capaz de discriminar ciertas diferencias de forma pre-consciente. No hace falta fijar la atención ni ser conscientes del significado o de sus implicaciones para que el fenómeno "salte a la vista".

Por otro lado la conjunción de varios elementos preatentivos puede reducir su efecto y limitar su procesado preatentivo. A medida que la variedad (no la cantidad) de distractores aumenta, aumenta tambien el tiempo de búsqueda. Es decir los mejores resultados se obtienen siempre cuando todos los distractores son iguales.  Existen diversas teorías sobre el por qué del procesado preatentivo que se pueden consultar, entre otros en el completo artículo Perception in Visualization de Christopher Healey

No hay que decir que una buena utilización de los fenómenos preatentivos es básica para la generación de interfaces de usuario y la realización de gráficos. Todavía hoy podemos encontrar webs repletas de gifs animados que compiten por nuestra atención saturando nuestras capacidades cognitivas. Hacer de este conocimiento una buen praxis es nuestra responsabilidad como profesionales de la visualización de información.

Enlaces de este artículo:

http://www.infovis.net/printRec.php?rec=llibre&lang=1#InfoVisWare   El libro Information Visualization: Perception for Design
http://www.csc.ncsu.edu/faculty/healey/PP/index.html   Articulo sobre Perception in Visualization
http://www.csc.ncsu.edu/faculty/healey/   Página personal de Christopher Healey
© Copyright InfoVis.net 2000-2013