# Uniform Connectedness

> Elementos conectados visualmente se perciben como relacionados. Use cuando diseñe diagramas, flujos, relaciones entre elementos, o conexiones visuales.

- Skill: `majiayu000/uniform-connectedness` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add majiayu000/uniform-connectedness`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/uniform-connectedness/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/uniform-connectedness

---


# 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