Chaque frame, parfaitement

• L’UI est presque la seule surface sur laquelle l’utilisateur juge la qualité d’une app, et la confiance s’installe si, quel que soit le moment où l’on prend une capture d’écran, l’état de l’écran reste cohérent
• Une UI très soignée signale que le développeur a pris le temps de la peaufiner, et devient un heuristique raisonnable laissant penser que la qualité du code a été travaillée au même niveau
• En pratique, le vrai critère consiste à éliminer les flashs blancs entre les écrans, les chargements partiels, les réorganisations pendant le chargement, les incohérences dans les messages d’état et les animations imprécises
• Même si l’état initial et l’état final sont bons, des frames intermédiaires bancales donnent l’impression que les composants ne sont pas synchronisés et peuvent même produire une fausse sensation, comme dans l’exemple de Photos, lors d’une transition sans changement réel
• Les animations doivent aider à comprendre les transitions, et une UI ne devient un outil de précision que si l’on maîtrise non seulement le début et la fin, mais aussi toutes les frames intermédiaires

---

Principes clés

• L’objectif explicite de Wayland, "every frame is perfect", est un but technique visant à reprendre le contrôle face à la complexité des piles GPU modernes
• Le même principe s’applique à l’UI : à n’importe quel instant d’une app, une capture d’écran doit paraître naturelle et cohérente
• Comme les utilisateurs ne peuvent pas voir le code, l’UI devient la seule surface à partir de laquelle ils jugent la qualité de l’app
• Si l’UI est bien polie, cela indique que le développeur a investi du temps dans le peaufinage, ce qui conduit à penser que le code a probablement été travaillé avec le même niveau d’exigence

Critères concrets et exemples

• Pour obtenir des frames parfaites, il ne doit pas y avoir de flash blanc entre les écrans, ni de contenu partiellement chargé, ni de réagencement de layout pendant le chargement
• L’état interne de l’UI doit rester cohérent : une partie ne devrait pas afficher « 1 update available » pendant qu’une autre affiche « Checking for updates... »
• On oublie souvent les animations : même si l’état de départ et l’état d’arrivée sont bons, si l’entre-deux est maladroit, une capture d’écran intermédiaire devient une frame qui n’a pas de sens
• Dans l’exemple de Safari, le texte de placeholder se déplace depuis le centre tandis que le curseur s’anime depuis la gauche, ce qui donne l’impression que les deux composants ne sont pas synchronisés
• Dans l’exemple de Photos, lorsqu’on bascule entre les modes Crop et Adjust, la photo se repositionne immédiatement alors que le contour de recadrage est animé, créant une fausse impression qu’un léger changement se produit pendant la transition de mode
• Dans l’exemple de l’UI de recherche, l’animation censée aider à comprendre la transition rend au contraire le mouvement de la loupe plus difficile à suivre
• Dans l’exemple de Youtube, même une tâche simple consistant à déplacer un rectangle d’un endroit à un autre produit un mouvement étrange, et quelle qu’en soit la raison, le résultat reste une frame imparfaite
• Même en incluant l’animation de zoom de l’app Preview, l’idée centrale est qu’il faut prêter attention non seulement à l’état initial et final, mais aussi à chaque instant intermédiaire

[GN⁺]

Avis sur Hacker News

