Principios de animación funcional: moverse con un propósito

La animación funcional explica un cambio, dirige la atención o confirma una acción. Duraciones de NN/g, easing, frecuencia y movimiento reducido.

info Definición Rápida

La animación funcional es el movimiento en una interfaz que cumple una tarea: explica un cambio de estado, dirige la atención a un elemento o confirma que una acción se ejecutó. Se opone a la animación decorativa, que añade movimiento sin aportar información. La regla básica: si quitar la animación no hace perder nada importante, probablemente era decorativa.

¿Para qué sirve la animación en una interfaz?

Tres funciones concretas justifican casi todo el movimiento útil. La primera es explicar un cambio: un elemento que se desliza al abrir un panel muestra de dónde viene. La segunda es dirigir la atención: un elemento que aparece con suavidad indica dónde mirar a continuación. La tercera es confirmar: un botón que cambia al enviar le dice al usuario que su acción se registró.

Interaction Design Foundation (IxDF) lo resume así: usa la animación para mostrar al usuario dónde enfocarse dentro de la interfaz y mantén el movimiento del resto al mínimo. NN/g, en un artículo de Aurora Harley de 2014, aconseja emplear animaciones con moderación y solo cuando añaden sentido a la interacción. Y CareerFoundry propone preguntarse sin piedad si cada animación es esencial; si la respuesta es no, quitarla.

¿Qué principios de Disney sirven?

Los doce principios de animación de Disney se pensaron para personajes, no para interfaces. Algunos se trasladan bien. IxDF los aplica con ejemplos: squash and stretch en un botón de pago para atraer la atención, anticipación en un hover para mostrar que un elemento es interactivo, o una animación de descarga cuya velocidad se vincula al tamaño del archivo. Su advertencia central: si exageras demasiado, puede molestar al usuario.

El más útil en el día a día es el easing (slow in, slow out): según IxDF, sin aceleración y desaceleración al entrar y salir, las animaciones se sienten robóticas. Los demás deben usarse con criterio. En la práctica, no todo lo que funciona en una película funciona en una pantalla que alguien usa cien veces al día.

¿Cómo se eligen duración, frecuencia y easing?

Respuesta inmediata. Según NN/g, para que una animación se perciba como causa y efecto, el efecto debe empezar dentro de los 0,1 segundos posteriores a la acción del usuario.

Duración. En otro artículo (Page Laubheimer, 2020), NN/g da cifras concretas:

Caso	Duración orientativa (NN/g)
Retroalimentación simple (checkbox, interruptor)	Cerca de 100 ms
Cambio de pantalla importante (un modal que entra)	200 a 300 ms
Movimientos grandes en pantallas grandes	Hasta 400 ms
Casi cualquier animación	Entre 100 y 500 ms; desde 500 ms empieza a sentirse lenta

La regla de fondo: usar la duración más corta que no resulte brusca, porque las animaciones suelen pasarse de largas, no de cortas. Los elementos que entran suelen necesitar un poco más de tiempo que cuando salen (su ejemplo: 300 ms para aparecer y 200 a 250 ms para desaparecer).

Frecuencia. NN/g avisa de que las animaciones que se encuentran una y otra vez son un obstáculo hacia el contenido y alargan la tarea; las que se ven con frecuencia deben ser más cortas y discretas. Además, las transiciones lentas distraen menos, y las rápidas atraen más la atención cuando ocurren fuera del foco del usuario.

Easing. NN/g recomienda con más frecuencia ease-out (empieza rápido y frena), que se siente receptivo y deja que el ojo se asiente en el elemento. Para salidas se usa a veces ease-in, aunque puede sentirse poco receptivo si arranca lento. El movimiento lineal tiende a verse poco natural. CareerFoundry añade que el movimiento debe ser suave y que conviene probar los tiempos con usuarios, ya que no da cifras.

¿Cómo se respeta el movimiento reducido?

