Micro-interactions en UX design : petits détails, grand impact !

Dans le cadre du Web2day, le CTO de Gens de Confiance, Cyril Mottier, aborde l’importance des micro-interactions dans l’UX design, et la manière dont celles-ci impactent l’expérience utilisateur lors d’une interaction avec le produit. On fait le point !

Le design interactif, qu’est-ce que c’est ?

Pour capter l’attention le plus longtemps possible, il est primordial de proposer un scénario interactif, avec des échanges entre l’utilisateur et le produit. Et pour répondre à cet enjeu, il est possible de s’appuyer sur le design interactif. Cyril Mottier nous partage la définition d’interactivité : « communiquer et réagir l’un avec l’autre, influencer et avoir un effet l’un sur l’autre, agir et être capable d’agir l’un sur l’autre ».

Il est possible d’opposer l’interactive design, qui se veut bidirectionnel avec un dialogue entre le produit et son utilisateur, au solitary design (ou design fixe), qui reste unidirectionnel et plus éphémère.

Il n’y a pas un type de design mieux que l’autre, tout dépend de leur cas d’usage. Le solitary design s’adapte par exemple parfaitement aux affiches dans la rue, qui ne proposent pas d’interactivité avec l’utilisateur, mais qui se doivent d’être impactantes au premier regard.

Ces dernières années, l’interactive design a pris de plus en plus d’ampleur, jusqu’à devenir une discipline à part entière : l’IxD design.

De l’importance des micro-interactions

Dans le cadre du design d’interaction, les micro-interactions jouent un rôle majeur. Celles-ci représentent des petits moments et détails, qui s’intègrent parfaitement au design global et qui rendent un produit unique. Pour être efficace, une micro-interaction doit être naturelle, presque invisible. Pour illustrer cette règle, Cyril Mottier cite le designer Charles Eames : « Les détails ne sont pas que des détails. Ils forment le design ».

Les micro-interactions possèdent toujours la même structure, à savoir :

1. Le trigger, ou déclencheur

Il existe des déclencheurs manuels comme par exemple un bouton ou un clic. Il existe aussi des déclencheurs par la voix (comme « Dis Siri », « Ok Google », etc.), des déclencheurs par le geste (un swipe par exemple), ou encore des déclencheurs basés sur le système (le réveil qui sonne sur son téléphone, à l’heure où on l’a programmé).

2. Les règles

Ces règles permettent de définir de quelle manière l’utilisateur doit interagir avec le produit, et ce qu’il se passe quand la micro-interaction est déclenchée. Cyril Mottier donne l’exemple de l’option du mode « économie de la batterie » sur les smartphones, qui s’active automatiquement (déclencheur basé sur le système) lorsque la batterie est faible, et qui intègre différentes règles (réduction de l’activité en arrière-plan, désactivation de certaines applications, etc.).

3. Le feedback, ou retour

Le feedback permet d’informer l’utilisateur sur la conséquence qui découle de la micro-interaction. Par exemple lorsque l’on télécharge un fichier sur Chrome, un indicateur apparaît à côté de l’icône de l’application, pour montrer que le téléchargement est en cours.

Il est aussi possible d’envoyer des feedbacks sonores comme un bruitage lorsque l’on recharge une page sur mobile, ou des feedbacks sensitifs (retour haptique lorsque l’on utilise son clavier de téléphone par exemple).

À noter qu’il existe des retours utilisateur-produit, mais également des retours entre utilisateurs. Par exemple, sur Slack, il est possible de voir lorsqu’un collaborateur est en train de rédiger un message, ce qui envoie un feedback à l’utilisateur et favorise l’interaction.

4. Les modes et les boucles

Les modes permettent de dévier différentes règles pour modifier la micro-interaction de base et ainsi s’adapter à l’utilisateur. Par exemple, sur Gmail, lorsque l’utilisateur sélectionne plusieurs mails, il passe en mode sélection : les actions et les visuels changent, mais l’affichage de la data reste identique.

Les boucles quant à elles ont pour objectif de rendre une micro-interaction la plus naturelle possible, afin que celle-ci puisse s’inscrire dans la durée, et être utilisée de nombreuses fois sans lasser l’utilisateur.

5 conseils pour créer des micro-interactions efficaces

Cyril Mottier livre quelques bonnes pratiques pour réaliser des micro-interactions pertinentes :

1. Absorber la complexité : il faut comprendre ce qui paraît compliqué, pour faire en sorte de simplifier au maximum les interactions avec le produit ou le contenu. La micro-interaction doit être sans effort, et l’utilisateur ne doit pas la ressentir.
2. Imaginer une micro-interaction comme subtile, brève et simple : cela maximise sa compréhension et allonge sa durée de vie. Il faut également penser la micro-interaction sur le long terme, pour que celle-ci soit pertinente.
3. Identifier les besoins des utilisateurs : Cyril Mottier conseille de partir d’un besoin de l’utilisateur pour créer une micro-interaction. Cela permet de consacrer du temps sur ce qui apportera vraiment de la valeur au produit, là où l’attente est la plus forte.
4. Penser complémentarité : une micro-interaction ne doit pas distraire l’utilisateur et passer pour un gadget, mais, au contraire, l’accompagner dans l’usage du produit de manière naturelle.
5. Less is more : « moins, c’est mieux », tout est dit !