percepción visual: gestalt, preatencionalidad, coding.

percepción visual:gestalt, preatencionalidad,coding.

tomas laurenzo

laboratorio de medios · inco · fing · udelar Interacción persona computadora.

www.fing.edu.uy/inco/cursos/inpercom

• Claridad Visual• Códigos Visuales• Consistencia Visual

De: Chapter 9: Dialogue DesignComputer Graphics: Principles and Practice (1989)Foley, Van-Dam, Feiner, Hugues

…y otros (Kanisza, Ware y más)

Claridad visual

Claridad visual como medida de una imagen, en función del esfuerzo que conlleva su interpretación.

La Teoría de la Gestalt (Berlin) (Wertheimer, 1939) codificó las (algunas) reglas de claridad visual

Max Wertheimer. Checo. Uno de los tres fundadores de la teoría (junto con Koffka y Köhler). Experimentelle Studien über das Sehen von Bewegung 1910.

“Gestalt” significa en alemán “configuración”, “forma”, “figura” (depende del contexto). La teoría surge en el contexto de la psicología de principios de siglo y constituye un caso paradigmático de la respuesta organicista europea a la crisis que por entonces padecía la psicología, caracterizada por una escisión similar a la que actualmente se está fraguando en la psicología cognitiva.

En ese momento se consideraba que el asociacionismo estructuralista, que pretendía abordar el estudio analítico de la conciencia mediante la introspección en busca de una suerte de “química mental” no tenía posibilidades serias de desarrollo. Las respuestas frente a esta problemática fueron diferentes en Europa y en Norteamérica.

Orígenes de la teoría de la Gestalt

• Respuesta norteamericana (Watson): Influida por el empirismo se mantiene dentro del asociacionismo renunciando al estudio de los procesos mentales superiores, dando lugar a las ideas básicas del conductismo.

• Respuesta europea (Wertheimer et al): Optaron por continuar el estudio de los procesos mentales rechazando el enfoque asociacionista.

• En 1913, Watson publica su manifiesto conductista y Wertheimer publica un artículo sobre la percepción del movimiento aparente, escrito fundamental de la Gestalt. Nacen así dos concepciones opuestas en psicología que, en cierta medida, siguen manteniendo vigencia.

Orígenes de la teoría de la Gestalt

Teoría de la Gestalt

• También llamada Teoría Gestáltica (o de la Gestalt) de la Escuela de Berlín:

– el principio operacional del cerebro es holístico, paralelo y analógico, con tendencias a la auto-organización.

• La suma de las partes es menos que el todo

• Ejemplo de la burbuja

• Prägnanz (cualidad de conciso): ordenamos nuestra experiencia de forma regular, ordenada, simétrica y simple.


• Gaetano Kanizsa, « La Grammaire du Voir », ISBN 2-84134-061-9, Diderot 1997, traduccion al francés de la edicion italiana, original :

« Grammatica del vedere », Società editrice il Mulino, 1980. Traduccion al español :

« Gramática de la Visión: Percepción y Pensamiento », Paidos Iberica, Ediciones S. A., Oct 1991, ISBN: 8475094228. Edicion francesa disponible en biblioteca del InCo.


• Establece, entre otras cosas, cuando ocurren “gestalts”, en función de agrupamientos. O cuando una imagen tiene “buena gestalt” (!)

• EL Principio de Helmholtz, propuesto en 1985 por D. Lowe, es un principio de la percepción visual, que establece que, en una imagen, las estructuras que vemos son aquellas que tienen una probabilidad muy baja de aparecer en el ruido y pertenecen a una clase dada de objetos geométricos predefinidos: las clases de "gestalts" definidas por la escuela gestáltica de sicofisiología.

algunas reglas de organización visual

• Similaridad Se tiende a agrupar aquellos estímulos visuales que posean una propiedad en común.

• Proximidad Se tiende a agrupar estímulos visuales cercanos.

• Clausura Si unos estímulos casi cierran un área, el observador ve el área.

• Buena continuación Si varias líneas confluyen en un punto, el observador ve como continuas aquellas líneas que están suavemente conectadas (continuidad de la derivada primera).

• Similaridad

Se tiende a agrupar aquellos estímulos visuales que posean una propiedad en común.


