continuity
El ojo sigue líneas y curvas naturalmente. Use cuando diseñe flujos visuales, navegación, timelines, o guíe la atención del usuario.
When & Why to Use This Skill
This Claude skill leverages the Gestalt Principle of Continuity to optimize UI/UX design and visual hierarchy. It provides expert guidance on aligning elements, creating intuitive navigation paths, and designing seamless user flows by utilizing the human eye's natural tendency to follow smooth lines and curves.
Use Cases
- Designing intuitive navigation systems and breadcrumbs that guide users naturally through site architectures.
- Optimizing form layouts and data tables to ensure consistent alignment and improve information scanability.
- Creating effective timelines, progress bars, and multi-step wizards that clearly communicate process direction.
- Conducting visual audits to identify and fix alignment issues that disrupt the user's visual journey and cognitive flow.
- Structuring landing pages and marketing materials to lead the user's attention toward key call-to-action (CTA) elements.
| name | continuity |
|---|---|
| author | ux-ui-skills |
| version | "1.0" |
| category | gestalt |
Principio de Continuidad
Resumen
Los elementos alineados en una línea o curva se perciben como más relacionados que elementos no alineados. El ojo tiende a seguir el camino más suave.
Origen
- Escuela: Psicología de la Gestalt
- Año: ~1920s
- Autores principales: Max Wertheimer, Kurt Koffka, Wolfgang Köhler
Fundamento Psicológico
El sistema visual interpreta líneas y curvas como continuaciones naturales, prefiriendo trayectorias suaves sobre cambios abruptos. Esto permite seguir elementos visuales sin esfuerzo consciente y predecir hacia dónde continúa un patrón.
Aplicación en Diseño
Alineación de Elementos
- Grids con elementos alineados en ejes
- Formularios con campos alineados a la izquierda
- Tablas con columnas consistentes
- Menús con items alineados
Flujos y Procesos
- Timelines lineales
- Progress bars continuos
- Wizards con pasos conectados
- Onboarding flows con dirección clara
Guía Visual
- Líneas que conectan elementos relacionados
- Flechas que indican dirección
- Borders que crean caminos visuales
- Gradientes que guían el ojo
Navegación
- Breadcrumbs como camino lineal
- Tabs alineados horizontalmente
- Sidebar con items en columna
- Pagination como secuencia
Ejemplos
- Google Maps: Rutas como líneas continuas
- LinkedIn: Experiencia laboral como timeline vertical
- Checkout flows: Pasos conectados horizontalmente
- Slides/Carousels: Indicadores de posición en línea
- Tables: Filas y columnas alineadas
Anti-patterns
- ❌ Elementos relacionados sin alineación
- ❌ Timelines con saltos visuales
- ❌ Formularios con campos desalineados
- ❌ Menús con items en posiciones aleatorias
- ❌ Flujos sin dirección clara
Métricas
- Visual Flow Analysis: Eye-tracking sigue caminos esperados
- Alignment Audit: Consistencia de alineación en grids
- Task Flow Completion: Usuarios siguen secuencias correctamente
- Scan Path Efficiency: Movimientos oculares optimizados
Principios Relacionados
- [[proximity]] - Cercanía refuerza continuidad
- [[common-fate]] - Elementos que se mueven juntos
- [[figure-ground]] - Separación de camino vs fondo
Referencias
- Wertheimer, M. (1923). "Laws of Organization in Perceptual Forms"
- Ware, C. (2012). "Information Visualization: Perception for Design"
- https://www.smashingmagazine.com/2014/03/design-principles-visual-perception-and-the-principles-of-gestalt/