uniform-connectedness
Elementos conectados visualmente se perciben como relacionados. Use cuando diseñe diagramas, flujos, relaciones entre elementos, o conexiones visuales.
When & Why to Use This Skill
This Claude skill applies the Gestalt Principle of Uniform Connectedness to optimize visual communication. It helps users design and evaluate diagrams, user flows, and UI layouts by ensuring that related elements are connected through consistent visual properties like lines, colors, and textures, thereby reducing cognitive load and improving information hierarchy.
Use Cases
- Designing complex flowcharts and process diagrams: Use explicit connectors to guide users through sequential steps and decision paths.
- UI/UX Layout Optimization: Implementing visual bridges between tooltips, popovers, and their triggers to clarify functional relationships.
- Data Visualization Enhancement: Creating clear relationships in network graphs, Sankey diagrams, or line charts to represent data connectivity effectively.
- Information Architecture: Building organizational charts and tree views that use connected branches to communicate hierarchy and structure.
- Design Auditing: Identifying and correcting 'anti-patterns' where implicit relationships are confusing or where visual noise hinders the perception of connectivity.
| name | uniform-connectedness |
|---|---|
| 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