Imaginemos una landing de un taller de muebles. Alguien trabajó bien en ella: el título aparece desde la niebla, las fotos de las mesas entran desde la izquierda, las ventajas salen de una en una y el fondo flota despacio en sentido contrario al texto. En un monitor grande, con calma, se ve bonito, y quien hizo el diseño tiene todo el derecho a estar orgulloso.
Ahora abrimos la misma página en el metro. La persona tiene prisa, desliza el pulgar directo a los precios, y los bloques todavía se preparan para entrar. Un par de segundos de pantalla vacía y luego aparece todo de golpe. La landing se comporta como un mago que, antes de cada respuesta, saca un conejo de la chistera. La primera vez hace gracia. A la tercera solo quieres saber el precio.
Movimiento que explica algo
La animación tiene un trabajo que hace mejor que una interfaz estática. El botón cambia un poco al pulsarlo y la persona entiende que el toque contó. El producto «vuela» al carrito y se ve adónde fue. La lista se abre con suavidad y se nota de dónde salieron los puntos nuevos. Ese movimiento une dos estados de la interfaz y responde a «qué acaba de pasar».
El movimiento decorativo funciona de otra manera. Crea ambiente y muestra el carácter de la marca, y eso también puede valer, sobre todo en una página de imagen. El coste de equivocarse es distinto. Si quitas la animación funcional, la interfaz se entiende peor. Si quitas la decorativa, la página se queda más tranquila y la información es exactamente la misma. Me parece útil, antes de cada efecto, responder con honestidad a cuál de los dos grupos pertenece.
Cuando el efecto empieza a estorbar
El problema más frecuente es que los bloques aparezcan al hacer scroll. Si la persona lee despacio, todo va bien. Si desliza rápido, el contenido se queda detrás de su propia animación y, un instante, la página parece vacía o a medio cargar.
La segunda historia es más seria y no va solo de comodidad. En la explicación del W3C del criterio 2.3.3 «Animación por interacción» se dice que el movimiento disparado por el scroll provoca mareo, náuseas y dolor de cabeza en algunas personas. El parallax se nombra ahí como ejemplo de animación que a menudo no es necesaria. Es un criterio de nivel AAA, el más estricto, y el W3C no exige cumplirlo en cada sitio. Aun así, que un efecto pueda marear de verdad a parte de los visitantes conviene tenerlo en cuenta al elegir.
Hay un requisito más simple. Según el criterio 2.2.2, nivel A, el contenido que se mueve solo, dura más de cinco segundos y se muestra junto a otro contenido debe ofrecer una forma de pararlo, pausarlo u ocultarlo. Una cinta que no se detiene, o un slider que avanza solo y no tiene botón de pausa, es justo este caso.
Se puede recorrer el sitio sin movimiento
Una buena prueba para cualquier página animada es apagar todos los efectos en la cabeza. ¿El texto sigue visible? ¿Se entiende dónde pulsar? ¿Hay información importante escondida en un elemento que solo aparece después de la animación? Si el guion entero depende del movimiento, es motivo para revisarlo.
En los ajustes del teléfono o del ordenador se puede activar la reducción de movimiento, y el sitio puede respetar ese ajuste. Entre las técnicas suficientes del W3C para el criterio 2.3.3 está la comprobación CSS prefers-reduced-motion, y las vías de solución se formulan simple: evitar animación de más, dar a la persona una forma de apagarla o usar el ajuste de reducción de movimiento del sistema. Cualquiera de los tres caminos es mejor que ninguno.
Una landing que no hace esperar
La animación de una landing se planea mejor junto con el guion de la página: dónde el movimiento indica el siguiente paso y dónde el visitante necesita leer el precio con calma y dejar una solicitud. Entonces los efectos trabajan para el objetivo de la página y no discuten con él.
Qué ofrece Tilda y qué conviene decidir antes
En Zero Block cualquier elemento tiene ajustes de animación. Según la ayuda de la animación básica, es una animación de entrada (aparición simple, entrada desde cualquier lado y aparición con aumento) con duración, retardo y punto de disparo, parallax al hacer scroll y al mover el ratón, y un efecto de fijación del elemento. Además de la básica, hay animación por pasos y por disparador para guiones más complejos.
Hay muchas posibilidades, y ahí está la trampa: cada efecto se configura en un elemento concreto, y el editor no inventa por ti la regla común de «cómo se mueven las cosas en este sitio». Mejor acordarla antes de montar. Otro detalle práctico de la ayuda de la versión móvil: en el modo de edición móvil la animación no funciona, así que hay que ver cómo se comportan los efectos en el teléfono en la vista previa o en la página publicada.
Cómo decidir si un efecto se queda
Yo le haría tres preguntas a cada efecto. ¿Qué va a entender la persona gracias a él? ¿Retrasa el camino a la acción principal de la página, al precio, al formulario o al botón de pedido? ¿Qué verá quien tenga activada la reducción de movimiento, o quien desliza desde un teléfono económico? Si la primera pregunta no tiene respuesta y la segunda es «sí», el efecto seguramente sobra.
Si en un sitio ya publicado los efectos se han acumulado durante años y la página entretiene más de lo que vende, se pueden revisar como una mejora, sin rehacer todo el diseño. Al taller de muebles del principio le bastaría dejar la aparición del título y una respuesta suave de los botones, y que las mesas se queden quietas. A los muebles, en general, les sienta bien.