Les Micro-Interactions : la composante plaisir

Utiles. Toujours plus utiles. A en croire les descriptifs sur les app-store toutes les app qui y sont présentes sont plus utiles les unes que les autres.

C’est effectivement vrai pour certaines d’entre elles, mais parmi celles-ci, toutes ne procurent pas une expérience utilisateur inoubliable.

Qu’est ce qui fait donc que j’en aime certaines plus que d’autres ? Toutes les applications présentes sur mon téléphone sont utiles, que ce soit pour me déplacer, pour me divertir ou pour travailler, toutes ont leur utilité propre et réalisent parfaitement ce pour quoi elles ont été créés. Alors, comment donc expliquer que j’ai plus de plaisir à en utiliser certaines ?

Ma réponse tient en un mot : Plaisir.

Certaines app nous procurent cette petite gratification supplémentaire qui donne envie de revenir plus souvent, de l’utiliser une nouvelle fois pour profiter à nouveau de ce petit son, cette petite animation inutile mais tellement sympa.

C’est ici qu’interviennent les micro-interactions. Ce sont ces animations, ces sons au autres qui améliorent l’experience utilisateur lors de l’utilisation de l’app.

DIVERTIR SANS DÉTOURNER

Input — Dribbble — Alex Pronsky

Oui, les micro-interactions sont des détails. Elles ne doivent ni entrer en conflit avec la tâche principale, ni compenser un défaut de l’app. Une voiture , si belle soit elle, ne vaut rien si elle n’est pas capable de m’emmener où je veux.

FAIRE APPEL AUX SENS

Les micro-interactions peuvent être de 3 types :

• Sonores

Il s’agit de ce petit “bip” lorsque l’on clique sur “Valider” ou de ce son si typique lorsque l’on envoi un message sur iOS. C’est bien peu de choses mais cela change l’ambiance sonore d’une app. Ces micro-interactions ont généralement une fonction que nous verrons plus tard : le Feed-back.

• Visuelles

Ce sont les animations que l’on retrouve à différents endroits : barre de chargement, animation lors de l’envoi d’un message ou de la validation d’un formulaire. Ces animations peuvent avoir des fonctions diverses développées plus loin dans cet article.

• Haptiques

Le fameux “retour haptique” dont vous avez peut-être déjà entendu parler. Ces retours répondent à un problème simple dans le cadre d’une app : comment rendre “agréable” au toucher un clic sur la surface parfaitement lisse d’un écran ? Historiquement il pouvait s’agir, par exemple de vibration de l’appareil. Aujourd’hui, certains écrans sont capables de rendre un retour haptique directement sur l’écran grâce à des courants électriques ciblés. L’objectif, comme pour les interactions sonores, est de rendre un Feed back à l’utilisateur.

Chacun aura remarqué que ces interactions répondent aux sens de l’ouïe, de la vue et du toucher. Un jour peut-être apparaîtront des retours gustatifs ou olfactifs mais nous n’en sommes (Dieu merci ?) pas encore là…

DIVERTIR … MAIS PAS QUE

Non, le but premier des micro-interactions n’est pas de divertir l’utilisateur. Il faut éviter le piège qui serait de surcharger l’app d’animation inutiles. Cela nuirait fortement à l’expérience utilisateur et à l’ergonomie de l’application. A mon sens, voici l’enjeu majeur des micro-interactions: l’efficacité. Chacune doit avoir un but :

• Le Feed-Back : Le feed back obéit à un principe simple : confirmer à l’utilisateur que son action a bien été prise en compte et a bien un effet dans l’app. Par exemple, le feed-back le plus simple et le plus répandu sur internet aujourd’hui est le bouton qui change de couleur lorsqu’on clique dessus. Il est cependant possible d’aller beaucoup plus loin et de donner un feed back par le biais d’animations plus développées ou, dans le cadre d’une app, via un son.

Animated Tab Bar Icons — Dribble — Ramotion

• La Distraction : le fonctionnement normal de nombreuses app inclut quelques secondes d’attente pour, par exemple, rafraichir une page ou charger un fichier. Ce temps d’attente peut facilement être égayé par une animation plus intéressante que la traditionnelle roue ou barre de chargement.

Pull Down To Refresh — Dribbble — Ramotion

• L’Explicitation : Il s’agit là d’une version améliorée du feed-back qui peut être associée à un transition. Elle se révèle très utile dans les app complexes pour simplifier un flux d’actions. Le but n’est plus seulement de confirmer que l’action a été prise en compte mais également d’expliciter les conséquences dans l’application et de conduire vers la suivante. Cette interaction peut permettre de clarifier une interface complexe ou multicouche.

E-Commerce App — Dribbble — Alex Khoroshok

Cinema App Interactions — Dribbble — Tubik

• L’Attention : Ces petites animations ont pour but d’attirer l’attention de l’utilisateur sur un élément particulier de l’interface. Elles sont généralement utilisée pour encourager l’action suivante (achat, suite de l’article…) en attirant l’oeil.

Remindiing — Reminder — Dribbble — Søren Clausen

• La Transition : Ce sont des animations qui visent à fluidifier la transition entre deux sections d’une app. Elle peuvent également avoir une fonction d’explicitation mais cherchent avant tout à unifier les différentes “pages” d’une app.

Transition en Pliage — Dribbble — Ramotion

• Le “Easter Egg” : Mot à mot “Oeuf de Pâques” ce sont toutes les animations “inutiles” cachés dans une app. Il peut s’agir également de mini jeux.

Menu Animation — Dribbble — Anastasiia Andriichuk

RESTER SOBRE

Alors oui, les micro-interactions sont utiles. Elles sont l’incarnation même du souci du détail. Mais elles peuvent tout aussi bien dégrader l’expérience utilisateur si elles sont utilisées à mauvais escient. Lors de la réflexion deux points sont à garder à l’esprit.

• Ne pas surcharger : Les micro-interactions sont et doivent rester des détails. Elles ne doivent pas détourner l’utilisateur du but de son app mais au contraire l’accompagner. Un parallèle simple : Mettre le ton lorsqu’on prononce une phrase permet d’accentuer l’effet mais surjouer détourne du sens de la phrase pour se concentrer sur l’élocution.
• Garder la cohérence avec le reste de l’application. Les micro-interactions doivent s’inscrire dans l’univers d’une application le mieux possible. Elles ne doivent pas sauter aux yeux mais rester des détails. Ainsi pas question de les mettre en avant à tout prix mais plutôt de laisser l’utilisateur les découvrir par lui même.

LES MICRO-INTERACTIONS, LA COMPOSANTE REÉL ?

Au delà du plaisir les micro-interactions participent également à rendre les applications plus réelles. Quand nous effectuons une action dans le monde réel, en plus de son résultat final, nous recevons un certain nombre de stimuli.

Si j’ouvre la portière d’une voiture, en plus de voire la porte s’ouvrir (résultat final) je vais entendre le bruit du déclic et le ressentir sous mes doigts de même que le plastique de la poignée. Ces informations vont me confirmer que je suis en présence d’une vieille voiture ou au contraire d’une berline haut de gamme.

Les micro-interactions ont exactement ce rôle dans le monde virtuel. Elles visent a ajouter à l’action principale certains stimuli visuels, sonores ou tactiles qui ajoutent un côté réel à l’action. Ainsi, par la magie d’une animation je n’ai pas juste appuyé sur un écran lisse pour envoyer un message mais je viens d’envoyer un avion en papier… et le virtuel devient un peu plus réel.