Les micro-interactions : quand le diable se cache dans les détails

Qu’est-ce donc qu’une micro-interaction ? Très simplement, il s’agit d’une courte animation sur une interface, conçue pour réagir à une action de l’utilisateur. Elle peut intervenir au survol, au clic, au scroll, etc…
À noter que ces micro-interactions ne sont pas une fin en soi. Elles ont un objectif : celui de guider l’utilisateur. En lui indiquant par exemple qu’il peut patienter (quelques secondes) le temps du chargement de la page, ou l’inciter à naviguer à tel endroit du site.

Petit coup d’œil dans le rétroviseur : les micro-interactions sont nées au moment où le World Wide Web devenait grand public. Alors que nous surfions sur des pages au design improbable dans le coffee-shop du coin, nous avions déjà fait l’expérience de ces courtes animations. En effet, le CSS2 (pour Cascading Style Sheets, ou feuilles de style en cascade) a fait son apparition en 1998. Il permettait déjà de changer la couleur d’un bouton au survol, entre autres.
10 ans plus tard, le CSS3 débarquait et ouvrait le champ des possibles avec notamment la possibilité de transformer des éléments (un menu burger en croix par exemple), couplée à un effet de transition tout en douceur (comme pour le changement de couleur d’un bouton).

Sur le site Cadaoz, les micro-intéractions transforment un élément et permettent ainsi une meilleure compréhension du produit.

Depuis, les micro-interactions se sont déployées un peu partout. Parce qu’elles sont accessibles techniquement, et souvent parce qu’elles sont « jolies ». On assiste donc à une sorte de feux d’artifice d’animations, qui errent sans but. Et c’est justement ce que nous vous conseillons d’éviter.

Voici quelques exemples de micro-interactions, que vous avez déjà eu l‘occasion de voir et de toucher : faire défiler un slider, interagir avec des boutons, des icônes et des liens, valider un formulaire ou parcourir une page et découvrir un contenu inédit.

À première vue, ces micro-interactions ne mériteraient pas plus d’attention que ça. Et pourtant ! Ce sont elles qui permettent de faire comprendre à l’utilisateur les mouvements d’un slider lors du passage d’une slide à l’autre, qui indiquent de façon dynamique l’ajout de la vidéo à vos favoris, qui confirment la bonne transmission des informations renseignées dans le formulaire, ou qui exhibent un nouveau contenu sous vos yeux ébahis.

Ci-dessous quelques micro-intéractions issues du site TVR :

Ces micro-interactions ont un objectif UX : elles indiquent à l’utilisateur ce qu’il peut faire, où il peut se rendre, et l’informent du résultat ou de l’état de son interaction avec l’interface (en cours, finalisé, etc.). Elles peuvent aussi avoir un objectif purement commercial (pour vendre donc), ou marketing (raconter une histoire, asseoir les codes de la marque).

Au sein du site « Carte Blanche », les élus et collaborateurs de Groupama Loire Bretagne vous partagent tous leurs lieux favoris. A visiter à travers cette carte interactive :

Ainsi, chaque micro-interaction doit pouvoir être justifiée. Et la parcimonie est de rigueur, au risque de perdre l’internaute. À l’inverse, une micro-interaction peut perturber, et même faire fuir. Qui n’a pas déjà vu un bouton de confirmation d’une action se parer de rouge ? — qui envoie donc un message d’alerte, alors que tout est OK. Ou tenté de cliquer sur une image qui s’anime au survol… sans que cela n’aboutisse à aucun résultat ?

Exit les solutions toutes faites : chaque élément d’une page joue un rôle bien précis, que nos webdesigners et développeurs front-end étudient dans le moindre détail.

S’il n’y avait qu’une chose à retenir sur ces micro-interactions : elles doivent avoir une raison d’être, répondre à un objectif. Et se fondre dans la masse, pour ne guider l’internaute que lorsqu’il en a besoin. Tout un (micro) art !