Les micro-interactions

Les micro-inter­ac­tions, sont ces petits instants où l’uti­li­sa­teur et le design inter­agissent et que l’on retrouve sur les sites ou appli­ca­tions mobiles que l’on utilise au quoti­dien. Elles servent parfois à mettre des conte­nus en avant, à distraire l’uti­li­sa­teur ou encore même à le rassu­rer, mais quoi qu’il arrive elles doivent avoir un sens… On vous explique lesquels.

Les micro-inter­ac­tions : à quoi servent-elles ?

Rien que pour vos yeux

Sur un site, vous arri­vez sur une nouvelle page satu­rée d’in­for­ma­tions et de visuels, mais vous n’avez d’yeux que pour ce bouton “Partage” qui gigote là à droite ? C’est normal, les micro-inter­ac­tions servent aussi à ça : atti­rer votre atten­tion vers les éléments impor­tants d’une page. Par exemple : un ajout au panier, un formu­laire de commen­taire ou un bouton de partage sur les réseaux sociaux. Ces micro-inter­ac­tions servent véri­ta­ble­ment à bali­ser le chemin d’un utili­sa­teur sur un site, et amélio­rer l’ex­pé­rience utili­sa­teur.

Diver­tir avec utilité

Le fait d’avoir un contenu inter­ac­tif rend votre site plus émotion­nel. L’uti­li­sa­teur a vrai­ment cette impres­sion d’agir et ces inter­ac­tions augmentent le taux d’en­ga­ge­ment des utili­sa­teurs à un faible coût. Si par exemple un temps de char­ge­ment est trop long il faut en effet faire en sorte de le réduire au maxi­mum, mais offrir une anima­tion pour amélio­rer l’at­tente est une bonne solu­tion pour ne pas frei­ner la progres­sion des users.

C’est cadeaux !

Parfois la micro-inter­ac­tion est utili­sée en tant que “remer­cie­ment/récom­pense” pour l’uti­li­sa­teur, par exemple lorsqu’il fina­lise une commande, qu’il vient de termi­ner le remplis­sage d’un formu­laire ou encore l’upload d’un fichier.

On peut aussi inté­grer des micro-inter­ac­tions pour aver­tir l’uti­li­sa­teur de la confor­mité des champs qu’il remplit dans un formu­laire.

On s’oc­cupe de tout

Certaines micro-inter­ac­tions sont quand à elles utili­sées pour rassu­rer l’uti­li­sa­teur. C’est le cas notam­ment des sites de réser­va­tion de vols ou voyages par exemple qui, lorsque vous lancez une recherche, font appa­raître un loader pour vous faire croire à une recherche plus en profon­deur sur leur site en fonc­tion des critères que vous aviez choi­sis. Dans ce cas elles permettent à l’uti­li­sa­teur d’être rassuré et de se dire que la recherche est complète. La mise en scène du temps est un moyen effi­cace de renfor­cer une expé­rience utili­sa­teur dans le cadre d’une recherche complexe, même si en réalité les résul­tats pour­raient être expo­sés instan­ta­né­ment.

Elles faci­litent les expli­ca­tions

Si vous cher­chez à expliquer certaines fonc­tion­na­li­tés en tuto­riel ou onboar­ding, ajou­ter des micro-inter­ac­tions peut être la solu­tion pour guider l’uti­li­sa­teur de manière fluide et intui­tive. Au lieu d’avoir une longue et ennuyeuse expli­ca­tion, les micro-inter­ac­tions vont mettre en lumière certaines fonc­tion­na­li­tés impor­tantes et montrer comment les utili­ser.

On vous donne les outils, à vous la créa­ti­vité !

Une donnée impor­tante à prendre en compte lorsque l’on travaille sur des micro-inter­ac­tions ou courtes anima­tions sur un site est le poids de celles-ci ! Il faut opti­mi­ser le rendu pour faire en sorte que la page se charge rapi­de­ment, notam­ment en mobi­lité. Pour cela nous réali­sons nos inter­ac­tions avec Adobe CC ( Illus­tra­tor et After effects ). On utilise ensuite direc­te­ment le plugin Body­mo­vin dans After Effects qui nous permet d’ex­por­ter nos anima­tions au format json utili­sable ensuite avec Lottie. Certaines anima­tions simples peuvent égale­ment être direc­te­ment créées en CSS.

Avec Lottie files vous pouvez même tester vos anima­tions direc­te­ment sur votre ordi­na­teur ou votre smart­phone grâce au QR code généré.

Atten­tion à ne pas en abuser

N’en mettez pas partout ! Une micro-inter­ac­tion a pour objec­tif d’être effi­cace et subtile. Elle ne doit pas être utili­sée juste pour faire joli ou rendre plus vivante une inter­face, elle doit être perti­nente au moment de son appa­ri­tion pour amélio­rer l’ex­pé­rience utili­sa­teur. En abuser aura l’ef­fet inverse et gênera les utili­sa­teurs dans leur navi­ga­tion.

La durée d’une micro-inter­ac­tion est un facteur impor­tant pour qu’elle fonc­tionne. Comme son nom l’in­dique il s’agit d’une “micro”-inter­ac­tion, il faut qu’elle soit courte, rapide et fluide. La durée maxi­mum conseillée est de 0, 4 secondes.

Le fin mot de l’his­toire

Vous savez main­te­nant tout ce qu’il y a à savoir sur les micro-inter­ac­tions et avec les outils que vous avez main­te­nant à portée de main vous n’avez plus qu’à essayer. N’ou­bliez pas que tout est dans le détails et que si vous vous deman­dez encore “Mais à quoi ça sert ?“ atten­dez de voir un site avec et sans et vous compren­drez.