Principios de la Gestalt

Teorías que analizan las áreas grises de cómo funciona nuestra percepción visual. Explican cómo las personas perciben objetos, y cómo las variaciones en la disposición, perspectiva, tamaño, etc. puede alterar esta percepción.

"El todo es más que la suma de sus partes"

Axioma de Aristoteles

Al observar un diseño el cerebro cataloga las imágenes.

Nuestras experiencias y el contexto definen nuestra percepción

Detección

El estímulo es captado por alguno de los órganos sensoriales

Transmisión

Los órganos sensoriales transforman el estimulo en señales electroquímicas que son transmitidas al cerebro.

Procesamiento

El estimulo llega al cerebro donde es interpretado.

Propiedades básicas

Emergencia
Reificación
Multiestabilidad
Invarianza

Emergencia

Al intentar identificar un objeto, los humanos intentamos primero identificar el contorno del objeto y asociarlo con figuras que ya conocemos. Es solo después de esta identificación de contornos que comenzamos a notar los detalles de un objeto, las partes como separadas del todo.

Las formas y contornos deben tomar relevancia sobre detalles menores. No importa cuán fascinante sea un botón en el que se puede hacer clic si los usuarios no saben que es un botón.

Reificación

Debido a que los estímulos visuales son inconsistentes, nuestros cerebros tienden a "rellenar los vacios" cuando falta información. Esto nos permite comprender imágenes incluso cuando son vagas o limitadas.

Mientras se tenga suficiente información para comunicar un objeto, el usuario puede completar el resto. Esto significa que se puede ser creativo con el uso del espacio en blanco, tratándolo como otra herramienta de diseño en vez de un lienzo vacío.

Multiestabilidad

Si un objeto tiene más de una interpretación, la mente alternará entre las diferentes interpretaciones ya que no puede ver ambas simultaneamente. Cuanto más se centre un espectador en una interpretación sobre otra, más dominante se vuelve dicha interpretación.
```
 
```
```
 
```
```
 
```

Evitar múltiples interpretaciones. Comprobar que los diseños solo puedan ser vistos de la manera que se desea, fortaleciendo la influencia de la interfaz de usuario sobre la experiencia de usuario.

Invarianza

Al igual que la reificación, la invarianza es otra táctica que nuestros cerebros usan para comprender
visuales a pesar de inconsistencias evidentes. La invarianza muestra que reconocemos contornos y patrones de objetos a pesar de las diferencias
en perspectiva, rotación, escala, o incluso ligeras deformaciones.

A menudo se aplica a las pruebas CAPTCHA, ya que la invarianza es una ventaja que los humanos parecen tener sobre los robots.
Brutalismo UI

5 principios útiles

Similaridad
Relación entre figura y fondo
Agrupación
Cierre
Continuidad

Similaridad

Objetos que lucen similares son percibidos como similares
- Comunicar información de la manera más rápida y fácil posible.
- Usar la similitud para transmitir significado, ahorrando tiempo en explicaciones y facilitando la experiencia.

Relación figura- fondo

Los elementos se perciben como figuras (elementos de enfoque distintos) o fondos (sobre el que se encuentran las figuras).
Estable, reversible, ambigua

Agrupación

Elementos disímiles pueden ser agrupados juntos para parecer similares.
- Cercado
- Proximidad

Cierre

Basado en los principios de reificación, el cierre menciona cómo los humanos proporcionarán su propio cierre a objetos incompletos rellenando los vacíos por sí mismos.
```
 
```
```
 
```
```
 
```

Continuidad

En relación con el cierre, este principio establece que el ojo de un usuario crea momentos a medida que se mueve de un objeto a otro, dando a las líneas un poder especial en el diseño.
Usuarios perciben elementos en una línea o en una curva como similares.

Diseñar para

el espacio

El uso efectivo del espacio en el diseño de la interfaz de usuario requiere una comprensión de la estética, la funcionalidad y el comportamiento humano. De hecho, el diseño espacial es el vínculo entre las dimensiones más estilísticas del lenguaje y las imágenes, y las más prácticas de responsividad, tiempo y comportamiento del usuario. El espacio existe en algún lugar en el medio, lidiando con problemas en ambos lados del espectro.

