Duración de animaciones y UX de carga: pautas

¿Cuánto deben durar las animaciones de interfaz?

Cortas. Las pautas de movimiento originales de Material Design dicen que las transiciones en móviles suelen durar alrededor de 300 ms, y dan valores más específicos:

Las mismas pautas señalan que las transiciones de más de 400 ms pueden sentirse demasiado lentas. Las salidas son más rápidas que las entradas porque el usuario ya decidió avanzar.

Material 3 lo expresa con tokens de duración, desde short1 con 50 ms hasta extraLong4 con 1000 ms, en pasos de 50 ms hasta 600 ms y luego de 700 a 1000 ms. La regla que los acompaña: "la duración debe aumentar a medida que aumenta el área o el recorrido de una animación". La marca de una casilla de verificación está en el extremo corto. Una transformación de contenedor a pantalla completa está cerca del extremo largo.

Estos números corresponden a transiciones de interfaz que bloquean el siguiente paso del usuario. Los loops ambientales de personajes son distintos y se tratan más abajo.

¿Qué significan los límites de 0.1 s, 1 s y 10 s?

Los tres límites de tiempo de respuesta de Jakob Nielsen, publicados por Nielsen Norman Group, son la referencia estándar sobre cómo se percibe la espera:

• 0.1 segundos: es aproximadamente el límite para que el usuario sienta que el sistema reacciona al instante. No hace falta ninguna respuesta aparte de mostrar el resultado.
• 1 segundo: es aproximadamente el límite para que el hilo de pensamiento del usuario no se interrumpa. Nota la demora, pero no pierde la concentración.
• 10 segundos: es aproximadamente el límite para mantener la atención en la tarea. A partir de ahí, las personas empiezan a hacer otras cosas mientras esperan.

Úsalos como umbrales de diseño. Por debajo de 0.1 s, basta con un estado de pulsación. Entre 1 y 10 segundos, aproximadamente, muestra que algo está pasando. Más allá de 10 segundos, muestra cuánto falta e, idealmente, deja que el usuario salga y vuelva.

Estos límites también explican por qué las transiciones largas en la interfaz perjudican la experiencia. Una transición de pantalla de 600 ms en cada toque gasta más de la mitad del presupuesto de 1 segundo en decoración antes de que aparezca cualquier contenido.

¿Cuándo debo mostrar un spinner, una barra de progreso o una animación de carga?

Las recomendaciones de Nielsen Norman Group sobre indicadores de progreso se ajustan con claridad a la duración de la espera:

Una mascota de carga es un indicador en loop con más personalidad. Encaja en la franja de 2 a 10 segundos, como una subida de archivo, una búsqueda o una respuesta de IA. No sustituye a una barra de progreso en tareas largas, porque un loop no puede decirle al usuario cuánto avanzó el trabajo. Para esperas largas, combina el personaje con una barra real de porcentaje completado.

Las skeleton screens son una tercera opción para contenido que se carga en un diseño conocido. Muestran bloques grises de marcador con la forma del contenido que viene, lo que le indica al usuario qué esperar en lugar de cuánto tardará. Úsalas para feeds y listas, y reserva el loop del personaje para acciones que inició el usuario.

¿Cómo se deben temporizar los loops y las reacciones puntuales?

La animación de personajes se divide en dos tipos, y cada uno necesita una temporización distinta.

Los loops (idle, loading, listening, talking) se repiten mientras un estado está activo. La duración del ciclo importa menos que la fluidez. Un loop de unos pocos segundos, con una unión imperceptible y movimientos de poca amplitud, transmite calma. Los loops cortos y rápidos transmiten nerviosismo. La función de un loop es decir "sigo aquí" o "sigo trabajando" sin desviar la vista del contenido.

Las reacciones puntuales (success, error, yes, no, enter, exit) se reproducen una vez y vuelven al loop actual. Comunican un resultado, así que deben llegar rápido. No existe una duración estándar oficial para una animación de éxito; apuntar a bastante menos de un segundo para la parte legible la mantiene dentro del límite de flujo de 1 segundo de Nielsen, y el token de duración más largo de Material 3 es de 1000 ms.

Una máquina de estados (state machine) de Rive resuelve bien esta división. En un set de Charmotion, un input numérico llamado mood (de 0 a 9) selecciona el loop activo, y los triggers disparan reacciones puntuales que vuelven al estado de ánimo actual al terminar. Tu código solo indica qué pasó; el archivo se encarga de la temporización. Consulta Estados de animación de una mascota de marca para ver la lista completa.

¿Cuánto debe durar una animación para llamar la atención?

