Tout a commencé en février 2018. À l’époque, je travaillais comme concepteur numérique, où la plupart des tâches quotidiennes de mon travail consistaient à résoudre des problèmes complexes d’expérience utilisateur tout en travaillant avec les normes de la marque existante.

Lorsque le défi de créer une application sur les voyages dans l’espace a été créé, mes muscles créatifs se sont mis à trembler. J’ai plongé dans des explorations et j’ai commencé à créer concept après concept. Quelqu’un a partagé sa contribution sur Twitter, et je me suis dit, eh bien je dois animer la mienne aussi maintenant. Je suis passé à After Effects et j’ai commencé à animer les dessins que j’avais créés dans Adobe XD.

Tout le processus a été revigorant et j’étais ravi que d’autres personnes aiment les explorations que je partageais en ligne. Je n’étais pas sûr de la façon dont cela allait se passer quand j’ai commencé. Je ne savais pas si j’allais finir par me mettre dans l’embarras en partageant mon travail publiquement, surtout quand je me retrouvais face à des designers du monde entier.

Toute l’expérience a été incroyable et m’a permis de me familiariser avec la communauté des designers au sens large.

Le processus d’apprentissage

Studio InVision

Ma proposition n’a pas remporté le concours, mais elle a permis d’explorer en profondeur l’animation des interfaces utilisateur. C’est finalement cette exploration qui m’a attiré vers l’InVision Studio. Je voulais continuer à concevoir des projets parallèles en dehors de mon travail. Je voulais m’améliorer dans le domaine de l’animation, mais je n’aimais pas le temps que prenait l’utilisation d’After Effects. Puis j’ai vu quelque chose qui a attiré mon attention : InVision, que j’avais déjà utilisé pour le prototypage, prévoyait de sortir un nouvel outil de conception qui incluait l’animation.

J’ai mis mon nom sur la liste d’InVision Studio Early Access et j’ai attendu. Dès que j’ai reçu le courriel m’indiquant que je pouvais télécharger ce nouveau programme, j’ai en fait applaudi un peu. Il y avait cette partie étourdie de moi qui était impatiente d’essayer plus d’animation dans un tout nouveau programme conçu spécialement pour l’animation de l’interface utilisateur, au lieu d’utiliser Adobe After Effects comme je l’avais fait pour mon inscription au défi.

Défi hebdomadaire d’animation sur l’interface utilisateur

J’ai commencé à faire des concepts de design simples et j’ai continué à les partager sur Dribbble, Behance et Twitter pour voir ce que les gens pensaient et pour apprendre comment s’améliorer. J’ai reçu des commentaires sur la façon de rendre les animations plus rapides ou plus lentes. Les gens me disaient quand c’était trop rapide ou trop simple. J’ai beaucoup appris en présentant mon travail aux gens.

J’avoue que j’avais l’impression de ne pas savoir comment animer lorsque j’ai commencé à utiliser l’InVision Studio. Je me souviens d’avoir vu d’autres designers sur Twitter relever ces défis quotidiens ou hebdomadaires dans lesquels ils se poussaient à affiner une certaine compétence. L’idée d’un autre défi était pour moi une motivation parfaite, c’est pourquoi j’ai lancé mon Défi hebdomadaire d’animation d’interface utilisateur.

Ma première animation était une simple interaction de défilement où je montrais un défilement de galerie d’images. J’ai été impressionné par le fait que je pouvais interagir avec mon animation, au lieu de la regarder simplement sur une vidéo.

Au fur et à mesure que le défi s’est poursuivi, j’en ai appris plus sur les transitions et sur la façon de relier les couches d’un tableau d’affichage à l’autre.

L’animation que j’ai faite était rapide. Beaucoup trop rapide. Mais à l’époque, je ne pouvais pas la voir entièrement, et il m’a fallu un peu de temps pour déterminer la durée de mes transitions à l’intérieur du Studio.

J’avais partagé mes explorations sur Dribbble, Behance et Twitter, à la fois pour présenter mon travail aux gens et dans l’espoir d’obtenir des réactions de la communauté. Je me souviens que quelqu’un sur Twitter m’a fait remarquer que je devrais ralentir la vitesse et faciliter davantage cette transition d’écran à l’intérieur et à l’extérieur. Je l’ai remercié, puis j’ai admis que j’avais essayé de trouver la bonne vitesse et que j’espérais pouvoir un jour y arriver.

J’ai appris la valeur de ces défis autodirigés, car ils ont généré de la cohérence, fourni de la pratique et permis de recueillir des réactions.

J’ai continué à le faire, et InVision a remarqué mes efforts. Aujourd’hui, je suis un InVisioner, où je continue à explorer les animations d’interface utilisateur et le travail sur les produits. J’ai appris, plus encore, que le fait de partager ses conceptions peut avoir un impact important et peut aider à améliorer ses compétences. J’ai continué à apprendre autant que possible tout en créant des animations.

L’une de mes explorations les plus récentes met en évidence tout ce que j’ai appris sur l’assouplissement organique, la démonstration de la hiérarchie et la simplification du mouvement.

De toutes ces explorations, j’ai appris trois principes fondamentaux des animations d’interface utilisateur, et comment améliorer l’expérience de l’utilisateur en utilisant le mouvement.

Trois principes fondamentaux de l’animation en motion design

1. Créer un mouvement naturel et une détente organique

L’utilisation d’un léger délai pour le mouvement des éléments en mouvement peut créer une détente naturelle qui donne à l’interface une impression plus organique.

2. Démontrer une hiérarchie pour faciliter l’apréhension de l’utilisateur

Le fait d’ajouter un mouvement à un élément spécifique peut aider à alerter l’utilisateur pour qu’il agisse en premier. Cela est utile dans une interface qui pourrait avoir un contenu concurrent, comme des images colorées ou des blocs de texte.

3. Simplifier le mouvement

Il peut être passionnant de relier autant d’éléments que possible d’un écran à l’autre, mais cela peut surcharger l’utilisateur.

Trop de pièces qui bougent en même temps peut nuire au déroulement de la transition, et au lieu d’aider l’utilisateur à comprendre comment les deux écrans se connectent, cela peut causer de la confusion.

Bref, restez en contact avec l’essentiel. J’essaie toujours de revenir à ces fondamentaux lorsque je crée des animations et, comme pour la plupart des choses, c’est un processus constant d’apprentissage à chaque fois que je crée quelque chose de nouveau.