Cómo animar una ilustración de estado vacío (Empty State)
Aprende a animar pantallas de estado vacío: transición de entrada, bucles de reposo sutiles, peso de archivos y orientación clara hacia la acción principal.
Idea clave
La animación de un estado vacío debe transformar una pantalla sin datos en una invitación clara a interactuar. Debe presentar una animación de entrada breve que establezca la escena, seguida de un bucle de reposo sutil o estático que no distraiga. Su función es guiar la mirada del usuario directamente hacia el botón de llamada a la acción principal.
La psicología de la pantalla sin datos
Una pantalla en blanco hace que una aplicación parezca abandonada o rota. Un estado vacío bien diseñado con una ilustración animada transmite calidez, enseña qué tipo de datos aparecerán y alivia la incertidumbre del usuario que recién comienza.
Animación de entrada frente a bucle continuo
Separa la entrada del reposo. Reproduce una animación agradable de 500 a 800 ms al llegar a la pantalla para construir la ilustración. Después, detén la animación o limita el bucle a una flotación ambiental sumamente lenta.
- Construye la ilustración al entrar con un muelle suave
- Evita bucles rápidos o repetitivos que llamen la atención sin parar
- Alinea la mirada o dirección del dibujo hacia el botón principal
- Incluye texto explicativo claro que resuelva qué hacer a continuación
Formato de archivo y rendimiento del paquete
Evita GIFs pesados o videos MP4 que consumen datos móviles. Emplea ilustraciones vectoriales en formato SVG interactivo, archivos Lottie optimizados o escenas de ExodeUI que mantengan el peso por debajo de unos pocos kilobytes.
Consideraciones de movimiento reducido
Si el usuario solicita movimiento reducido, muestra la ilustración completa en su posición final sin animación de construcción ni bucles de flotación.
Principios clave para recordar
- Usa una animación de entrada para construir la ilustración y detén los bucles agresivos
- Orienta la composición visual hacia el botón de llamada a la acción
- Usa formatos vectoriales ligeros en lugar de GIFs pesados
- Muestra la ilustración en reposo directo ante movimiento reducido
Preguntas frecuentes
Fuentes
- Empty States Best Practices — Nielsen Norman Group
- Empty State Design — Material Design 3