Lottie, ou comment un annonceur révolutionne le workflow de l'agence digitale.

Comme vous le savez sans doute, chez Kick, on adoooooooooore les belles idées innovantes. Alors si en plus ces idées permettent de simplifier la vie de nos créatifs et développeurs, on ne peut qu’adhérer.
Et la belle idée du jour, elle vient de chez AirBnb. Quel rapport entre le leader de la location de logement et les workflows de production des agences digitales, allez-vous me dire ? Et bien quand on y pense, ça fait plutôt sens !

‍

‍

1. Rapport choucroute ?

‍‍

On ne présente plus Airbnb...
Mais laissez-moi le faire quand même (chuuut, c’est pour mon référencement)

Airbnb est la plateforme de référence pour la location de logement de courte durée. 

La légende raconte que la société - qui s’appelait alors AirBed and Breakfast, soit littéralement “matelas gonflable et petit dej'- a été créé en 2007 par 2 jeunes designers de la côte Est pour pallier à la saturation du marché de l'hôtellerie lors d’évènement attirant un large public.
Depuis, la société n’a eu de cesse d’évoluer et de grandir pour devenir ce qu’elle est aujourd’hui, aka un mastodonte du web.

‍

LA référence UI / UX Design

‍

AirBnb, c’est un peu le fantasme ultime de n’importe quel designer.  Tout y est beau, limpide et terriblement efficient. D’un bout à l’autre de son parcours, le visiteur est pris par la main, jamais il n’a le moindre doute de ce qu’il doit faire pour parvenir à ses fins.

En un mot comme en 100, l’UI et l’UX design ont été pensés, posés et repassés pour arriver à ce résultat qui est littéralement devenu LA référence dans le milieu. Rappelons que les fondateurs sont à l’origine designers : clairement, ces gars-là savent ce qu’ils font, et ce n’est pas pour rien que AirBnb est devenu un cas d’école.

‍
L’animation au cœur de l’UI Design

Un bon UI/UX Design, ça passe par beaucoup d’éléments. Mais ce qui nous intéresse aujourd’hui, ce sont les animations et micro-interactions.

Mais qu’est-ce qu’une micro-interaction, me demanderez-vous en bons petits curieux que vous êtes ?
Dans les très grandes lignes, car ce n’est pas le sujet de cet article, une micro-interaction est la traduction visuelle d’une action, en général réalisée par l’utilisateur.

Mais les exemples sont toujours plus parlants ! 

Sur la plupart des applications mobiles, lorsque vous scrollez vers le bas, cela a pour action de rafraîchir l’écran sur lequel vous vous trouvez. Pour symboliser ce processus, vous verrez apparaître un élément animé -souvent un cercle symbolisant un temps de chargement vous indiquant concrètement que votre geste a une incidence sur le comportement de votre écran. Voilà ce qu’est une micro-interaction : un genre de langage entre l’utilisateur et l’interface.

‍

Et vous verrez, tant sur son site que son application, qu’AirBnb raffole de ce genre de petites mignardises d’animation UI/UX design.

Du besoin de repenser ses processus de production

Sauf que l’animation, ça demande du temps. D’un côté, vous avez des designers qui s’écorchent les yeux sur leurs écrans pour produire de multiples variantes d’une seule petite animation, et de l’autre vous avez une équipe de développeurs qui s’arrache les cheveux pour réussir à comprendre et intégrer tout ça au code sans dénaturer ni casser quoi que ce soit, mais également sans alourdir le chargement de ses interfaces - car on ne le rappelle jamais assez, un temps de chargement qui s’étire, c’est autant d’utilisateurs qui quittent le navire !

Et imaginez ensuite vous rendre compte que l’animation n’est pas assez rapide, que la couleur ne matche pas complètement ou même simplement que la taille n’est pas optimale... autant d’éléments qui génèrent de multiples allers-retours, et tout autant de litres de larmes qui coulent sur les pauvres joues fatiguées de votre équipe de production.

Autrement dit, c’est long, fastidieux et terriblement chronophage (et rappelons que le temps, c’est de la ressource, et donc de l’argent !)

Il doit bien y avoir un moyen de fluidifier tout ça, non ?

‍

2. Lottie, c’est quoi du coup ?

‍

Le Google Translate de l’UI Design

Lottie c’est donc la réponse de AirBnb pour améliorer ses workflows de création.

Il s’agit d’une technologie d’animation cross-platform permettant de transformer un fichier d’animation After Effects en code directement exploitable et intégrable.

Les designers et les développeurs sont deux espèces qui ne parlent pas la même langue. Lottie, c’est un peu leur “traducteur automatique” qui va comprendre un fichier graphique, et le transformer en données que les dev vont pouvoir comprendre. Car oui, c’est ça la vraie force de Lottie ! La traduction est faite en JSON, un format lisible au premier coup d'œil pour un développeur. Ce qui signifie que peu importe l’état (dans “état”, comprenez ici “une frame” ou “un instant donné”) de l’animation, le développeur saura reconnaître exactement à quelle ligne de code cela correspond.

