Comment rendre naturelle l'animation d'appui d'un bouton
Guide pratique du retour à l'appui : quoi animer, de combien, à quelle vitesse, et comment le garder lisible au clavier et en mouvement réduit.
À retenir
Une bonne animation d'appui démarre sur la même image que le clic ou le toucher, modifie très légèrement une ou deux propriétés visuelles, puis revient vite. Une légère mise à l'échelle avec un changement de couleur ou d'ombre suffit en général. Le but est de confirmer, pas de décorer : gardez la zone tactile intacte, ne déplacez pas beaucoup le libellé et assurez le même retour au clavier et en mouvement réduit.
À quoi sert vraiment l'état d'appui
L'animation répond à une question : l'interface a-t-elle reçu mon entrée ? Cette question se pose dans les premières images. Si la réponse visuelle arrive après la fin du gestionnaire de clic, l'interface paraît déconnectée même quand elle fonctionne. Démarrez le changement à l'appui, pas au relâchement, et laissez le retour se faire ensuite.
Choisissez le plus petit changement lisible
Les effets d'appui qui fonctionnent bougent très peu. Une échelle d'environ 0,96 à 0,98, un fond légèrement plus sombre ou une ombre comprimée suffisent. Mettre à l'échelle le bouton est sûr, car le texte ne se recompose pas ; changer le padding, la largeur ou les marges déplace tout ce qui l'entoure.
- Mettez à l'échelle le bouton, pas la taille de son texte
- Assombrissez légèrement le fond plutôt que d'ajouter une lueur
- Gardez la zone tactile entière même quand le bouton semble enfoncé
- Ne déplacez pas le libellé au point que l'utilisateur perde sa place
Timing : appui rapide, retour naturel
L'appui doit sembler immédiat ; une transition très courte ou un ressort rigide suffit. Le retour peut être un peu plus lent et plus doux, car c'est là que vit la personnalité. N'ajoutez pas de délai avant l'état d'appui et n'attendez pas la fin de la requête réseau pour afficher un retour.
Ressorts et transitions ne font pas le même travail
Une transition CSS est simple et peu coûteuse pour un appui fixe. Un ressort est meilleur quand le bouton peut être réappuyé en cours d'animation, quand il fait partie d'un geste ou quand le retour doit hériter de l'énergie de l'appui. Vous n'avez pas besoin d'un ressort sur chaque bouton, seulement là où l'interruption existe vraiment.
Clavier, tactile et mouvement réduit
Les utilisateurs au clavier activent les boutons avec Entrée ou Espace et ont aussi besoin d'une réponse visible. Gardez un anneau de focus net et ne supprimez pas le contour du navigateur sans le remplacer. En mouvement réduit, raccourcissez l'animation ou remplacez l'échelle par un changement de couleur immédiat.
Une courte liste de vérification
Appuyez aussi vite que possible et vérifiez que les états ne restent pas bloqués. Appuyez, faites glisser le pointeur hors du bouton puis relâchez : il doit revenir au repos. Testez sur un téléphone de milieu de gamme et activez le bouton au clavier pour voir si le même retour apparaît.
Extrait d’implémentation en production
/* Press feedback without layout work */
.button {
transition: transform 120ms ease-out, background-color 120ms ease-out;
}
.button:active {
transform: scale(0.97);
background-color: #e8431a;
}
@media (prefers-reduced-motion: reduce) {
.button {
transition: background-color 80ms linear;
}
.button:active {
transform: none;
}
}Principes clés à retenir
- Démarrez l'état d'appui à l'appui, pas après le gestionnaire de clic
- Changez l'échelle ou la couleur de très peu, jamais les propriétés de mise en page
- Le retour peut être plus doux et plus lent que l'appui
- Les utilisateurs au clavier ont besoin de la même confirmation
- Le mouvement réduit doit raccourcir le déplacement, pas supprimer le retour
Questions fréquentes
Sources
- Motion — Apple Human Interface Guidelines
- prefers-reduced-motion — MDN Web Docs
- Understanding Success Criterion 2.3.3: Animation from Interactions — W3C WAI