Animación y movimiento

¿Alguna vez viajaste en auto, barco o avión y, de repente, sentiste que el mundo giraba? ¿O tuviste una migraña tan fuerte que las animaciones en tu teléfono o tablet, creadas para “deleitarte”, te hicieron sentir mal de repente? ¿O quizás siempre has sido sensitivo a todos los tipos de movimiento? Estos son ejemplos de diferentes tipos de trastornos vestibulares.

A los 40 años, más del 35% de los adultos habrá experimentado algún tipo de disfunción vestibular. Esto puede provocar un episodio de mareos temporal, un vértigo inducido por migraña o una discapacidad vestibular más permanente.

Además de provocar vértigo, a muchas personas les resulta distraído el contenido que se mueve, parpadea o se desplaza. Es posible que las personas con ADHD y otros trastornos de déficit de atención se distraigan tanto con los elementos animados que se olviden de por qué, en primer lugar, visitaron tu sitio web o app.

En este módulo, veremos algunas de las formas de ayudar mejor a las personas con todos los tipos de trastornos desencadenados por el movimiento.

Contenido intermitente y en movimiento

Cuando crees animaciones y movimientos, pregúntate si el movimiento del elemento es demasiado. Por ejemplo, los colores que parpadean de oscuro a claro o los movimientos rápidos en la pantalla pueden causar convulsiones en personas con epilepsia fotosensible. Se estima que el 3% de las personas con epilepsia sufre de foto sensibilidad, y es más común en mujeres y personas más jóvenes.

En los lineamientos de escritura en la memoria flash de las WCAG, se recomienda lo siguiente:

• Parpadea más de tres veces en un segundo
• Tiembla por debajo del umbral de parpadeo general y parpadeo rojo.

Estos destellos pueden, en el mejor de los casos, causar la imposibilidad de usar una página web o, en el peor, provocar enfermedades.

Para cualquier movimiento extremo, es imperativo que lo pruebes con la herramienta de análisis de epilepsia fotosensible (PEAT). PEAT es una herramienta gratuita que permite identificar si el contenido, el video o las animaciones de la pantalla pueden causar convulsiones. No es necesario que PEAT evalúe todo el contenido, pero, por seguridad, se debe evaluar el contenido que contiene transiciones rápidas o intermitentes entre colores de fondo claros y oscuros.

Otra pregunta que debes hacerte sobre la animación y el movimiento es si el movimiento del elemento es esencial para comprender el contenido o las acciones en la pantalla. Si no es esencial, considera eliminar todo movimiento, incluso los micromovimientos, del elemento que estás construyendo o diseñando.

Supongamos que crees que el movimiento del elemento no es esencial, pero podría mejorar la experiencia general del usuario, o bien que no puedes quitar el movimiento por otro motivo. En ese caso, debes seguir los lineamientos sobre el movimiento del WCAG. Los lineamientos establecen que debes crear una opción para que los usuarios puedan pausar, detener o ocultar el movimiento de los siguientes elementos: elementos de desplazamiento, parpadeo o movimiento no esenciales que se inician automáticamente, duran más de cinco segundos y forman parte de otros elementos de la página.

Cómo pausar, detener o ocultar el movimiento

Agrega un mecanismo para pausar, detener o ocultar la página para permitir que los usuarios desactiven la animación de movimiento potencialmente problemática. Puedes hacerlo a nivel de la pantalla o del elemento.

Por ejemplo, supongamos que tu producto digital incluye muchas animaciones. Considera agregar un interruptor de JavaScript accesible para permitir que los usuarios controlen su experiencia. Cuando el botón está activado en “sin movimiento”, todas las animaciones se inmovilizan en esa pantalla y en todas las demás.

Usa consultas de medios

Además de ser selectivo con las animaciones, de darles a los usuarios opciones de pausar, detener, ocultar el movimiento y evitar los bucles de animación infinitos, puedes considerar agregar una consulta de medios enfocada en el movimiento. Esto les da a los usuarios aún más opciones cuando se trata de qué se muestra en la pantalla.

@prefers-reduced-motion

Al igual que las consultas de medios centradas en el color del módulo de colores, la consulta de medios @prefers-reduced-motion verifica la configuración del SO del usuario relacionada con la animación.

Un usuario puede establecer preferencias de visualización para reducir el movimiento. Esta configuración es diferente en cada sistema operativo y puede estar enmarcada de forma positiva o negativa. Con @prefers-reduced-motion, puedes diseñar un sitio que respete estas preferencias.

En macOS y Android, el usuario activa el parámetro de configuración para reducir el movimiento. En macOS, un usuario puede configurar Reducir movimiento en Configuración > Accesibilidad > Pantalla. La configuración de Android es Quitar animaciones. En Windows, el parámetro de configuración se enmarca de forma positiva como Mostrar animaciones, que está activado de forma predeterminada. El usuario debe desactivar esta configuración para reducir el movimiento.

Como alternativa, como se muestra en el siguiente conjunto de ejemplos, puedes programar todas tus animaciones para que dejen de moverse en cinco segundos o menos en lugar de reproducirse en un bucle infinito.

Mejora progresiva para el movimiento

Como diseñadores y desarrolladores, tenemos muchas opciones, incluidos los estados de movimiento predeterminados y la cantidad de movimiento que se mostrará. Vuelve a mirar el último ejemplo sobre el movimiento.

Supongamos que decidimos que la animación no es necesaria para comprender el contenido en la pantalla. En ese caso, podemos optar por establecer el estado predeterminado en la animación de movimiento reducido en lugar de la versión de movimiento completo. A menos que los usuarios pidan animaciones de forma específica, estas se desactivarán.

No podemos predecir qué nivel de movimiento causará problemas en las personas con convulsiones, vestibulares y otros trastornos visuales. Incluso una pequeña cantidad de movimiento en la pantalla puede provocar mareos, visión borrosa o algo peor. Por lo tanto, en el siguiente ejemplo, no usaremos animación de forma predeterminada.

Consultas de medios en capas

Puedes usar varias consultas de medios para darles a los usuarios aún más opciones. Usemos @prefers-color-scheme, @prefers-contrast y @prefers-reduced-motion juntos.

Permite que los usuarios elijan

Si bien puede ser divertido incorporar animaciones en nuestros productos digitales para deleitar a los usuarios, es fundamental que recordemos que estos diseños afectarán a algunas personas. La sensibilidad al movimiento puede afectar a cualquier persona, desde una leve sensación de incomodidad hasta una enfermedad debilitante o una convulsión.

Puedes usar varias herramientas diferentes para permitir que el usuario decida qué es mejor para él, en lugar de adivinar qué tanto movimiento es demasiado. Por ejemplo, agrega un botón de activación para activar o desactivar la animación en tu sitio o aplicación web. Considera establecer de forma predeterminada ese botón de activación como desactivado.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre la accesibilidad de los movimientos y las animaciones.