Des animations avec un objectif

• Les animations, lorsqu’elles sont utilisées à bon escient, peuvent améliorer la prévisibilité, la rapidité perçue et le plaisir d’une interface
• Mais des animations utilisées sans discernement peuvent provoquer de l’imprévisibilité, de la latence et même une baisse de confiance de la part des utilisateurs
• La première étape importante consiste à définir un objectif clair pour l’animation
• Plus la fréquence d’usage des animations est élevée, plus une expérience sans animation peut être préférable
• La vitesse des animations est elle aussi déterminante pour les performances cognitives et la satisfaction des utilisateurs

---

L’intention derrière l’animation

• Une utilisation pertinente des animations améliore la prévisibilité de l’interface, la rapidité perçue et le plaisir de l’expérience utilisateur
• Des animations mal employées rendent l’interface lente, confuse et désagréable, et nuisent à la confiance des utilisateurs envers le produit

L’importance de l’intention

• Avant d’appliquer une animation, il faut se demander : « Quel est l’objectif de cette animation ? »
• Par exemple, l’animation marketing de Product Intelligence de Linear aide les utilisateurs à comprendre comment fonctionne la fonctionnalité, au lieu de se limiter à une image statique
• Le subtil effet de scale down lorsqu’on appuie sur un bouton donne à l’interface une impression plus vivante et réactive
• L’animation d’apparition des toasts de Sonner a deux objectifs
  • permettre une apparition naturelle plutôt qu’un surgissement brutal, afin d’éviter une impression de décalage
  • faire apparaître et disparaître les éléments dans la même direction pour préserver la cohérence spatiale et rendre le geste de swipe-down plus intuitif
• Parfois, le simple « plaisir » peut être l’objectif d’une animation, notamment dans des interactions rares, où elle apporte une impression de nouveauté et une expérience mémorable
• Mais à mesure que la fréquence d’usage augmente, ce plaisir initial peut vite se transformer en irritation et en latence

Fréquence d’usage et animation

• Plus on voit souvent une animation, plus la fatigue de l’utilisateur et les retards dans l’exécution des tâches peuvent augmenter
• Par exemple, dans un usage répété de Raycast, des animations inutiles deviennent une gêne importante
• Dans les menus, listes et situations manipulées au clavier de manière répétée, il est préférable de supprimer complètement les animations
• Un exemple est d’ailleurs présenté où les animations au clavier réduisent au contraire la réactivité perçue
• Une expérience sans animation peut être le meilleur choix dans certains scénarios (répétition, tâches en volume, etc.)

Perception de la vitesse et réactivité

• En dehors des sites marketing, toutes les animations d’interface doivent être rapides afin d’améliorer les performances perçues et la réactivité
• Un spinner de chargement qui tourne rapidement peut donner l’impression d’un temps de chargement plus court, même si la durée réelle est identique
• Une animation de menu déroulant de 180 ms paraît bien plus réactive qu’une animation de 400 ms
• En règle générale, les animations d’interface devraient rester en dessous de 300 ms
• Pour les tooltips, un léger délai lors de la première apparition est utile, mais une fois ouverts, ils offrent la meilleure expérience s’ils réagissent immédiatement sans animation supplémentaire (voir Radix UI et Base UI)
• Des transitions sans délai entre tooltips améliorent l’expérience utilisateur sans nuire à l’objectif recherché

Construire d’excellentes interfaces

• L’objectif n’est pas l’animation en soi, mais la construction d’excellentes interfaces utilisateur
• L’important est de créer une expérience que les utilisateurs auront envie d’utiliser au quotidien
• Parfois, l’animation est nécessaire, mais selon le contexte, l’absence d’animation peut être le meilleur choix
• Savoir quand et comment appliquer des animations est une compétence essentielle en conception UI/UX

Conclusion

• Pour créer des interfaces de grande qualité, il faut une compréhension approfondie de l’usage des animations
• Des ressources théoriques et pratiques supplémentaires sont disponibles dans "Animations on the Web"

[GN⁺]

Commentaires Hacker News

