Principes d'animation de l'interface utilisateur: Disney est mort

La photographie était censée être la mort de la peinture (début du daguerréotype)

(Si vous souhaitez recevoir mes articles sur l'animation de l'interface utilisateur par e-mail et être ajouté à ma newsletter, cliquez ici.)

Un nouveau médium

Lorsque Paul Delaroche a rencontré un daguerréotype vers 1839, il a déclaré: «À partir d'aujourd'hui, la peinture est morte!»

Jusqu'à cette époque, la seule façon de documenter visuellement le monde extérieur était d'utiliser un support appliqué à la main sur une surface. Des siècles de savoir-faire dans diverses disciplines ont permis de découvrir de nombreux principes et techniques sur divers supports. À travers les cultures et à mesure que les époques progressaient, le style et le langage visuel de l'apparence des représentations visuelles «évoluaient» - les modèles de conception originaux.

Les premiers photographes, essayant de faire ressembler leurs images aux peintures populaires de l'époque, utilisaient souvent une combinaison de techniques d'éclairage et d'impression pour adoucir leurs images et créer un look pictural. Leur compréhension de ce dont le médium photographique était capable était intimement liée, influencée et limitée par leur compréhension du monde de la peinture.

Il a fallu près de cent ans avant que des photographes comme Ansel Adams, Imogen Cunningham, Edward Weston et d'autres membres du `` Groupe f / 64 '' ne fassent une percée significative dans le langage visuel qui distingue la photographie de la peinture en tant que support unique - avec son propre visuel langage et principes, et ce faisant, ils ont révolutionné le domaine de la photographie.

Edward Weston, Imogen Cunningham, Ansel Adams

Disney a résolu un problème différent

Heureusement, nous nous trouvons à une telle révolution dans l'animation d'interface utilisateur.

En 1981, Ollie Johnston et Frank Thomas ont publié Disney Animation: l'illusion de la vie et ont présenté ce que l'on appelle maintenant les «12 principes de base de l'animation». Ces principes ont résolu le problème de la façon de créer un «mouvement réaliste» qui se produit lorsque des corps organiques bouger et réagir dans l'espace physique (les principes couvrent également des choses comme le timing émotionnel et l'attrait du personnage).

L'animation de l'interface utilisateur, dans le cadre de l'expérience utilisateur, a à peine 20 ans et en est encore à ses balbutiements. À mesure que le domaine de l'animation d'interface utilisateur émergeait, les 12 outils d'animation étaient les seuls outils disponibles pour décrire le comportement de l'interface utilisateur dans le temps. Tout comme la façon dont les premiers photographes ont tenté de comprendre la photographie à travers les règles de la peinture, les concepteurs ont tenté de comprendre l'animation de l'interface utilisateur à travers les règles de l'animation Disney.

En surface, cela est compréhensible car il y a un certain degré de chevauchement. Le mouvement assoupli, l'un des 12 principes de l'animation, renforce un sentiment de «justesse» par le mouvement, ce qui est essentiel à l'expérience utilisateur. Sans relâchement, l'animation de l'interface utilisateur semble maladroite et bizarre.

La répartition complète est évidente lorsque l'on examine de plus près les 12 principes dans le contexte de l'interface utilisateur.

Squash and Stretch donne un poids et une flexibilité aux objets, ce qui est l'exception plutôt que la règle dans les interfaces utilisateur.

L'anticipation crée le sentiment que quelque chose est sur le point de se produire et est également presque inutile en ce qui concerne les expériences des utilisateurs. Il ne fonctionne que de manière limitée pour certaines micro-interactions et les états des boutons.

La mise en scène fait référence à la disposition de l'animation, ce qui est logique pour un dessin animé Disney car les personnages sont constamment en mouvement, mais dans une expérience utilisateur, cela est simplement considéré comme «la conception».

L'action Straight Ahead et Pose to Pose sont moins des principes que les approches du processus de dessin / animation réel: vous pouvez créer une animation plus fluide si vous dessinez des images continues, ou utilisez la pose pour poser pour configurer quelques images clés et combler les lacunes . Dans les expériences utilisateur, ce processus se traduit à peine, à moins qu'une animation réelle image par image ne se produise. Par défaut, indépendamment de l'outil que vous utilisez, presque toutes les animations de l'interface utilisateur sont créées à l'aide d'images clés.

L'action de suivi et de chevauchement a à voir avec le respect des lois de la physique et de l'inertie, et comment les corps physiques réagissent, qui ont tous deux peu à voir avec les interfaces utilisateur, sauf si vous comptez sur le principe suivant, qui est le plus utile dans le groupe .

Ralentir et ralentir indique que les objets ont besoin de temps pour accélérer et ralentir. Ceci est extrêmement pertinent car 100% de l'animation de l'interface utilisateur doit utiliser ce principe. Il est communément appelé «assouplissement» et est extrêmement important.

L'arc (requis pour reproduire le mouvement physique) est presque inutile pour l'animation d'interface utilisateur, et est également l'exception plutôt que la règle.

L'action secondaire est utile et est idéale pour les transitions d'écran et la configuration de la hiérarchie visuelle.

Le timing est pertinent lors du dessin de personnages, mais dans les interfaces utilisateur, où le mouvement doit être net pour se sentir réactif, je trouve préférable de compter sur l'assouplissement pour concevoir la sensation de l'interaction, plutôt la durée.

L'exagération se rapporte au degré de réalisme ou de caricature, encore une fois, peu pertinent pour l'animation de l'interface utilisateur, car la conception est prédéterminée.

Le dessin solide est également essentiellement théorique, car l'animation de l'interface utilisateur traite du comportement des objets d'interface au fil du temps, et non de la conception réelle des objets eux-mêmes.

L'appel parle également du traitement visuel, encore une fois sans rapport avec le comportement de l'interface au fil du temps.

En conclusion

La question demeure donc: pourquoi les 12 principes de base de l'animation ne décrivent-ils pas correctement l'animation de l'interface utilisateur?

La ventilation peut être mieux comprise par la simple observation: l'animation de l'interface utilisateur n'obéit pas aux mêmes règles ni aux mêmes principes que les corps organiques se déplaçant dans l'espace physique. L'animation de l'interface utilisateur est un médium distinct, aussi distinct que la photographie de la peinture - avec des caractéristiques qui se chevauchent (la photographie et la peinture sont des compositions visuelles statiques reposant sur la lumière et la composition) mais sont des médiums fondamentalement différents.

En termes simples, les 12 principes de base de l'animation ne s'appliquent pas à l'animation d'interface utilisateur car ils résolvent un problème différent.

Au cours des prochains articles, j'explorerai ce que sont ces principes d'animation d'interface utilisateur, quel problème les principes d'animation d'interface utilisateur résolvent, comment les principes sont différents des techniques et comment vous pouvez concevoir et utiliser l'animation d'interface utilisateur dans vos projets actuels et futurs pour avoir un impact sur la convivialité et créer des expériences utilisateur plus convaincantes et efficaces.