De nos jours, il est difficile d’impressionner ou même de surprendre avec une animation d’interface. Cette animation montre les interactions entre les écrans, explique comment utiliser l’application ou attire simplement l’attention de l’utilisateur. En explorant les articles sur l’animation, j’ai découvert que presque tous ne décrivent que des cas d’utilisation spécifiques ou des faits généraux sur l’animation, mais je n’ai trouvé aucun article où toutes les règles concernant l’animation des interfaces seraient clairement et pratiquement décrites. Eh bien, dans cet article, je n’écrirai rien de nouveau, je veux juste rassembler tous les grands principes et règles en un seul endroit, pour que les autres concepteurs qui veulent commencer à animer des interfaces n’aient pas à chercher des informations supplémentaires.
Durée et vitesse de l’animation
Lorsque des éléments changent d’état ou de position, la durée de l’animation doit être suffisamment lente pour permettre aux utilisateurs de remarquer le changement, mais en même temps suffisamment rapide pour ne pas faire attendre.
De nombreuses recherches ont découvert que la vitesse optimale pour l’animation d’interface se situe entre 200 et 500 ms. Ces chiffres sont basés sur les qualités particulières du cerveau humain. Toute animation inférieure à 100 ms est instantanée et ne sera pas reconnue du tout. Alors que l’animation d’une durée supérieure à 1 seconde donnerait une impression de retard et serait donc ennuyeuse pour l’utilisateur.
Sur les appareils mobiles, les directives de conception du material design suggèrent également de limiter la durée de l’animation à 200-300 ms. Comme pour les comprimer, la durée devrait être plus longue de 30% – environ 400-450 ms. La raison en est simple : la taille de l’écran est plus grande, de sorte que les objets prennent le chemin le plus long lorsqu’ils changent de position. Sur les habillement mobile, la durée devrait être 30% plus courte – environ 150-200 ms, car sur un écran plus petit, la distance à parcourir est plus courte.
L’animation Web est traitée différemment. Comme nous sommes habitués à une ouverture quasi instantanée des pages Web dans un navigateur, nous nous attendons à passer rapidement d’un état à l’autre. Ainsi, la durée des transitions web devrait durer environ 2 fois moins longtemps que sur les appareils mobiles – entre 150 et 200 ms. Dans d’autres cas, l’utilisateur pensera inévitablement que l’ordinateur se bloque ou a des problèmes avec la connexion Internet.
Cependant, oubliez ces règles si vous créez une animation décorative sur votre site Web ou si vous essayez d’attirer l’attention de l’utilisateur sur certains éléments. Dans ces cas, l’animation peut être plus longue.
Il ne faut pas oublier que quelle que soit la plate-forme, la durée de l’animation doit dépendre non seulement de la distance parcourue, mais aussi de la taille de l’objet. Les éléments plus petits ou l’animation avec de petits changements devraient se déplacer plus rapidement.
Par conséquent, l’animation avec des éléments grands et complexes semble meilleure.
Parmi les objets en mouvement de même taille, le premier à s’arrêter est l’objet qui a parcouru la distance la plus courte.
Les petits objets par rapport aux grands objets se déplacent plus lentement puisqu’ils font de plus grands décalages.
Lorsque des objets entrent en collision, l’énergie de collision doit être répartie uniformément entre eux selon les lois physiques. Il est donc préférable d’exclure l’effet de rebond. Ne l’utilisez que dans des cas exceptionnels où cela a du sens.
Le mouvement des objets doit être clair et net, alors n’utilisez pas de flou de mouvement (oui, utilisateurs After Effects, pas cette fois-ci). Il est difficile de reproduire l’effet même sur les appareils mobiles modernes et il n’est pas du tout utilisé dans l’animation d’interface.
Les éléments de la liste (cartes de nouvelles, listes de courriels, etc.) devraient avoir un délai très court entre leur apparition. Chaque occurrence du nouvel élément doit durer de 20 à 25 ms. L’émergence plus lente d’éléments peut gêner l’utilisateur.
Assouplissement
The illusion of life from cento lodigiani on Vimeo.
L’assouplissement aide à rendre le mouvement de l’objet plus naturel. C’est l’un des principes essentiels de l’animation, qui est décrit en détail dans le livre The Illusion of Life : Disney Animation, écrit par deux animateurs clés de Disney – Ollie Johnston et Frank Thomas.
Pour que l’animation n’ait pas l’air mécanique et artificielle, l’objet doit bouger avec une certaine accélération ou décélération – comme tous les objets vivants dans le monde physique.
Mouvement linéaire
Les objets qui ne sont affectés par aucune force physique se déplacent linéairement, c’est-à-dire à vitesse constante. Et juste à cause de ce fait, ils ont l’air très artificiel et faux pour l’œil humain.
Toutes les applications d’animation utilisent les courbes d’animation. Je vais essayer d’expliquer comment les lire et ce qu’elles signifient. La courbe montre comment la position de l’objet (axe y) change pendant les mêmes intervalles de temps (axe x). Dans le cas présent, le mouvement est linéaire, de sorte que l’objet parcourt la même distance en même temps.
Le mouvement linéaire, par exemple, ne peut être utilisé que lorsque l’objet change de couleur ou de transparence. En général, on peut l’utiliser pour les états quand un objet ne change pas de position.
Facilité d’accès ou courbe d’accélération lent sur le début et accélère de plus en plus vers la fin
On peut voir sur la courbe qu’au début la position de l’objet change lentement et que la vitesse augmente progressivement. Cela signifie que l’objet se déplace avec une certaine accélération.
Cette courbe doit être utilisée lorsque les objets sortent de l’écran à pleine vitesse. Il peut s’agir de notifications système ou simplement de cartes de l’interface. Mais gardez à l’esprit que ce type de courbe ne devrait être utilisé que lorsque les objets quittent l’écran pour toujours et que nous ne pouvons pas les rappeler ou les retourner.
La courbe d’animation permet d’exprimer la bonne humeur. Dans l’exemple ci-dessous, nous pouvons voir que la durée du mouvement et la distance pour tous les objets est la même, mais même de petits changements dans la courbe vous donnent la possibilité d’influencer l’ambiance de l’animation.
Et bien sûr, en changeant les courbes, vous pouvez déplacer l’objet aussi proche que possible du monde réel.
Courbe de sortie ou de décélération rapide sur le début et décélère sur la fin
C’est l’inverse de la courbe d’entrée facile, de sorte que l’objet couvre rapidement de longues distances puis réduit lentement la vitesse jusqu’à ce qu’il s’arrête finalement.
Ce type de courbe doit être utilisé lorsque l’élément émerge de l’écran – il s’élève sur l’écran à pleine vitesse, ralentit progressivement jusqu’à ce qu’il s’arrête complètement. Ceci peut également s’appliquer à différentes cartes ou objets qui apparaissent de l’extérieur de l’écran.
Courbe facile d’accès ou courbe standard
Cette courbe permet aux objets de prendre de la vitesse au début, puis de la ramener lentement à zéro. Ce type de mouvement est le plus fréquemment utilisé dans l’animation d’interface. Chaque fois que vous doutez du type de mouvement à utiliser dans votre animation, utilisez une courbe standard.
Selon les directives de conception des matériaux, il est préférable d’utiliser une courbe asymétrique pour rendre le mouvement plus naturel et réaliste. La fin de la courbe doit être plus accentuée que son début, de sorte que la durée de l’accélération soit plus courte que celle du ralentissement. Dans ce cas, l’utilisateur sera plus attentif au mouvement final de l’élément et donc à son nouvel état.
Le « Ease-in-out » est utilisé lorsque les objets se déplacent d’une partie de l’écran à l’autre. Dans ce cas, l’animation évite l’effet accrocheur et dramatique.
Le même code mouvement doit être utilisé lorsque l’élément disparaît de l’écran, mais l’utilisateur peut le ramener à l’endroit précédent à tout moment. Il concerne entre autres le tiroir de navigation.
De ces exemples découle une règle fondamentale que beaucoup de débutants négligent – l’animation initiale n’est pas égale à l’animation finale. Comme dans le cas du tiroir de navigation – il apparaît avec la courbe de décélération et disparaît avec la courbe standard. De plus, selon Google Material Design, le temps d’émergence de l’objet devrait être plus long pour attirer plus d’attention.
Une fonction cubic-bezier() est utilisée pour décrire les courbes. On l’appelle cubique parce qu’il est basé sur quatre points. Le premier point avec les coordonnées 0;0 (en bas à gauche), et le dernier avec les coordonnées 1;1 (en haut à droite) sont déjà définis sur le graphique.
Sur cette base, nous n’avons pas besoin de décrire que deux points sur le graphique, qui sont donnés par quatre arguments de la fonction cubic-bezier() : les deux premiers sont les coordonnées x et y du premier point, les deux seconds sont les coordonnées x et y du second point.
Pour simplifier votre travail avec les courbes, je vous suggère d’utiliser les sites easings.net et cubic-bezier.com. La première contient la liste des courbes les plus fréquemment utilisées, dont vous pouvez copier les paramètres dans votre outil de prototypage. La seconde source vous donne la possibilité de jouer avec différents paramètres de la courbe et de voir immédiatement comment les objets vont bouger.
Chorégraphie en animation d’interfaces
Tout comme dans la chorégraphie de ballet, l’idée principale est de guider l’attention de l’utilisateur dans une direction fluide pendant la transition d’un état à un autre. Il existe deux types de chorégraphies :
- l’interaction égale
- l’interaction subordonnée.
Interaction égale
L’interaction égale signifie que l’apparence de tous les objets obéit à une règle particulière.
Dans ce cas, l’apparence de toutes les cartes est perçue comme un flux qui guide l’attention de l’utilisateur dans une direction, à savoir du haut en bas. Si nous ne suivons pas la commande, l’attention de l’utilisateur sera dispersée. L’apparence de tous les éléments à la fois serait également mauvaise.
Quant à la vue tabulaire, c’est un peu plus compliqué. Dans ce cas, la focalisation de l’utilisateur doit être orientée en diagonale, de sorte que montrer les éléments un par un est une mauvaise idée. Révéler chaque élément un par un rendra l’animation excessivement longue, et l’attention de l’utilisateur sera en zigzag, ce qui est faux.
Interaction subordonnée
L’interaction subordonnée signifie que nous avons un objet central qui attire toute l’attention de l’utilisateur, et tous les autres éléments lui sont subordonnés. Ce type d’animation donne le sens de l’ordre et attire davantage l’attention sur le contenu principal.
Dans d’autres cas, il serait très difficile pour l’utilisateur de savoir quel objet suivre pour que son attention soit dispersée. Par conséquent, si vous avez plusieurs éléments que vous voulez animer, vous devez définir clairement la séquence de leur mouvement et animer le moins d’objets possible en même temps.
Selon Material.io, lorsque les objets en mouvement transforment leur taille de façon disproportionnée, ils doivent se déplacer le long de l’arc plutôt que dans une ligne droite. Cela aide à rendre le mouvement plus naturel. Par « disproportionnellement », j’entends que le changement de hauteur et de largeur de l’objet par augmentation/diminution s’effectue de manière asymétrique, c’est-à-dire avec une vitesse différente (par exemple, une carte carrée devient un rectangle).
Le mouvement le long de la ligne est utilisé lorsque l’objet change de taille proportionnellement. Puisque la mise en œuvre d’un tel mouvement est beaucoup plus facile, la règle de l’arc disproportionné est souvent négligée. En regardant les exemples réels d’applications, vous verrez la domination du mouvement linéaire.
Le mouvement sur la courbe peut être réalisé de deux façons : la première appelée Vertical out – l’objet commence à se déplacer horizontalement et se termine par un mouvement vertical ; la seconde – Horizontal out – l’objet commence à se déplacer verticalement et se termine par un mouvement horizontal.
La trajectoire du déplacement de l’objet le long de la courbe doit coïncider avec l’axe principal de l’interface de défilement. Par exemple, sur l’image suivante, nous pouvons faire défiler l’interface vers le haut et vers le bas et, en conséquence, la carte se déploie verticalement vers l’extérieur – d’abord vers la droite, puis vers le bas. Le mouvement inverse se fait de la manière inverse, c’est-à-dire que la carte monte d’abord verticalement et finit par se déplacer horizontalement.
Si les trajectoires des objets en mouvement se croisent, ils ne peuvent pas se croiser. Les objets doivent laisser suffisamment d’espace pour le mouvement d’un autre objet en ralentissant ou en accélérant leur propre vitesse. Une autre option – ils repoussent simplement d’autres objets. Pourquoi cela ? Puisque nous supposons que tous les objets de l’interface se trouvent dans un plan.
Dans un autre cas, l’objet en mouvement peut s’élever au-dessus d’autres objets. Mais encore une fois pas de dissolution ou de mouvement à travers d’autres objets. Pourquoi ? Puisque nous croyons que les éléments de l’interface se comportent selon les lois de la physique, et qu’aucun objet solide dans le monde réel n’est capable de le faire. Pendant le mouvement, les objets ne doivent pas se croiser, mais laisser de l’espace pour le mouvement d’un autre objet.
Conclusions
Ainsi, si l’on résume l’ensemble des règles et principes mentionnés ci-dessus, l’animation de l’interface doit refléter les mouvements que nous connaissons du monde physique – friction, accélération, etc. En imitant le comportement des objets du monde réel, nous pouvons créer une séquence qui permet aux utilisateurs de comprendre à quoi s’attendre de l’interface.
Si l’animation est construite correctement, elle est discrète et ne distrait pas les utilisateurs de leurs objectifs. Si c’est le cas, vous devez soit l’assouplir, soit même l’enlever. Cela signifie que l’animation ne doit pas ralentir l’utilisateur ou l’empêcher d’exécuter la tâche.
Mais n’oubliez pas que l’animation est plus un art que la science, il est donc préférable d’expérimenter et de tester vos décisions sur les utilisateurs.
