proximity

vjrivmon's avatarfrom vjrivmon

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

⭐1stars🔀0forks📁View on GitHub🕐Updated Jan 7, 2026
[Brand and Creative Direction]

When & Why to Use This Skill

This Claude skill provides expert guidance on the Gestalt Principle of Proximity to optimize UX/UI design and visual communication. It helps creators establish clear visual hierarchies, reduce cognitive load, and improve interface intuitiveness by strategically grouping related elements and managing whitespace effectively.

Use Cases

  • Form Optimization: Grouping labels, input fields, and validation messages to ensure users associate them correctly and complete tasks faster.
  • Dashboard Layout Design: Organizing complex data visualizations and metrics into logical clusters to facilitate quicker information scanning and analysis.
  • Navigation Architecture: Structuring menus and footers by separating distinct functional groups with whitespace to improve findability.
  • Mobile UI Refinement: Placing interactive elements (like action buttons) in close proximity to the content they control to enhance the user's mental model.
  • Creative Quality Audits: Reviewing existing layouts to identify and fix 'anti-patterns' where equidistant spacing causes visual ambiguity.
nameproximity
authorux-ui-skills
version"1.0"
categorygestalt

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
  • 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