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)