No para siempre. Un loop de atención, como una mascota de marca saludando junto a una notificación nueva, funciona porque se mueve mientras todo lo demás está quieto. Si nunca se detiene, la gente aprende a ignorarlo, y compite con lo que intentan leer.

También hay un aspecto de cumplimiento normativo. El criterio WCAG 2.2 SC 2.2.2 Pausar, detener, ocultar (Nivel A) se aplica al contenido en movimiento que empieza automáticamente, dura más de cinco segundos y se muestra junto a otro contenido. Un patrón práctico es reproducir el loop de atención durante unos segundos, con un total inferior a cinco, y luego volver a reposo (idle) o a una pose fija hasta que ocurra algo nuevo.

La misma lógica aplica a la carga. Detén el loop en cuanto termine el trabajo y cierra con una reacción puntual de resultado, para que el usuario vea el desenlace en lugar de un corte brusco. Si la espera supera los 10 segundos, cambia el loop por un indicador de progreso.

Por último, respeta prefers-reduced-motion. Para los usuarios que piden menos movimiento, la atención puede ser un cambio de color, una insignia o una pose fija. La guía de movimiento reducido explica la implementación.

¿Cómo evito que las animaciones de carga se sientan lentas?

• Responde en menos de 0.1 s. Muestra un estado presionado o inicia la animación de carga de inmediato para que el toque se sienta reconocido.
• Retrasa los indicadores en esperas muy cortas. Si una solicitud suele terminar en menos de un segundo, espera un momento antes de mostrar un spinner para que no aparezca y desaparezca de golpe.
• No retengas los resultados por la animación. Cuando lleguen los datos, termina el loop. Nunca hagas esperar a los usuarios a que acabe un ciclo.
• Mantén corto el cierre. La reacción de éxito o error debe llegar rápido; sigue la recomendación de menos de un segundo indicada arriba.
• Muestra el progreso en tareas largas. A partir de unos 10 segundos, una barra de porcentaje completado le dice al usuario cuánto le falta; un loop solo no lo hace.
• Mantén las transiciones dentro del presupuesto. Usa entre 200 y 300 ms aproximadamente para los cambios de pantalla, para que la animación no consuma la ventana de flujo de 1 segundo.

El movimiento debe hacer que la espera se entienda, no que se alargue. Si quitar una animación haría que el producto se sintiera más rápido, probablemente es demasiado larga.

Preguntas frecuentes

¿Cuál es la mejor duración para un botón o una microinteracción?

Entre 50 y 200 ms aproximadamente. Los tokens de duración más cortos de Material 3 empiezan en 50 ms, y los elementos pequeños van en el extremo corto porque la duración debe crecer con el área que cubre la animación. La mayoría de los toques deberían mostrar respuesta en menos de 0.1 s, el límite que Nielsen establece para que algo se perciba como instantáneo.

¿Debo usar un spinner para una espera de 1 segundo?

Normalmente no. Nielsen Norman Group recomienda no mostrar ningún indicador en acciones de menos de un segundo aproximadamente, ya que un spinner parpadearía brevemente y solo añadiría ruido. Reserva los indicadores en loop para esperas de 2 a 10 segundos aproximadamente y las barras de porcentaje completado para 10 segundos o más.

¿Una mascota animada puede reemplazar una barra de progreso?

Solo en esperas cortas e indeterminadas de unos 2 a 10 segundos. Una animación en loop no puede mostrar cuánto trabajo falta, así que para esperas de 10 segundos o más, NN/g recomienda un indicador de porcentaje completado. Puedes combinar el personaje con una barra de progreso.

¿Por qué las animaciones de salida son más rápidas que las de entrada?

Material Design sugiere unos 195 ms para los elementos que salen de la pantalla frente a 225 ms para los que entran. El usuario ya decidió seguir adelante, así que una salida rápida no estorba, mientras que una entrada necesita un poco más de tiempo para que se note y se entienda.

Respuestas rápidas de esta guía

• ¿Cuánto deben durar las animaciones de interfaz?
• ¿Cuándo usar un spinner vs una barra de progreso?
• ¿Qué son los límites de tiempo de respuesta de 0.1, 1 y 10 segundos?

Fuentes

• Response Times: The 3 Important Limits, Nielsen Norman Group
• Progress Indicators Make a Slow System Less Insufferable, Nielsen Norman Group
• Duration & easing, Material Design (M1)
• Motion theming (duration tokens), Material Components for Android
• Understanding SC 2.2.2: Pause, Stop, Hide, W3C WAI
• Inputs (web runtime, legacy), Rive