Explains the principle of continuity in design, guiding visual flow and user attention through aligned elements and smooth paths.
--- 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/--- 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/
Imported from the listed AgentSkill.sh category. Complete supplied package files and notices are retained. Required external tools and credentials are not installed. No bundled code was executed during import. Individual agent task behavior has not been tested.
Resource notes updated 2026-10-27 · Original instructions by vjrivmon