Lottie : Quand l’UX web / app rencontre le motion design

Au programme

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.

Partager

Articles similaires

Pourquoi est-il important de montrer sa culture d’entreprise : 7 exemples de vidéos corporate
Envie d’attirer les meilleurs talents dans votre entreprise ? Découvrez comment réaliser les meilleures vidéos corporate pour affirmer votre culture d’entreprise
Les meilleures pubs vidéo de Noël 2021
Retrouvez la sélection des meilleures pubs de Noël de 2021 🎅
Comment référencer une vidéo sur Youtube et Google
Nombreuses sont les entreprises à dépenser du budget sur la production de vidéos en oubliant de passer du temps et un peu d’argent pour améliorer la visibilité de ces vidéos sur Youtube. Découvrez comment améliorer le référencement de vos vidéos