• Chaque fois que des designers parlent d’animation, ils ont tendance à employer des mots comme « polish » ou « joie » et à mettre ces éléments en balance avec la latence perçue. Ce n’est pas totalement faux, mais il y a quelques réserves.

  1. Je pense que la partie « delight » est surestimée : les personnes qui admirent vraiment des animations tape-à-l’œil sont surtout d’autres designers.
  2. Surtout, il est utile de se concentrer sur l’« état » quand on décide quand utiliser une animation. S’il existe un risque que l’utilisateur ne perçoive pas bien un changement d’état, c’est là qu’une animation doit aider à le visualiser. À mon avis, c’est le but principal d’une animation ; le reste relève de la vanité.

  • Concernant l’idée que le « delight » est surestimé, une animation pertinente dans un logiciel a bel et bien un effet positif sur les utilisateurs, à condition d’être bien utilisée et non intrusive, même si cet effet n’est peut-être pas celui que beaucoup imaginent.
    Une animation bien conçue représente les 20 % finaux qui font passer un produit de « bon » à « excellent ». Elle n’est pas indispensable, mais elle peut créer une différenciation face à la concurrence.
    Une raison concrète pour laquelle l’animation peut avoir de la valeur est comparable à ce qui se passe avec les produits physiques : les gens associent souvent le poids ou la robustesse à un produit haut de gamme.
    Cependant, au cours des dix dernières années, le design d’interface s’est trop orienté vers « l’ambiance », la « mise en scène marquante » et le « branding », en négligeant la recherche sérieuse et l’utilité pratique autour d’un usage réellement efficace de l’animation.
    Il est temps, à mon avis, que le design UI revienne à une logique de praticité et d’utilisabilité.

  • Je suis surpris qu’on considère le léger effet de réduction d’échelle lors d’un clic sur un bouton comme une forme d’animation. C’est simplement un retour visuel très basique pour indiquer qu’un élément est cliquable et que le clic a bien été pris en compte.

  • Dans le design logiciel, l’importance accordée au « delight » lui-même se retrouve beaucoup chez les fans de l’Apple d’autrefois, par exemple chez ceux qui regrettent la perte de fantaisie chez Apple depuis le départ de Jobs.
    Je ne connais pas de texte de référence qui synthétise vraiment ce sujet, mais ce court billet l’évoque.
    Le goût pour ce type de détail n’est pas seulement une préférence de quelques designers ni un phénomène marginal : c’est aussi l’un des traits centraux du fandom Apple.

  • Je vois souvent des designers travaillant dans des environnements B2B concevoir comme s’ils faisaient du B2C.
    En B2B, surtout dans l’enterprise, le produit n’est qu’un outil de travail quotidien ; des animations voyantes, des dégradés colorés (qui, de nos jours, veulent parfois aussi dire « IA »), etc., n’aident pas réellement les utilisateurs dans leur travail et les distraient au contraire.
    Ces éléments décoratifs ne font qu’entraver la navigation efficace dans des dashboards centrés sur le texte.
    Si l’on veut créer une expérience « jolie et agréable », alors une entreprise de workflow type CRM/ERP n’est de toute façon pas le bon endroit. Cela n’a de sens que dans une entreprise où la satisfaction émotionnelle de l’utilisateur est directement liée à la valeur business.

  • Je ne suis pas d’accord avec l’idée que le « delight » est surestimé.
    Par exemple, si un utilisateur d’Apple/iPhone passe une semaine sur Android, il dira souvent que « quelque chose semble moins naturel et plus irritant ».
    Cela vient en partie du fait qu’iOS bénéficie d’animations minutieusement travaillées dans l’ensemble des interactions.
    Même si le grand public ne décrit pas cela avec le terme « delight », il perçoit clairement quand l’expérience devient moins bonne qu’avant.

• Je pense qu’Apple a des leçons à tirer là-dessus : on perd trop souvent du temps à attendre des animations inutiles.
  Par exemple, après avoir fait défiler jusqu’en bas puis touché un bouton, il faut parfois appuyer plusieurs fois avant que cela réagisse, le temps que l’animation de rebond se termine.
  Le swipe entre applications, la fermeture des notifications, l’ouverture du dock ou d’un tiroir, et la plupart des actions basées sur des gestes sont traités beaucoup trop lentement.
  Les animations s’enchaînent : il faut attendre la fin de l’une pour que la suivante commence, puis seulement ensuite on peut interagir.
  Il est paradoxal qu’il faille désactiver ces animations dans les réglages d’accessibilité pour utiliser l’appareil plus confortablement.

  • Quand Apple Wallet se connecte au téléphone, une animation plein écran totalement inutile se lance, et pendant ce temps on ne peut rien faire, ce qui est agaçant.
    Une simple petite vibration haptique au moment de la connexion suffirait largement.

  • Toutes les animations de navigation d’iOS sont conçues pour pouvoir être interrompues en cours de route et permettre une autre action ; il n’est pas nécessaire d’attendre obligatoirement la toute fin.

  • Sur macOS, lors d’un changement de bureau/espace, toutes les entrées continuent à s’appliquer à l’espace précédent jusqu’à la fin complète de l’animation, ce qui est extrêmement frustrant.
    Apple ne prête plus vraiment attention à l’UI/UX aujourd’hui. Dans une organisation aussi massive, il est difficile de créer une bonne expérience utilisateur sans un décideur fort comme Steve Jobs.
    Et les designers ne réalisent pas toujours que « l’utilisateur moyen » n’est ni eux-mêmes ni un fan du produit, mais quelqu’un qui veut simplement des fonctions de base et de la cohérence.
    À chaque changement, il faudrait adopter la règle suivante : si, en le montrant à sa grand-mère, elle ne s’exclame pas « waouh, c’est vraiment bien mieux », alors il ne faut rien changer.

