Le bureau des UX : le cartel des micro-interactions

Lors des précédents opus du bureau des UX, nous avons déjà abordé des modèles d’interaction, les empty states et les loading states. Mais pour aller encore plus loin dans l’engagement, parlons aujourd’hui des micro-interactions.

#1 Kezako

Vous ne savez peut-être pas ce que c’est, mais le fait est que pour arriver devant cet article il est fort probable que vous en ayez rencontré en chemin via votre smartphone ou votre ordinateur. Les micro-interactions, ce sont toutes les petites animations, transitions, changements qui suivent une action, quelle qu’elle soit, et que cette action soit produite par l’utilisateur (cliquer sur un bouton) ou par le système (une notification apparaît). Et on ne parle pas de transition ultra sophistiquée d’une page à une autre, mais bien d’interaction à l’échelle d’un seul élément sur la page (d’où « micro » interaction).

Pourquoi est-ce si important ? Parce que l’utilisateur final de votre produit est un humain, pas une machine. Cela semble évident mais il y a des implications qu’il ne faut pas oublier : nous somme des êtres de chair et de sang, et nous avons évolué en réponse à notre environnement. Nos ancêtres étaient des chasseurs-cueilleurs, ce qui veut dire que notre œil a évolué pour être capable de discerner rapidement les couleurs et le mouvement. Un autre principe qui nous vient de la nature : toute action provoque une réaction.

Pour revenir à la question de l’importance des micro-interactions, posons nous la question inverse : que se passe-t-il si on les retire toutes ? Imaginez cliquer sur une application, et rien ne se passe, et après quelques secondes l’écran désiré apparait soudainement. Pendant l’attente, l’utilisateur doute (ai-je bien cliqué ? Le système a bien pris en compte ma demande ?), puis à l’apparition, il doit comprendre et ingérer toutes les nouvelles informations qui sont disponibles, sans transition ni préparation, ce qui demande un énorme effort mental (bien que pas tout à fait conscient).

#2 Apprentissage et engagement

Les micro-interactions ont un double avantage. Le premier est d’être ludique et fun : en rendant l’interface moins brute et plus fun à utiliser, l’utilisateur prend plaisir à passer par le produit. Elles permettent aussi d’avoir une courbe d’apprentissage lors de l’utilisation du produit : la première fois que l’on rencontre la micro-interaction, elle permet d’expliciter un comportement, et donc d’améliorer la compréhension de l’utilisateur. Les fois suivantes, l’utilisateur s’attendra à retrouver l’interaction, et sera satisfait de voir qu’il se passe bien ce à quoi il s’attendait.

#3 Comment construire vos micro-interactions ?

Les micro-interactions sont basées sur les étapes déclencheur – réaction / transition – information. Le but est de réagir à un évènement, puis d’apporter à l’utilisateur le nouvel état à prendre en compte. Cela peut se produire par un mouvement, par un changement de couleur, un son, etc. Prenons l’exemple d’un lien : lorsque l’utilisateur passe dessus, son état mute pour indiquer qu’il a compris que le focus se faisait sur lui.

Vous avez déjà vu peu ou prou ce comportement quelque part ? Évidemment, puisque les micro-interactions sont partout ! Mais on peut encore améliorer l’engagement, et comme toujours marquer les esprits avec une identité visuelle (ou sonore !) importante. Regardez cette animation :

Nous pouvons découper les différentes étapes :

Étape 1

• Déclencheur : l’utilisateur passe sur le bouton
• Réaction : la flèche bouge pour signifier le survol
• Information : le bouton est prêt à être sollicité

Étape 2

• Déclencheur : l’utilisateur clique sur le bouton
• Réaction : la flèche « s’envole », le texte change
• Information : le bouton est actuellement en chargement

Étape 3

• Déclencheur : le système a terminé le traitement
• Réaction : la flèche se transforme en check de succès, le texte change à nouveau
• Information : l’action s’est terminée avec succès

Suite à cela, le bouton revient à son état initial. Donc au final, sur cet unique bouton, les transitions permettent d’expliciter un flux complexe tout en restant toujours en contact avec l’utilisateur.

#4 Le design invisible

Un bon design est en fait beaucoup plus difficile à remarquer qu’un mauvais design, en partie parce que les bons designs répondent si bien à nos besoins que le design est invisible, nous servant sans attirer l’attention sur lui. – Don Norman

Cette citation de Don Norman résume tout. Malgré les animations et le fun que les micro-interactions apportent, elles ne doivent pas prendre le pas sur le reste du produit. Ce sont des informations, mais pas des fonctionnalités. Le bon dosage, c’est de suivre le principe K.I.S.S. : Keep It Simple Silly ! (« garde le simple idiot ! »). Compliquer inutilement les choses va demander plus de travail pour vous, et plus de charge mentale pour votre utilisateur. Bien souvent une interface trop compliquée sera donc contre productive. Si tout est en mouvement perpétuel, c’est aussi troublant que si rien ne l’était.

Les micro-interactions sont d’une importance capitale sur le chemin du design parfait. Mais comme dit le dicton, « le chemin de l’enfer est pavé de bonnes intentions ». Et comme le diable est dans les détails, attention à utiliser ces principes avec parcimonie !