El espacio negativo

no es negativo

Todos los buenos artistas visuales entienden la importancia del espacio negativo, el área vacía que llama la atención y acentúa el tema real. El espacio negativo es como el elenco de apoyo cuyo deber es hacer que la estrella de el espectáculo se destaque más que ellos mismos.

En el diseño de interacción, el espacio en blanco cumple tres funciones principales: mejorar la comprensión, aclarar las relaciones y llamar la atención.

Mejorar comprensión

La habilidad de usar el espacio en blanco radica en proveer a los usurios con una cantidad digerible de contenido y retirar los detalles ajenos.
El espacio en blanco se puede dividir en cuatro elementos:
- Espacio blanco visual
- Espacio blanco del diseño
- Espacio blanco del texto
- Espacio blanco del contenido

Más allá de mejorar la comprensión, los espacios en blanco ayudan a crear mapas mentales.

Aclarar relaciones

Ubicar etiquetas cerca a los campos relevantes
Agrupar tópicos relacionados juntos
Atraer la atención

Fragmentar el contenido

La mayoría de los diseñadores se suscriben a la escuela de pensamiento "no hacer que el usuario piense". No es que los usuarios sean vagos, es que ya tienen mucho en mente, y reunir información adicional solo hace que sea más difícil completar sus tareas. La cantidad de tensión que crea un diseño de interfaz se llama "carga cognitiva", y una IU utilizable y agradable lo reducirá tanto como sea posible.
Memoria a corto plazo 5 - 9 elementos.

El espacio, dependiendo cómo se use, puede añadir o quitar valor al contenido

Relaciones visuales

Contraste y similaridad

El contraste y la similaridad son dos aproximaciones para mostrar relaciones entre los elementos de una pagina, ahorrando tiempo y esfuerzo al hacerlo visualmente

Contraste

Puede añadir drama e intriga
Destaca diferencias importantes entre funcionalidades
Apela a instintos humanos primitivos: estamos programados para notar diferencias.

La mayoría de las personas no ven únicamente dos circulos, sino un circulo negro y uno rojo.

Diferenciación es una respuesta humana común y genérica

El contraste comunica de forma rápida fronteras en el diseño.

1. Claro y oscuro

Acentúa la impresión de profundidad
Puede guiar la atención del usuario hacia objetos claros contrastados con oscuros

2. Confrontar colores

Captura y guia el ojo del usuario
Afecta el estado de animo
Brinda un estilo propio y distintivo
Puede ser dividido en dos grupos "conflictivos"

Colores cálidos

Rojos, naranjas, amarillos
Tienden a ser energizantes, vigorizantes y/o agresivos

Colores frios

Verdes, azules, purpuras
Relajación, calma , pasividad, sometimiento

Los colores cálidos tienden a dominar a los colores fríos

Primer plano y fondo

El contraste es crítico para determinan la relación entre figura y fondo y señalar la dominancia visual
Primera impresión impresión de un diseño
Provee el contexto del diseño
Deben contrastar, sino el usuario no podrá separarlos

Punto de enfoque

Estos elementos están diseñados para resaltar de los demás que conforman el entorno
El elementos más notables se considera dominante
Los elementos restantes que tambien sobresalen (en menor medida) son considerados puntos de enfoque.
Si todo trata de capturar la atención del usuarion, entonces, nada lo hará.

Similaridad

Objetos de apariencia similar comunican similaridad entre sus funciones
Explorar diferentes niveles de similaridad y cómo crean relaciones entre objetos
3 similaridades principales: color forma y tamaño.

Jerarquía de similaridades de la más potente a la menos potente: color, forma y tamaño.
Psicología evolutiva: al escanear los alrededores tamaño y forma son difíciles de determinar debido a complejidades visuales, pero el color salta inmediatamente a la vista.

Aplicada a UI

10 segundos: decisión de quedarse o no en el sitio
Transmitir una organización inmediata de la interfaz.

1.Enlaces

Necesitan contrastar con otros textos pero deben ser similares entre sí

https://www.reddit.com/

2.Contenido

Mostrar relaciones entre contenidos, reforzar jerarquías y señalar la estructura.
La consistencia de la presentación visual sugiere consistencia de categoría y contexto