Créer une super interface à l’aide des micro-interactions 💪
Nous avons tous une application préférée, qu’elle soit géniale dans sa conception graphique ou de par l’expérience utilisateur qu’elle nous procure.
Au delà de la partie UI/UX, un point extrêmement important est évoqué par tous les designers :
Comment rendre notre application exceptionnelle ? Comment procurer de l’émotion auprès de nos utilisateurs ?
L’une des nombreuses réponses possibles à cette interrogation est la création de micro-interactions au sein de l’interface.
Mais qu’est-ce qu’une micro-interaction ? 🧐
La micro-interaction est une animation intégrée à une interface web ou mobile. En règle générale, les fonctions associées aux micro-interactions sont les suivantes.
- Permettre de visualiser le résultat d’une action
- Mettre en évidence un élément
- Marquer un changement d’état ou une transition
- Indiquer le statut d’un système
Deux types de micro-interactions possibles :
- La micro-interaction émotionnelle 🎊
La micro-interaction émotionnelle, comme son nom l’indique provoque une émotion auprès de l’utilisateur. Dans l’exemple ci-dessous, l’utilisateur peut ressentir une certaine joie et une satisfaction évidente par le fait qu’il ait “Liké” un commentaire. (Micro-interaction utilisée par Twitter)
- La micro-interaction pédagogique ✍️
la micro-interaction pédagogique s’inscrit dans une logique d’éducation utilisateur, elle peut représenter visuellement une démarche dans un cas d’onboarding par exemple.
La micro-interaction permet dans un sens de rapprocher un peu plus l’utilisateur de notre application en la rendant vivante. Certains poussent le concept un peu plus loin et parlent de design intelligent : L’interface communique directement avec son utilisateur grace aux micro-interactions.
Il est important de notifier que la micro-interaction est plutôt orientée dans une logique UX au bienfait de l’UI et est utilisée afin de rendre l’expérience plus agréable.
Comment et à quel moment la micro interaction intervient-elle ? 🤔
Une interface dynamique relève de l’implication ainsi que d’une réflexion relativement poussée par le designer ainsi que son équipe de production afin de proposer une animation efficace. C’est pour cela que la micro-interaction est souvent établie dans un contexte d’A/B Testing ou bien lors de usability test pour répondre à des frictions ainsi que les réactions positives et/ou négatives que peuvent avoir les potentiels utilisateurs.
Cependant elle peut aussi être introduit naturellement ou bien anticipée par le designer.
Lorsque nous recevons une notification sur notre application, celle-ci est représentée par une cloche. On peut se demander s’il serait intéressant de l’animer à ce moment précis de l’interaction ? Émotionnellement l’utilisateur se sentirait “important” en créant un effet visuel attrayant.
La conclusion de ces observations est qu’une animation ne sert pas uniquement à agrémenter l’esthétique d’une application. La véritable raison d’être de ces animations est de raconter une histoire. Elles constituent en fait une traduction des interactions entre les deux protagonistes de l’expérience d’utilisation : l’application et l’utilisateur.
Quels sont les outils pour créer LA micro-interaction géniale ? 🤘
Il existe de nombreux logiciels permettant de créer des éléments animés. Voici une liste non exhaustive des meilleurs logiciels.
Conception vidéo :
- AfterEffect : Un outil puissant de compositing et d’effet visuels, pionnier de l’animation graphique, il est édité par la société Adobe. Il peut fonctionner de paire avec Sketch 💎 avec le plugin “Sketch2AE” .
- Principle : Un outil taillé pour l’animation d’interface, Principle facilite la conception d’interfaces utilisateur animées et interactives. Il fonctionne de paire avec Sketch 💎 et Figma.
Pour aller plus loin :
Export designer > développeur :
- Lottie : Cette application facilite l’échange graphique entre designer et développeur, Lottie est développé par AirBnB et propose un plugin permettant d’exporter une animation AE et de la convertir en fichier .json vectoriel.
Pour aller plus loin :
Quelques trucs et astuces pour obtenir une micro-interaction parfaite 🙌
Vous avez maintenant toutes les clefs en main pour proposer une micro-interaction, cependant, voici quelques conseils avant de lancer votre export.
- Une animation ne doit pas dépasser les 400 millisecondes, l’utilisateur ne doit pas perdre son temps.
- Soyez créatif ! Brainstormez avec vos développeurs et product owners !
- Testez votre animation, concrétisez l’émotion que vous voulez transmettre à vos utilisateurs.
- N’en faites pas trop. L’animation est un monde haut en couleur, sélectionnez les micro-interactions les plus pertinentes à développer.
Merci ! 👨💻
Vous avez aimé cet article ? Cliquez sur 👏 en bas de page pour que d’autres lecteurs puissent le trouver !
