Sommaire
En novembre dernier, mon équipe et moi-même avons assisté à la conférence de Craig Dehner lors de l’événement Shiftseven à Buenos Aires, ce qui m’a fait réfléchir aux implications que le mouvement peut avoir sur l’expérience utilisateur de nos produits numériques.
Il a expliqué comment l’animation peut aider les transitions, le prix, le temps de chargement et donner du caractère à l’interface utilisateur :
« C’est très à la mode en ce moment de créer des animations de boutons et des transitions vraiment cool, et c’est considéré comme du motion design, mais le motion design peut aller beaucoup plus loin que cela ». Retrouvez d’autres informations ici.
Comment le motion design peut-il améliorer l’expérience que nous offrons aux utilisateurs de nos produits ?
Great UX, c’est avant tout créer une expérience cohérente et raconter une bonne histoire. C’est pourquoi nous ne devrions pas travailler sur l’animation de l’interface utilisateur sans garder l’UX à l’esprit, surtout après que la conception soit terminée. Habituellement, nous concevons des écrans séparés et nous n’avons pas l’habitude de penser aux transitions entre tous les états de l’expérience. De plus, la façon dont les éléments vont bouger, en pensant généralement « c’est juste un truc cool à ajouter si on a le temps », ce qui fait que notre expérience se sent souvent dissociée.
Intégrer le mouvement pour améliorer l’expérience de l’utilisateur et penser comment les éléments vont bouger et réagir à l’interaction de l’utilisateur est une nécessité dès le début : le mouvement donne de la personnalité, du contenu et peut améliorer la convivialité.
Refléter la personnalité de votre marque
En même temps, notre motion design doit être en accord avec la personnalité de notre marque. Si notre marque est ludique, l’animation doit être la même, mais si notre marque est sérieuse, elle ne peut pas « sauter » comme un enfant enjoué. Par exemple, lorsque vous voyez quelqu’un marcher qui a l’air triste, vous voyez probablement une personne qui a les épaules basses et qui fait des pas lourds, mais lorsque vous voyez quelqu’un qui a l’air fier en marchant, son mouvement sera complètement différent et plus sûr, sa poitrine sera gonflée et son menton regardera vers le haut.
Penser en mouvement offre une dimension étonnante à explorer et à travailler pour montrer comment la marque et le produit sont. Un excellent exemple de réflexion sur la personnalité d’une marque par le mouvement est Skype, qui reflète un mouvement ludique et flexible dans l’ensemble de l’application.
Apprenez des maîtres de l’animation
En parlant de motion design, une bonne façon de commencer à apprendre est d’étudier les « 12 principes d’animation » établis par les animateurs de Disney Ollie Johnston et Frank Thomas dans leur livre de 1981 « The Illusion of Life » : Disney Animation », publié en 1981. Voici un bref aperçu de chacun d’entre eux :
SQUASH & STRETCH
ANTICIPATION
STAGING
DROIT DEVANT & POSE À POSER
SUIVI ET CHEVAUCHEMENT
SLOW IN & SLOW OUT
ARCHS
ACTION SECONDAIRE
TIMING
EXAGGERATION
TIRAGES SOLIDES
APPEL
Utiliser le mouvement pour améliorer l’expérience de l’utilisateur
Pourtant, l’animation peut non seulement donner de la personnalité à notre produit numérique, mais aussi en améliorer l’utilisation. Elle permet d’offrir un prix abordable et de connecter tous les états de l’application (même les états extrêmes) tout en fournissant un contexte.
Elle peut fournir un retour d’information et une visibilité de l’état du système. Par exemple, elle peut non seulement informer l’utilisateur du temps d’attente, mais aussi du temps qu’il faudra pour que quelque chose se passe ou même fournir des informations sur ce qui se passe. Toutes les animations de chargement sont géniales, mais nous devons réfléchir à ce qui communique le mieux dans notre projet. Peut-être que l’utilisateur aura besoin de plus de retours d’information que de simplement voir une roue tourner de façon amusante. Lors du chargement, une animation qui informe l’utilisateur du pourcentage est toujours un excellent moyen de s’engager. Une autre façon dont le mouvement peut aider l’utilisateur à comprendre que l’application est en train de se charger est d’animer la façon dont les éléments apparaissent pendant le chargement. Comment ? En fournissant de l’aide sans utiliser des roues évidentes qui confondent parfois l’utilisateur avec un mauvais fonctionnement de l’application ou du téléphone. Facebook utilise ce type d’animation lors du chargement du fil d’actualité.
Avec le mouvement, vous pouvez également améliorer la reconnaissance des actions appliquées à l’objet, et les options disponibles plutôt que le rappel. Un bouton CTA spécifique peut se déplacer pour inciter l’utilisateur à taper dessus, ou une flèche peut se déplacer pour faire savoir à l’utilisateur qu’il y a plus d’informations sur la gauche, par exemple.
Lors de l’animation des messages d’erreur, si un mot de passe est erroné, déplacer l’espace vide à gauche et à droite comme pour dire « non » peut fonctionner comme une grande métaphore. Mais nous devons tenir compte du fait que lorsque nous utilisons des métaphores, des différences culturelles apparaissent. En Inde, par exemple, bouger la tête à droite et à gauche, c’est faire attention à l’orateur. Craig Dehner nous a montré comment Apple a résolu ce problème en faisant tomber les lettres du champ de texte lorsque le mot de passe est incorrect. Il est donc très important de faire une recherche approfondie sur la dimension culturelle des utilisateurs de nos applications lorsqu’ils utilisent des ressources de mouvement métaphorique.
Il est également important de ne jamais oublier le contrôle et la liberté de l’utilisateur. Une animation ne doit jamais empêcher l’utilisateur d’interagir avec l’interface utilisateur. Le motion design n’est jamais une chose décorative : il est là pour améliorer la compréhension de l’interface par l’utilisateur, et ce devrait être une décision très intelligente qui intègre l’ensemble de l’expérience. De plus, comme nous avons des couleurs de police ou des icônes standard lorsque nous concevons une application, nous devrions suivre les mêmes normes pour la façon dont les objets vont se déplacer dans l’application ou sur le web ; la cohérence est vraiment importante. Si un écran de chargement se déplace vers le haut après le chargement, tous les écrans de chargement devraient faire de même. Nous devons également tenir compte de la façon dont les modèles de mouvement fonctionnent sur chaque système d’exploitation et tester avec les utilisateurs si nous proposons une animation différente qui n’est pas standard dans le système.
L’animation est l’un des deux piliers avec les gestes du design mobile, ils complètent l' »illusion » et donnent du sens. Cependant, comme pour l’expérience utilisateur, il s’agit d’un travail d’équipe et chaque membre devrait être engagé dans ce processus dès le premier jour d’un projet. Enfin, le concepteur doit être en communication constante avec l’équipe de développement pour comprendre et aider à l’exécution des animations.
