Comment animer une illustration d'état vide (Empty State)
Découvrez comment animer les écrans d'état vide : animation d'entrée engageante, boucles discrètes, légèreté du fichier et clarté de l'appel à l'action.
À retenir
L'animation d'un état vide doit transformer un écran sans données en une invitation claire à agir. Elle doit présenter une courte animation d'entrée qui pose le décor, suivie d'un état de repos très discret ou statique qui ne dérange pas. Sa mission principale est de guider le regard de l'utilisateur directement vers le bouton d'action central.
La psychologie de l'écran sans données
Une page entièrement blanche donne l'impression d'une application abandonnée ou en panne. Un état vide soigné avec une illustration animée apporte de la chaleur, explique quel type de données apparaîtra et dissipe l'hésitation du nouvel utilisateur.
Animation d'entrée vs boucle permanente
Distinguez l'apparition du repos. Jouez une animation plaisante de 500 à 800 ms à l'arrivée pour assembler l'illustration. Ensuite, immobilisez l'image ou limitez-vous à une respiration visuelle extrêmement lente.
- Construisez l'illustration à l'arrivée avec un ressort doux
- Bannissez les boucles rapides qui détournent l'attention en continu
- Orientez le regard ou la composition vers le bouton principal
- Fournissez un texte clair indiquant quoi faire immédiatement
Format de fichier et impact sur le bundle
Bannissez les GIFs lourds ou les vidéos MP4 qui consomment de la bande passante mobile. Privilégiez des vecteurs SVG interactifs, des fichiers Lottie nettoyés ou des scènes ExodeUI dont le poids ne dépasse pas quelques kilo-octets.
Considérations de mouvement réduit
Sous prefers-reduced-motion, affichez l'illustration complète directement dans son état de repos final, sans phase de construction ni balancement.
Principes clés à retenir
- Privilégiez une animation d'entrée et évitez les boucles distrayantes
- Guidez la composition visuelle vers le bouton d'appel à l'action
- Utilisez des formats vectoriels légers au lieu de GIFs volumineux
- Affichez l'illustration statique sous mouvement réduit
Questions fréquentes
Sources
- Empty States Best Practices — Nielsen Norman Group
- Empty State Design — Material Design 3