By name: continuity description: 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. metadata: 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/