Les micro-interactions
Les micro-interactions, sont ces petits instants où l’utilisateur et le design interagissent et que l’on retrouve sur les sites ou applications mobiles que l’on utilise au quotidien. Elles servent parfois à mettre des contenus en avant, à distraire l’utilisateur ou encore même à le rassurer, mais quoi qu’il arrive elles doivent avoir un sens… On vous explique lesquels.
Les micro-interactions : à quoi servent-elles ?
Rien que pour vos yeux
Sur un site, vous arrivez sur une nouvelle page saturée d’informations et de visuels, mais vous n’avez d’yeux que pour ce bouton “Partage” qui gigote là à droite ? C’est normal, les micro-interactions servent aussi à ça : attirer votre attention vers les éléments importants d’une page. Par exemple : un ajout au panier, un formulaire de commentaire ou un bouton de partage sur les réseaux sociaux. Ces micro-interactions servent véritablement à baliser le chemin d’un utilisateur sur un site, et améliorer l’expérience utilisateur.
Divertir avec utilité
Le fait d’avoir un contenu interactif rend votre site plus émotionnel. L’utilisateur a vraiment cette impression d’agir et ces interactions augmentent le taux d’engagement des utilisateurs à un faible coût. Si par exemple un temps de chargement est trop long il faut en effet faire en sorte de le réduire au maximum, mais offrir une animation pour améliorer l’attente est une bonne solution pour ne pas freiner la progression des users.
C’est cadeaux !
Parfois la micro-interaction est utilisée en tant que “remerciement/récompense” pour l’utilisateur, par exemple lorsqu’il finalise une commande, qu’il vient de terminer le remplissage d’un formulaire ou encore l’upload d’un fichier.
On peut aussi intégrer des micro-interactions pour avertir l’utilisateur de la conformité des champs qu’il remplit dans un formulaire.
On s’occupe de tout
Certaines micro-interactions sont quand à elles utilisées pour rassurer l’utilisateur. C’est le cas notamment des sites de réservation de vols ou voyages par exemple qui, lorsque vous lancez une recherche, font apparaître un loader pour vous faire croire à une recherche plus en profondeur sur leur site en fonction des critères que vous aviez choisis. Dans ce cas elles permettent à l’utilisateur d’être rassuré et de se dire que la recherche est complète. La mise en scène du temps est un moyen efficace de renforcer une expérience utilisateur dans le cadre d’une recherche complexe, même si en réalité les résultats pourraient être exposés instantanément.
Elles facilitent les explications
Si vous cherchez à expliquer certaines fonctionnalités en tutoriel ou onboarding, ajouter des micro-interactions peut être la solution pour guider l’utilisateur de manière fluide et intuitive. Au lieu d’avoir une longue et ennuyeuse explication, les micro-interactions vont mettre en lumière certaines fonctionnalités importantes et montrer comment les utiliser.
On vous donne les outils, à vous la créativité !
Une donnée importante à prendre en compte lorsque l’on travaille sur des micro-interactions ou courtes animations sur un site est le poids de celles-ci ! Il faut optimiser le rendu pour faire en sorte que la page se charge rapidement, notamment en mobilité. Pour cela nous réalisons nos interactions avec Adobe CC ( Illustrator et After effects ). On utilise ensuite directement le plugin Bodymovin dans After Effects qui nous permet d’exporter nos animations au format json utilisable ensuite avec Lottie. Certaines animations simples peuvent également être directement créées en CSS.
Avec Lottie files vous pouvez même tester vos animations directement sur votre ordinateur ou votre smartphone grâce au QR code généré.
Attention à ne pas en abuser
N’en mettez pas partout ! Une micro-interaction a pour objectif d’être efficace et subtile. Elle ne doit pas être utilisée juste pour faire joli ou rendre plus vivante une interface, elle doit être pertinente au moment de son apparition pour améliorer l’expérience utilisateur. En abuser aura l’effet inverse et gênera les utilisateurs dans leur navigation.
La durée d’une micro-interaction est un facteur important pour qu’elle fonctionne. Comme son nom l’indique il s’agit d’une “micro”-interaction, il faut qu’elle soit courte, rapide et fluide. La durée maximum conseillée est de 0, 4 secondes.
Le fin mot de l’histoire
Vous savez maintenant tout ce qu’il y a à savoir sur les micro-interactions et avec les outils que vous avez maintenant à portée de main vous n’avez plus qu’à essayer. N’oubliez pas que tout est dans le détails et que si vous vous demandez encore “Mais à quoi ça sert ?“ attendez de voir un site avec et sans et vous comprendrez.
A lire également
Top 5 UI trends pour 2023
UI DesignNos 5 tendances UI favorites pour 2023 Il est temps de se pencher sur les tendances design qui vont marquer
Figma vol.1 : Les librairies & composants
Méthodologie • UI DesignDepuis quelques mois, nous avons commencé à utiliser Figma, un outil de design collaboratif qui nous surprend par sa puissance.