Uniform Connectedness
by vjrivmon
Skill Details
Repository Files
1 file in this skill directory
name: uniform-connectedness description: Elementos conectados visualmente se perciben como relacionados. Use cuando diseñe diagramas, flujos, relaciones entre elementos, o conexiones visuales. metadata: author: ux-ui-skills version: "1.0" category: gestalt
Principio de Conexión Uniforme
Resumen
Los elementos conectados por propiedades visuales uniformes (líneas, colores, texturas) se perciben como más relacionados que elementos no conectados.
Origen
- Autores: Stephen Palmer y Irvin Rock
- Año: 1994
- Fuente: "Rethinking Perceptual Organization"
Fundamento Psicológico
Las conexiones visuales explícitas son interpretadas como indicadores de relación. Una línea entre dos elementos es más fuerte que proximidad o similitud solas para comunicar conexión. El cerebro interpreta la línea como un "puente" entre elementos.
Aplicación en Diseño
Líneas y Conectores
- Org charts con líneas jerárquicas
- Flow charts con conexiones direccionales
- Timelines con línea continua
- Tree views con branches conectados
Diagramas y Flujos
- User flows con conexiones claras
- Process diagrams con flechas
- Mind maps con líneas de relación
- Network graphs con edges
UI Connections
- Tooltips con arrows apuntando al elemento
- Popovers conectados visualmente a triggers
- Lines en forms conectando labels a campos
- Step indicators conectados en wizards
Data Visualization
- Line charts conectando puntos
- Sankey diagrams con flujos
- Chord diagrams con relaciones
- Node graphs con edges
Ejemplos
- Figma: Lines de conexión entre frames
- GitHub: Network graph de branches
- Miro: Conectores entre sticky notes
- Google Analytics: Flow visualization
- Notion: Database relation arrows
Anti-patterns
- ❌ Relaciones implícitas que deberían ser explícitas
- ❌ Líneas que cruzan muchos elementos confusamente
- ❌ Conexiones sin dirección cuando importa
- ❌ Demasiadas conexiones que crean ruido visual
- ❌ Líneas de diferentes estilos para mismo tipo de relación
Métricas
- Relationship Recognition: Usuarios identifican conexiones
- Flow Comprehension: Entendimiento de diagramas
- Visual Clutter Score: Conexiones vs legibilidad
- Direction Clarity: Comprensión de dirección de flujo
Principios Relacionados
- [[proximity]] - Proximidad sin conexión es más débil
- [[continuity]] - Líneas siguen caminos naturales
- [[common-fate]] - Elementos conectados que se mueven juntos
Referencias
- Palmer, S.E. & Rock, I. (1994). "Rethinking Perceptual Organization"
- Ware, C. (2012). "Information Visualization: Perception for Design"
- https://www.interaction-design.org/literature/article/laws-of-proximity-uniform-connectedness-and-continuation
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.