Proximity

Principio de Proximidad

Resumen

Los objetos que están cerca unos de otros se perciben como un grupo. La distancia relativa entre elementos comunica relación o independencia.

Origen

• Escuela: Psicología de la Gestalt
• Año: ~1920s
• Autores principales: Max Wertheimer, Kurt Koffka, Wolfgang Köhler

Fundamento Psicológico

El sistema visual agrupa automáticamente elementos cercanos para simplificar la escena. Este proceso es pre-atencional (ocurre antes del procesamiento consciente), lo que significa que los usuarios perciben grupos instantáneamente sin esfuerzo cognitivo.

Aplicación en Diseño

Agrupación de Controles

• Botones de acción relacionados juntos
• Labels pegados a sus inputs (no al siguiente)
• Iconos junto a su texto descriptivo
• Acciones primarias vs secundarias separadas

Espaciado en Formularios

• Label más cerca del campo que del anterior
• Secciones separadas por mayor whitespace
• Campos relacionados agrupados visualmente
• Acciones de formulario separadas de campos

Layouts y Cards

• Cards que agrupan información relacionada
• Padding interno vs margin externo
• Secciones distinguibles por espaciado
• Jerarquía visual mediante proximidad

Navegación

• Items de menú relacionados agrupados
• Separadores para grupos distintos
• Submenús que heredan contexto del padre
• Footer con secciones claramente separadas

Ejemplos

• Google Search: Resultados agrupados (título, URL, descripción)
• Forms: Label directamente sobre su input
• Toolbars: Herramientas relacionadas juntas, separadores entre grupos
• Cards: Imagen + título + descripción como unidad
• Tables: Celdas separadas de headers por spacing

Anti-patterns

• ❌ Labels equidistantes entre dos campos
• ❌ Acciones relacionadas dispersas en la página
• ❌ Botones de confirmar/cancelar muy separados
• ❌ Elementos relacionados separados por no relacionados
• ❌ Spacing uniforme que no comunica relaciones

Métricas

• Visual Grouping Test: Usuarios identifican grupos correctamente
• Form Field Association: Labels correctamente asociados visualmente
• Task Completion: Errores reducidos por agrupación clara
• Eye-tracking: Patrones de escaneo siguen grupos lógicos

Principios Relacionados

• [[common-region]] - Áreas delimitadas también agrupan
• [[similarity]] - Elementos similares se agrupan
• [[uniform-connectedness]] - Conexiones visuales agrupan

Referencias

• Wertheimer, M. (1923). "Laws of Organization in Perceptual Forms"
• Palmer, S.E. (1992). "Common region: A new principle of perceptual grouping"
• https://www.nngroup.com/articles/gestalt-proximity/