Comment animer une coche de réussite
Comment animer une coche qui confirme une action : tracé, timing, séquence avec l'interface autour, et le signal accessible qu'elle ne remplace pas.
À retenir
Une coche de réussite doit confirmer une action terminée, pas la célébrer. Tracez le trait d'un seul mouvement fluide, ou mettez la forme à l'échelle depuis son centre, et restez bref. Laissez l'interface autour se poser d'abord, puis jouez la marque. Associez-la toujours à un texte ou à une région live, car une coche animée n'annonce rien à un lecteur d'écran.
Décidez ce que la coche confirme
Une coche après l'enregistrement d'un formulaire dit que les données ont été acceptées ; après un paiement, elle dit que le paiement est passé. Ce sont des promesses différentes, et l'animation ne doit pas suggérer plus de certitude que le système n'en a. Si le résultat est encore en attente, montrez d'abord cet état.
Tracez le trait au lieu de faire surgir la forme
L'animation la plus convaincante suit le tracé. En SVG, fixez stroke-dasharray et stroke-dashoffset à la longueur du tracé, puis animez le décalage vers zéro : la ligne semble s'écrire. Mettre l'icône entière à l'échelle est plus simple et fonctionne, mais ressemble à un autocollant.
Séquenciez avec le conteneur
La marque vit souvent dans un bouton, une carte ou une boîte de dialogue. Si le conteneur bouge encore, la coche entre en concurrence avec lui. Posez d'abord le conteneur, puis tracez la marque ; quelques images de relais suffisent pour que l'ensemble se lise comme un seul événement.
Restez bref
L'utilisateur attend la permission de continuer, et une animation longue devient un obstacle. Tracez vite, puis laissez l'interface avancer. Si l'application reste à l'écran, la marque peut rester immobile ; elle n'a pas besoin de boucle ni de rebond.
Accessibilité : dites-le, ne le montrez pas seulement
Les utilisateurs de lecteurs d'écran ne voient pas le tracé. L'état de réussite a besoin d'un texte, d'un libellé mis à jour ou d'une annonce de région live. Évitez que la coche soit la seule différence entre succès et échec, car la couleur et la forme passent facilement inaperçues.
Haptique et son sont facultatifs
Sur mobile, une vibration légère peut renforcer la marque et certaines applications ajoutent un son court. Les deux doivent être optionnels et respecter les réglages du système. Ne laissez jamais l'animation être la seule confirmation que l'action a fonctionné.
Extrait d’implémentation en production
/* Draw an SVG check by animating the dash offset */
.check path {
stroke-dasharray: 24;
stroke-dashoffset: 24;
animation: draw 320ms ease-out forwards;
}
@keyframes draw {
to { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
.check path {
animation: none;
stroke-dashoffset: 0;
}
}Principes clés à retenir
- Ne jouez la marque de réussite que lorsque le résultat est confirmé
- Tracer le trait SVG se lit mieux que faire surgir l'icône
- Posez le conteneur, puis animez la marque
- Restez bref, car l'utilisateur attend pour continuer
- Annoncez aussi la réussite par du texte ou une région live
Questions fréquentes
Sources
- stroke-dasharray — MDN Web Docs
- ARIA live regions — MDN Web Docs
- Understanding Success Criterion 2.3.3: Animation from Interactions — W3C WAI