• Moi, j’aimerais au contraire accélérer encore davantage les animations.
  300 ms, c’est trop lent pour moi.
  Je préfère des animations si brèves qu’on les perçoit à peine.
  En fait, c’est parfois seulement quand on retire l’animation qu’on se rend compte qu’elle était là.
  Au-delà de cette durée, j’ai l’impression que c’est trop lent.

  • Moi aussi, j’utilisais autrefois environ 250 ms, mais récemment je suis passé à 200 ms.
    200 ms est, selon moi, une vitesse idéale de transition UI pour comprendre ce qui change, comment et pourquoi.
    Si une transition ne respecte pas ce critère, il vaut mieux la supprimer complètement.
    200 ms est aussi pratique en CSS, puisqu’on peut simplement écrire .2s.
    En dessous de 150 ms, cela peut commencer à ressembler à un glitch de rendu, et l’intérêt même de l’animation disparaît alors.

  • La toute première chose que je fais quand j’utilise un téléphone Android, c’est d’aller dans le mode développeur pour doubler la vitesse des animations.
    Quand je vois le réglage par défaut, ça me paraît beaucoup trop poussif.

• En web design, les animations ne sont en réalité guère différentes des effets PowerPoint.
  Dans la plupart des cas, un ou deux cross-fades rapides suffisent à produire une interface propre et bien ordonnée, et il est rare d’avoir besoin de davantage.

• Je pense que les animations n’ont de sens que lorsqu’elles confirment quelque chose que l’utilisateur sait déjà ; elles ne devraient pas être le moyen principal de transmettre de l’information.
  Autrement dit, même en désactivant les animations, on devrait pouvoir travailler à la même vitesse et comprendre le flux de la même façon.
  Le but de l’animation est de relier en douceur le parcours UX et de donner un petit signal indiquant que l’état correspond bien à ce qu’on attendait.
  Par exemple, si un hover de souris déclenche rapidement une surbrillance, je n’ai pas besoin de vérifier activement que mon pointeur est bien au-dessus du contrôle.
  Comme dans l’exemple des tooltips, si après une première apparition elles s’affichent ensuite instantanément en 0 ms, cela donne vraiment l’impression que l’on comprend bien le flux UX de l’utilisateur.
  C’est un très bon exemple d’animation pensée avec une vraie compréhension du parcours UX.

• Mon principe est simple : si l’utilisateur doit attendre la fin d’une animation pour pouvoir continuer à interagir, alors cette animation doit être supprimée.
  Et je pense qu’il faut impérativement proposer une option d’accessibilité permettant de désactiver toutes les animations.

  • Pour cela, la media query CSS prefers-reduced-motion est vraiment très utile.
    Voir la documentation correspondante.

• Concernant l’animation de présentation de la fonctionnalité Product Intelligence de Linear, je comprends l’intention du designer, mais en pratique elle n’aide pas du tout à la compréhension.
  Cette animation avec un angle 3D bizarre ne semble pas liée à l’UI réelle.
  Certes, cet effet 3D suggère que la boîte spécifique à l’écran, c’est-à-dire le produit, n’est pas la page que je suis en train de lire, mais cela n’aide pas vraiment à comprendre la fonctionnalité elle-même.
  L’effet de fade-in attire bien l’œil vers la zone, mais il contribue peu à la transmission du contenu.

• Les animations « plaisantes » passent correctement sur mon écran (par ex. un M1 MacBook Pro), mais sur un autre écran (par ex. un moniteur IBM ThinkVision basse résolution), elles paraissent très maladroites et lentes.
  Vidéo de démonstration sur MacBook
  Vidéo de démonstration sur moniteur de mauvaise qualité
  La perception peut être complètement différente selon le moniteur utilisé.

  • Je me demande si ce moniteur IBM est utilisé à sa résolution native.

• À propos de l’idée selon laquelle « un spinner qui tourne vite donne l’impression que le chargement va plus vite », j’ai au contraire tellement souvent vu des mauvais designs abuser de spinners rapides alors qu’en réalité rien ne se passe que j’ai fini par trouver les spinners lents plus crédibles.

  • Personnellement, je ne fais confiance qu’aux barres de chargement dont la progression avance de manière non linéaire ; dans ce cas, on voit clairement qu’il se passe réellement quelque chose étape par étape.

  • Un spinner lent me donne paradoxalement plus confiance, comme s’il indiquait qu’une tâche lourde est réellement en train de s’exécuter.

• Un exemple immédiat de chose qui me gâche la journée, c’est quand l’état n’est pas cohérent pendant l’exécution d’une animation.
  Par exemple, sous Windows, quand une notification d’une application apparaît, si j’essaie de cliquer sur le X avant la fin de l’animation pour la fermer, cela ouvre parfois la notification à la place.
  Sur Mac, lors d’un changement de bureau, une application apparaît brièvement à l’écran puis bascule soudainement vers une autre ; comme l’animation est lente, on croit qu’elle est terminée et on agit, puis on se retrouve surpris.
  Et parfois cela se produit même de manière aléatoire.
  Aux designers : si vous tenez absolument à mettre des animations, alors elles doivent être totalement robustes ; sinon, on cesse immédiatement de faire confiance à l’application.