• Proximidad

Se tiende a agrupar estímulos visuales cercanos.


• Refuerzo de Proximidad y Similaridad

El agrupamiento se refuerza.


• Clausura

Si unos estímulos casi cierran un área, el observador ve el área.


• Otro ejemplo de clausura (reificación)

¿Hay dos triángulos?



invariancia

multiestabilidad

• Buena continuación

Si varias líneas confluyen en un punto, el observador ve como continuas aquellas líneas que están suavemente conectadas (continuidad de la derivada primera).


?

• conexión


• ConectividadConectividad es más fuerte que proximidad, color, tamaño o forma.


Principios Teóricos de la Gestalt

• Principio de Totalidad– La experiencia consciente debe ser

considerada de forma global, teniendo en cuenta todos los aspectos físicos y mentales de forma simultánea.

• Principio de isomorfismo psicofísico. – Existe una correlación entre la experiencia

consciente y la actividad cerebral.

Principios metodológicos de la Gestalt

• Análisis experimental de los fenómenos– No enfocarse solamente en lo sensorial

• Experimentación “biótica”.– Conducir experimentos reales (contrapuestos

al laboratorio). Trabajar en situaciones naturales, bajo condiciones reales, con alta fidelidad.

Principios básicos

• Emergencia

• Reificación

• Multiestabilidad

• Invariancia


• Las reglas de organización y percepción visual tienen que ser tenidas en cuenta a la hora de presentar información en forma visual.

Ejemplo 1:CATEGORÍA MAYOR

CATEGORÍA UN POCO MENOR QUE LA MAYOR

CATEGORÍA AUN MENOR QUE LA UN POCO MENOR


LA MENOR CATEGORÍA

LA MENOR CATEGORÍA


No se utiliza ningún refuerzo visual (salvo que la similitud viene claramente determinada por la longitud de las oraciones)

Ejemplo 1:CATEGORÍA MAYORCATEGORÍA UN POCO MENOR QUE LA MAYOR

Categoría aun menor que la un poco menor

Categoría aun menor que la un poco menorLa menor categoría

La menor categoría


Se utiliza una jerarquía de tipos tipográficos para vincular elementos similares.

Ejemplo 1:CATEGORÍA MAYOR

CATEGORÍA UN POCO MENOR QUE LA MAYOR


Categoría aun menor que la un poco menorLa menor categoría

La menor categoría


Se agrega a lo anterior la indentación (otro tipo de similaridad)

Ejemplo 2:

ROTAR XROTAR YROTAR ZTRASLADAR XTRASLADAR YTRASLADAR Z

ROTAR XROTAR YROTAR Z

TRASLADAR XTRASLADAR YTRASLADAR Z

ROTAR XYZ

TRASLADARXYZ

tres diseños del mismo menú. La organización de la derecha muestra los dos niveles existentes en la estructura

Ejemplo 3:

Auto Barco CasaDormitorio Estudio FamiliaGobierno Hogar IdiomaJóvenes Kilogramo LavanderíaMoto Nieve ÑoquisOrden Progreso QuilateRazón Sabiduría Temor

Basado en:

5: Visual attention and Information That Pops Out

Del libro:

Information VisualizationColin Ware

(pre)atención visual

A menudo, un programa de Computadora debe atraer nuestra atención. Por ejemplo, debería informarnos acerca de la llegada de un correo importante.

Un mapa táctico militar, debe mostrar simultanea-mente diferentes clases de información. Debe ser posible atender a un solo tipo de dato o ver toda la trama.

La habilidad humana de búsqueda visual mejora muchísimo la visualización de información. Por ejemplo, es posible, en menos de un segundo detectar un solo píxel negro en una matriz de 500x500 píxeles blancos.

Constantemente hacemos movimientos de ojos para buscar información. Como ya hemos visto, existen tres tipos:

1. Sácadas: En la búsqueda visual, los ojos se mueven de fijación en fijación. El período de fijación es de entre 200 y 600 mseg. y el movimiento entre 20 y 100 mseg. La velocidad pico es de 900 grados/seg.

2. Movimientos suaves de seguimiento: El ojo tiene la habilidad de seguir los objetos. Esto permite a su vez mover el cuerpo mientras se mantiene la fijación en el objeto.

