Micro-interactions

Elles réduisent l'incertitude. L'utilisateur sait immédiatement si son action a fonctionné, si un traitement est en cours ou si quelque chose a échoué. L'interface devient prévisible, et son usage moins hésitant. Bien conçues, elles restent invisibles, on ne les remarque que lorsqu'elles manquent.

Dan Saffer en décrit quatre composants. Le déclencheur, l'action qui l'initie, clic, survol ou chargement. Les règles, ce qui doit se passer en réponse. Le retour, la façon dont l'interface communique ce qui se passe. Les boucles et les modes, la durée et la répétition éventuelle. Ce découpage aide à concevoir des micro-interactions intentionnelles plutôt que des animations ajoutées après coup.

En la gardant courte, entre 150 et 300 millisecondes pour une transition d'état, au-delà de quoi l'utilisateur perçoit un délai. En la gardant discrète, puisqu'une animation qui capte trop l'attention distrait au lieu de guider. Et en respectant les préférences système, la règle prefers-reduced-motion permettant de désactiver les animations pour les personnes que le mouvement gêne.

La plupart des outils de conception actuels intègrent une fonction de prototypage qui suffit à les concevoir et à les tester. Pour l'implémentation, les transitions et animations CSS couvrent la majorité des cas. Les animations plus complexes passent par des bibliothèques dédiées, comme Lottie pour le vectoriel. L'essentiel est de tester avant d'implémenter, une animation convaincante en statique pouvant devenir agaçante à l'usage.