Cada propuesta incluye alguna versión de "hacer que se sienta vivo". El instinto es correcto: el movimiento es una de las herramientas más poderosas del diseño web para comunicar calidad y dirigir la atención. La ejecución casi siempre es incorrecta.
La mayoría de los sitios web de las agencias tienen movimiento por el movimiento en sí. Fondos parallax que se desplazan a una velocidad diferente del contenido debajo de ellos, creando una desconexión espacial que se siente como un fallo visual en lugar de una elección de diseño. Animaciones activadas por scroll que se reproducen durante 800ms antes de que el elemento sea legible, agregando fricción a cada pieza de información. Objetos 3D flotantes, logotipos giratorios, marquesinas y sistemas de partículas ambientales que compiten por los mismos 600 píxeles del viewport al mismo tiempo.
El resultado es una experiencia visual que se siente costosa de la forma en que se siente costoso el escaparate navideño de una tienda por departamentos: saturada, competitiva y, en última instancia, olvidable, porque ningún elemento puede retener la atención lo suficiente como para significar algo.
El movimiento en este modo es decoración. La decoración no es intrínsecamente mala, pero tiene un costo: cuesta tiempo de carga de la página, potencia de procesamiento en dispositivos de gama media y el presupuesto de atención de cada usuario que llegó a leer algo y se encuentra filtrando animaciones.
Una vez que eliminas la decoración, el movimiento en un sitio de marketing tiene exactamente tres funciones legítimas:
1. Guiar la atención. El movimiento atrae la mirada. Esa es una respuesta humana innata: evolucionamos para notar las cosas que se mueven. Usado deliberadamente, es extraordinariamente poderoso: un elemento que ingresa al viewport crea un punto focal natural exactamente donde deseas que aterrice la atención del lector. Usado descuidadamente, significa que todos los elementos de la página compiten por la misma respuesta de atención primitiva.
2. Comunicar jerarquía. Cuando un elemento se anima en respuesta a la interacción —un botón que cambia sutilmente al pasar el cursor, una tarjeta que se eleva cuando se enfoca, un campo de formulario que se resalta al ingresar texto— comunica "esto responde a ti". Crea la distinción entre elementos interactivos y estáticos sin requerir una etiqueta. Esto es movimiento haciendo un trabajo de UX real.
3. Señalar calidad. Esto es más difícil de definir pero inmediatamente legible para cualquiera que haya pasado tiempo en productos web premium. Cuando una página se carga y sus elementos se acomodan con una aceleración precisa y considerada —no una transición genérica, sino una curva cubic-bezier elegida específicamente que se siente ponderada correctamente para el elemento— comunica que alguien tomó una decisión deliberada sobre cada detalle. Esa comunicación ocurre antes de leer una palabra. Establece la relación de la marca con el oficio.
Todo lo demás es decoración. La pregunta honesta para cada animación es: ¿cuál de estos tres trabajos está haciendo?
Los sitios de los que estamos más orgullosos no se sienten como si tuvieran mucha animación. Se sienten inevitables. Cada elemento aterriza exactamente donde debe, cuando debe. Ese es el trabajo.
Cada decisión de animación en un proyecto de LegitVA se evalúa frente a tres preguntas. Si no puede responder al menos dos de ellas, no se lanza.
Documentamos un lenguaje de movimiento para cada proyecto web que construimos. Esto es lo que parece nuestro punto de partida:
Las animaciones activadas por scroll son actualmente el modo dominante de movimiento con "sensación premium" en los sitios de marketing. La mayoría de ellas se implementan incorrectamente de maneras que perjudican activamente la experiencia.
El patrón que funciona: los elementos se animan a medida que llegas a ellos. El contenido aparece en el momento en que ingresa al viewport, dando a la página una sensación de desplegarse. Se siente natural porque refleja cómo funciona la lectura en sí: procesas el contenido a medida que llega.
El patrón que no funciona: animaciones largas que continúan reproduciéndose a medida que pasas de largo su punto de activación. Contenido que solo se vuelve completamente visible o legible después de que se completa una animación. Elementos cuyo tiempo de animación depende de la velocidad del scroll, creando experiencias muy diferentes a distintas velocidades. Cualquier animación que requiera que el usuario disminuya la velocidad o deje de hacer scroll para ver el contenido correctamente.
El principio que rige todo esto: el movimiento siempre debe servir al ritmo del lector, no imponer el propio.
prefers-reduced-motion. Siempre. Sin excepción. Esto no es un cumplimiento opcional de accesibilidad: es respeto básico por los usuarios cuyo perfil neurológico hace que el movimiento en pantalla sea incómodo.