Animación y movimiento

¿Alguna vez has estado viajando en un automóvil, un barco o un avión y, de repente, sentiste que el mundo girar? ¿O tuviste una migraña tan grave que te muestra animaciones en tu teléfono o tablet, creado para "deleitar" te enfermaste de repente? O tal vez siempre fuiste son sensibles 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án experimentado algún tipo de disfunción vestibular. Esto puede provocar un mareo temporal, un vértigo inducido por migraña o una enfermedad discapacidad vestibular permanente.

Además de provocar vértigo, muchas personas descubren que se mueven, parpadean o se desplazan que el contenido distraiga a los usuarios. Personas con TDAH y otros trastornos de déficit de atención podrían distraerse tanto de los elementos que olvidan por qué visitaron tu sitio web o aplicación primer lugar.

En este módulo, veremos algunas de las formas en que pueden asistir mejor a las personas con todo tipo de trastornos desencadenados por el movimiento.

Contenido intermitente y en movimiento

Al crear animaciones y movimientos, debes preguntarte si el movimiento del elemento es excesivo. Por ejemplo, los colores que parpadean de oscuros a claros o con 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 fotosensibilidad, y es más común en mujeres y personas 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
• Parpadea debajo del umbral general de flash y flash rojo.

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

Ante cualquier movimiento extremo, es imperativo que lo pruebes usando el 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 es probable que provoquen convulsiones. No todo el contenido debe ser evaluado por PEAT, pero que incluye transiciones rápidas o intermitentes entre claro y oscuro y los colores de fondo deben evaluarse, solo por seguridad.

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 que podría mejorar la experiencia general del usuario, o no puedes eliminar el movimiento de otro y por una buena razón. En ese caso, debes seguir las WCAG lineamientos sobre movimiento. Los lineamientos establecen que debe crear una opción para que los usuarios detengan, detengan o ocultar movimientos para elementos que no sean esenciales en movimiento, parpadeo o desplazamiento se inician automáticamente, duran más de cinco segundos y son parte de otra página o de terceros.

Pausar, detener u ocultar movimiento

Agregar detener, ocultar o detener mecanismo para tu página que permita a los usuarios desactivar las funciones animaciones de movimiento. Puedes hacer esto en el nivel de la pantalla o de los elementos.

Por ejemplo, supongamos que tu producto digital incluye muchas animaciones. Considera agregar un botón de activación de JavaScript accesible para permitirles a los usuarios controlar su experiencia. Cuando el botón se mueve a “apagado” todas las animaciones se inmovilizan en esa pantalla y todas las demás.

Cómo usar consultas de medios

Además de ser selectivo con las animaciones, ofrece a los usuarios opciones para detener, ocultar, ocultar movimientos y evitar bucles de animación infinitos, considera también agregar una consulta de medios enfocada en el movimiento. Esto les brinda a los usuarios incluso más opciones cuando se trata de lo que se muestra en la pantalla.

@prefers-reduced-motion

Al igual que con las consultas de medios enfocadas 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 configurar preferencias de pantalla para reducir el movimiento. Estos parámetros de configuración son diferente en todos los sistemas operativos y puede enmarcarse de manera positiva o negativa. Con @prefers-reduced-motion, puedes diseñar un sitio que respeta estas preferencias.

En macOS y Android, el usuario activa la opció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, la configuración está enmarcada de manera positiva como Show animaciones (Mostrar animaciones), que está activada de forma predeterminada. Un usuario debe activar desactiva esta opció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 que tomar muchas decisiones, incluidos los estados de movimiento predeterminados y la cantidad de movimiento que se mostrará. Volvamos al último ejemplo sobre 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 soliciten animaciones específicamente, estas se desactivarán.

No podemos predecir qué nivel de movimiento causará problemas a las personas con convulsiones, vestibulares y otros trastornos visuales. Incluso un poco de movimiento en la pantalla puede provocar mareos, visión borrosa o algo peor. Entonces, en la siguiente ejemplo, no seleccionamos animación de forma predeterminada.

Consultas de medios en capas

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

Permite que los usuarios elijan

Aunque puede ser divertido incorporar animaciones en nuestros productos digitales para es crucial recordar que algunas personas se verán afectadas por estos diseños. La sensibilidad al movimiento puede afectar a cualquier persona, desde sentir una leve molestia hasta causar una enfermedad o convulsión debilitantes.

Puedes usar varias herramientas diferentes para permitir que el usuario decida cuál es la mejor para ellos, en lugar de adivinar cuánto movimiento es demasiado. Por ejemplo, agrega botón de activación para activar o desactivar las animaciones en tu sitio o aplicación web. Reflexiona y cambia la posición del interruptor a desactivado de forma predeterminada.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre accesibilidad de movimiento y animación.