By name: proximity description: Elementos cercanos se perciben como relacionados. Use cuando agrupe controles, organice formularios, o diseñe layouts que comuniquen relaciones. metadata: author: ux-ui-skills version: "1.0" category: gestalt
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/