Un site efficace est un site qui parvient à accrocher l’utilisateur ! Pour cela, l’expérience utilisateur est indispensable (ou UX). Plusieurs paramètres sont alors à prendre en compte. Parmi ces paramètres, il y a les micros-interactions. Qu’est-ce que c’est ? Comment les utiliser ? À quoi ça sert ? Eficiens répond à ces questions.

C’est quoi une micro-interaction ? 

Le terme a été développé par le directeur créatif Dan Saffer. Celui-ci désigne les micros-interactions comme des instants où interface et utilisateurs échangent. En pratique, il s’agit de toutes les réponses de l’interface face aux actions de l’internaute. Par exemple, un simple changement de page peut donner lieu à une micro-interaction.

Sans en avoir conscience, nous observons ces micros-interactions depuis de nombreuses années. C’est notamment le cas du changement de couleur sur un lien hypertexte. Plus récemment, les applications mobiles, telles que Whatsapp ou Messenger, ont intégré des micros-interactions. En effet, ces applications vous indiquent lorsque votre interlocuteur est en train d’écrire.

Malgré leur fonction ludique, les micros-interactions ne doivent pas être utilisées en excès, sans aucun but. Ces dernières doivent poursuivre un objectif bien précis. Par exemple, informer les utilisateurs du fait d’une erreur de chargement, d’un paiement en cours de traitement, d’une redirection vers une page, etc.

Bien souvent, les micros-interaction se situent à cheval entre deux actions. L’internaute est en passe de passer à l’étape suivante. Mais pour y parvenir, il lui faut attendre un petit laps de temps (même minime). Alors pour améliorer son expérience utilisateur, des animations sont intégrées.

Comment concevoir une micro-interaction ?

La micro-interaction doit d’abord être pensée comme appartenant à l’ensemble du site web. À ce titre, elle doit correspondre à la charte graphique.

Ensuite, sa conception repose sur 4 grandes étapes :

• Le déclencheur : quelles actions enclenchent la micro-interaction ? Les designers doivent envisager toutes les possibilités. Ce peut être un clic, un chargement de données, etc.
• Les règles : dans quel cas la micro-interaction doit apparaître ? Il peut s’agir d’un ajout au panier, d’un paiement en cours, etc.
• Le feedback : il s’agit d’informer l’utilisateur à travers un son ou une animation.
• Les boucles et mode : la micro-interaction doit être en mesure d’évoluer selon les situations. Il est aussi possible de les personnaliser.

L’objectif des micros-interactions étant d’améliorer l’UX, elles doivent être à la fois utiles et design. Alors pour émerveiller les internautes et capter leur attention, les designers doivent se montrer créatifs.

Les micro-interactions pour une meilleure expérience utilisateur 

Aujourd’hui, les sites les plus performants ont compris une chose : il faut placer l’internaute au centre de sa stratégie web. Pour cela, il faut lui fournir une expérience utilisateur positive. Comment faire ?

Cela repose sur 3 leviers principaux :

• Le temps : sur le net, la relativité du temps est à son paroxysme. En effet, 40 % des visiteurs quittent un site s’il met plus de 3 secondes à charger. Dans ce contexte, les propriétaires de site ont tout intérêt à limiter le temps de chargement pour ne pas perdre de potentiels clients. 

• La confiance : ce peut être la confiance en la marque, dans le fait d’effectuer des transactions en ligne, etc. Alors pour maintenir une bonne relation avec les utilisateurs, la meilleure solution reste la communication.
• L’interactivité : aujourd’hui, les entreprises se doivent d’interagir régulièrement avec leurs clients et prospects. Il peut s’agir de répondre aux questions ou aux commentaires des utilisateurs.

Avec la micro-interaction, l’entreprise répond parfaitement à ces trois principes. En effet, si l’internaute doit attendre, même quelques secondes, le mécanisme se met en marche. L’internaute sait qu’une action est en cours, ce qui lui permet de patienter un peu plus.

Quelques conseils pour utiliser les micros-interactions 

Intégrer des micros-interactions est une chose. Encore faut-il bien les utiliser ! Voici quelques conseils pour les optimiser :

• Originalité : les sites se doivent de se différencier pour marquer l’esprit des internautes. L’objectif est qu’il se souvienne du site grâce à une bonne expérience utilisateur, aussi bien en termes de fonctionnalités que de design. À cette fin, les designers doivent regorger d’imagination pour créer des animations surprenantes. Ils doivent intégrer des détails originaux permettant d’identifier la marque en un seul coup d’œil.
• En nombre limité : il ne sert à rien d’insérer trop de micros-interactions. Cela risque d’ennuyer l’internaute. L’effet de surprise n’aura plus aucun intérêt si une animation est présente à chaque changement de page. Il faut donc choisir les meilleurs moments où la micro-interaction se révèle pertinente.
• Une courte durée : parce que les internautes sont impatients, une micro-interaction doit durer moins de 400 millisecondes.
• La simplicité : la micro-interaction doit être originale, tout en étant compréhensible par l’internaute. S’il doit réfléchir pour comprendre son sens, elle n’a plus aucun intérêt. Mieux vaut des petites animations rapides et simples pour dynamiser son site web.
• Une touche d’humour : l’humour fonctionne toujours, et ce, même dans les secteurs les plus sérieux. Par exemple, chaque année, les pubs de la MAAF mise sur une vidéo humoristique pour capter l’attention des téléspectateurs.

À ce titre, micro-interaction et UX-Writing sont parfaitement complémentaires. En effet, pour qu’une micro-interaction soit efficace, elle doit être rédigée de façon à faciliter sa compréhension par l’utilisateur.

Quelques exemples de micro interactions 

Les micros-interactions populaires 

Les likes de Facebook figurent parmi les micros-interactions les plus connues.

S’ensuivent les 3 petits points de Messenger.

Pour son site à venir, le site Sketchy Bones a intégré une micro interaction très originale.

Les micros-interactions dans l’assurance

Pour aider ses clients à trouver un conseiller, AXA utilise deux micro-interations : le temps de chargement et le pop-up.

La BNP intègre la micro-interaction dès son menu. En effet, les couleurs changent selon la catégorie où clique l’internaute.

De son côté, la MAAF déroule plusieurs interactions simultanées lorsque l’internaute arrive sur la page de contact. L’objectif étant qu’il passe à l’action rapidement et contacte le groupe.