• Il est vrai que certains des exemples donnés par l’auteur sont de mauvaises animations, mais j’ai du mal à adhérer au postulat de l’article
  L’infographie est un domaine qui exploite les particularités du système visuel humain, et ce qui est en mouvement n’est pas perçu de la même manière que ce qui est immobile. Un frame « incorrect » pris isolément peut en réalité être celui qui rend le mieux dans le flux du temps
  Pour prendre une analogie avec le cinéma, un travelling rapide peut rendre chaque frame peu flatteur à cause du motion blur, et un plan grand-angle peut faire paraître les objets « faux » à cause de la distorsion, mais si cela produit l’effet artistique voulu en salle, c’est le bon choix

  • Au début, j’ai cru que « Every Frame Perfect » voulait dire qu’il fallait éviter strictement toute saccade ou tout à-coup dans le mouvement, et là je suis totalement d’accord. Mais du point de vue du cinéma, de la vidéo et de la 3D, des artefacts temporels comme le motion blur sont non seulement ce qui paraît le plus « juste » pour le système visuel humain, mais aussi ce qui est le plus facile à interpréter
    Si on ajoute le bon blur à un mouvement, il paraît plus net, mais sur image arrêtée il n’est évidemment pas plus net. L’essentiel est qu’un motion blur correct garantit que l’image paraît seulement aussi nette que la quantité de détail en mouvement que l’humain peut réellement percevoir à cette vitesse. Il est donc erroné d’évaluer un frame figé avec motion blur selon des critères de netteté ou de lisibilité
    Le reste du texte se concentre sur les détails d’implémentation, mais manque l’occasion de se demander si certaines de ces animations devraient exister tout court. Le mouvement peut être une bonne affordance s’il est utilisé avec retenue, mais aujourd’hui on dépasse souvent le simple excès d’usage pour empiéter sur le champ visuel et la charge cognitive de l’utilisateur. Les designers et PM y voient un signe de « UX moderne sophistiquée », alors que cela a parfois dégénéré en ornement de mode qui imite un bon design au lieu d’en être un
  • L’argument aurait sans doute été plus fort si l’article avait aussi montré de bons cas d’usage. Cela dit, je suis d’accord sur le fait que la sensation globale de la transition compte plus que chaque frame pris individuellement
    Certaines animations montrées semblent clairement pouvoir être améliorées. L’IA me paraît assez prometteuse pour pousser davantage ce genre de petites finitions agréables, parce qu’autrefois c’était trop peu prioritaire pour qu’on y consacre du temps
  • Cette analogie va un peu trop loin. Contrairement au cinéma, une UI n’enregistre pas la réalité : chaque pixel à l’écran est le résultat de ce que nous avons placé, donc une analogie plus proche serait le dessin animé. Dans un cartoon, les poses intermédiaires ne sont pas des frames imparfaits, mais des frames réellement soignés et aboutis
    Il y a une différence entre une frame intermédiaire d’animation qui paraît un peu « étrange » tout en restant logiquement correcte, et un état intermédiaire qui n’a réellement aucun sens et qui est simplement le résultat d’un manque d’attention à ce qui se passe pendant l’animation. Dans ce second cas, il vaudrait mieux supprimer l’animation ou la simplifier davantage
  • La dernière animation de zoom de l’app Preview montre aussi un contre-exemple. Comme le souhaite l’auteur, tous les frames sont parfaits lorsqu’on les regarde séparément, mais c’est en mouvement que le problème apparaît
  • L’idée qu’une animation doive toujours rester cohérente lorsqu’on la démonte frame par frame n’est pas très convaincante. Les utilisateurs ne la voient pas réellement ainsi
    J’aime la perspective de l’article, qui considère le niveau de finition de l’UI comme un indicateur indirect de la qualité logicielle, et il a raison de pointer de mauvaises animations. Mais la cohérence frame par frame n’est pas le meilleur critère pour mesurer ce qui fait une « bonne » animation

• Certains appareils sont encore sous Sonoma, et je ne peux que constater une régression continue
  La boîte de dialogue d’enregistrement tremble un peu, mais n’est pas aussi confuse que dans l’exemple. Le bouton de Notes se déplace parfaitement et sans accroc entre les panneaux. Si on focalise puis défocalise plusieurs fois la barre de Safari, l’animation se casse parfois, mais le curseur est synchronisé exactement avec le texte, et le fondu n’apparaît qu’après que le texte a fini de se déplacer vers la gauche. Le bug de Preview semble aussi être récent, et je n’arrive pas à le reproduire
  https://streamable.com/kx7op6
  L’époque où des entreprises comme Apple, Sony ou IBM prêtaient attention à des détails minuscules me manque. Apple en particulier a acquis sa valeur actuelle grâce à l’iPhone : face à Windows Mobile ou aux PDA Symbian de l’époque, il ne faisait pas quelque chose d’extraordinaire en termes de fonctionnalités, et il était même en retrait sur certains points, mais c’était un appareil tout tactile qu’on n’avait pas envie de jeter contre un mur après quelques minutes d’usage. Ces animations actuelles me redonnent précisément une impression de Windows Mobile et de Symbian
  Je me souviens à quel point Steve adorait les animations d’OS X. Sur scène, il les repassait plusieurs fois, parfois au ralenti. Celles d’aujourd’hui sont du niveau de celles qu’on pourrait très bien confier aux personnes qui ont subi le sort réservé au responsable de l’antenne de l’iPhone 4

  • Dans la courte vidéo, l’animation paraît effectivement plus ordonnée et moins confuse. Il est possible qu’Apple utilisait AppKit sous Sonoma et soit passée maintenant à SwiftUI