3. Movimientos convergentes: Cuando un objeto se mueve hacia nosotros, nuestros ojos convergen.

Movimientos de los ojos

• Estrategias de monitoreo visual

• El campo visual útil

• Visión de túnel y stress

• El papel del movimiento para atraer la atención

Atención visual y búsqueda

• Las estrategias de monitoreo de los usuarios, contemplan los siguientes elementos:

• Canales (de recepción de información): ventanas, parlantes, cuadrantes, etc.,

• Eventos: señales que ocurren en los canales,

• Costo Esperado: el costo de ignorar un evento.

Estrategias de monitoreo visual

• Los patrones de monitoreo más usuales son:

• Minimizar el movimiento de los ojos: (hay que poner los objetos a monitorear cerca, dentro del mismo campo visual útil).

• Sobremonitoreo de canales donde aparece información infrecuente: (el sistema debería avisar qué hay que monitorear).

• Los usuarios cesan de monitorear cuando están bajo stress, por estar esperando la respuesta de sus últimas acciones.

• Usuarios monitorean de izquierda a derecha, arriba abajo, aun si esto no tiene relevancia en la tarea.

Estrategias de monitoreo visual

• Cuando se lee un texto, se pueden leer las palabras sólo donde se centra la vista. Pero se puede tener la forma general de algo con una simple mirada.

• Por tanto, el campo visual útil depende de la acción y varía entre 1 y 15 grados.

• La variación se encuentra al intentar mantener un número aprox. constante de objetos en la región atendida.

• Por lo que poner muchas cosas en un área pequeña no es una buena estrategia para todos los casos.

Campo visual útil

• La Visión de Túnel está asociada “tradicionalmente” a usuarios trabajando bajo stress extremo.

• El Campo Visual Útil se achica, por lo que sólo la información más importante y que esté en el centro del campo visual es procesada.

• Experimentos llevaron a considerar que simplemente cuando la carga cognitiva crece (por atender cosas complejas) el Campo Visual Útil se contrae, y se perciben menos cosas que ocurran en la periferia del campo visual.

• Por tanto, no es sólo debido a manejar situaciones extremas.

Visión de túnel y stress

• Objetos en movimiento: Se detectan en menos de 1 segundo, aún a 20 grados del centro de atención (o más).

• Objetos estáticos: Se detectan luego de mucho tiempo si están a más de 4 grados.

• Cambiar una vez no es una señal efectiva (cambiar el color)

• Por tanto para atraer la atención de forma inmediata, desde fuera del Campo Visual Útil, los objetos deben estar en cambio continuo (parpadeo o movimiento). Otra posibilidad es un sonido de aviso.

• Hay evidencia que muestra que un movimiento oscilatorio rápido es difícil de ignorar.

• Diseñadores utilizan movimiento chatarra: animaciones sin propósito funcional sólo para “energizar” la interfaz. Esto dificultaría la tarea de utilizar movimiento para interrupción.

El papel del movimiento

El papel del movimiento para atraer la

atención

Cuatro requerimientos visuales básicos para un “interruptor de usuario”

1 Una señal debe ser fácilmente percibida aun si está fuera del área de atención focal inmediata.

2 Si el usuario desea ignorar el evento mientras atiende a otra tarea, la señal debe continuar para recordar al usuario que el evento necesita atención.

3 La señal no debe ser tan irritante como para hacer que el dispositivo no sea placentera de usar.

4 Debe ser posible equipar la señal con una variedad de niveles de urgencia.


• Estudios sugieren que el movimiento por si mismo no atrae tanto la atención, sino más bien la aparición de un nuevo objeto en la escena.

• Esto lleva a pensar que el más efectivo “interruptor de usuario” sería un objeto que aparece a la vista, desaparece y luego reaparece cada poco tiempo .

• parpadeo


@

A

O

* ? }

9 +

Leyendo desde el “Iconic Buffer”

¿Cuantos de estos símbolos podremos recordar luego de un vistazo de 1/10 seg.?

• Las personas típicamente recuerdan entre 3 y 7 items. Esto es posible gracias a que existe una memoria que guarda la imagen durante 1 segundo mientras pasa a la memoria de corto plazo.

