Comment intégrer confettis et célébration sans surcharger l'interface
Découvrez comment intégrer des animations de célébration : performances Canvas vs DOM, quand elles enchantent et quand elles agacent, et respect du mouvement réduit.
À retenir
L'animation de célébration doit être réservée à des accomplissements majeurs, comme la finalisation d'un parcours d'intégration ou un achat important. Elle doit être rendue sur un canvas ou WebGL indépendant pour ne pas encombrer le DOM, s'estomper en moins de 2,5 secondes et ne jamais empêcher l'utilisateur d'interagir avec la page.
Quand l'enthousiasme est mérité et quand il agace
Déclencher des confettis pour des actions anodines comme l'enregistrement d'un brouillon banalise l'effet et irrite les utilisateurs réguliers. Réservez la fête aux étapes marquantes où l'utilisateur ressent un véritable accomplissement.
Performances : Canvas vs éléments DOM
Créer des centaines de balises <div> dans le DOM pour simuler des particules dégrade rapidement la fluidité et l'autonomie sur mobile. Utilisez un élément <canvas> en pointer-events: none qui dessine les particules et les libère de la mémoire dès qu'elles quittent l'écran.
- Rendez dans un canvas temporaire hors du flux de document
- Appliquez pointer-events: none pour permettre les clics à travers
- Limitez le nombre de particules à 60-100 sur mobile
- Nettoyez le canvas et stoppez la boucle d'animation dès la fin
Respecter le mouvement réduit
De nombreuses personnes ressentent des vertiges face aux explosions de particules à l'écran. Sous prefers-reduced-motion, remplacez les confettis par une icône statique festive ou une bannière de félicitations discrète.
Coordination avec audio et retours haptiques
Si vous associez la célébration à un son ou une vibration sur mobile, permettez toujours de le couper et privilégiez une vibration haptique brève et légère.
Principes clés à retenir
- Réservez les confettis aux étapes majeures, pas aux tâches de routine
- Utilisez Canvas avec pointer-events: none pour préserver le DOM
- Limitez la durée de l'effet à 2 ou 2,5 secondes au maximum
- Fournissez une illustration statique sous mouvement réduit
Questions fréquentes
Sources
- Designing for Delight — Nielsen Norman Group
- HTML Canvas 2D Context — W3C