• J’ai l’impression qu’une UI sans ce genre de frames imparfaits serait plus agréable, mais à ce stade j’aimerais surtout que quelqu’un corrige chaque clip pour montrer à quoi cela ressemblerait réellement
  En même temps, je me demande aussi pourquoi tout a besoin de mouvement. Si j’ai bien compris, le mouvement est surtout approprié quand l’UI change subtilement dans une zone différente de celle où l’utilisateur a lancé l’action, comme pour un toast
  Beaucoup des transitions montrées ici paraissent inutiles, et un changement immédiat avec une recomposition instantanée semblerait déjà très bien fonctionner

  • Le « frame imparfait » dans la barre de recherche de Safari est en pratique tout à fait acceptable, et la version qui aurait l’air meilleure sur capture d’écran pourrait en fait être pire
    Si le curseur apparaît à gauche, c’est parce que c’est là que l’utilisateur commence réellement à saisir. Quelqu’un qui connaît l’UI regardera probablement à cet endroit. Faire apparaître le curseur au centre de l’écran avant de le déplacer serait inutile et distrayant
    Le texte d’espace réservé qui glisse vers la gauche sert à attirer l’attention des utilisateurs moins familiers
  • Une machine à sous doit toujours avoir quelque chose qui bouge, et les animations Apple excessivement dynamiques jouent aussi ce rôle. Les animations UI ordinaires aident les utilisateurs classiques, qui ont du mal quand le contenu de l’écran change brusquement ; elles aident aussi à donner une impression de fluidité au frame rate ou à masquer la latence des appels API et du traitement backend
  • Quand on joue à un jeu avec une bonne UI, on voit que l’animation est utilisée partout. Les transitions instantanées ne sont bonnes qu’en théorie
  • Tout n’a pas besoin de mouvement. La plupart du temps, non. Ce genre de travail absurde crée quelques emplois et donne aussi à quelques personnes une excuse pour fanfaronner en disant que le langage de design de $BRAND est supérieur aux alternatives
    La plupart des exemples paraîtraient probablement meilleurs sans animation. Si on a cliqué sur un bouton, il suffit de montrer le résultat. Au lieu de faire une petite danse avant, qu’on l’affiche simplement
  • Le mouvement est important pour retrouver ses repères spatiaux après une transition
    Sans mouvement, il faut souvent que le cerveau reparcoure toute la page à chaque rafraîchissement

