Principios de Percepción Visual en Diseño de Interfaces

Percepción Visual en Diseño de Interfaces

La distribución de elementos en la interfaz es una decisión que toma el diseñador basada muchas veces en su propia intuición o en las exigencias del espacio disponible. Es posible proporcionar al diseñador las herramientas necesarias (guidelines) para decidir sobre la mejor distribución de los objetos en una interfaz.

Organización de Objetos y Escenas

Las unidades de entrada se transforman mediante procesos de división y agrupación para configurar la organización perceptual definitiva de la imagen.

• Detección de Bordes

  La imagen es sometida a un algoritmo que detecta cambios de luminancia mediante el cual se obtiene un mapa de bordes de 1D.

• Formación de Regiones

  Principio de conexión uniforme: Existe una tendencia a percibir como regiones conectadas a áreas uniformes con respecto a una propiedad de la imagen (color, luminancia, textura, movimiento).

• Diferenciación de Figura y Fondo

  Las personas tienden a percibir tan solo uno de los lados como un objeto con significado.

El Proceso de Percepción

La percepción es una combinación de procesamiento bottom-up y top-down; un reconocimiento de patrones basado en el aprendizaje y la expectativa. Nuestras expectativas están basadas en 3 factores:

• El pasado (experiencia)
• El presente (contexto actual)
• El futuro (objetivos)

Las implicaciones en el diseño de la IU son: evitar la ambigüedad, procurar ser consistente y procurar conocer los posibles objetivos de los usuarios.

Leyes de Gestalt

Principios clave para la organización perceptual:

• Proximidad
• Similitud
• Destino común
• Buena comunicación
• Cierre
• Región común
• Conexión entre elementos
• Sincronía

Factores que Dificultan la Lectura

Elementos que pueden afectar negativamente la legibilidad en una interfaz:

• Usar vocabulario poco común o con el que no estamos familiarizados.
• Tamaño inadecuado de la fuente.
• Uso de fuentes que dificultan el reconocimiento de las letras.
• Inadecuada selección del fondo (ruido visual).
• Repetición de información.
• Texto centrado (en bloques largos).
• Combinación de varios errores.
• Mostrar una cantidad de información excesiva e innecesaria.

Visión: El Color

Podemos distinguir unos 7 millones de colores, pero se identifican muchos menos. La percepción del color se realiza principalmente a través de los conos (visión con luz) y los bastones (visión nocturna). El contacto con la luz segrega sustancias químicas que estimulan a las neuronas.

El ojo percibe el color a través de los conos, sensibles a diferentes longitudes de onda. Existen tres tipos de conos con diferentes sensibilidades espectrales. El resultado es un patrón de output formado por los tres conos que es el indicador de la longitud de onda que lo ha causado. Después, el sistema nervioso interpreta cada patrón.

Fenómenos Visuales Relacionados con la Percepción del Color

• Teoría de Componentes

  Las luces roja y verde pueden combinarse para que veamos el amarillo.

• Posefecto del Color

  Ejemplos: rojo-verde; azul-amarillo; acromático.

Es importante evitar la combinación de colores opuestos en una pantalla (rojo-verde, amarillo-azul). La habilidad para discriminar colores depende de cómo se presentan.

Guía de Estilo para la Elección de Colores

Recomendaciones para el uso del color en interfaces:

• Elegir combinaciones de colores compatibles. Evitar rojo–verde, verde–azul, rojo–azul.
• Usar contrastes altos de color entre la letra y el fondo.
• Limitar el número de colores a 4-7.
• Usar azul claro solo de fondo.
• Usar blanco para la información periférica.
• Usar códigos redundantes (formas además de colores) para evitar las deficiencias en la percepción.
• Vincular significados prácticos a colores primarios (rojo, verde, azul, amarillo).
• Utilizar códigos de color en mensajes:
  • Rojo: alerta de error.
  • Amarillo: advertencia.
  • Verde: progreso positivo.
• Una vez elegida la codificación, no cambiarla.