Principios de la Gestalt en el diseño de productos digitales

Estas son las reglas de esa primera lectura, descubiertas por Wertheimer en los años 20 y todavía vigentes porque describen cómo funciona la percepción humana.

Gestalt no es el nombre de una persona, es una palabra alemana que significa algo así como "forma" o "configuración unificada".

De dónde viene

La psicología de la Gestalt nació en Alemania a principios del siglo XX, fundada principalmente por tres psicólogos:

Max Wertheimer, Wolfgang Köhler y Kurt Koffka

En 1912 realizaron un estudio sobre el "fenómeno phi": donde se demostró que si muestras dos luces fijas encendiéndose y apagándose en secuencia rápida, la gente percibe una sola luz moviéndose entre los dos puntos, aunque no hay ningún movimiento real. Ese fue el punto de partida: el cerebro no registra datos crudos, construye una interpretación.

Los tres trabajaban en Frankfurt y luego en Berlín, y entre 1910 y 1930 desarrollaron la idea central: percibimos totalidades organizadas antes que partes sueltas. No vemos primero puntos, líneas y colores para luego "armar" un objeto, el cerebro ya entrega objetos, grupos y patrones desde el primer instante de percepción.

Por qué surgió

Fue en parte una reacción contra el estructuralismo de la época, que trataba de explicar la percepción descomponiéndola en sensaciones elementales (como si la mente fuera una suma de píxeles). Los gestaltistas argumentaban lo contrario: "el todo es distinto a la suma de sus partes".

De ese programa de investigación salieron los principios que se aplican hoy en UI: proximidad, similitud, cierre, continuidad, etc. No se inventaron pensando en pantallas, sino observando cómo el ojo humano organiza cualquier escena visual. Por eso los principios se sostienen tan bien: describen cableado perceptivo, no una tendencia de diseño.

Los 9 principios

• Proximidad: Lo que está cerca se percibe como grupo. Tip: la separación entre un campo y su etiqueta debe ser claramente menor que la separación con el siguiente campo. Si quedan a la misma distancia, el usuario adivina a cuál pertenece.

• Similitud: Lo que comparte forma, color o tamaño se percibe como relacionado. Combina color con forma o ícono. Y nunca le des el mismo estilo a "Eliminar" y "Guardar": la similitud sugiere que son intercambiables.

• Región común: Un borde o caja agrupa todo lo que encierra, incluso más fuerte que la proximidad o el color. Cuidado: si metes todo en tarjetas, terminas con "sopa de tarjetas" donde las cajas ya no significan nada.

• Conectividad: Una línea entre dos elementos los declara relacionados, más fuerte incluso que la cercanía. Se usa en steppers, progress bars y diagramas de nodos.

• Continuidad: El ojo sigue líneas y alineaciones. En la práctica: alinea los bordes de una columna de campos y se leerán como una lista; saca uno de la alineación y "se sale" visualmente del grupo (útil si quieres destacarlo, un problema si no).

• Destino común: Lo que se mueve o cambia junto se percibe como relacionado. No requiere movimiento literal: filas que se atenúan juntas implican "deshabilitado"; controles que pulsan juntos implican "cargando".

• Cierre: El cerebro completa formas incompletas. Por eso el ícono de "hamburguesa" (3 líneas sueltas) se lee como un solo botón.

• Figura-fondo: El sistema visual separa lo que es objeto de lo que es fondo, usando contraste, nitidez, superposición o color cálido/frío. Un modal se vuelve figura cuando el resto de la pantalla se atenúa detrás.

• Prägnanz (buena forma): Ante ambigüedad, la mente elige la interpretación más simple y estable. No es "menos elementos": a veces una etiqueta o un ícono extra reduce la ambigüedad más de lo que la agrega.

La regla que las une a todas

Haz que los elementos relacionados coincidan en espaciado, color, alineación y comportamiento; haz que los elementos distintos se vean distintos. Cuando una señal dice "un grupo" y otra dice "dos grupos", el usuario tiene que esforzarse para decidir a cuál creerle.

Checklist rápido para auditar una pantalla:

• ¿La separación dentro de un grupo es claramente menor que entre grupos?

• ¿Espaciado, color y alineación apuntan a la misma estructura?

• ¿Lo que se ve como un solo objeto se comporta como uno solo?

• ¿La jerarquía sobrevive en móvil, texto ampliado, y estados de error/carga?

• ¿El orden del código y la navegación por teclado cuentan la misma historia que el diseño visual?

Gestalt oscura

Los mismos principios, usados para engañar:

• Unir cosas separadas: meter un cargo opcional dentro del bloque obligatorio de la compra.

• Separar cosas relacionadas: poner el precio lejos del botón que lo genera.

• Camuflar cosas distintas: que un anuncio se vea idéntico a un resultado orgánico.

• Esconder en el fondo: botón principal grande y saturado, condiciones de cancelación en texto gris diminuto.

José Manuel Zevallos / Product Designer