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/