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/