# Estrategias de Movimiento Reducido: Motion y Accesibilidad > Aprenda a diseñar interfaces con animaciones y microinteracciones que respeten la preferencia de 'movimiento reducido' de los usuarios sensibles a las animaciones y el mareo visual. *Tags: ux, estrategia, accesibilidad, a11y, animacion* --- > [!info] Definición Rápida > El **Movimiento Reducido** es una preferencia de accesibilidad que los usuarios pueden activar en sus sistemas operativos (Windows, macOS, iOS, Android). Cuando se activa, indica a las aplicaciones que eliminen o simplifiquen las animaciones innecesarias (`prefers-reduced-motion`) para evitar náuseas, mareos o distracciones a personas con trastornos vestibulares o TDAH. ## ¿Por qué el Diseñador debe Gestionar el Movimiento? Como diseñadores, amamos las animaciones: zooms, paralaje (parallax), rebotes y transiciones suaves. Sin embargo, para millones de personas, estas animaciones no son "bonitas"; son físicamente dolorosas. El movimiento excesivo puede causar migrañas, desorientación y malestar vestibular. Diseñar para el movimiento reducido no significa eliminar la magia de tus diseños; significa ser **cortés** y ofrecer una alternativa calmada a quien la necesita. ## Los 2 Caminos: Animación vs Función Para que tu estrategia de movimiento sea accesible, debes distinguir entre dos tipos de animación: ### 1. Animaciones Decorativas (Lo que "se puede quitar") Son los efectos que solo tienen una intención estética. - **Ejemplo:** El efecto de paralaje al hacer scroll, o un fondo de estrellas moviéndose. - **Estrategia:** Si el usuario tiene activo "Movimiento Reducido", estas animaciones **deben eliminarse por completo** o sustituirse por una imagen estática. ### 2. Animaciones Funcionales (Lo que "se debe suavizar") Son las que ayudan al usuario a entender el contexto (ej. un modal que se expande desde el botón que lo activó). - **Ejemplo:** Una barra de carga que avanza o un cajón lateral (drawer) que aparece. - **Estrategia:** En lugar de un barrido o un zoom agresivo, usa una **transición suave de opacidad (Fade-in)**. El cerebro capta el cambio de estado sin la sensación de movimiento físico. ## No Todo es Mareo: TDAH y Distracción El movimiento reducido también es una herramienta vital para personas con **TDAH (Trastorno por Déficit de Atención e Hiperactividad)**. Las animaciones constantes, bucles infinitos o elementos que parpadean capturan su atención de forma involuntaria, impidiéndoles concentrarse en la tarea principal de tu aplicación. Un diseño responsable permite al usuario pausar o desactivar cualquier elemento animado que dure más de 5 segundos. ## Cómo Implementar Movimiento Reducido (Diseño y Código) Tú, como diseñador de producto, debes definir los dos estados de tus animaciones: - **Estado con Movimiento (Default):** Zoom al abrir el modal, duración 300ms. - **Estado Reducido (Accesible):** Apertura instantánea o un suave fundido (`opacity`), duración 150ms. En el código, los desarrolladores usan la media query `prefers-reduced-motion` de CSS para detectar la preferencia del usuario y aplicar los estilos correspondientes de forma automática. ## Check-list para Animaciones Accesibles - **Evita el Parpadeo Rápido:** Nunca muestres nada que parpadee más de 3 veces por segundo para evitar ataques de epilepsia fotosensible. - **Ofrece Controles de Pausa:** Cualquier carrusel de imágenes o vídeo de fondo debe tener un botón de "Pause" fácilmente accesible. - **Sin Zooms Agresivos:** Los efectos de zoom que cubren gran parte de la pantalla son los que más mareo causan. Cámbialos por fundidos (fades). - **No uses el Scroll como disparador de animaciones complejas:** El scroll paralaje es el principal enemigo de la accesibilidad del movimiento. ## Consejos de Mentor - **Diseña el "Fade" como Red de Seguridad:** Si no tienes tiempo para diseñar dos versiones de cada animación, una transición de opacidad suave (`opacity`) suele ser segura tanto para el modo normal como para el reducido. - **La ley de la duración:** A veces, simplemente acortar la duración de una animación (hacerla más rápida) reduce el tiempo que el ojo tiene para procesar el movimiento físico, mitigando el mareo. - **Prueba el Modo Reducido en tu propio móvil:** Activa la opción en los ajustes de Accesibilidad y navega por tu aplicación favorita. Te sorprenderá lo mucho que cambia la percepción del producto. ## Recursos y Herramientas - **W3C:** [Web Content Accessibility Guidelines (WCAG) - Motion](https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions.html) - **MDN Web Docs:** [prefers-reduced-motion Media Query](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) - **A11y Project:** [Understanding Reduced Motion](https://www.a11yproject.com/posts/maintaining-user-intent-with-prefers-reduced-motion/) - **Artículos:** [Responsible Motion Design](https://uxdesign.cc/how-to-design-responsible-motion-9a3e8e3e8e3) --- [[accessibility-tree]] [[principios-feedback-haptico]] [[principios-animacion-funcional]] [[redlining-especificaciones]] --- Source: https://www.fernandoux.com/es/wiki/estrategia/estrategias-movimiento-reducido/