Cómo cuidar la accesibilidad del Motion Design

El Motion Design ha dejado de ser considerado una parte secundaria del diseño UX/UI para convertirse en algo imprescindible de éste. No es solo una cuestión decorativa o estética, sino que se ha convertido en una vía que da un mayor entendimiento a la interacción del usuario.

Viendo la importancia del diseño del movimiento, no podemos descuidar la accesibilidad de éste.

Accesibilidad de Motion Design: consiste en usar el movimiento para mejorar la experiencia del usuario, considerando a aquellos que no pueden experimentarlo.

“Esencial para algunos, útil para todos” - W3C

¿Quién se beneficia de un motion accesible?

- Personas con trastornos vestibulares

- Personas con baja visión

- Personas usuarias de lector de la pantalla

- Personas sensibles a estímulos visuales intensos

Recomendaciones para un motion design usable y comprensible

Diseña movimiento que facilite entender la interacción

• Evita diseñar movimiento que aumente la carga cognitiva, distraiga o abrume al usuario.
• El diseño de movimiento sutil que se utiliza para comunicar el procesamiento del sistema, la retroalimentación, los cambios de estado o los próximos pasos pueden tener un efecto positivo.
• Para saber si tu diseño es usable y compresible,  consulta con usuarios a  los que afecta el movimiento.

Movimiento que puede durar más de 5 segundos

• Carruseles o presentaciones de diapositivas (slides) que avanzan automáticamente, fondos o ilustraciones animadas (bucle infinito).
• Proporciona mecanismo para que el usuario pause, detenga u oculte (a menos que el movimiento o el desplazamiento sea parte de una actividad en la que sea esencial).

Para animaciones de reproducción más largas

• Agregar algún tipo de controles de pausa y reproducción que permitan los usuarios controlar el movimiento y / o el comportamiento de reproducción automática.

Gif animado en bucle

• Necesitará algún tipo de control de pausa / reproducción para ser accesible.

Vídeos

• Siempre incluye botones de Play/Pausa.

Permite que los usuarios activen el movimiento

• El movimiento es mejor cuando es sutil y ocurre después de que el usuario ha realizado una acción.
• Cuando se reproduce automáticamente o es inesperado puede resultar confuso para muchas personal.

Evita los destellos y limita los rebotes a 3 veces por segundo

• Los destellos y los rebotes pueden desencadenar episodios de epilepsia y ser muy desorientados para usuarios con trastorno vestibular o sensorial.
• Si no puedes evitar el parpadeo de animaciones en tu proyecto, sigue las instrucciones técnicas de WCAG.
• Puedes, además, proporcionar una advertencia avanzada de contenido parpadeante y una versión alternativa del contenido sin el efecto de parpadeo.

Ofrece configuraciones para reducir el movimiento

• Considera diseñar una forma fácil para que los usuarios puedan reducir o desactivar el diseño de movimiento.
• Si el usuario deshabilita el movimiento, debes asegurar que aún puede entender y usar la interfaz si él.

Evita el parallax

• El movimiento donde el fondo y el primer plano se mueven a diferentes velocidades. Si lo usas, hazlo con moderación.
• El paralaje puede provocar náuseas, desorientación o convulsiones a usuarios con trastornos vesiculares y epilepsia.
• Implementarlo de manera responsable, requiere darle a tus usuarios cierto nivel de control para apagar ese movimiento.

Conserva el diseño de movimiento a menos de 1/3 de la pantalla

• El diseño de movimiento que es grande o llena la pantalla puede desorientar o causar náuseas a las personas.
• Asegura que los usuarios con baja visión no se sientan abrumados por el movimiento que se posiciona en su pantalla.
• Diseña animaciones pequeñas y simple, asegurando que escalen a diferentes tamaños de pantalla.

Recordad...

La accesibilidad es un desafío único que permitirá mejorar el diseño general de un sistema.

Es una faceta importante del diseño inclusivo y garantiza que las personas, independientemente de su nivel de habilidad o tecnología, puedan usar el sistema sin barreras.

-----------------------------------------------------------------------------------------------------------------------------------------------------------------

*Fuentes bibliográficas:

Freepik (imagen: People vector created by pch.vector)

UX/UI Motion (Carolina Aguilera)