• Je trouve que l’argumentation de ce texte est présentée de façon faible. Il n’y a pas non plus de meilleure alternative proposée, et il n’explique pas concrètement pourquoi ce qui est montré est négatif pour l’utilisateur. Ça peut l’être, mais cela ressemble aussi à une manière creuse de critiquer en pointant des smear frames médiatiques ou des points de transition.
  Le critère selon lequel « chaque frame doit avoir du sens » est lui aussi difficile à soutenir. Je pense que c’est impossible, et j’aimerais demander comment on ferait pour garder chaque frame parfaite, même pendant le redimensionnement d’une fenêtre.
  L’auteur lui-même semble trouver plus facile de relever des frames défectueuses que d’appliquer réellement le standard qu’il énonce. Si on clique sur les liens du header de son blog, l’animation se lance une fois le clic terminé. Et dans ses propres projets d’UI, il y a aussi des endroits où le texte et les objets ne restent pas dans leur conteneur. Si l’on affirme qu’il faut suivre ce genre de principe, il faut aussi pouvoir le montrer soi-même.
  Un texte mieux écrit se serait concentré sur pourquoi ce qui est présenté est mauvais pour l’utilisateur final, et sur la manière de le traiter à la place. Une bonne critique doit inclure non seulement le quoi, mais aussi le pourquoi et le comment

  • Cette critique me paraît au contraire être la plus creuse ici.
    Le texte propose des idées, pas des solutions. Ne pas le voir revient à construire plusieurs hommes de paille pour le critiquer.
    Plus important encore, le texte n’est pas rédigé de manière péremptoire. Il est formulé avec prudence, avec des expressions comme « I think », « Next thought: », « Probably », « So yeah. ». Ce texte, c’est quelqu’un qui partage ses réflexions, et elles sont assez abouties pour amener plusieurs personnes raisonnables à penser dans une direction similaire.
    Le fait que l’auteur ne propose pas de solution ne signifie pas qu’il devait forcément le faire. Ce critère est étrange et déraisonnable.
    S’en prendre au site de l’auteur ne donne pas non plus une très bonne impression. L’écart entre le goût et l’exécution est bien connu, et sanctionner une contribution conceptuelle au motif qu’elle précède la technique réelle est assez désagréable.
    Une critique plus juste aurait été plus généreuse, dans l’esprit de cette communauté

• J’ai vu plusieurs réactions disant qu’elles auraient aimé que l’auteur inclue des exemples de résolution. Il a récemment écrit un billet très proche de celui-ci, où il détaille aussi les problèmes d’animation avant d’expliquer comment il les a améliorés.
  Si ça vous intéresse, c’est ici : https://www.thisischris.dev/projects/project-6/

  • Sur Chrome mobile Android, l’animation ne semble pas fonctionner

• Je pense qu’une frame imparfaite maintenant vaut mieux qu’une frame parfaite plus tard. Dans toute UI, la latence devrait être la priorité absolue. Si la latence est suffisamment faible, l’interface donne l’impression d’être une extension de son propre corps et réduit la charge cognitive. Les animations sont particulièrement mauvaises de ce point de vue, car elles ajoutent des centaines de millisecondes de délai

  • Je pense que c’est un faux dilemme. Les exemples donnés par l’auteur ne seraient pas du tout plus lents s’ils étaient correctement implémentés
  • On pouvait croire, à cause du titre, que cela parlait de Wayland, et ce n’était pas faux. Mais ce n’est pas un sujet sur Wayland

• J’aurais aimé qu’il y ait aussi des exemples positifs en plus des exemples négatifs. Pour l’instant, la seule conclusion que j’en tire, c’est qu’il faudrait éviter les animations, alors que ce n’est probablement pas ce que l’auteur veut réellement dire

  • La conclusion « il faut éviter les animations » n’est pas la pire leçon à tirer. En général, il faut éviter les animations pour le simple plaisir de l’animation. Il suffit d’imaginer un clavier de téléphone où, à chaque frappe, chaque lettre s’envole jusqu’au champ de saisie

