À propos de ce cours
Cette leçon présente les animations d'interface : leurs rôles (retour, transition, orientation, état du système, plaisir), le choix des durées (100 à 500 ms) et des courbes d'accélération (décélération, accélération, standard, linéaire), la conception d'une microinteraction en quatre parties (déclencheur, règle, retour, boucle), l'accessibilité (réglage « réduire les animations », clignotements, mise en pause) et la rédaction d'une fiche de spécification pour les développeurs. Trois activités portent sur l'ajout au panier de CantineCampus.
| Durée | Niveau | Prérequis | À la fin de la leçon |
|---|---|---|---|
| 1 heure (cours et 3 activités) | Débutant, chapitre « Boutons, animations et mise en page » | Les boutons (Call To Action) et leur disposition | Vous savez décider si une animation est utile, la spécifier (durée, courbe) et la rendre accessible |
-
Objectifs
- Connaître les rôles d'une animation d'interface.
- Choisir une durée et une courbe d'accélération adaptées.
- Concevoir une microinteraction en quatre parties.
- Rendre les animations accessibles.
- Spécifier une animation pour les développeurs.
-
Pourquoi animer une interface ?
- Dans la vie réelle, rien ne se téléporte : un objet glisse, tombe, s'ouvre. Une interface sans mouvement change d'état brutalement, et l'usager peut ne pas voir ce qui a changé.
- Une animation bien conçue explique: d'où vient cet élément, où est-il parti, l'action a-t-elle marché ?
- Mal utilisée, elle ralentit, distrait, voire rend malade certaines personnes. La question n'est donc pas « est-ce joli ? » mais « qu'est-ce que l'usager comprend grâce à elle ? ».
-
Les rôles d'une animation
- Retour (feedback) : confirmer qu'une action a été prise en compte. Le bouton s'enfonce, le badge du panier passe de 1 à 2.
- Transition: relier deux états ou deux écrans. La carte d'un plat s'agrandit en page de détail : l'usager sait d'où vient la page.
- Orientation: attirer l'attention sur un changement. Un message d'information apparaît en glissant.
- État du système: montrer que l'application travaille. Un indicateur de chargement, une barre de progression.
- Plaisir: marquer un moment réussi, avec mesure. Une petite animation quand la commande est confirmée.
- Une animation qui n'a aucun de ces rôles est décorative : on la supprime.
-
Durées et courbes
- Une animation d'interface est courte: de 100 ms pour un retour immédiat (appui) à 400-500 ms pour un grand changement (nouvel écran).
- Plus l'élément est grand ou le déplacement long, plus l'animation dure ; au-delà de 500 ms, elle fait attendre.
- La courbe d'accélération (easing) décrit la vitesse au cours du temps. Rien dans la nature ne bouge à vitesse constante.
- Décélération (ease-out) pour un élément qui entre: il arrive vite et se pose doucement.
- Accélération (ease-in) pour un élément qui sort: il part doucement et disparaît vite.
- Standard (ease-in-out) pour un déplacement sur l'écran ; linéaire seulement pour une progression ou une rotation continue.
- Fixez ces valeurs dans la charte, sous forme de tokens:
duree-courte: 150ms,duree-moyenne: 250ms,courbe-entree: ease-out.
-
Concevoir une microinteraction
- Une microinteraction est un petit moment qui accomplit une seule tâche : ajouter au panier, cocher une case, aimer un plat.
- Selon le designer Dan Saffer, elle a quatre parties :
- Les quatre parties :
- le déclencheur: ce qui la lance (un appui, une donnée qui arrive) ;
- la règle: ce qui se passe vraiment (le plat est ajouté) ;
- le retour: ce que l'usager voit, entend ou sent (le « + » devient ✓, le badge change) ;
- les boucles et modes: ce qui change ensuite (au 2e appui, la quantité passe à 2).
- Décrire ces quatre parties évite d'oublier un cas : que se passe-t-il si l'ajout échoue ? Si le plat n'est plus disponible ?
🍽 Exemple : CantineCampus
- Ajouter un plat: appui sur « + » → le bouton se réduit légèrement (100 ms), devient ✓, le badge du panier passe à 2 avec un petit rebond (200 ms, décélération).
- Un lecteur d'écran annonce « Couscous ajouté au panier ». Si le plat est épuisé, le « + » secoue doucement et un message explique pourquoi.
-
Des animations accessibles
- Certaines personnes souffrent de troubles vestibulaires: un grand mouvement (parallaxe, zoom, défilement automatique) leur donne des nausées ou des vertiges.
- Les systèmes proposent un réglage « Réduire les animations ». L'interface doit le respecter (en CSS :
prefers-reduced-motion) en remplaçant le mouvement par un simple fondu, ou par rien. - Pas de clignotement de plus de trois fois par seconde : il peut déclencher une crise d'épilepsie (WCAG, critère 2.3.1).
- Une animation qui dure plus de cinq secondes (carrousel, bannière) doit pouvoir être mise en pause (WCAG, critère 2.2.2).
- L'information ne passe jamais par le mouvement seul: un texte l'accompagne.
⚠ Piège : une animation qui oblige à attendre (écran d'accueil animé de 3 secondes, menu qui s'ouvre lentement) agace dès la deuxième utilisation. L'usager doit pouvoir agir pendant l'animation.
-
Spécifier une animation
- Le développeur ne peut pas deviner une animation à partir d'une maquette fixe. Pour chacune, rédigez une fiche:
- La fiche animation :
- l'élément animé et le déclencheur;
- le rôle (retour, transition, orientation, état, plaisir) ;
- ce qui change (position, taille, opacité, couleur) ;
- la durée, le délai et la courbe;
- la version réduite;
- le texte qui accompagne l'animation.
- Dans Figma, le Smart Animate des prototypes permet de montrer l'animation entre deux variantes ; une courte vidéo complète la fiche.
💡 À savoir
- Animez de préférence l'opacité et la transformation (déplacement, échelle) : ce sont les propriétés que les navigateurs et les téléphones animent le plus facilement, sans saccade.
- Limitez-vous à quatre ou cinq animations dans toute l'application : celles qui servent vraiment le parcours.
-
Aide-mémoire
-
Activités
Activité 1Observer les animations · ⏱ 15 min
- Dans deux applications de votre téléphone, relevez cinq animations (ouverture d'un menu, ajout à un panier, chargement…).
- Pour chacune, indiquez son rôle et estimez sa durée (rapide, moyenne, lente).
- Activez le réglage « Réduire les animations » de votre téléphone : qu'est-ce qui change ?
📁 Résultat attendu : un tableau de cinq animations : application, élément, rôle, durée, version réduite.
Activité 2Choisir la bonne courbe · ⏱ 10 min
- Associez une courbe (décélération, accélération, standard, linéaire) à chaque cas : un message qui apparaît, un panneau qui se ferme, une barre de chargement, une carte qui se déplace.
- Justifiez chaque choix en une phrase.
📁 Résultat attendu : quatre associations justifiées.
Activité 3Spécifier l'ajout au panier · ⏱ 25 min
- Décrivez la microinteraction « Ajouter au panier » de CantineCampus en quatre parties (déclencheur, règle, retour, boucle), sans oublier le cas « plat épuisé ».
- Rédigez sa fiche animation : durée, courbe, version réduite, texte annoncé.
- Dans Figma, montrez-la avec deux variantes du bouton et un Smart Animate.
📁 Résultat attendu : la fiche animation et le prototype Figma de l'ajout au panier.
-
Erreurs fréquentes
| Symptôme | Cause | Solution |
|---|---|---|
| Animation d'accueil de 3 s à chaque ouverture | Animation décorative | La supprimer ou la réduire à 300 ms |
| Tout bouge, rien ne se remarque | Trop d'animations | Quatre ou cinq animations utiles au total |
| Mouvement mécanique | Courbe linéaire partout | Décélération pour entrer, accélération pour sortir |
| Nausée signalée par un usager | Grand mouvement, parallaxe | Respecter « réduire les animations » |
| Le développeur a « fait au mieux » | Animation non spécifiée | Une fiche par animation |
-
Bilan
- Une animation sert à comprendre: retour, transition, orientation, état du système, plaisir.
- Elle est courte (100 à 500 ms) et suit une courbe naturelle.
- Une microinteraction se décrit en quatre parties : déclencheur, règle, retour, boucle.
- Elle est accessible: réglage « réduire les animations », pas de clignotement, jamais bloquante.
- Elle se spécifie dans une fiche, avec ses tokens de durée et de courbe.
La meilleure animation est celle que l'usager ne remarque pas, mais sans laquelle il se serait perdu.