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