Le design doit s’adapter sans cesse aux nouvelles pratiques, aux nouvelles technologies, aux nouvelles tendances. Avec elles, les habitudes des utilisateurs changent. L’une des grandes missions du designer est de s’approprier ces évolutions et d’améliorer le quotidien des utilisateurs. Depuis quelques temps, une nouvelle branche de l’UI design émerge : l’« UI animation ». C’est l’application du motion design à l’UI design.
Le motion appliqué à l’UI design présente différents avantages. L’UI animation permet de mieux communiquer avec les développeurs et les personnes avec lesquelles on travaille. C’est un outil puissant de projection au stade où le projet n’est pas encore développé. L’UI animation permet également de faire évoluer le design et de créer de nouvelles expériences utilisateur. Enfin, elle aide à raconter une histoire dans l’expérience utilisateur.
Qu'est-ce que l'UI animation ?
Le métier de l’UI designer est de raconter une histoire à travers un écran, et de rendre cette histoire la plus mémorable et compréhensible possible. L’UI animation est un outil au service du designer qui permet de rendre cette histoire encore plus significative pour l’utilisateur.
La définition et l’origine du motion design
Le motion est une discipline du design littéralement traduit de l’anglais par « mouvement » : cela consiste à animer différents éléments graphiques comme des images, de la typographie, des formes etc. Historiquement le motion est issu du cinéma et est utilisé très tôt dans les génériques de film. Aujourd’hui, le motion est devenu un support de communication impactant à la télévision, sur les écrans publicitaires, sur le web, etc. À l’origine du motion dans les années 30, les Studio Disney élaborent les 12 principes de l'animation qui servent encore aujourd’hui de référence dans ce domaine.
La définition de l’UI design
UI est l'abréviation de « user interface », et désigne l’ensemble de la partie visible (typographie, les couleurs, la hiérarchisation des contenus etc.) de l’interface avec laquelle l’utilisateur interagit. Une interface réussie est agréable, facile et pratique à utiliser. C’est le lien direct entre l’utilisateur et le programme ou la plateforme web.
Si l’esprit des principes du motion s’applique à l’UI design, les animations doivent être simplifiées autant que possible. Elles ne doivent pas seulement être esthétiques mais également s’inscrire dans un langage universel reconnu et compris par les utilisateurs.
Les différents types d'animation
Il existe 3 grands types d’animation avec une utilité spécifique.
Une bonne animation trouve un équilibre entre ces différents types : les animations fonctionnelles, les animations structurelles et les animations émotionnelles. L’interface peut également mixer ces éléments pour avoir un impact encore plus fort.
Les animations fonctionnelles : « tap, drag and drop, tooltips etc. »
Le premier rôle des animations est d’attirer l’attention de l’utilisateur vers les éléments les plus importants et lui montrer quelles sont les étapes à suivre. Ce sont elles qui guident l’utilisateur dans son expérience. Parfois, les changements d’état peuvent être difficiles à suivre. C’est ce qu’on appelle en science cognitive « la cécité de changement ». C’est le cas par exemple lorsqu’il y a un changement visuel soudain avec de nouvelles informations. Les animations permettent de prendre l’utilisateur par la main et de le guider à travers ce nouvel élément. Notre cerveau se focalise naturellement sur le mouvement qui amène l’utilisateur vers ce nouveau stimulus visuel et l’étape suivante.
Les UI animations donnent par exemple l’état du système, et sont un élément de transparence dans l’interaction avec l’utilisateur. Une animation doit être comprise sans texte par tous les utilisateurs.
L’état de chargement
L’évolution du chargement est représentée ici par la flèche qui se transforme en trait pour indiquer que le fichier est bien en train de charger. Lorsque le trait atteint la forme d’un cercle plein, le téléchargement est terminé. L’utilisateur a un retour visuel avec une encoche qui confirme le téléchargement.
Ces animations permettent de diminuer l’état de frustration de l’utilisateur et de garder son attention pendant le temps d’attente.
Error shaking
Lorsqu’un utilisateur entre un code confidentiel, il doit avoir un retour visuel en cas d’erreur. Le secouement des icônes signifie une erreur dans le code tapé par l’utilisateur. Il rappelle le mouvement « non » de la tête.
Les animations structurelles : créer du lien entre les éléments.
Les animations structurelles sont celles qui mettent en relation les différents écrans, selon les lois de la physique. Google a largement contribué à leur utilisation dans son « Material design » en définissant des principes d’animation. Pour rendre une animation plus réelle il faut prendre en compte l’inertie, la vélocité, la vitesse des éléments en mouvements sur l’écran. Si ces principes ne sont pas pris en compte, l’utilisateur peut rapidement être désorienté. L’animation devient un frein plutôt qu’un guide dans la narration de l’histoire.
L’utilisateur navigue entre les cartes, le mouvement est prédictible et naturel. En cliquant sur une des cartes, celle-ci s’ouvre en plein écran. L’animation est claire et propulse l’utilisateur dans l’univers du cinéma.
Les animations émotionnelles : raconter une histoire.
Les humains sont à la fois des êtres rationnels et émotionnels. Selon l’un des pionniers et père fondateur de l’UX design, Donald A. Norman, nous choisissons et utilisons les objets non seulement pour leur utilité, mais également pour ce qu’ils nous font éprouver. Plus l’expérience est plaisante, plus elle est marquante et engageante. Elle crée un moment d’enchantement et captive l’attention de l’utilisateur.
Elles peuvent dynamiser l’interface, la rendre ludique, intrigante et apporter une réelle identité. L’émotion peut être déclenchée par l’animation d’un personnage, d’une illustration, d’un logo etc.
L’animation des personnages rend l’interface ludique et attractive. L’utilisateur s’adresse à des personnages attachants qui l’invitent à poursuivre son parcours. Il se sent ainsi plus facilement en confiance.
Pour résumer :
- Les animations fonctionnelles : elles améliorent l’utilisation et guident l’utilisateur. Elles apportent un retour visuel pour l’amener vers les prochaines étapes.
- Les animations structurelles : elles concernent la structure et la navigation de l’utilisateur. Elles définissent la relation entre différents écrans, leur hauteur, l’échelle etc. et facilite la navigation et la compréhension de celle-ci.
- Les animations émotionnelles : ce sont les animations de personnages, illustrations, les « moments de bonheur ». Elles rendent l’expérience unique et touchent l’utilisateur émotionnellement.
Comment réussir son animation ?
Le Material Design de Google pose un certain nombre de principes un peu plus techniques qui aident à créer des animations impactantes. Pour créer une animation avec un mouvement naturel, il faut par exemple prendre en compte la vitesse et les accélérations.
Gérer la vitesse
La vitesse de l’animation ne doit être ni trop rapide, au risque de désorienter l’utilisateur, ni trop lente, au risque d’être appréhendé comme un bug de l’interface et frustrer l’utilisateur. La vitesse optimale se situe entre 200 et 500 ms.
Ici, l’animation de chaque élément ne devrait pas dépasser 20-25 ms. Au-delà, l’expérience peut signifier un ralentissement de l’interface et une mauvaise performance.
Utiliser des courbes d’accélération
Dans la vie physique, les objets ne se déplacent pas à la même vitesse dans un temps donné. Pour apporter une dimension plus réaliste aux animations, la courbe d’animation peut être différente. Par exemple, une animation peut avoir un mouvement constant, ou bien accélérer puis décélérer etc.
Étude de cas
Une interface de e-commerce
L’un des enjeux pour un designer sur une interface de e-commerce est d’aider l’utilisateur à se projeter avec les produits qu’il achète. Sur cette animation, l’utilisateur peut choisir la taille et la couleur de la chaussure. L’animation redonne un sentiment de contrôle à l’utilisateur. Il vit une expérience immersive et plus agréable qu’avec une simple interface présentant une liste de produits sans interactions.
Les animations sont, ici, à la fois fonctionnelles et émotionnelles. Elles guident l’utilisateur dans sa recherche et rendent l’expérience agréable et mémorable.
Une app de gestion des finances
Dans cette interface, l’enjeu est de simplifier au maximum l’expérience afin que la gestion des finances soit la plus confortable possible. En effet, la gestion des finances peut être une expérience rébarbative pour certains utilisateurs. Les animations rendent plus agréable l’expérience, en utilisant des transitions qui permettent d’organiser les éléments. L’apparition des chiffres au « tap » du graphique met en mouvement les chiffres correspondants. Chaque dépense est aussi associée à une couleur, elle-même associée à une animation.
Si tous les types d’animations ont leur utilité, celles-ci doivent toujours servir l’utilisateur. Qu’elles rendent agréable une fonctionnalité, renforcent une cohérence ou fassent vivre une expérience unique, elles doivent s’inscrire dans le parcours de l’utilisateur.
L’UI animation n’est qu’au début de son développement. Elle rend l’UI design encore plus interactif, pratique et immersif en apportant de l’émotion à un design digital qui peut parfois être trop statique.
Sources :
