Press (Button Tap Scale)

L’élément s’enfonce puis revient, comme un bouton physique qu’on presse.

Ajoute un effet de survol « Push » sur [où].
À chaque entrée du pointeur, l’élément doit rétrécir une fois rapidement puis reprendre sa taille normale d’un petit rebond, comme un bouton physique qu’on enfonce.
Joue-le une fois par survol plutôt qu’en boucle, et évite que la mise en page autour ne bouge.

L’élément rétrécit légèrement et en douceur quand le pointeur le survole.

Ajoute un effet au survol « Shrink » (aussi appelé scale down) sur [où].
L’élément doit rétrécir légèrement et en douceur tant que le pointeur est dessus, puis reprendre sa taille quand il sort : rapide et subtil.
Évite que la mise en page autour ne bouge et applique le même effet au focus clavier.

L’élément change d’échelle avec un dépassement élastique au début ou à la fin du survol.

Ajoute un effet au survol « Bounce Scale » (aussi appelé bounce in / out) sur [où].
L’élément doit grossir légèrement avec un dépassement élastique bien visible, en allant brièvement au-delà de sa taille finale avant de se stabiliser, puis rebondir de la même façon quand le pointeur sort.
Évite que la mise en page autour ne bouge et applique le même effet au focus clavier.

Maintenir un élément enfoncé un instant déclenche des actions supplémentaires ou un remplissage de progression.

Ajoute une interaction d’appui long (Long Press) (aussi appelée press and hold ou touch and hold) sur [où].
Pendant l’appui, l’élément doit s’enfoncer légèrement tandis qu’un remplissage de progression le parcourt à rythme régulier ; une fois plein, il revient avec un petit ressort et ouvre son menu, et relâcher trop tôt annule et réinitialise le remplissage.
Donne aux utilisateurs du clavier et des lecteurs d’écran un autre moyen d’accéder aux mêmes actions, et empêche l’appui de sélectionner du texte ou d’ouvrir le menu contextuel du navigateur.

Tirer une liste vers le bas fait apparaître un indicateur de chargement et recharge le contenu au relâchement.

Ajoute une interaction tirer pour actualiser (Pull to Refresh) (aussi appelée swipe to refresh) sur [où].
Quand on tire la liste vers le bas depuis le haut, elle doit suivre le doigt avec un peu de résistance et révéler un indicateur de chargement qui tourne pendant la traction ; au relâchement, il continue de tourner pendant le rechargement, puis la liste remonte en douceur.
Ne la déclenche que lorsque la liste est déjà tout en haut, et propose aussi un bouton d’actualisation classique aux utilisateurs du clavier et des lecteurs d’écran.

Une onde circulaire s’étend et s’estompe depuis le point exact du clic ou du toucher.

Ajoute un effet « Ripple » (aussi appelé material ripple ou ink ripple) sur [où].
À chaque clic ou toucher, une onde circulaire douce doit se propager depuis le point exact de l’appui jusqu’à couvrir l’élément, en s’estompant à mesure qu’elle grandit : rapide et légère.
Rogne l’onde à la forme de l’élément, laisse chaque appui rapide lancer sa propre onde, et fais-la partir du centre pour les appuis au clavier.

Un cercle et une coche se dessinent d’eux-mêmes pour confirmer qu’une action a réussi.

Ajoute une animation « Success Checkmark » (aussi appelée animated success tick) sur [où].
Un cercle doit se dessiner d’un seul trait fluide, puis la coche se trace à l’intérieur et tout le symbole fait un petit rebond doux : calme et assuré.
Joue-la une fois quand l’action réussit, accompagne-la d’un message texte que les lecteurs d’écran peuvent annoncer, et affiche directement le symbole terminé si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).