Algunas personas tienen trastornos vestibulares o se marean con el movimiento en pantalla. Los dispositivos permiten pedir menos movimiento, y el CSS puede detectarlo con prefers-reduced-motion. MDN define esa preferencia como la señal de que la persona prefiere una interfaz que elimine, reduzca o reemplace las animaciones basadas en movimiento, y señala que escalar o desplazar objetos grandes puede disparar síntomas vestibulares. Su ejemplo cambia una animación de escala por un simple fundido de opacidad.

Dos criterios de WCAG 2.2 son relevantes:

2.3.3, Animation from Interactions (nivel AAA). Pide que la animación de movimiento disparada por una interacción pueda desactivarse, salvo que sea esencial. W3C recomienda prefers-reduced-motion como técnica para cumplirlo.
2.2.2, Pause, Stop, Hide (nivel A). Cualquier contenido que se mueva, parpadee o se desplace, empiece solo, dure más de cinco segundos y se presente junto a otro contenido debe tener un mecanismo para pausarlo, detenerlo u ocultarlo, salvo que sea esencial.

NN/g también pide respetar a quienes activaron “reducir movimiento” quitando las animaciones. Para el diseño, esto significa que cada animación no esencial debe tener una versión sin movimiento, por ejemplo un cambio de color o de opacidad. Puedes profundizar en la estrategia de movimiento reducido.

Ejemplo

Ejemplo ilustrativo: un formulario de pago que muestra una animación de carga mientras valida la tarjeta. La animación comienza en menos de 0,1 segundos tras pulsar, dura lo que tarda la validación y cambia a un icono de confirmación. El equipo añade una versión con movimiento reducido: el spinner se reemplaza por un texto de “Validando…” y el icono aparece sin deslizarse. La animación de error, en cambio, no se elimina, porque transmite información: indica dónde está el problema. Si quieres ver el caso de carga con más detalle, mira los estados de carga.

Para tu próximo diseño: lista todas las animaciones de un flujo y marca cuáles desaparecerían sin perder información. Esas son candidatas a eliminar. Después revisa cuáles tienen versión con movimiento reducido.

¿Cuándo NO conviene animar?

Cuando el movimiento retrasa la tarea. Una transición de un segundo en cada paso de un formulario cansa; según NN/g, desde 500 ms ya se siente lenta.
Cuando la animación se repite una y otra vez. NN/g las describe como obstáculos hacia el contenido.
Cuando el contenido se mueve sin pedirlo. Un carrusel automático puede distraer y, según WCAG 2.2.2, debe poder pausarse.
Cuando no hay versión sin movimiento. Si no puedes ofrecer esa alternativa, reduce la animación.

Errores comunes

Animar todo para que la interfaz “se sienta viva”.
Usar animaciones largas en acciones frecuentes.
Olvidar el easing, lo que hace el movimiento mecánico.
Ignorar prefers-reduced-motion y no ofrecer alternativa.
Aplicar los principios de Disney sin criterio, como si cada uno funcionara igual en una app.
Usar movimiento para transmitir información crítica sin texto ni otra señal que la sostenga.

Fuentes

Preguntas frecuentes

¿Qué es la animación funcional en una interfaz?

Es el movimiento que tiene un propósito: explicar un cambio de estado, dirigir la atención a un elemento o confirmar que una acción se ejecutó. Si quitar la animación no pierde información, probablemente era decorativa.

¿Cuánto debe durar una animación de interfaz?

NN/g indica que la mayoría debería durar entre 100 y 500 ms según su complejidad y la distancia que recorre. Un cambio simple, como un interruptor, ronda los 100 ms; un modal que entra puede llevar 200 a 300 ms. La regla es usar la duración más corta que no resulte brusca.

¿Qué es el movimiento reducido?

Es una preferencia del dispositivo que indica que la persona quiere menos animación. En CSS se detecta con prefers-reduced-motion. El criterio WCAG 2.3.3 (nivel AAA) pide que la animación disparada por una interacción pueda desactivarse, salvo que sea esencial.

¿Qué principios de Disney aplican a la interfaz?

Los 12 principios de animación de Disney se pensaron para personajes. IxDF aplica algunos a interfaces, como el easing (slow in, slow out), la anticipación en un hover o el squash and stretch en botones, y advierte que exagerar puede molestar al usuario.