Nous en parlions ici, les micro-interactions inclues dans les applications mobiles, entrent en jeu dans la conception d’une expérience utilisateur émotionnellement positive et engageante. En naviguant sur une interface, l’esprit humain est rapidement attiré vers les éléments dynamiques. Une image animée aura ainsi plus d’impact sur l’attention de l’utilisateur qu’un visuel statique. L’animation n’est pas qu’un détail esthétique mais participe véritablement à la rétention de l’utilisateur. Elle fournit également à l’application un avantage concurrentiel lui permettant de se démarquer sur un marché saturé. Faute de méthodes rapides et simples pour intégrer ce genre d’animations dans des applications natives iOS ou Android, les concepteurs préfèrent généralement en limiter l’utilisation ou les remplacer par des fichiers image volumineux de type GIF par exemple.  

Lottie et l’intégration d’animations complexes

Dévoilée par les développeurs d’Airbnb il y a quelques semaines, Lottie est la solution gratuite qui vous permettra d’intégrer des animations complexes dans vos applications mobiles. Comment ça marche ?  

1) Créez

Tout commence avec le logiciel Adobe After Effects, de plus en plus utilisé par les designers pour animer illustrations vectorielles, logos et présentations de produits. L’animation en tant que telle se conçoit donc ici.    

2) Convertissez

Depuis GitHub, téléchargez puis installez le plugin open source BodyMovin. Il vous permettra d’utiliser l’animation After Effects et de la convertir dans plusieurs formats dont SVG et HTML.  

3) Exportez

Choisissez plutôt d’exporter votre fichier au format JSON. L’animation est ainsi décrite en texte plutôt qu’en vidéo, ce qui rend le document plus léger et facilement intégrable.  

4) Intégrez

Téléchargez la library Lottie (API gratuite) pour la plateforme qui vous intéresse (iOS, Android, React Native), puis finalisez l’insertion de l’animation dans votre application. Vous pouvez également la redimensionner, l’accélérer, la ralentir ou la faire boucler. Tout cela sans sans repasser par la case After Effects. Sachez également qu’un binding existe pour les développeurs Xamarin.     Avec Lottie, l’écriture de nombreuses lignes de code n’est plus nécessaire à la mise en place de ces animations plus riches mais beaucoup moins volumineuses. La volonté des ingénieurs d’Airbnb est d’inciter les concepteurs d’applications mobiles à intégrer davantage d’animations dans leurs interfaces de façon à optimiser l’expérience et l’engagement émotionnel de l’utilisateur. En évolution constante, Lottie sera régulièrement enrichie et promet la naissance de belles interactions.  

Sources : Airbnb Design