• Une bonne animation ne cherche pas forcément à paraître parfaite sur chaque frame ; il n’est pas rare qu’elle triche un peu pendant le mouvement. Comme les smear frames dans les cartoons : si on les arrête au mauvais moment, elles paraissent bizarres, mais dans l’animation complète elles rendent visuellement le mouvement crédible

  • Les smear frames ne sont pas une technique souvent appliquée à ce type d’animation. C’est presque entièrement spécifique à l’animation image par image, et il n’y a pas de smear frames dans cet article
  • La différence, c’est que les frames floutées sont utilisées intentionnellement pour produire un effet global. Les animations montrées ici ressemblent plutôt à des saccades accidentelles qui révèlent une application mal finie
  • Je ne pense pas que cette analogie soit juste. Les frames floutées ont un bon rendu en mouvement, alors que les frames du billet de blog ont un rendu affreux même en mouvement. Le premier exemple est si mauvais que, la première fois que je l’ai vu, je pensais qu’il resterait trois boutons en haut, puis le moment où l’on comprend qu’il n’y en a en fait que deux est étrange et désorientant
  • Sur macOS, j’ai eu l’impression que la qualité visuelle et la qualité des animations avaient beaucoup changé quand Apple a commencé à utiliser SwiftUI dans l’OS et les apps
    Je ne suis pas développeur, mais j’ai senti des zones où les icônes ou les fenêtres ne se plaçaient ou ne se déplaçaient plus comme avant, ou comme elles auraient naturellement dû le faire
    Cette impression de bricolage n’a pas changé avec le temps. Il y a tellement d’exemples dans l’OS et les apps qu’on aurait envie de dire que « ça a toujours été comme ça », mais en réalité non. Apple avait établi un standard, ce standard était élevé, et la qualité était excellente
    J’ai l’impression qu’il faut beaucoup de hacks pour obtenir avec SwiftUI une disposition d’UI ou une animation équivalente
    Enfin, je pense souvent au fait que la création analogique était vraiment difficile, et l’est toujours. Dans le numérique, on s’est habitués à se dire qu’on retouchera plus tard, mais en pratique on ne le fait pas, et il est triste de voir qu’on empile souvent du mauvais sur du pire
  • Overwatch est un assez bon exemple moderne [1]. Il contient énormément d’animations très fluides, mais si on arrête les frames, elles paraissent vraiment bizarres
    [1]: https://youtu.be/vIdeGmN__Pw?t=550

• Une appli sans aucune animation semblerait affreuse. Si vous avez Android, vous pouvez le tester vous-même en passant la vitesse des animations à 0x dans les options développeur. Les changements instantanés sont déstabilisants, et il faut plutôt une seconde au cerveau pour traiter ce qui vient de se passer ; au final, cela peut même être plus lent qu’avec des animations
  Mon réglage est sur 0,5x, et ça me paraît suffisant. C’est toujours rapide, mais on peut encore voir les applis s’ouvrir et se fermer

  • Sur Android, j’ai désactivé les animations et je l’utilise comme ça avec satisfaction. C’est à peu près la seule façon de donner une impression d’« immédiateté ». Dans le contexte où une entrée entraîne un changement d’UI, je pense que la latence est toujours pire que l’absence d’un état transitoire tape-à-l’œil
  • Pas dans mon cas. Je désactive toujours les animations. Ça me convient très bien, et je peux manipuler mon téléphone bien plus vite sans avoir à attendre la fin des animations
  • Moi aussi, je suis en 0,5x
    Le problème du 0x, c’est qu’on dirait que ça ne s’applique qu’à 90 % de l’UI. Certaines choses restent animées, et du coup le rythme paraît vraiment étrange
    En 0,5x, les éléments bizarrement insensibles au réglage de vitesse des animations gênent moins
    Si ça fonctionnait correctement, j’utiliserais le 0x
  • Après avoir utilisé Android pendant presque 10 ans, je suis finalement passé à un iPhone 12 Mini quand c’était encore un nouveau modèle. La possibilité de désactiver les animations comme sur Android me manque toujours. Je suis sûr à 110 % que mon téléphone actuel serait 200 % plus rapide si je pouvais simplement désactiver toutes les animations qui existent juste pour exister
    S’il faut vraiment une seconde de traitement, je préfère encore ça, et je ne pense même pas que ce soit réellement nécessaire. C’est bien mieux que de perdre une seconde à chaque changement de page dans une appli à cause d’une animation, et en navigation tout donne l’impression d’avancer dans de la mélasse
  • Toutes les animations ne sont qu’une perte de temps pendant laquelle on ne peut pas interagir correctement avec l’UI, donc il vaut largement mieux toutes les désactiver

