Animación con propósito

• La animación, cuando se usa adecuadamente, ayuda a mejorar la previsibilidad, la velocidad percibida y el disfrute de la interfaz
• Pero la animación usada sin criterio puede provocar imprevisibilidad y latencia, e incluso reducir la confianza del usuario
• Un primer paso importante es definir un propósito claro para la animación
• Cuanto mayor sea la frecuencia de uso de una animación, más deseable puede ser una experiencia sin animación
• La velocidad de la animación también es decisiva para el rendimiento cognitivo y la satisfacción del usuario

---

El propósito de la animación

• El uso correcto de la animación mejora la previsibilidad, la velocidad percibida y el placer de uso de una interfaz
• Una mala animación puede hacer que la interfaz se sienta lenta, confusa y desagradable, además de afectar negativamente la confianza del usuario en el producto

La importancia de la intención

• Antes de aplicar una animación, hay que preguntarse: "¿Cuál es el propósito de esta animación?"
• Por ejemplo, la animación de marketing de Product Intelligence de Linear, en lugar de usar una imagen estática, ayuda al usuario a entender cómo funciona esa función mostrándolo directamente
• El sutil efecto de reducción de escala al presionar un botón hace que la interfaz se sienta más viva y receptiva
• La animación de aparición del toast en Sonner tiene dos propósitos
  • Hacer que aparezca de forma natural en vez de surgir de golpe, eliminando la sensación de extrañeza
  • Hacer que entre y salga en la misma dirección para mantener la consistencia espacial y volver más intuitivo el gesto de swipe-down
• A veces, la propia "alegría" puede ser el propósito de una animación, y en interacciones poco frecuentes puede ofrecer una experiencia distinta y memorable
• Sin embargo, cuando aumenta la frecuencia de uso, esa alegría inicial puede convertirse rápidamente en molestia y demora

Frecuencia de uso y animación

• Cuanto más a menudo se vea una animación, mayor puede ser la fatiga del usuario y la demora en la tarea
• Por ejemplo, en situaciones donde Raycast se usa repetidamente, una animación innecesaria se convierte en una gran distracción
• En menús, listas y situaciones operadas con teclado que se usan de forma repetida, es preferible eliminar por completo la animación
• De hecho, se presenta un ejemplo donde la animación al usar el teclado termina reduciendo la velocidad de respuesta
• Una experiencia sin animación puede ser la mejor opción en ciertos escenarios, como tareas repetitivas o de gran volumen

Percepción de velocidad y capacidad de respuesta

• Excepto en sitios de marketing, todas las animaciones de UI deberían funcionar rápido para mejorar el rendimiento percibido y la capacidad de respuesta
• Un spinner de carga que gira más rápido puede hacer que el tiempo de carga se sienta menor, incluso si la duración real es la misma
• Una animación de dropdown de 180 ms se siente mucho más reactiva que una de 400 ms
• En general, las animaciones de UI deberían durar menos de 300 ms
• En los tooltips, conviene una pequeña demora en la primera aparición, pero una vez abiertos, responder de inmediato sin animaciones adicionales ofrece la mejor experiencia (ver Radix UI y Base UI)
• Las transiciones sin demora entre tooltips mejoran la experiencia del usuario sin perjudicar el propósito

Construir una gran interfaz

• La animación no es el objetivo en sí; el objetivo final es construir una excelente interfaz de usuario
• Es importante crear experiencias que los usuarios quieran usar con gusto en su día a día
• A veces se necesita animación, pero según el contexto, "sin animación" puede ser la mejor decisión
• Saber cuándo y cómo aplicar animación es una habilidad clave en el diseño UI/UX

Cierre

• Para crear interfaces sobresalientes, hace falta una comprensión profunda del uso de la animación
• Se pueden consultar materiales adicionales de teoría y práctica en "Animations on the Web"

[GN⁺]

Comentarios en Hacker News

