Proximity
by vjrivmon
Skill Details
Repository Files
1 file in this skill directory
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/
Related Skills
Attack Tree Construction
Build comprehensive attack trees to visualize threat paths. Use when mapping attack scenarios, identifying defense gaps, or communicating security risks to stakeholders.
Grafana Dashboards
Create and manage production Grafana dashboards for real-time visualization of system and application metrics. Use when building monitoring dashboards, visualizing metrics, or creating operational observability interfaces.
Matplotlib
Foundational plotting library. Create line plots, scatter, bar, histograms, heatmaps, 3D, subplots, export PNG/PDF/SVG, for scientific visualization and publication figures.
Scientific Visualization
Create publication figures with matplotlib/seaborn/plotly. Multi-panel layouts, error bars, significance markers, colorblind-safe, export PDF/EPS/TIFF, for journal-ready scientific plots.
Seaborn
Statistical visualization. Scatter, box, violin, heatmaps, pair plots, regression, correlation matrices, KDE, faceted plots, for exploratory analysis and publication figures.
Shap
Model interpretability and explainability using SHAP (SHapley Additive exPlanations). Use this skill when explaining machine learning model predictions, computing feature importance, generating SHAP plots (waterfall, beeswarm, bar, scatter, force, heatmap), debugging models, analyzing model bias or fairness, comparing models, or implementing explainable AI. Works with tree-based models (XGBoost, LightGBM, Random Forest), deep learning (TensorFlow, PyTorch), linear models, and any black-box model
Pydeseq2
Differential gene expression analysis (Python DESeq2). Identify DE genes from bulk RNA-seq counts, Wald tests, FDR correction, volcano/MA plots, for RNA-seq analysis.
Query Writing
For writing and executing SQL queries - from simple single-table queries to complex multi-table JOINs and aggregations
Pydeseq2
Differential gene expression analysis (Python DESeq2). Identify DE genes from bulk RNA-seq counts, Wald tests, FDR correction, volcano/MA plots, for RNA-seq analysis.
Scientific Visualization
Meta-skill for publication-ready figures. Use when creating journal submission figures requiring multi-panel layouts, significance annotations, error bars, colorblind-safe palettes, and specific journal formatting (Nature, Science, Cell). Orchestrates matplotlib/seaborn/plotly with publication styles. For quick exploration use seaborn or plotly directly.