Motion et interactif
Dans le dernier article on s’était déjà intéressé au croisement entre le motion et le web, ou comment intégrer des motions au sein d’un site web. Et aujourd’hui nous allons rester dans cet espace entre les deux, et nous intéressé au motion dans les interfaces.
UI et UX
D’emblée lorsque l’on parle de motion pour les interfaces on peut s’imaginer que l’on parle d’animation de logo, d’UI … qui participent à rendre l’interface plus vivante. Mais nous allons nous pencher sur la partie UX de la force, en étudiant The UX in Motion Manifesto écrit par Issara Willenskomer (avec une version synthétique en espagnole — qui propose parfois d’autres exemples).
Créer de l’ergonomie avec du motion
Le manifeste propose, en écho aux 12 principes d’animations, 12 principes d’UX dans les animations d’interfaces.
Les 12 principes sont les suivants :
- Easing
- Offset et Delay
- Parenting
- Transformation
- Value change
- Masking
- Overlay
- Cloning
- Obscuration
- Parallax
- Dimensionality
- Dolly et Zoom
Certains de ces principes font écho directement aux principes d’animation (notamment easing, offset et delay) et les autres sont complètement liés au domaine de l’interface. Je ne vais pas forcément revenir dans les détails sur chacun des principes, le manifeste (proposé plus haut en deux langues différentes) se suffit à lui-même et l’intérêt de faire entièrement du duplicate content semble limité.
L’objectif UX du motion d’interface
Tous ses principes ont pour but d’améliorer l’UX d’une interface et ce, de quatre façons différentes :
- en minimisant l’écart entre les attendes de l’utilisateur et l’expérience afin de rendre le mouvement des éléments naturels, presque invisible
- en créant une continuité d’un écran à l’autre …
- … tout en véhiculant un message narratif sur la progression de l’utilisateur
- en créant des relations spatiales, temporelles, hiérarchiques, entre des éléments
Certains de ces principes viennent théoriser des décisions qui nous semblent évidentes mais il est toujours intéressant de prendre pleinement conscience du pouvoir de l’animation UI. Cette animation ne doit pas être pensée comme une étape purement esthétique, mais comme un outil supplémentaire d’UX.
Communiquer avec les développeurs
Ce manifeste, qui veut insister sur l’importance des animations au sein d’une interface, laisse cependant en suspens une question essentielle : la communication avec les développeurs. C’est l’éternel combat, comment faire en sorte que les développeurs puissent implémenter de la manière la plus juste nos décisions de designer. Et l’enjeu dépasse de simple maquettes ou IXflow puisqu’il faut retranscrire un mouvement et un timing.
Uxmisfit propose un template de spécification efficace qui combine :
- l’animation de l’interface
- une timeline avec la durée des animations et l’ordre d’animation
- une précision sur le type d’easing
- les valeurs de départ et d’arrivée
