Uber, Google, Instacart et d’autres adoptent l’outil de prototypage d’Airbnb, Lottie.

Il existe un nouveau logiciel de design tendance utilisé aujourd’hui par les grandes entreprises technologiques comme Airbnb et Google pour créer de nouvelles applications. Mais l’outil, appelé Lottie, n’est pas né de votre designer typique. Au lieu de cela, il est originaire d’une création de Madison Avenue.

[Photo: courtoisie Airbnb]

Salih Abdul-Karim a passé une décennie à New York, créant des publicités pour des clients comme Nike et Sony, et des réseaux comme Comedy Central et HBO. Comme beaucoup d’animateurs, il a passé ses jours à l’intérieur d’Adobe After Effects, en construisant ces lunettes visuelles dans un cadre à la fois.Ce n’est que lorsqu’il a déménagé dans la côte ouest et a pris un travail produisant des vidéos pour Square qu’il a réalisé le plus grand potentiel de ses propres talents. Il faisait un travail de composition typique :  Square sortirait une publicité avec un propriétaire de petite entreprise qui écoutait l’application Square sur un iPad, mais parce que les tablettes semblaient horribles lors d’un film vidéo, Abdul-Karim avait l’obligation d’éditer l’écran de l’iPad et de le remplacer par sa propre reconstruction de l’interface Carré – construite à partir de zéro dans After Effects. Il recréerait les mots, les boutons et les animations, puis les superposerait sur les images commerciales réelles, tout cela pour que l’application Square soit aussi bonne que possible à la télé. Et il l’a fait à nouveau, et à nouveau, et à nouveau.

[Image: courtoisie Airbnb]

«J’ai fait tellement de fausse UI que j’ai fini par penser, permettez-moi de tenter de toucher l’équipe de produits pour voir si je peux aider à prototyper certaines de ces choses avant même que nous puissions les réaliser», déclare Abdul-Karim, qui voulait aider à construire le produits plutôt que de les annoncer.  » J’ai fait quelques projets à Square. C’est ce qui m’a intéressé, non seulement à utiliser le mouvement ou l’animation pour vous vendre quelque chose, et vous divertir, mais utilisez le mouvement et l’animation une fois que vous êtes dans le produit aussi.En 2015, Abdul-Karim s’est dirigé vers Airbnb, où il a abandonné son ancien poste d’équipe vidéo pour travailler sur l’équipe UX. Pour construire de nouvelles interfaces, il a toujours travaillé dans son After Effects adoré pour prototyper des animations et des transitions, qui, bien qu’elles ne soient pas très connues, n’est pas encore une pratique courante dans l’industrie non plus. Mais souvent, ces animations n’entreraient pas dans les applications propres à Airbnb, car, comme c’est le cas dans le développement d’applications, il peut falloir un ingénieur travaillant pendant des semaines pour traduire ces jolies images en code de travail. Pourquoi l’outil préféré d’Hollywood fonctionne-t-il si bien pour le grand écran, et si mauvais pour les plus petits?

Frustré par le même goulet d’étranglement de conception à développement connu dans l’ensemble de l’industrie, Abdul-Karim a  commencé à penser. S’il pouvait utiliser After Effects pour créer une simulation ou un prototype d’interface d’application, pourquoi ne pouvait-il pas utiliser After Effects pour simplement créer l’application réelle elle-même?

Maintenant, il peut, grâce à l’outil de prototypage UX de  Lottie- Airbnb, développé par Abdul-Karim et une paire d’ingénieurs de l’entreprise.

[Image: courtoisie Airbnb]

Au cours des six mois qui ont débuté, ce logiciel open-source a été adopté dans les flux de travail à Google, Uber, New York Times et Instacart. Et pour une bonne raison. Lottie vous permet de faire une animation dans After Effects et de l’exporter vers une application iOS ou Android dans le cadre de l’interface réelle d’une application. « Alors que dans un outil de prototypage comme Framer, Sketch ou Principe, vous faites quelque chose et un ingénieur doit le recréer, avec Lottie, ce que vous faites va exactement dans le produit tel qu’il est », explique Abdul-Karim.Techniquement parlant, Lottie exporte une vidéo de fantaisie sur votre écran tactile. Mais le truc est que ces vidéos peuvent être intégrées ensemble dans une série pour créer des boutons animés ou sur une partie de l’écran pour créer des barres d’état. Les vidéos peuvent également être utilisées pour jouer à l’écran pour répondre à toutes sortes de gestes, y compris les swipes, les taps et les défilés.

[Image: courtoisie Airbnb]

Rapidement, les développeurs ont appris que grâce à ces contrôles de lecture gestuels, ils peuvent utiliser Lottie pour simuler quelque chose d’aussi compliqué qu’un flux de médias sociaux. Reprendre est jouer. Le rembobinage est rembobiné. Et l’utilisateur final n’est pas plus sage qu’il s’agisse essentiellement d’épurer à l’aide d’un clip YouTube très intelligent.Chez Airbnb, tout le développement de l’application ne se fait pas via Lottie et est considéré comme un outil facultatif pour les concepteurs. Mais l’influence de Lottie s’infiltrait rapidement dans l’application à travers les fonctionnalités que vous avez vues, ou que vous verrez bientôt. Lottie est en train d’alimenter de nombreuses transitions d’interface utilisateur d’Airbnb. Vous le verrez également dans une future mise à jour de l’application: lorsque vous réservez un séjour dans une nouvelle ville, la page de confirmation jouera 1 des plus de 50 animations personnalisées, mettant en évidence les sites les plus célèbres des villes.

Airbnb a également utilisé Lottie en partenariat avec Noun Project – le catalogue d’icônes open-source – pour publier  une série de pictogrammes animés open source. Ce sont essentiellement des boutons sympathiques que tout développeur d’applications est libre d’utiliser.

[Image: courtoisie Airbnb]

Bien sûr, à l’observateur proche, ces utilisations de Lottie sont encore des vidéos. Parce qu’après tout, jouer des vidéos est ce pour quoi Lottie a été construit pour faire. Mais maintenant, l’équipe Lottie construit plus d’interactivité et de graphiques dynamiques dans la plate-forme, ce qui lui permettra de saisir des éléments sur le texte et les photos en forme de page, et de les animer dans le cadre des effets.

« Nous sommes là », déclare Abdul-Karim sur le déploiement de ces nouvelles options plus dynamiques. « La chose est que nous venons d’arriver là. Et chaque fois que vous allez quelque part, il y aura toujours une chose qui doit se produire». En d’autres termes, les compétences techniques de Lottie dépassent sa convivialité. Et l’équipe Airbnb doit comprendre comment traduire des fonctionnalités compliquées d’animation-rencontre-code en fonctionnalités clé en main à l’intérieur du logiciel.

À la maturité que l’interface utilisateur et le développement de l’application peuvent sembler aujourd’hui, il y a littéralement des millions d’applications disponibles pour les projets iOS et Android, comme Lottie, prouve qu’il est encore tôt pour toute l’industrie. Il n’y a aucune raison logique qu’une animation étonnante construite à l’intérieur de After Effects ne puisse pas être la base de l’application suivante, sauf une: nos outils numériques ont été construits pour une autre ère, qui évolue vers l’obsolescence encore plus rapide que votre smartphone actuel .

Publicités

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.