Animación en un sitio web: cómo mantenerla rápida y fácil para todos.
La animación puede hacer que un sitio web se sienta vivo. Mal hecha, lo vuelve lento, esconde el contenido y a algunas personas hasta las marea. Así usamos el movimiento en sitios de negocios para que ayude en vez de estorbar.
El movimiento debe explicar, no decorar.
El buen movimiento le muestra a la gente dónde mirar o cómo funciona algo: una sección que entra cuando llegas a ella, un resultado que sube en una lista, un botón que reacciona cuando lo tocas. Si una animación no ayuda a entender la página, por lo general es mejor quitarla.
Respeta a quien apaga el movimiento.
Los teléfonos y computadoras tienen una opción llamada reducir movimiento. La gente la activa porque la animación les puede causar mareo o dolor de cabeza, o simplemente porque los distrae. Un sitio bien hecho lee esa opción y se calma: nada se desliza, no hay efecto parallax, el contenido simplemente aparece.
Mantenlo rápido.
- Anima la posición y la transparencia, no el tamaño ni el diseño de la página. El navegador las maneja con poco esfuerzo, así que todo se ve fluido hasta en teléfonos viejos.
- Nunca hagas esperar a la gente por una animación antes de poder leer o tocar.
- Carga las piezas pesadas, como los videos, solo cuando aparecen en pantalla.
- Prueba en un teléfono de verdad, no solo en una computadora rápida.
Nunca escondas el contenido.
El texto se debe poder leer aunque el código de la animación no cargue. Google, las herramientas de IA y los lectores de pantalla leen la página, y ninguno se desplaza como una persona. Si tus palabras solo aparecen después de una animación, puede que algunos nunca las vean.
Lo básico va primero.
El movimiento va encima de un sitio accesible, no en lugar de uno. Cada página debería funcionar con teclado, marcar con un contorno visible lo que está seleccionado, describir las imágenes con texto, etiquetar cada campo de formulario y tener suficiente contraste para leer. En nuestro propio sitio buscamos cumplir WCAG 2.2 nivel AA, y nuestras animaciones se detienen o se calman cuando el dispositivo pide movimiento reducido. Lee nuestra declaración de accesibilidad.
Preguntas.
¿La animación hace más lento un sitio web?
Puede. Animar la posición y la transparencia, cargar las piezas pesadas solo cuando hacen falta y probar en teléfonos reales mantiene rápido un sitio con movimiento.
¿Qué es el movimiento reducido?
Una opción en teléfonos y computadoras que pide a las apps y sitios web usar menos animación. Un sitio bien hecho la lee y calma sus animaciones.
¿La animación perjudica el SEO?
No, si el texto está en la página desde el principio. El problema es cuando las palabras solo aparecen después de una animación, porque los buscadores y las herramientas de IA pueden no verlas.
¿Quieres un sitio con movimiento que siga siendo rápido y fácil de usar? Mira cómo hacemos sitios web, o mándanos un mensaje.