---

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