Vous ne voyez pas la magie là-dedans ? Le code est facilement modifiable. En temps réel. Sans refaire intervenir le designer. Besoin de changer la couleur d’un élément ? Ça ne prend que 3 petites minutes. Vous trouvez votre animation trop rapide ? Cela se change en moins de temps qu’il n’en faut pour le dire. Vous souhaitez la voir apparaître à d’autres endroits mais avec d’autres variables ? Vous n’avez qu'à l'imaginer, et pouf c’est déjà fait !

‍

‍

Une solution Open Source

Parce que ce sont des gens vraiment sympas (mais aussi et surtout parce que ça leur fait une sacrée pub), les équipes de AirBnb ont rendu cette solution complètement gratuite et disponible en Open Source.

Le principe de l’Open Source, c’est de rendre le code complètement accessible. Donc, selon toute logique, n’importe qui peut jeter un œil à la solution, y déceler les éventuelles malfonctions et failles de sécurité mais également y apporter ses suggestions et améliorations.

AirBnB a posé les fondations de la solution, à la Communauté donc de la prendre en main et de la repenser par et pour son propre usage.

‍

3. Mais on en fait quoi ?

Vous l’avez donc bien compris, je suis plutôt conquise par cette petite révolution. Mais je ne suis que cheffe de projets, et donc pas la plus à même de vous donner un avis complet et objectif.
D’autres se chargent d’en parler bien mieux que moi !

L’avis du Designer

Lottie, c’est la satisfaction de voir son travail de designer respecté. Plutôt que de partir d’une note d’intention qui passera nécessairement par de la réinterprétation côté développeur et donc une multitude d’échanges et de retours pour arriver au résultat voulu, là on a un rendu utilisable en l’état.

‍

Fini les sempiternels débats avec les développeurs lorsqu’on s’entend dire que “ce n’est pas faisable” ou bien “c’est hors budget”, on a maintenant un outil qui est un véritable facilitateur de process et d’échange.

‍

Mais ce qui est incroyable, c’est la possibilité de templatiser son travail. Plus besoin de réaliser 15 versions d’une animation, une seule suffit, et libre aux développeurs ensuite de modifier les variantes selon les besoins. Lottie permet d’économiser du temps qui peut être utilisé de façon bien plus intelligente ailleurs.

Mais on voit la limite de Lottie dans son incompatibilité avec d’autres éléments de production. Dans la construction même de l’animation, on peut vite se retrouver coincé car une des fonctions d’After Effects ne sera pas supportée, une fois le fichier exporté, par tous les OS (Androïd et iOS) et navigateurs (bon, là c’est surtout avec IE et Edge, donc Lottie n’est pas vraiment à blâmer). Ce facteur peut brider la création.

‍

Aussi, Lottie n’est compatible qu’avec AE. Des outils de design d’interface et qui permettent de créer des animations à même ses maquettes, tels que Figma ou Flinto, sont les grands oubliés !

Lottie n’a pas pour vocation de savoir / pouvoir tout faire, mais il faut quand même reconnaître qu’il facilite grandement la production.

R.B. - UI UX Designer et Motion

L’avis du Développeur

Il aura fallu attendre 2020 -2020 !!!- pour qu’un outil tel que Lottie mette enfin un grand coup de pied dans la fourmilière et commence à s’imposer comme la norme. Avant ça, les animations devaient souvent être exhaustivement codées mathématiquement, ligne par ligne ou exportées vers un format commun avec une qualité de rendu souvent très mauvaise. Maintenant, avec ce format d’export en JSON, Lottie rend absolument tout possible.

Néanmoins, ça n’en fait pas LA solution magique qui répond à toutes les problématiques. Tout dépend de la façon dont le designer aura composé son animation, son fichier, et donc comment la machine retranscrit tout ça en code. Le JSON est certes ultra lisible, mais il n’en demeure pas moins que ça ne reste que de la data. Et la data, elle ne vient pas de nulle part...

Autrement dit, si le designer s’y est pris comme un manche -marges trop importantes, calques et frames mal nommés ou encore états d’animation trop nombreux- le fichier en devient incompréhensible, et il faut alors tester chaque variante pour trouver quel élément correspond à quelle donnée. Dans ce cas-là, autant ne pas passer par Lottie et développer l’animation from scratch.

‍

A.T. - Développeur frontend et contributeur Open Source React

Du coup, est-ce qu’on est si bien “Lottie” ?

Sorry not sorry, mais si je ne glisse pas au moins un seul jeu de mot bancal dans mes articles, je ne dors plus la nuit...

Bon, déjà, ce qu’on peut tirer de ces deux témoignages, c’est que designers et développeurs restent et resteront des espèces bien à part : là où les uns voient un problème, les autres y voient un avantage. Mais ce qui ressort surtout, c’est qu’un nouveau jouet, c’est bien, mais si on ne lui adjoint pas des règles et des principes, ça part dans tous les sens et il n’y a rien de bon à en tirer.

‍

Utiliser un nouvel outil, ça implique souvent de revoir sa façon de travailler, et dans le cas présent surtout de normer ses process pour éviter les couacs dans sa chaîne de production.

Maintenant que le constat est posé, il faut s’obliger à voir plus loin. Lottie est encore une toute jeune pousse qui ne demande qu’à se développer. Et c’est là que réside tout l'intérêt de l’Open Source. Il est certain que la communauté saura remonter et corriger ces petits défauts pour parfaire cet outil, et gageons qu’on ne touche ici qu’aux prémices d’une petite révolution !