¿Cuánto debería durar una animación de interfaz?
Rangos de duración útiles para el movimiento de UI, por qué las salidas son más cortas que las entradas, cómo cambian la distancia y la entrada, y cuándo un muelle no tiene duración.
Idea clave
No hay una duración correcta única. La respuesta a un toque es casi instantánea, las transiciones entre vistas cercanas están en los cientos de milisegundos bajos y los cambios de pantalla completa pueden durar más. Las salidas suelen ser más rápidas que las entradas. La distancia, el tamaño, el tipo de entrada y la velocidad del dispositivo cambian la respuesta, así que trata cualquier rango como un punto de partida y pruébalo en la interfaz real.
La duración sigue a la distancia recorrida
Un tooltip que se desvanece en el sitio es un trabajo distinto de un panel que cruza la pantalla. Cuanto más lejos se mueve un elemento y más pantalla cubre, más tiempo necesita el ojo para seguirlo. Por eso las transiciones grandes pueden durar más sin sentirse lentas.
Respuesta pequeña: casi inmediata
Los estados pulsados, los cambios al pasar el cursor y los intercambios de iconos pequeños deben sentirse como una respuesta directa. Si el usuario percibe una espera entre la entrada y la respuesta, la interfaz parece rota más que animada.
Transiciones locales: cientos de milisegundos bajos
Desplegables, popovers, diálogos pequeños y paneles que se expanden son el punto medio: suficiente para mostrar de dónde vino el elemento y poco para que el usuario no espere. Es el rango que muchos sistemas de diseño publican como tokens de duración corta y media.
Cambios grandes y transiciones de página
Los cambios de pantalla completa, las hojas que cubren la ventana y las transiciones de ruta pueden durar más porque llevan más información visual. Aun así, el límite es la atención: si la animación dura más que el contenido en leerse, estorba.
Las salidas son más cortas que las entradas
Una entrada explica qué llegó; una salida solo tiene que quitarse de en medio. El usuario ya sabe qué se va, así que una salida rápida se siente ágil. Invertir esa proporción es una de las causas más comunes de que una interfaz parezca pesada.
Los muelles no tienen duración
Un muelle se asienta cuando su física se asienta, así que pedirle una duración es la pregunta equivocada. Ajustas rigidez, amortiguación y masa, y luego observas cuánto tarda en quedarse quieto. Si necesitas una duración exacta para un traspaso o un vídeo, usa una curva con duración.
Prueba en un dispositivo, no en una hoja de especificaciones
La misma duración se siente distinta en un teléfono de gama media y en un monitor de escritorio. La velocidad percibida también cambia según lo que el usuario espera. Mide la interacción real, con redes y dispositivos lentos, antes de convertir el número en un token.
Principios clave para recordar
- La duración escala con la distancia y con cuánta pantalla cambia
- La respuesta debe sentirse inmediata, no animada
- Las transiciones locales están en los cientos de milisegundos bajos
- Las salidas son más cortas que las entradas
- Un muelle tiene tiempo de asentamiento, no duración
- Prueba en un dispositivo de gama media antes de fijar un valor
Preguntas frecuentes
Fuentes
- Applying easing and duration — Material Design 3
- Motion — Apple Human Interface Guidelines
- Animation performance and frame rate — web.dev