• Memoria icónica (un tipo de memoria de corto plazo).

• La limitación de 7 ítems viene de varios lados:

• El decaimiento de la memoria icónica.

• La tasa en la que las imágenes se pueden leer de la memoria icónica.

• La capacidad de la memoria de corto plazo (7 items +- 2).

• ver http://www.csc.ncsu.edu/faculty/healey/PP/index.html

Leyendo desde el “Iconic Buffer”

87165298297846526849849849819265198498219812984621594651321984987984651321594579846543984098409849978403564103541072103740840651084031698405840658703684036870984065409874098403521316519198168495032130914840987065103

Procesamiento pre-atencional

87165298297846526849849849819265198498219812984621594651321984987984651321594579846543984098409849978403564103541072103740840651084031698405840658703684036870984065409874098403521316519198168495032130914840987065103

87165298297846526849849849819265198498219812984621594651321984987984651321594579846543984098409849978403564103541072103740840651084031698405840658703684036870984065409874098403521316519198168495032130914840987065103


El procesamiento pre-atencional es el que determina aquellos objetos visuales que son ofrendados a nuestra atención.

El ejemplo anterior indica que la luminosidad es un procesamiento pre-atencional.

Si algo es procesado de forma de pre-atencional, entonces la velocidad para encontrarlo es independiente del número de distractores.

¿cuál es la utilidad de este fenómeno?


• Los círculos de la gráfica que muestra el tiempo para percibir un objeto que es preatencionalmente diferente que el entorno. El tiempo es irrelevante del numero de distractores.

• Si la distinción del objeto no es pre-atencional, entonces el tiempo varía.


Forma

Orientación de las líneas

Longitud de las líneas

Ancho de las líneas

colinearidad

Tamaño

Curvatura

Agrupamiento espacial

Marcas agregadas

Numerosidad


Color

Cromatismo

Intensidad

Movimiento

vibración (Flicker)

Dirección del movim.

Posición Espacial

Posición 2D

Profundidad estereoscópica.

Forma Convexa/cóncava por sombreado.

La habilidad de pre-atención disminuye a medida que la variedad de figuras alternativas se incrementa.

Los objetos son más o menos pre-atencionales según el contexto.


¿Qué ocurre cuando queremos buscar un cuadrado gris, y no simplemente algo gris o algo cuadrado?

La búsqueda de conjunción en general no es pre-atencional, aunque hay

unos casos interesantes.

Codificando con combinaciones de formas

Agrupamiento espacial en el plano XY.

Profundidad estereoscópica y color, o movimiento

Convexidad/Concavidad y color

Movimiento y forma, o movimiento y color.

Conjunción con dimensiones espaciales

Búsqueda de elípses grises. Hay que buscar en las elipses o en los grises. Pero si se forman clusters, la velocidad se incrementa (pre-atención)

coding

Coding o codificación: crear distinciones visuales entre diferentes tipos de objetos.

Color, forma, tamaño o longitud, orientación, intensidad, textura, ancho de línea, estilo de línea, etc.

Diseñando un conjunto de símbolos

Para 95% de aciertos

10 colores6 tamaños de área6 longitudes4 intensidades24 ángulos15 figuras geométricas


Es importante utilizar codificación redundante

Considerar que un 8% de los hombres padecen alguna ceguera de colores

Consistencia visual

Aplicación consistente de reglas y códigos visuales y combinación consistente de elementos visuales en objetos gráficos de alto nivel.

Los elementos visuales son “letras” en un alfabeto gráfico, combinadas en “palabras” cuyo significado debe ser obvio al observador.

“la gramática del ver”

Ejemplos de elementos visuales:

Cancel

OK J.H. y Reissig 565

•Las cajas cuadradas indican que se pueden seleccionar varios a la vez•Los “radio buttons” indican que solo una opción se puede elegir•Los “botones” son acciones que se pueden seleccionar con el mouse.•El “botón” rodeado por un borde grueso puede ser seleccionado con la tecla enter del teclado.•Los rectángulos son campos que pueden ser editados.

• Si visualizar es transformar datos a un formato perceptualmente eficiente, debemos decir algo acerca de los tipos de datos a visualizar.

• Clasificar datos está relacionado con clasificar conocimiento. Es un tema muy complejo.

