---

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/