• Cada vez que los diseñadores hablan de animación, tienden a usar palabras como “polish” o “deleite” y a poner esos elementos en la balanza frente a la latencia percibida; no es que esté totalmente mal, pero sí deja varias cosas pendientes

  1. Creo que la parte del deleite (delight) está sobrevalorada; la mayoría de la gente que de verdad se maravilla con animaciones vistosas son otros diseñadores
  2. Más que nada, al decidir cuándo usar animación, es útil enfocarse en el state; si existe el riesgo de que el usuario no perciba bien un cambio de estado, ahí la animación sirve como apoyo visual; creo que ese es el propósito principal de usar animación, lo demás es vanidad

  • Sobre la idea de que “el deleite está sobrevalorado”, si se usan bien y no estorban, las animaciones con sentido dentro del software sí tienen un efecto positivo claro para los usuarios, aunque quizá sea un poco distinto al efecto que mucha gente espera
    Una animación bien diseñada es ese último 20% que separa algo “bueno” de algo “excelente”; no es indispensable, pero sí puede ser lo que te diferencie frente a la competencia
    Una razón realista por la que la animación puede aportar valor es parecida a cómo, en productos físicos, la gente usa la sensación de peso o durabilidad como criterio de calidad premium
    Sin embargo, durante la última década el diseño de UI se ha inclinado demasiado hacia la “vibra”, la “puesta en escena impactante” y el “branding”, mientras se ha descuidado la investigación seria y la utilidad práctica sobre cómo usar animaciones de forma realmente efectiva
    Creo que ya es hora de que el diseño de UI vuelva a centrarse en la usabilidad práctica

  • Me sorprende que se considere una clase de animación al sutil efecto de reducción de escala que ocurre al hacer clic en un botón; esto es retroalimentación visual muy básica para indicar que algo se puede pulsar y que el clic fue reconocido

  • En diseño de software, esa actitud de valorar el “deleite” en sí se ve mucho entre los fans del Apple de antes, por ejemplo en cómo lamentan la pérdida del carácter juguetón de Apple después de Jobs
    No conozco un texto definitivo que resuma este tema por completo, pero esta nota breve lo menciona
    Ese gusto por este tipo de detalles no es solo una preferencia de ciertos diseñadores ni un fenómeno de nicho, sino una de las características centrales del fandom de Apple

  • A menudo me topo con diseñadores que trabajan en entornos B2B pero diseñan con una sensibilidad B2C
    En B2B, especialmente en enterprise, esto solo será una herramienta más para el trabajo diario del usuario, así que animaciones vistosas, gradientes llamativos y coloridos —que hoy en día a veces hasta significan “IA”— no ayudan al trabajo real y más bien distraen
    Ese tipo de elementos decorativos solo entorpece que el usuario recorra con eficiencia un dashboard centrado en texto
    Si quieres crear una experiencia “bonita y agradable”, entonces una empresa de workflows tipo CRM/ERP simplemente no es el lugar indicado; eso solo tiene sentido si trabajas en una empresa donde la satisfacción emocional del usuario se conecta directamente con el valor de negocio

  • No estoy de acuerdo con que el delight esté sobrevalorado
    Por ejemplo, si alguien que usa Apple/iPhone prueba Android durante una semana, probablemente dirá que “algo se siente raro e incómodo”
    Eso se debe a que iOS tiene animaciones muy cuidadas a lo largo de toda la interacción
    Aunque el consumidor promedio no describa la experiencia con la palabra delight, sí nota claramente cuando pasa a una experiencia peor que la anterior

• Creo que Apple tiene cosas que aprender en este aspecto; muchas veces uno pierde tiempo esperando animaciones inútiles
  Por ejemplo, si haces scroll hasta abajo y luego tocas un botón, a veces tienes que pulsarlo varias veces porque no responde hasta que termina la animación de rebote (bouncing)
  La mayoría de las acciones basadas en gestos, como deslizar entre apps, cerrar notificaciones, abrir el dock o el cajón, se procesan de forma excesivamente lenta
  Las animaciones se encadenan: tiene que terminar una, luego la siguiente, y solo entonces puedes volver a interactuar
  Es irónico que haya que desactivar esas animaciones desde la configuración de accesibilidad (Accessibility) para poder usarlo con más comodidad

  • Me molesta que cuando Apple Wallet se conecta al teléfono, se ejecute una animación a pantalla completa completamente inútil y, mientras dura, no puedas hacer nada
    Bastaría con que se conectara y diera una pequeña respuesta háptica

  • Todas las animaciones de navegación de iOS están diseñadas para poder interrumpirse a la mitad y hacer otra cosa; no hace falta esperar obligatoriamente hasta el final

  • En macOS, al cambiar entre escritorios/Spaces, todas las entradas siguen aplicándose al espacio anterior hasta que termina por completo la animación, y eso es desesperante
    Apple ya no está cuidando bien el UI/UX; en organizaciones tan grandes es difícil crear una buena experiencia de usuario sin alguien con poder de decisión fuerte, como Steve Jobs
    Y a menudo los diseñadores no se dan cuenta de que el “usuario promedio” no es fan suyo ni de su producto, sino alguien que solo quiere funciones básicas y consistencia
    Cada vez que cambies algo, deberías mostrárselo a tu abuela, y si no dice “wow, esto sí está mucho mejor”, entonces no deberías cambiarlo