Tipos de datos

Existen las entidades, las relaciones y los atributos. – Entidades: objetos a visualizar.

Personas, huracanes, elementos, conjuntos, etc.

– Relaciones: estructuras y patrones que relacionan las entidades. Pueden ser explícitas o implícitas.

Pertenece a, incluido en, jefe de, hijo de, mayor que,

– Atributos: Propiedades de las entidades y las relaciones.

Nombre, color, temperatura, duración, población, etc.

Tipos de datos

Cualidad del atributo:

1- Nominal.Permite establecer categorías de entidades. No tiene sentido ordenarlas. Cualquier orden sirve.

– Naranjas, Manzanas, Peras.

– Hombres, Mujeres.

– Uruguayo, Argentino, Brasilero.

2- Ordinal.Se puede establecer un orden entre entidades, pero no

distancias.– Rankings (películas, comidas, políticos, computadoras)

Atributos de entidades o relaciones.

Cualidad del atributo:3- Intervalo.

Podemos medir distancias entre entidades, pero no tiene sentido medir proporciones porque el cero es arbitrario.

– Fechas– Horas de despegue y aterrizaje de un avión.– ¿Temperatura?

4- RatioTiene toda la expresividad de los números reales. Se puede decir que algo es el doble que otro.

Radio Intervalo Ordinal Nominal

Atributos de entidades o relaciones.

• Los colores se deben utilizar para nominal u ordinal, pero es difícil medir distancia de colores.

• Longitudes se utilizan para intervalo o ratio.

• Lo nominal no se debe asociar a diagrama de barras, porque da idea de cantidad o jerarquía.

Relación entre cualidad y percepción gráfica

Empleados de una empresa.

• Género forma• Salario tamaño• Antigüedad color

Cantidades escalares: altura de una persona.

Cantidad Vectorial: direcciones, velocidades.

Campos de escalares, vectores, tensores:El campo gravitacional es un atributo tridim. de la tierra. Si sólo nos interesa la superficie es un atributo escalar bidimensional

Dimensiones del atributo: 1D, 2D, 3D, ...

Atributo campo escalar de temperaturas en la Entidad Europa

Dimensiones del atributo: 1D, 2D, 3D, ...

Color para etiquetado.

• Diferenciación.– Pero la habilidad de percibir rápidamente un color entre otros, está

relacionado con el área convexa del espacio de colores.


• Tintes únicos.– Rojo, Verde, Azul, Amarillo, Blanco y Negro son colores fácilmente

distinguibles.

• Contraste con el fondo. – Para evitar efectos extraños, conviene poner un borde blanco o negro

alrededor del objeto.

• Ceguera a los colores.– Es más común que no se distingan valores en la secuencia verde - rojo que

en la secuencia azul- amarillo.

• Número.– Utilizar para codificación de 5 a 10 colores.


• Tamaño.– Los objetos deben ser grandes (mínimo de 1/2 grado), sobre todo si las

diferencias están en la dirección azul-amarillo.

– Cuanto más grande el área, mejor se distinguen los colores.

– Si se utilizan áreas grandes, mejor que sean de baja saturación.

• Convenciones culturales.

• Estos colores tienen nombre propio y son fácilmente identificables.

Rojo, verde, amarillo, azul, blanco, negro

rosado, cyan, gris, naranja, marrón, púrpura


Secuencias de colores.

¿Puede ordenar estos colores de izquierda a derecha?

Secuencia de colores

Secuencia de colores

• Blanco-negro, rojo-verde, amarillo-azul son secuencias perceptualmente ordenables.

• Si se debe percibir muchos detalles de una imagen, es mejor una secuencia basada principalmente en luminancia.

• Si se quiere leer los valores a través del color, es mejor utilizar una secuencia con muchos colores.

• Existen secuencias en espiral (ciclos de colores cada vez más luminosos)

• Dar pseudocolor a una imagen puede servir para realzar información relevante.

Deberían ser tan diferentes como sea posible.Ejemplo: mapa militar

Elementos diversos.Clasificaciones ortogonales (pre-atención).

Amigos vs. Enemigos.Tanques vs. Construcciones.


Avión Infantería Construcción Tanque .

Sospechoso Hostil Amigo


