¿Cómo diseñar animaciones accesibles para interfaces digitales?
– Este artículo incluye algunas secuencias o animaciones que pueden afectar a los lectores con sensibilidad al movimiento.
Desde que ingresé en el mundo del diseño de interfaces consideré que las animaciones eran un plus para las experiencias que tenían las personas usuarias a la hora de interactuar con nuestros productos. A fin de cuentas quién no se ha quedado maravillado, por ejemplo, con las interfaces que se crean para los lanzamientos de los últimos productos tecnológicos (tipo los teléfonos o las computadoras) con todo los efectos, las volteretas, el parallax, la brillantina, etc. Muy divertido todo ¿no?
En MeLi nos ocupamos por crear valor para nuestras personas usuarias y utilizamos las animaciones como aliadas para guiarlos a través de nuestros productos y poderles ofrecer retroalimentación de lo que está sucediendo en tiempo real. Además de enriquecer las experiencias desde un diseño divertido y que invita a la interacción.
Incluso, para flujos complejos que sabemos pueden llegar a tornarse tediosos, las animaciones controladas y bien aplicadas, nos ayudan a reducir la carga cognitiva y nos permiten entregar la información de manera progresiva mejorando la experiencia.
Pero, cuando hablamos sobre preocuparnos por crear valor para nuestras personas usuarias ¿realmente las estamos teniendo en cuenta a todas?
Al profundizar en el tema de las animaciones y gracias a nuestro equipo de accesibilidad, nos dimos cuenta de que no siempre son una experiencia placentera para todos.
Para algunas personas, resulta difícil concentrarse en interfaces animadas debido a trastornos de atención o simplemente porque no les gusta. Además, en casos más graves, cualquier tipo de movimiento puede causar malestar físico, desde náuseas y mareos hasta dolores de cabeza e incluso convulsiones en personas con epilepsia fotosensible.
Estas reacciones, conocidas como trastornos vestibulares, son causadas por daños, lesiones o enfermedades en el oído interno, encargado de procesar toda la información sensorial relacionada con el control del equilibrio y los movimientos oculares.
Si deseas obtener más información sobre la sensibilidad al movimiento, puedes consultar los siguientes enlaces:
• Designing Safer Web Animation For Motion Sensitivity
• Accessibility for Vestibular Disorders
• Animation for Attention and Comprehension
• Animation and motion
Teniendo en cuenta todo lo anterior, decidimos asumir el desafío como siempre lo hacemos en MeLi: con dedicación y una búsqueda continua por mejorar, manteniendo a nuestras personas usuarias como el eje central de nuestro trabajo para llegar a unas experiencias que más personas amen y unos productos cada vez más inclusivos.
¿Qué hicimos?
1. Investigamos y analizamos
Al reconocer que algunas de nuestras animaciones podrían causar molestias o incomodidad a las personas usuarias, nos enfrentamos con los primeros desafíos: ¿Podríamos mantener las animaciones o deberíamos eliminarlas por completo? ¿Si las eliminamos, cómo proporcionaremos retroalimentación a nuestras personas usuarias? ¿Afectará en el entendimiento de nuestros productos?
Ante esta situación, tomamos varias medidas. En primer lugar, organizamos instancias de colaboración con nuestro equipo de accesibilidad para entender desde su perspectiva y su experiencia el alcance y las posibilidades que teníamos (si no los conocen aún, los invito a leer algunas de las cosas que hacen en la sección de Accesibilidad del blog Tech).
En segundo lugar, investigamos en profundidad sobre el tema para entender las experiencias y aprendizajes de equipos que han enfrentado problemáticas similares.
Animación ≠ Movimiento:
Durante nuestra investigación, descubrimos una distinción importante: Animación no es lo mismo que movimiento. Si bien todos los elementos que se mueven pertenecen a la categoría de animación, no necesariamente todo lo animado implica un cambio de posición.
Por ejemplo, el cambio de estado en un botón se considera animación, aunque solo involucre un cambio de color y no de posición. Por otro lado, las transiciones entre banners en un carrusel o una notificación emergente desde la parte superior de la pantalla implican un desplazamiento, es decir, un cambio de posición.
Criterios para garantizar la accesibilidad:
El W3C (World Wide Web Consortium) es una institución que, junto con otras organizaciones, desarrolla las Directrices de Accesibilidad para el Contenido Web, conocidas cómo WCAG (Web Content Accessibility Guidelines).
Estás directrices funcionan como estándares internacionales que definen y estandarizan la forma en que se puede hacer que el contenido web sea más accesible para personas en situación de discapacidad.
La WCAG también proporciona especificaciones técnicas y recursos que permiten identificar y prevenir problemas de accesibilidad. Cumplir con cada uno de los criterios nos ayuda a garantizar productos y experiencias más accesibles y más usables para todos.
Dentro de las WCAG, existen 3 criterios relacionados con el movimiento en las interfaces:
• Pausar, Detener, Ocultar: Permita a las personas usuarias pausar, detener u ocultar cualquier contenido que se mueva, parpadee o se desplace; que comience o se actualice automáticamente, dure más de cinco segundos y se presente en paralelo con otro contenido. (Criterio 2.2.2 WCAG 2.2 — Level A).
• Elementos en movimiento o parpadeantes: Evite utilizar animaciones intermitentes o destellos que parpadeen más de tres veces por segundo ya que podrían causar convulsiones. Si varias animaciones parpadean secuencialmente dentro del periodo límite de tiempo, podría verse afectado el cumplimiento del criterio. (Criterio 2.3.1 — Level A y Criterio 2.3.2 — Level AAA WCAG).
• Animación a partir de interacciones: Permite a las personas usuarias interactuar con la interfaz sin depender solamente de las animaciones. La persona podrá detener cualquier tipo de movimiento, a menos que la animación sea esencial para la funcionalidad o la información que se transmite. (Criterio 2.3.3 WCAG 2.2 — Level AAA).
Preferencias de reducción de movimiento (prefers-reduced-motion):
Nuestro equipo de Accesibilidad nos puso al tanto de las preferencias de reducción de movimiento, una configuración disponible a nivel dispositivo o navegador (Android, iOS, Browser). Esta configuración permite a las personas usuarias reducir o desactivar por completo cualquier tipo de movimiento propio del sistema operativo, sitios web y aplicaciones del dispositivo.
2. Definimos un plan de acción
Al enfrentarnos al desafío de integrar las preferencias de reducción de movimiento sin generar un gran impacto en nuestros equipos de UX y desarrollo, nos planteamos la siguiente pregunta: ¿Cómo podemos lograrlo de manera efectiva y sin comprometer la calidad de nuestros productos?
Somos conscientes que realizar cambios a nivel general en nuestros productos no es tarea fácil y requiere de una planeación estratégica y cuidadosa. Sin embargo, también abrazamos una postura de beta y mejora continua. Después de todo, ¿cómo podrías tú mejorar un producto día a día sin enfrentarte a nuevos retos y a la búsqueda de soluciones innovadoras?
Con esta perspectiva en mente, definimos un plan de acción con criterios claros y accionables concretas con el objetivo de lograr una integración orgánica de las preferencias de reducción de movimiento y sumar en el bienestar de todas nuestras personas usuarias.
Clasificamos:
Teniendo en cuenta los criterios establecidos por la WCAG y la distinción entre animación y movimiento, realizamos la siguiente clasificación:
- Animaciones que no aplican a los criterios
- Animaciones que no son esenciales
- Animaciones que se deben adaptar
Animaciones que no aplican a los criterios:
Identificamos las animaciones que no involucraban ningún tipo de movimiento y, por lo tanto, no requerían ajustes, ya que no representaban desencadenantes para nuestras personas usuarias con trastornos vestibulares o preferencias por un movimiento reducido.
Hacen parte de esta categoría:
- Los objetos que aparecen y desaparecen instantáneamente sin transiciones.
- Los elementos con cambios de color o de opacidad, como los cambios de estado.
Posteriormente hicimos una categorización entre las animaciones con movimiento que no eran esenciales para la interfaz, en contraste con aquellas que sí lo eran. Comenzamos por las animaciones que no son esenciales:
2. Animaciones que no son esenciales:
Consideramos como no esenciales aquellas animaciones que no son cruciales para comprender el contenido o estado de la interfaz y que podrían causar molestias o malestar a algunas personas.
Dentro de esta categoría se incluyen:
- Los objetos animados que ocupan más de ⅓ de la pantalla o se desplazan a través de una gran distancia.
- Elementos con reproducción automática o actualizaciones automáticas.
- Efectos de parallax, movimientos multidireccionales o en el eje Z.
- Contenido con destellos o en bucle, es decir, que hagan loop.
- Elementos con animaciones de efecto de vórtice, escala, zoom o desenfoque.
- Ilustraciones animadas.
Para obtener más información sobre los posibles desencadenantes de trastornos relacionados con la animación, puedes consultar los siguientes recursos:
• How to Make Motion Design Accessible
• Designing With Reduced Motion For Motion Sensitivities
• Responsive Design for Motion
Cuando el usuario tenga activas las preferencias de reducción de movimiento, decidimos desactivar por completo estas animaciones teniendo en cuenta que no afecta en la entrega de contenido para las personas usuarias y en cambio, les proporciona una experiencia más accesible y cómoda.
Para los objetos que ocupan más de ⅓ de la pantalla o se desplazan a lo largo de una gran distancia, como nuestra conocida pantalla de feedback posterior a un pago, optamos por transiciones instantáneas minimizando al máximo los movimientos innecesarios. De ese modo, aseguramos que la información crucial que las personas usuarias deben recibir se mantenga sin generar molestias.
Para elementos con reproducción automática, actualizaciones automáticas o que se repetían en bucle, como el carrusel de la pantalla principal, decidimos eliminar por completo los efectos. De esta manera, evitamos que los banners cambien de forma continua e indefinida y en su lugar, le otorgamos control absoluto a la persona usuaria de decidir cuándo cambiar entre un banner y otro. Además, decidimos eliminar el efecto de deslizamiento horizontal en cada transición, haciendo que el cambio sea instantáneo y sin movimiento adicional.
Optamos por reemplazar todos los efectos de parallax, movimientos multidireccionales, así como las animaciones de efecto de vórtice, escala, zoom o desenfoque por transiciones instantáneas.
Y para las ilustraciones animadas tomamos la decisión de mostrar únicamente su versión estática partiendo de una composición que proporcione el contexto suficiente para que todas nuestras personas usuarias puedan comprenderlas sin necesidad del movimiento.
3. Animaciones que se adaptan:
Por último, nos encontramos con las animaciones que resultaban totalmente indispensables para la funcionalidad y la comprensión de la interfaz. En estos casos, optamos por una alternativa con un movimiento ajustado o reducido, de manera que pudiéramos mantener el feedback y la información crucial para las personas.
Un buen ejemplo es el spinner de carga que utilizamos en Meli. ¿Es esta animación absolutamente necesaria? Sin duda, es la que se encarga de proporcionarnos retroalimentación sobre lo que está ocurriendo en la interfaz, y si se detiene, podría interpretarse como un error en la página.
Entonces, ¿qué planeamos al respecto? En primer lugar, identificar los elementos problemáticos dentro de la animación.
En el caso del spinner, sabemos que presenta algunas características que pueden ser problemáticas en este contexto:
- Tiene una velocidad considerablemente rápida.
- Además, experimentaba cambios constantes de escala.
- Por último, se mantiene en bucle infinito hasta que desaparece.
Teniendo en cuenta la importancia de este tipo de animaciones y conociendo los aspectos a corregir, en el caso del spinner, planteamos realizar una alternativa adaptada a las necesidades:
- En primer lugar, reducir la velocidad de rotación.
- Eliminar por completo el efecto de escala.
- Establecer un tiempo de duración fijo de máximo 5 segundos.
3. Lo expandimos dentro de todos nuestros productos Meli
Después de comprender los pasos necesarios en nuestra estrategia de ejecución, decidimos dar inicio a la integración de las preferencias de reducción de movimiento desde nuestro sistema de diseño, Andes. De esta manera, buscamos lograr un impacto a gran escala de forma orgánica y sin requerir esfuerzo adicional por parte de los equipos de producto.
Además, comenzamos un proceso educativo a través de la documentación, con el objetivo de dar a conocer qué son las preferencias de reducción de movimiento y los beneficios que ofrecen. Asimismo proporcionamos guías y buenas prácticas para que los equipos de producto puedan adoptarlas al proponer e implementar animaciones en sus proyectos.
En última instancia, nuestro sistema de diseño es la plataforma ideal para aplicar características globales y fomentar una cultura de trabajo en equipo y consistencia en las experiencias, especialmente cuando hablamos de accesibilidad, ¿no te parece?
Ahora, cada vez que nuestros productos detecten las configuraciones predeterminadas de movimiento en los dispositivos de nuestras personas usuarias, se adaptarán automáticamente a sus necesidades, generando así valor en sus experiencias.
Y tú ¿estás agregando valor a las experiencias de tus personas usuarias a través de la inclusión?
