Usamos cookies. Tienes opciones. Las cookies nos ayudan a mantener el sitio funcionando sin problemas e informar sobre nuestra publicidad, pero si deseas realizar ajustes, puedes visitar nuestro Aviso de cookies para más información.
Utilizamos cookies propias y de terceros para analizar su actividad en el sitio web con el objetivo de enviarle publicidad personalizada y mejorar el funcionamiento de la web. Puedes aceptar todas las cookies pulsando el botón “ACEPTAR” o seleccionarlas en función de su funcionalidad pulsando el botón “AJUSTES”.
×

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)

En nuestra compañía