Por ej: especialistas de marketing tienen datos por cada persona en un área geográfica particular (ingreso, nivel educativo, categoría de empleo, lugar de residencia). Sería interesante ver a cada grupo humano en un mapa de forma que los datos de un conjunto particular pueda ser fácilmente visto.

Un glifo es un objeto gráfico que representa un dato multivariado.

¿Los códigos interfieren con la percepción? P. ej: si utilizo color y tamaño, ¿al variar el color se variará la percepción del tamaño?

Glifos y datos discretos multivariados

Dimensiones integrables: Son aquellas que son percibidas holísticamente.Ej: la forma rectangular, se percibe como una unidad que en realidad se compone de la combinación de largo y ancho. La combinación de rojo y verde se percibe holísticamente como tonalidades de amarillo.

Dimensiones separables: Se tiende a hacer juicios de cada dimensión de forma separada. Ej: El diámetro de una bola y el color son procesados de forma independiente.

Glifos y datos discretos multivariados

• Si la dimensiones son integrables, los objetos más cercanos son naturalmente agrupados.

• Si las dimensiones son separables, se tiende a agrupar aquellos que coincidan en alguna dimensión.

Clasificaciones restringidas

A

B

C

Dimensión X

Dim

ensi

ón Y

A

B

C

Dim

ensi

ón Y

Dimensión X

Clasificaciones restringidas

Dimensión 1 tamaño X

A

B

C

Dim

ensi

ón2

tam

año

Y

Dimensión 1: brillo

A

B

C

Dim

ensi

ón 2

: altu

ra

Clasificaciones aceleradas

• Se hacen controles para ver cómo los glifos pueden interferir entre sí. • En experimentos de clasificaciones rápidas, se le pide a usuarios que clasifiquen

patrones visuales respecto a sólo uno de los atributos de los glifos.• El otro atributo se lo da:

1) al azar 2) es codificada de la misma forma que el primer atributo (redundancia).

• Dimen. Integrales: 1) problemas, 2) acelerada• Dimen. Separables: 1) poco problema, 2) poca aceler.

Clasificaciones aceleradas

Se deben encontrar los glifos que sean de igual altura que los rectángulos

dos casos donde:• En una columna la

segunda dimensión es elegida al azar

• En la otra columna la segunda dimensión es elegida de forma proporcional (redundante)

a) Caso de dimensión integralb) Caso de dimensión

separable

• Los pares de dimensiones van en un continuo entre la integrabilidad y la separabilidad.

rojo - verde amarillo - azulrojo - verde blanco - negroaltura anchoforma tamañocolor tamañodirección de mov. formacolor formacolor dirección de mov.X,Y posición tamaño, forma o color

Pares de dimensiones

Integrables

Separables

• Ejemplos de glifos codificados de acuerdo a 2 atributos. Los primeros son los más integrables, y a la derecha los más separables.

Pares de dimensiones

• Podríamos tener datos sobre 1000 escarabajos c/u con 30 características anatómicas, o 500 inversiones c/u con 20 variables financieras.

• Puede ser interesante desplegar dichos datos, para explorarlos, con la esperanza de encontrar relaciones. Esto puede hacer que encontremos relaciones ecológicas u oportunidades de negocio.

• El proceso preatención, proceso visual temprano y las dimensiones integrables y separables nos indican que hay un número limitado de atributos visuales accesibles.

• Recordar además que la cantidad de valores aceptables por dimensión está acotada.

Datos discretos multidimensionales

• Si pensamos que cada dimensión tenga sólo 4 valores posibles, y que se puedan manejar 8 dimensiones 48 = 64.000 posibles valores.

• Problema: las conjunciones en general no cumplen con la preatención, por lo que

sólo tenemos 4*8 = 32 alternativas fácilmente distinguibles.


• Stars (Estrellas)

• Whisker (bigote de gato).


• La longitud y el grosor de la barra aumentan de forma similar (redundancia).


• 8 dimensiones en un glifo• Posición (3D)• Color (2D)• elementos del glifo (3D solamente).



Caras de (Herman) Chernoff (1973)

percepción visual: gestalt, preatencionalidad, coding.

Documents

Transcript of percepción visual: gestalt, preatencionalidad, coding.