Comment animer l'entrée et la sortie des notifications toast
Comment animer toasts et snackbars : de quel bord ils entrent, combien de temps ils restent, l'empilement, et pourquoi le mouvement ne peut pas porter seul le message.
À retenir
Un toast doit entrer depuis le bord auquel il appartient, rester le temps d'être lu et sortir plus vite qu'il n'est arrivé. Animez la transformation et l'opacité, raccourcissez la sortie et mettez le minuteur en pause au survol ou au focus. Le mouvement n'est pas le message : un lecteur d'écran a besoin d'une région live, et une erreur ne doit pas disparaître avant d'être lue.
Entrez depuis le bord auquel il appartient
Un toast qui apparaît en bas doit glisser depuis le bas ; une notification ancrée en haut à droite doit venir de là. Cela donne un ancrage physique au message et évite que l'œil le cherche. Évitez d'animer depuis le centre de l'écran, ce qui transforme un message court en alerte.
Entrée, maintien et sortie sont trois temps différents
L'entrée doit être remarquée ; le maintien n'est pas une animation mais du temps de lecture ; la sortie doit être rapide, car le message est déjà absorbé. Un long fondu en sortie donne une impression de lenteur juste quand l'utilisateur veut avancer.
Empiler sans sauts
Quand plusieurs toasts arrivent, décidez si les nouveaux poussent la pile, apparaissent au-dessus ou remplacent le plus ancien. Quelle que soit la règle, animez le reflux. Des toasts qui sautent à une nouvelle position pendant qu'un autre s'anime paraissent cassés.
Donnez du temps et du contrôle
Mettez le minuteur en pause au survol et au focus clavier. Ne fermez pas automatiquement les erreurs ni ce qui contient une action que l'utilisateur doit faire. Un toast qui disparaît avant d'être lu est pire que pas de toast du tout.
Le mouvement n'est pas l'annonce
L'animation signale l'apparition aux personnes qui voient l'écran. Un lecteur d'écran a besoin d'une région live avec la politesse adéquate. Les messages importants doivent rester dans le DOM assez longtemps. Utilisez le rôle status pour les confirmations courantes et le rôle alert avec parcimonie, car il interrompt.
Mouvement réduit
Remplacez le glissement par un court fondu et gardez le changement de position instantané. Le message doit toujours apparaître dans un endroit prévisible, donc ne supprimez pas le mouvement de mise en page qui aide à le trouver.
Principes clés à retenir
- Entrez depuis le bord auquel le toast est ancré
- Restez le temps de lecture, puis sortez plus vite que vous n'êtes entré
- Animez le reflux de la pile pour que les messages ne sautent pas
- Mettez la fermeture en pause au survol et au focus, sans fermer les erreurs automatiquement
- Associez le mouvement à une région live pour les lecteurs d'écran
Questions fréquentes
Sources
- ARIA live regions — MDN Web Docs
- Motion — Apple Human Interface Guidelines
- prefers-reduced-motion — MDN Web Docs