• Yo, de hecho, quisiera que la velocidad de las animaciones fuera todavía más rápida
  300ms es demasiado lento para mí
  Prefiero animaciones tan cortas que casi no se perciban
  De hecho, puede que solo notes su existencia cuando las quitas
  Más largas que eso me parecen demasiado lentas

  • Yo antes también usaba unos 250ms, pero últimamente bajé a 200ms
    200ms es la velocidad ideal para una transición de UI en la que puedas captar qué cambia, cómo cambia y por qué cambia
    Si no cumple con ese criterio, entonces lo correcto es eliminar por completo la transición
    Además, 200ms es cómodo porque en CSS se escribe fácil como .2s
    Por debajo de 150ms puede empezar a sentirse como un glitch de renderizado, así que si es demasiado corta, la animación termina perdiendo sus ventajas

  • Lo primero que hago cuando uso un teléfono Android por primera vez es entrar al modo desarrollador y poner la velocidad de animación al doble
    Verlo funcionar a velocidad normal se me hace desesperantemente lento

• La animación en diseño web, en la práctica, no es tan distinta de los efectos de PowerPoint
  En la mayoría de los casos, uno o dos efectos rápidos de fundido cruzado bastan para lograr una UI limpia y ordenada, y rara vez hace falta más que eso

• Yo creo que la animación solo tiene sentido cuando confirma algo que el usuario ya sabe; no debería ser el medio principal para transmitir información
  Es decir, aunque desactives las animaciones, deberías poder trabajar a la misma velocidad y entender el flujo exactamente igual
  El propósito de la animación es conectar con suavidad el recorrido de UX y dar pequeñas señales de que el estado coincide con lo esperado
  Por ejemplo, si al pasar el mouse (hover) algo se resalta rápidamente, ya no necesito gastar atención extra en confirmar que mi cursor está sobre el control
  Como en el ejemplo de los tooltips emergentes, cuando después de aparecer una vez ya se muestran instantáneamente en 0ms, se siente como una señal de que realmente entienden bien el flujo de UX del usuario
  Ese es un ejemplo clásico de una animación diseñada con buen entendimiento del recorrido de UX

• Mi regla es que, si el usuario tiene que esperar a que termine una animación para poder seguir interactuando, esa animación debe eliminarse
  Y también creo que siempre se debe ofrecer una opción de accesibilidad para desactivar todas las animaciones

  • Para eso, la media query prefers-reduced-motion de CSS es realmente útil
    Consulta esta documentación

• Sobre la animación de presentación de la función Product Intelligence de Linear, entiendo la intención del diseñador, pero en la práctica no ayuda nada a comprenderla
  Esa animación con un ángulo 3D raro no parece relacionada con la UI real
  Ese efecto 3D sí sugiere que cierto recuadro en pantalla —es decir, el producto— no es la página que estoy leyendo, pero aun así no ayuda mucho a entender la función en sí
  El efecto de aparición (fade-in) hace que esa zona llame la atención, pero no aporta demasiado a comunicar el contenido

• La animación “encantadora” se ve bien en mi pantalla (por ejemplo, una M1 MacBook Pro), pero en otras pantallas (por ejemplo, un monitor IBM ThinkVision de baja resolución) se ve muy torpe y lenta
  Video de demostración en MacBook
  Video de demostración en monitor de baja calidad
  Dependiendo de en qué monitor lo veas, puede sentirse completamente distinto

  • Me pregunto si estás usando ese monitor IBM en su resolución nativa (native resolution)

• Sobre la idea de que “un spinner que gira más rápido hace que parezca que carga más rápido”, yo más bien he visto tanto mal diseño que abusa de spinners rápidos cuando en realidad no está pasando nada, que un spinner lento me transmite más confianza

  • Yo solo confío en barras de carga que muestran progreso de forma no lineal; en esos casos sí puedes verificar claramente que algo real está avanzando por etapas

  • Un spinner lento, al contrario, me da la sensación confiable de que realmente está haciendo trabajo pesado y por eso va con dificultad

• Un ejemplo inmediato de algo que me arruina el día es cuando el estado no es consistente mientras una animación está corriendo
  Por ejemplo, en Windows, cuando aparece la notificación emergente de una app, si intentas cerrarla con la X antes de que termine la animación, lo que hace es abrir la notificación
  En Mac, al cambiar de escritorio, a veces una app se asoma brevemente en pantalla y luego cambia de golpe a otra; como la animación es lenta, crees que ya terminó y haces algo, solo para quedarte descolocado
  Incluso pasa de forma aleatoria a veces
  Para los diseñadores: si de verdad quieren meter animaciones, tienen que hacerlas completamente sólidas; de lo contrario, uno deja de confiar en esa app de inmediato