• J’ai trouvé cet article pertinent, mais j’aurais aimé qu’il y ait aussi des exemples positifs. Le ton ne m’a pas semblé plaintif, mais comme je ne connais pas grand-chose à la construction d’une bonne UI, je n’ai pas eu l’impression d’être plus avancé sur ce qu’il faudrait prendre comme étoile polaire

  • J’ai récemment écrit exactement là-dessus. J’y examine d’abord en détail des imperfections conceptuellement similaires à celles de cet article, puis j’explique le processus d’amélioration que j’ai mené moi-même
    Si ça vous intéresse, c’est ici : https://www.thisischris.dev/projects/project-6/
  • Ou alors l’auteur aurait pu montrer, sous forme de mockups, à quoi chaque mauvais exemple aurait dû ressembler s’il avait été correctement implémenté

[GN⁺]

Avis sur Lobste.rs

• Je pense que la prémisse de base de cet article est fausse. On n’utilise pas ce genre d’apps image par image
  Même avec un simple cours d’animation, on apprend que la manière dont on perçoit le mouvement est différente de celle dont on perçoit des images fixes. Si vous regardez une démo de « squash and stretch », vous verrez que, image par image, les dimensions d’un objet peuvent sembler absurdes prises isolément, tout en fonctionnant magnifiquement une fois en mouvement

  • Les exemples de l’article ne paraissent pas beaux, même une fois animés
  • Le problème n’est pas que l’animation soit laide, mais qu’elle crée une période pendant laquelle une UI utilisable est remplacée par une séquence d’animation non fonctionnelle
    Elle peut même donner une image erronée de l’état du programme, comme dans l’exemple de recadrage. L’utilisateur doit en pratique mettre son cerveau sur pause pendant un tiers de seconde, le temps que l’UI se réassemble, avant de pouvoir continuer à utiliser le programme

• Je ne pense pas du tout que ce soit ce que le projet Wayland entend par complétude d’image
  Il s’agit plutôt, à mon avis, de détails techniques de plus bas niveau, comme le redimensionnement des fenêtres. Par exemple, un contenu redimensionné de manière asynchrone, une synchronisation verticale défaillante qui provoque du tearing ou d’étranges artefacts diagonaux à l’écran, ou encore des rapports de zones endommagées sous forme de sous-régions rectangulaires
  Bien sûr, ce serait idéal que les détails bas niveau comme les animations haut niveau soient tous deux parfaits image par image

  • D’accord. Et je crois que l’auteur le voit aussi ainsi

    Wayland is talking about the technical side of things (modern GPU stacks are very complex and Wayland is trying to take control back) but it could be applied to UI too.

• Supposons qu’on veuille tester ce genre d’animations et écrire des tests pour vérifier que ces propriétés ne se dégradent pas avec le temps
  Quelles sont aujourd’hui les techniques de pointe pour tester ce genre de propriétés dans les apps web et natives ? Existe-t-il des catégories précises de tests qu’on aimerait écrire mais qui sont en pratique impossibles ou très difficiles, faute de pouvoir contrôler la boucle d’événements ?

  • Je ne peux parler que des apps Android natives. Avec la boîte à outils UI Jetpack Compose, on peut contrôler directement l’horloge qui pilote l’UI, ce qui permet de capturer n’importe quel instant d’une transition avec des tests de captures d’écran statiques
    On peut aussi enregistrer une transition complète en PNG animé avec un outil comme Paparazzi pour faire des tests de régression automatisés
  • Dans l’idéal, les informations de taille devraient être exposées, un moteur de mise en page générique devrait être testable indépendamment, et l’animation devrait elle aussi être séparée
    On pourrait alors valider séparément deux points de l’état, puis se contenter à la fin de vérifier l’état final. L’animation devrait pouvoir être pilotée pas à pas depuis l’extérieur, plutôt que d’être figée sur une entrée temporelle

• Je pense que l’exemple YouTube correspond presque exactement à un cas de View Transitions
  On déclare en quelque sorte « quand cet élément change, transforme automatiquement sa forme », ce qui produit au final des transitions techniquement impressionnantes mais un peu molles, où les éléments flottent et se déforment les uns dans les autres
  C’est une technologie très cool, mais je l’ai rarement vue produire un excellent résultat en dehors de petits effets d’accentuation lors de la navigation. Il faut l’utiliser avec énormément de retenue pour éviter que cela ne devienne trop distrayant