L'importance des micro-interactions

Définition des micro-interactions

‍

Look & Feel : Micro-interactions are the feel

-Dan Saffer

‍

Largement répandues et davantage encore sur les smartphones, les micro-interactions sont des feedbacks déclenchés par une action effectuée par l’utilisateur ou initiés par le système.

Le plus souvent visuelles, ces micro-interactions peuvent servir à guider l’utilisateur, lui donner une vue sur l’état du système, ou encore rendre son expérience plus agréable en dynamisant l’interface. Il arrive parfois même qu’une micro-interaction soit élémentaire à une application. C’est notamment le cas du swipe de Tinder, qui implique de glisser le pouce à gauche ou à droite pour faire un choix binaire. Cette micro-interaction est devenue si représentative de l’application qu’elles sont aujourd’hui indissociables.

Les meilleures micro-interactions sont les plus discrètes, comme le dit le designer Joe Sparano :

Good design is obvious. Great design is transparent.

‍

‍

‍

Usages courants

‍

Indiquer un status

‍

Les micro-interactions s’utilisent beaucoup pour communiquer sur l’état du système comme par exemple un état de chargement, ou un état dans lequel une action est attendue de la part de l’utilisateur.

Sur iPhone, il existe la fonction "Siri", un assistant vocal qui fonctionne par la voix. En l'activant par la phrase "Dites Siri", une animation sur l'écran se déclenche (voir image). On peut savoir que le système est à l'écoute si une petite vague apparaît sous le nom "Siri" (voir image).

‍

‍

Guider l’utilisateur

‍

La plupart des micro-interactions ont pour objectif de fluidifier la navigation et de la rendre plus intuitive. Elles peuvent signifier qu’une action a bien été prise en compte, aider l’utilisateur à se situer sur l’interface ou encore lui signaler un problème.

Dans le cas d'un changement de mot de passe, la micro-interaction permet de signaler et d’éviter les erreurs. Dans ce cas, la validation du nouveau mot de passe ne correspond pas au nouveau mot de passe. Le système envoie directement un signal pour afficher l'erreur (texte rouge, champ rouge, message d'erreur).

‍

‍

Donner le feedback d’une action

‍

La notion de feedback est capitale sur une interface. Cela revient à faire réagir l’interface aux actions de l’utilisateur, rendant son expérience plus fluide et agréable. Les micro-interactions sont ces détails qui sont ajoutés une fois l’interface conçue, et qui viennent polir son expérience.

D’une manière générale, toutes les micro-interactions sont faites pour donner un feedback.

‍

Quelques micro-interactions connues :

‍

• La barre de défilement
• Le bouton de like de Facebook
• Le pull to refresh sur un navigateur mobile
• L’autocomplétion des claviers mobile et des moteurs de recherche
• Les écrans de chargement
• Le swipe

‍

Les étapes des micro interactions :

‍

D’après Dan Saffer, responsable de la conception des produits et auteur de Microinteractions,

Une micro-interaction se compose de 4 étapes :

‍

Le déclencheur

Il s'agit de l'événement qui déclenche la micro-interaction : un clic, le défilement d'une page, le chargement de données. Il existe deux types de déclencheurs : L'événement déclenché par l'utilisateur (bouton, mouvement ou voix) ou du système (selon des conditions prédéfinies).

‍

‍Les règles

Elles dictent ce que déclenche le déclencheur. Dans l’exemple de Siri, le déclencheur "Dites Siri" fait passer l'application en mode écoute et l'utilisateur peut interagir.

‍

‍Le feedback

Le feedback informe l’utilisateur qu’une action a bien été prise en compte. Sa durée peut varier, comme sa forme qui peut être visuelle, auditive ou haptique.

‍

Les boucles et les modes.

Les boucles déterminent si l’animation se répète ou change en fonction du contexte.

Dans une voiture par exemple, lorsque le conducteur ne boucle pas sa ceinture. Un son est alors émis pour l’en alerter, et répété puis amplifié jusqu’à ce que la ceinture soit bouclée. Le phénomène d'accélération et d'amplification du signal est assimilé à des boucles et des modes.

‍

Hiérarchie des animations

‍

‍

Le cycle des étapes

‍

‍

Les bonnes pratiques

‍

Quantité

Comme pour les éléments graphiques, elles ne doivent pas surcharger une interface. Trop d’animations auront l’effet inverse de celui escompté puisqu’elles généreront de la confusion.

‍

Durée

Les micro-interactions sont des détails, elles sont donc rapides pour ne pas perturber la navigation. Leur durée maximale doit se situer entre 300 et 400 millisecondes.

‍

Simplicité

Une micro-interaction est une animation unique déclenchée par un événement unique. Elle doit aller droit au but.

‍

Détail

C’est dans les détails que la fonction d’une micro-interaction se transmet. Ces détails sont à prioriser afin que cette dernière soit reconnue instantanément.

‍

Identité

Si les micro-interactions sont avant tout utiles à la navigation, elles peuvent souligner l’identité de l’interface et reprendre des éléments du branding pour le renforcer

‍

La temporalité

‍

Il existe deux types de micro-interactions qui peuvent se différencier par leur temporalité.

En effet, certaines se font en temps réel tandis que d’autres sont post-interactives.

‍

Temps réel

‍

‍

‍

Les micro-intéractions en temps réel interviennent instantanément en réponse à l’action de l’utilisateur. Elles peuvent considérées comme une “manipulation directe”.

Dans cet exemple, l’utilisateur navigue sur l’application qui réagit aussitôt, sans le bloquer dans son parcours. Ces micro-interactions peuvent s’annuler aussitôt qu’une action contraire est effectuée.

‍

Post-interactif.

‍

Dans cet exemple, le comportement de l'objet est post-interactif : il se produit après l’action et fait office de transition. Ces animations ne surviennent qu’après la saisie de l’utilisateur et ce dernier devra en attendre la fin pour poursuivre son parcours.

‍

‍

Les outils

‍

Principle est équivalent à Sketch, mais possède des capacités d'animation natives.

Sketch peut disposer de plug-in pour permettre la création de micro-interactions.

Adobe XD réunit la plupart des fonctionnalités de Principle et Sketch. Il est optimisé pour être relié aux développeurs grâce à l'exportation HTML/CSS et au partage de liens avec les développeurs.

Anima est un plug-in disponible pour Adobe Xd et Sketch. Il permet d'exporter du code directement vers HTML/CSS et React.

Lottie est un logiciel avec un plug-in d'animation compatible avec Adobe Xd et Sketch, le plug-in Anima permet d'exporter vers HTML/CSS et React.

After Effects est dédié à l'animation. Il fonctionne avec Sketch grâce au plug-in Sketch2AE. Il est nativement compatible avec Adobe Xd.

‍

Développer les micro-interactions

‍

‍

Il est également possible de développer des micro-interactions directement en créant du code soi-même, auquel cas les langages utilisés seront principalement HTML, CSS et JavaScript.

‍

Chez DropD, la micro-interaction est une passion

‍

Fascinés par la qualité de navigation offertes par certaines interfaces, nous sommes convaincus que les micro-interactions sont une des clés de leurs succès. C’est pourquoi nous prenons plaisir à dynamiser les interfaces des projets qui nous sont confiés, avec un soin tout particulier donné aux détails. Nous réalisons également des animations et micro-intéractions unique sur demande de nos clients grâce à notre outil no-code Webflow.

‍

Faites appel à nos experts pour la création de sites internet sur-mesure.