Continuity

---
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/