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-2018