L’ajout d’une série dans les favoris de Netflix, un message d’erreur lors de la saisie d’un mot de passe ou la confirmation qu’un nouveau niveau est débloqué dans un jeu: ce sont tous des exemples de micro-interactions ou d’animations que l’on rencontre au quotidien dans les applis actuelles. Elles contribuent toutes considérablement à faire comprendre une appli aux utilisateurs et à leur procurer une grande satisfaction lors de son emploi. Cela était au centre de nos préoccupations lors de la réalisation, il y a peu, du projet avec FELFEL. Les animations que nous y avons réalisées nous ont poussées à rédiger un blog sur les micro-interactions et les animations. Nick t’explique quels types d’interactions existent et comment elles sont mises en œuvre dans des applis et sur des sites Internet.
Pourquoi
le mouvement est-il nécessaire?
Le mouvement est naturel – la stagnation ne l’est pas. On le constate bien en observant la nature. Tout est en évolution permanente et interagit. Ainsi, les feuilles des arbres bougent quand le vent souffle ou l’eau clapote dans une chute d’eau. Nous ne percevons une animation que lorsque quelque chose réagit. Les interfaces utilisateurs fonctionnent de la même manière.
Une interface utilisateur semblera naturelle si elle réagit aux activités des personnes qui l’emploient. Cela peut, par exemple, se faire sous forme d’un bouton "j’aime" dont la couleur change quand on appuie dessus ou par un message d’erreur qui apparaît quand on saisit un mot de passe erroné.
Look and Feel
L’utilisation d’une appli est toujours
une expérience. Pour que ce vécu soit de préférence positif, l’appli doit être
animée et explicite, dans la mesure du possible. Il s'agit de transmettre de
manière intelligible une marque avec ses valeurs et ses propriétés. On y
parvient en mettant au point une approche Look & Feel cohérente qui fait
vivre ces valeurs et ces propriétés.
L’aspect Feel, en particulier, à savoir la sensation lors de l’utilisation de l’appli, peut être considérablement valorisé grâce à des animations et du mouvement. Voici quelques exemples d’interactions et d’animations dans nos applis:
Animations Feedback
Animation de lancement
Transitions
Animation d'icônes
Comment ces animations pour interfaces utilisateurs sont-elles créées?
Idée & Schéma
Tout démarre par une idée: à quoi veut-on parvenir avec l’animation? Sur quoi veut-on attirer l’attention? Quel effet souhaite-t-on créer? Cette idée est notée sous forme d’un schéma ou d’un simple graphique et sert de base aux étapes ultérieures. Il importe ici de ne pas animer excessivement tous les éléments de l’interface utilisateur, mais de mettre en scène de manière ciblée les secteurs sur lesquels on souhaite attirer l’attention.
Déroulement/ Script
Les animations consistent soit en de nombreuses images individuelles – comme dans un folioscope – ou en différents états que l'on modifie, comme, par exemple, avec un interrupteur que l'on éteint et allume.
Ces moments clés de l’animation (situations, images individuelles) peuvent être consignés et planifiés sous forme de script. L’animation y est alors répartie en diverses étapes intermédiaires. Chaque moment clé y est présenté et décrit.
Comme pour un scénario de film pour le cinéma, le déroulement exact de l’animation est alors clair et contient un aperçu sur les éléments et le moment où ils seront animés.
L’animation
L’animation peut désormais être élaborée en se servant du script comme modèle. Les outils suivants conviennent bien à leur conception:
-
After Effects
Possibilités d’animation et d’effets considérables. Malheureusement, tout ce qui est élaboré dans After Effects ne peut être repris tel quel dans le monde mobile sauf si l’animation est intégrée sous forme de vidéo (mp4). Il existe néanmoins de plus en plus de moyens pour intégrer des animations natives à l’aide de Lottie.
-
Flinto
Voici un outil principalement utilisé pour élaborer des prototypes d’applis. Il convient cependant très bien pour tester l’effet d’animations et pour expérimenter un peu. Un outil très pratique, surtout au cours des phases précoces de projets afin de simuler une expérience d’appli terminée et de vérifier des hypothèses et des idées.
-
ProtoPie
Est utilisé pour créer des prototypes. L’utilisation de la logique est rendue possible, ce qui est particulièrement très intéressant pour les prototypes fonctionnels (par exemple, pour remplir un formulaire dans lequel les champs sont repris.) Des tests utilisateurs peuvent ainsi être effectués dans des conditions quasi réelles.
Comment des animations sont-elles intégrées à une appli?
Pour qu’une animation fonctionne dans une appli, il faut qu’un développeur ou une développeuse l’intègre dans le projet. Il existe différentes possibilités selon le degré de complexité de l’animation:
Animations "simples"
Un exemple pour une animation simple serait un bouton qui changerait de couleur au toucher/ par un clic. Comme on a tendance à animer moins de valeurs comme la taille, la couleur ou la position dans de telles animations, il vaut mieux les réaliser directement dans le code. Cela offre en conséquence de nombreuses possibilités d’adapter et de peaufiner l’ajustement de l’animation le cas échéant.
Animations complexes
Il est très fastidieux, de réaliser par encodage des animations complexes dans lesquelles de nombreux éléments doivent être modifiés en même temps. Les développeurs et développeuses doivent reconstruire le modèle sous forme de vidéo ou de prototype de l’équipe design étape par étape au jugé. Cela prend énormément de temps et nécessite un échange étroit entre l’équipe de design et l’équipe de développement afin d'aboutir au résultat souhaité.
Des animations complexes peuvent toutefois être réalisées sans que les développeurs et développeuses aient l’impression de se retrouver en enfer 😇 . La librairie “Lottie” a été mise au point précisément pour ces cas-là.
Animations avec Lottie
Les animations complexes ne pouvant pas être réalisées uniquement par encodage ont longtemps été intégrées aux applis sous forme de vidéos ou de gifs. Cela avait pour conséquence que toutes les vidéos devaient être téléchargées en même temps que l’appli. Le téléchargement de l’appli durait ainsi plus longtemps ou l’appli ne pouvait même pas être chargée dans la boutique. De plus, les vidéos ne peuvent être adaptées aussi facilement que des animations encodées.
L’équipe de design d’AirBnB a remédié au problème avec la librairie Lottie. En effet, Lottie permet d’exporter une animation que l’on crée dans After Effects sous forme de fichier .json à l’aide d’un plugin (Bodymovin) et d’en effectuer le rendu en natif avec la structure Lottie (une sorte de lecteur de fichiers .json) pour Android, iOS et React Native.
Les designers n’ont plus qu’à envoyer aux développeurs et développeuses un fichier .json à intégrer. L’animation peut alors être jouée tel quel.
Les avantages de cette méthode
La réalisation fastidieuse de l’animation en encodage devient superflue, car tout est déjà programmé comme dans After Effects.
Une animation créée peut être directement fournie sur les trois plateformes iOS, Android et React Native sans que l’on doive la développer au cas par cas pour chacune. Cela permet d’épargner un temps considérable.
La taille du fichier en est aussi considérablement réduite. En effet, une animation Lottie nécessite rarement des fichiers .json de plus de 10kB. La conversion en graphiques et mouvements se fait sur la plateforme.
Inconvénients de la méthode
Certains effets créés dans After Effects ne peuvent pas être convertis.
Comme les animations Lottie sont exécutées par la plateforme, les animations plus complexes ne peuvent pas toujours fonctionner fluidement sur de vieux appareils.
Conclusion
De nos jours, une appli est davantage que quelques écrans figés entre lesquels on peut naviguer. Elle raconte une histoire, transporte des messages ou simplifie des processus complexes. Les micro-interactions et les animations sont nécessaires, en plus des affichages d’écrans, afin d’illustrer intelligiblement ces interactions. Elles contribuent à valoriser considérablement le Look & Feel d’une appli afin qu’elle puisse ressortir de la masse.
Les possibilités techniques sont en constante évolution. Des animations de plus en plus complexes seront ainsi réalisées au fil du temps – cf. Lottie. On peut également spéculer que les efforts de développement d’animations plus simples continueront à diminuer puisqu’elles seront mises à disposition sous forme normalisée. Cela est déjà le cas pour les transitions normalisées de Material Design de Google ou de Human Interface Guidelines d’Apple.
Il ne fait aucun doute que l’importance des animations et des micro-interactions ne fera que croître et que leur mise en œuvre sera de plus en plus facile. Et, bien entendu, nous sommes aussi à disposition pour donner vie à ton appli !
