El motion no es decoración: es un argumento de venta

Cuando un cliente nos pide «un poco de animación para que se vea más vivo», casi siempre estamos ante el peor punto de partida posible. La animación no es una capa de barniz que se aplica al final sobre una interfaz terminada. Es una decisión de diseño con las mismas consecuencias que la tipografía o la retícula: comunica algo, tenga o no intención detrás. La única pregunta real es si comunica lo que queremos.

Lo decimos sin rodeos porque es la parte que más cuesta vender: el motion es un argumento comercial, no un adorno. Un movimiento bien cronometrado le dice al usuario «esto lo hizo alguien que sabe lo que hace» antes de que lea un solo titular. Un movimiento gratuito, lento o mal sincronizado dice justo lo contrario, y lo dice con la misma fuerza. En medio no hay neutralidad: en cuanto algo se mueve en pantalla, ya está afirmando cosas sobre tu producto.

La calidad percibida se lee antes que el texto

Hay un instante, entre que alguien llega a una pantalla y empieza a entenderla, en el que aún no ha leído nada pero ya se ha formado un juicio. En ese hueco de milisegundos el movimiento hace casi todo el trabajo. Una transición que responde al instante, con una desaceleración natural, se percibe como un producto sólido y bien construido. La misma pantalla con una animación que arranca tarde, se estira demasiado o corta de golpe se percibe como frágil, aunque el código de debajo sea idéntico. La calidad que el usuario cree ver no depende de lo robusto que sea el sistema, sino de cómo se siente al tocarlo. El motion es la principal herramienta que tenemos para gobernar esa sensación.

Guiar la atención en vez de competir con ella

El movimiento es el estímulo visual que el ojo humano no puede ignorar; nuestra periferia está cableada para detectarlo. Eso lo convierte en la herramienta más poderosa y más peligrosa del kit. Bien usado, dirige la mirada hacia donde importa: un elemento que aparece cuando el usuario completa un paso, un cambio de estado que confirma que su acción tuvo efecto, una jerarquía que se revela en el orden en que hay que leerla. Mal usado, secuestra la atención hacia lo irrelevante: un carrusel que gira solo, un icono que late sin motivo, seis cosas moviéndose a la vez que obligan al ojo a elegir sin saber por qué. La pregunta que nos hacemos ante cada animación no es «¿queda bien?», sino «¿hacia dónde manda la mirada, y es ahí donde la necesitamos?». Si no sube conversión, no reduce dudas ni acelera una tarea, el movimiento sobra: está gastando la atención del usuario sin devolverle nada.

Timing y easing: el criterio que no se ve

Casi todo lo que distingue una animación de estudio de una de plantilla vive en dos parámetros que nadie nombra: la duración y la curva. La duración tiene un rango honesto y estrecho. Por debajo de unos 150 milisegundos el cambio se percibe como un salto brusco; por encima de 400 el usuario espera y la interfaz se siente lenta. La mayoría de las microinteracciones de UI viven entre 200 y 300 milisegundos, y una transición de página rara vez debería pasar de 400. El easing es aún más determinante: el movimiento del mundo físico nunca es lineal, arranca y frena con inercia. Una curva que desacelera al final (algo cercano a ease-out) se siente natural porque imita cómo se detienen los objetos reales. Una velocidad constante, la que sale por defecto si no tocas nada, se siente mecánica precisamente porque no existe en la naturaleza. Elegir bien estos dos números no es un detalle de acabado: es la diferencia entre que algo parezca diseñado o parezca que simplemente ocurrió.

Nadie va a decirte «qué buen easing». Van a decir que tu producto se siente caro. Es lo mismo dicho por alguien que no sabe que lo está diciendo.

— Sors

El rendimiento: una animación que tartamudea miente

Toda esta intención se desmorona si la animación no corre fluida. Una transición que salta de fotograma, que hace ese tartamudeo que en inglés llaman jank, no comunica calidad: comunica que algo va mal por debajo, aunque el usuario no sepa formularlo. Y ese juicio se traslada al producto entero. Aquí el diseño y la técnica dejan de ser dos mundos: para mantener los 60 fotogramas por segundo hay que animar solo las propiedades que el navegador puede resolver en la GPU sin recalcular la página, básicamente transform y opacity. Animar cosas como el ancho, la altura o la posición con top y left obliga al navegador a rehacer el cálculo de dónde va cada elemento en cada fotograma (lo que se llama layout o reflow), y ahí es donde aparece el tartamudeo. Traducido al negocio: una animación preciosa sobre el papel que hace janking en un móvil de gama media es peor que no tener ninguna, porque el usuario que más te importa convertir es justo el que la sufre. El motion que vende es el que rinde en el dispositivo real del cliente, no en el portátil del diseñador.

Accesibilidad: prefers-reduced-motion no es un extra

Hay un grupo de usuarios para los que el movimiento no es agradable, sino literalmente molesto o incapacitante: personas con trastornos vestibulares a las que un desplazamiento paralaje o un zoom brusco les provoca mareo o náuseas reales. Los sistemas operativos permiten declarar esa preferencia, y el navegador la expone en una media query, prefers-reduced-motion, que podemos consultar y respetar. Para nosotros no es una casilla de cumplimiento: es parte de hacer bien el trabajo. Respetarla no significa apagar todo el motion, significa tener una segunda versión pensada — sustituir un desplazamiento grande por un fundido suave, quitar el rebote pero mantener la confirmación de estado. La animación que confirma que una acción funcionó sigue siendo información útil incluso reducida; lo decorativo simplemente desaparece. Y hay un argumento de negocio directo, no solo ético: un flujo que marea a una parte de tus usuarios es un flujo que pierde a esa parte de tus usuarios. La accesibilidad y la conversión, aquí, apuntan al mismo sitio.

Cuando defendemos una decisión de motion ante un cliente, no hablamos de que quede bonito. Hablamos de calidad percibida, de atención dirigida, de fricción que baja y de una parte de su público a la que no queremos perder. Ese es el marco correcto, y es el que convierte el motion de un capricho estético en una línea del presupuesto que se justifica sola. El movimiento por defecto, el que sale de arrastrar un componente sin decidir nada, siempre está afirmando algo sobre tu producto. La única elección real que tienes es si lo dejas hablar por su cuenta o le pones un guion.