# Proximity

> Elementos cercanos se perciben como relacionados. Use cuando agrupe controles, organice formularios, o diseñe layouts que comuniquen relaciones.

- Skill: `majiayu000/proximity` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add majiayu000/proximity`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/proximity/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/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/