Améliorer l’expérience utilisateur de son site ou de son application avec des animations n’est pas nouveau. Les librairies d’animations CSS, HTML, JS, sont nombreuses et permettent d’implémenter des détails animés dans l’interface pour une meilleure immersion et une navigation “smooth”. L’enjeu pour les concepteurs d’applications mobile ou de site web est désormais d’initier des petites interactions qui vont créer un engagement, une émotion, une réaction. Et c’est là où les animations se révèlent importantes.
Néanmoins le tour des propositions est vite fait et il n’est pas abusif de dire que l’on retrouve les mêmes effets un peu partout. Ces solutions peuvent présenter des possibilités de personnalisation mais la tâche peut vite s’avérer complexe et chronophage. La plupart s’arrêteront donc au simple effet parallax et au menu burger animé au risque de manquer d’originalité.
Aujourd’hui, grâce à Lottie, le motion design (qui n’était jusqu’alors présent dans le web que sous forme d’intégration vidéo, d’élément flash ou de GIF) peut enfin prêter main forte à l’UX !
1,4 Mo
151 ko
34 ko
Lottie : un outil simple pour créer des animations complexes
Lottie permet via un plugin nommé “Bodymovin” d’exporter des animations complexes directement depuis After Effect en fichier Json. Ces fichiers dont le poids n’excèdera pas quelques dizaines de kilo octets s’intégreront en quelques clics par le développeur front.
Comment ça marche ? Grâce à des fonctions mathématiques et au dessin vectoriel, à la différence du GIF ou de la vidéo, le fichier json ne va pas contenir d’images mais des fonctions mathématiques et des valeurs permettant le tracé de l’animation. Il n’y a donc pas de question de résolution ou de compression, permettant un rapport poids/qualité inégalé. Seul bémol, pour l’instant tout ce que permet After effect n’est pas exportable en Json. Seules les fonctions simples sont pour l’instant disponibles mais tout porte à croire que les possibilités vont croître rapidement tant le potentiel est palpable.
Enfin, l’UI/UX design est bien loti
Fort de son outil, Lottie permet aux motion designers de proposer des animations gratuites pour se faire remarquer, créant ainsi un premier échange avec les développeurs. Deux corps de métiers qui n’avaient jusqu’ici pas pour habitude de travailler ensemble pourraient nous réserver de bonnes surprises dans le monde de l’UX/UI dans un futur proche.
Au sein de notre agence, Vingt Deux, cet outil a permis à notre motion designer de travailler sur des projets web, pour le plus grand plaisir de nos clients en leur fournissant des animations personnalisées uniques qui ne sont encore que peu courantes sur les sites web et apps. Ceci dans le but d’optimiser l’expérience et l’engagement émotionnel de l’utilisateur.
Exemple concret pour notre client Youdot. Loader animé décliné du logo.
N’hésitez pas à nous contacter si vous souhaitez intégrer ce type d’animations dans vos interfaces.
