Les micro-interactions : modèle d’interface utilisateur et optimisation UX

Ecrit par
le

Jeudi dernier au SEO campus, j’ai assisté à la conférence de MC Casal, co-fondatrice de l’agence Relax In The Air pour plonger dans les méandres de l’UX et découvrir cette merveilleuse petite chose qu’est la micro-interaction.

Qu’est ce qu’une micro-interaction en UX ?

Commençons par le commencement ! Kézaco une micro-interaction ? Dan Saffer, inventeur de la notion, revient sur la définition du concept : « Les micro-interactions sont de petits instants pendant lesquels l’utilisateur et l’interface interagissent. Quand elles sont bien conçues, ces micro-interactions améliorent l’expérience de l’utilisateur et optimisent la conversion sur des actions spécifiques. »
La micro-interaction a pour objectif de guider l’utilisateur à travers le site en lui offrant la meilleure expérience utilisateur.
Les 4 étapes du processus d’une micro-interaction
Déclencheur
Le déclencheur est l’élément visuel ou l’impulsion qui initie l’action.
Règles
Les règles sont les paramètres que suit la micro-interaction.
Feedback
Le feedback est le retour physique pour l’utilisateur du résultat de la micro-interaction.
Boucles et modes
Les boucles et les modes sont la manière dont la micro-interaction est réutilisée, y compris sa durée et son évolution pour des utilisateurs ultérieures, ainsi que la possibilité pour l’utilisateur d’en modifier le fonctionnement.
Comme l’a fait MC Casal, le meilleur moyen de s’approprier ces concepts c’est encore de passer à la pratique. Prenons l’exemple d’une personne qui monte dans un ascenseur pour monter au 5ème étage.

appuyer sur un bouton d'ascenseur allumé
Cas pratique : la micro-interaction dans un ascenseur

Le déclencheur est symbolisé par le bouton d’ascenseur. La règle est la suivante : lorsqu’une personne appuie sur le bouton « 5 » de l’ascenseur alors l’ascenseur monte ou descend d’un ou de plusieurs étages. Le feedback est représenté par le bouton d’ascenseur qui s’allume lorsque la personne a sélectionné l’étage voulu. Les boucles et les modes sont représentés par les boutons reconnaissables pour tous (convention/norme acquise).

Quelles sont les étapes à suivre pour créer une micro-interaction efficace ?

• Avoir un temps de réponse rapide
• Donner un feedback à l’utilisateur
• Unifier les micro-interactions dans un seul thème
Si l’on utilise le même call to action, garder une unité/harmonie sur TOUT le site
• Concevoir sur la base de la recherche utilisateur
• Utiliser ce qui est disponible
Ne pas réinventer tout. Utiliser les bibliothèques de fonctionnalités/micro-interactions déjà disponibles sur internet.
• Concevoir pour une utilisation répétée
• Utiliser une voix humaine
Pour rendre encore plus compréhensible (identification, proximité)
• Keep it simple and stupid !

Définir un parcours utilisateur utile pour l’utilisateur avec les micro-interactions

Dans la conception de votre parcours utilisateur, vous devez définir les actions les plus importantes que les utilisateurs doivent effectuer sur votre site. Ensuite, il faudra utiliser des micro-interactions pour les aider à les accomplir de la manière la plus simple possible.
L’objectif est de demander un effort minimal à l’utilisateur est d’obtenir le résultat maximal.
> effortless for user !
La micro-interaction si elle est bien faite permet de rendre la phase d’apprentissage plus courte, d’aider l’utilisateur à faire moins d’erreurs, d’aider business et les utilisateurs à atteindre leurs objectifs.

La synergie entre l’UX et la psychologie

L’UX a un rapport très proche avec les sciences humaines et plus particulièrement avec la psychologie. L’humain est motivé par des objectifs (challenge) et la réalisation de ses objectifs (accomplissement). Le Dr. Hugo Liu le rappele très bien : « it turns out that when you finish a complex task, your brain realeases massive quantities of endorphins.”
L’UX repose sur un certain nombre de lois toutes basées sur la psychologie :
• Effet Von Restorff
L’effet Von Restorff ou d’effet d’isolation, prédit que lorsque plusieurs object similaires sont présents, celui qui diffère du reste est le plus susceptible d’être mémorisé ou utilisé.
o Rendre les informations importantes ou les actions clés visuellement distinctes
• Loi de Hick Hyman
Le temps nécessaire pour prendre une décision augmente avec le nombre et la complexité des choix.
o Simplifier les choix en veillant à ce que les tâches complexes soient divisées en étapes plus petites.
• Principe d’urgence
Une baisse de conversion est souvent dû à des problèmes de friction cognitive – l’utilisateur réfléchit trop, attend trop longtemps. Augmenter le niveau d’urgence réduit considérablement ce délai afin de créer une amélioration des taux de conversion.
o Le compte à rebours peut s’avérer utile…
• Effet Zeigarnik
L’utilisateur se rappelle plus facilement une tâche incomplète ou interrompue plutôt qu’une tâche complétée.
o Utiliser les barres de progression pour indiquer visuellement lorsqu’une tâche est incomplète et ainsi augmenter la probabilité qu’elle soit complète
• Loi de Jakob
L’utilisateur ne visite pas que votre site. Cela signifie qu’il préfère que votre site fonctionne de la même manière que tous les autres sites qu’il connait déjà.
o Réduire le temps d’apprentissage pour les utilisateurs en leur fournissant des modèles d’interfaces familiers.
• Loi de Fitts
Une cible est d’autant plus facile à atteindre qu’elle est grande et proche
o Plus c’est évident, mieux c’est !
En connectant l’intention avec l’action, l’expérience devient homogène et sans accroc.

Les facteurs clés d’une micro-interaction réussie avec l’exemple du menu

La micro-interaction pour qu’elle soit réussie doit obligatoirement établir une connexion entre deux états.
L’utilisateur doit avoir la pleine maitrise de l’action et comprendre ce qu’induit son action. Ici le clic de l’utilisateur sur l’icône du burger lui permet de dérouler le menu.

navigation mobile avec icone burger
État activé ou désactivé de la navigation mobile avec burger

L’utilisateur comprend qu’il existe une interaction via cette icone car le curseur de sa souris change de forme (flèche/main). Il identifie la nature du bouton car le statut et l’action que peut avoir son action est visible.
La transition est très importante pour une micro-interaction réussie. Il faut éviter les transitions brusques. Si l’utilisateur n’a pas le temps de voir le passage entre deux états alors il ne comprendra pas ce qu’il s’est passé (chronologie de son action et son résultat).
Enfin, il ne faut pas non plus oublier que l’utilisateur a besoin de reconnaissance et de validation. La récompense visuelle (feedback > résultat de son action) est satisfaisante pour l’utilisateur.

TO DO/NOT TO DO d’une micro-interaction avec l’exemple du temps de chargement

Loading skeleton screen : chargement minimal de la page

. Le « loading skeleton screen » est le fait d’afficher un « contener » temporaire d’informations (menu, page encore blanche, side bar, etc.) c’est-à-dire la version simplifée de la page.

temps de chargement amélioré grâce au Loading skeleton screen
Loading skeleton screen : chargement minimal de la page

Le fait de loader un nombre minimale de données permet de gérer le temps d’attente de l’utilisateur (amélioration de la perception > voit bcp moins le temps de téléchargement)
• Anticipation
• Familiarisation de l’utilisateur avec la nouvelle future interface qui charge
On peut également utiliser le système de la barre de progression. Les indicateurs de progression visuels permettent de donner une notion d’accomplissement de la tâche, un sentiment de satisfaction et un engagement plus fort de l’utilisateur.

Barre de progression de lecture d’un article (lié au scroll de la page)

Jakob Nielsen a démontré que l’utilisateur avait en moyenne une attention MAXIMALE de 10 secondes pour effectuer une tâche. Si le temps de téléchargement de la page et des ressources sont supérieures à ce temps alors l’utilisateur abandonnera son action. Dans le cas où l’interface ne donnerait aucune info sur la durée d’attente d’une tache, on comprend bien qu’on perdra ici l’utilisateur.
Les micro-interactions permettent de guider et de réassurer l’utilisateur à chaque étape de son parcours sur le site
• Pourquoi utilisateur doit attendre ? objectif / résultat final
• Combien de temps ?
o Information + transparence = perception améliorée

barre de temps de chargement
Barre de loading time via Spotify

Warning : la boucle continue d’attente ne sert à rien sinon à frustrer l’utilisateur !!
temps de chargement smartphone boucle loading time
Boucle infinie de recherche de réseau

Les tips et les choses à éviter avec les micro-interactions !

Champs de formulaire sur mobile

La configuration du champ de saisie sur mobile est très souvent mal réalisée sur beaucoup de sites. Les champs d’un formulaire se retrouvent systématiquement à gauche du champ à remplir. Sur mobile, à chaque fois que l’on doit remplir ces champs (ex : formulaire) un mouvement de zoom se fait ce qui a pour incidence d’effacer le wording des champs à gauche. Il n’existe plus de contexte et l’utilisateur peut se retrouver perdu sans savoir quoi renseigner.
La bonne pratique est donc de mettre le label au-dessus du champ à remplir ou de faire un fondu bleu/gris (gris > état non rempli / bleu > champs remplis par l’utilisateur).

Champs de formulaire optimum

Renseignement des données bancaires – CB

Il existe deux freins majeurs au renseignement des données de CB pour un utilisateur à savoir :
• Personne ne connait son numéro de CB par cœur !
• Processus de saisie compliquée (champs + données)
Pour améliorer l’expérience utilisateur, l’utilisateur devrait passer automatiquement au champ suivant pour faciliter l’achat et le processus final de l’achat. En montrant la chronologie du passage d’une séquence à une autre, on facilite la compréhension du user.
Pour aller encore plus loin, on peut imaginer un champ qui s’adapte à la typologie de carte Mastercard/ Visa ou American Express. La carte American Express a 4 numéros pour le code de sécurité contrairement à la carte visa ou mastercard qui en a 3.

micro interaction pour remplir ses données CB
Renseigner ses données bancaires via une application ou un site

La personnalisation est importante car c’est ces petits détails qui rendent un parcours user intelligent. Tout cela est bien évidemment possible si l’API bancaire vous le permet. A voir avec votre partenaire !

Warning : Icone land !

Cela ne doit pas être la foire aux icones. Les icones doivent rester identifiables et compréhensibles pour l’utilisateur. Nous avons tous un socle commun normatif. Certaines icones ou images nous évoquent directement une symobolique transparente (ex : trois traits > burger > menu ou encore enveloppe > adresse mail) Si l’icone voulue n’a pas de sens à première vue alors on va l’expliciter pour montrer ce qu’il y a derrière (wording).

Temps de chargement :

L’intégration des micro-interactions ne doit pas ralentir le site. Le temps de chargement et le temps d’attente font partie intégrante de l’expérience utilisateur.

Trop d’animations tue l’animation :

L’utilisateur lit de façon chaotique sur un site web que cela soit sur desktop ou sur mobile contrairement à un livre (de gauche à droite).

Comment mesurer l’intégration des micro-interactions ?

Voici les bases pour suivre et monitorer les micro-interactions mis en place sur votre site :
• Web analytics
• Test à distance
• AB testing
• Heatmap
• Recherche utilisateur
• Enregistrement de visite (video de chaque utilisateur qui vient sur site)
Pour retrouver la présentation de MC Casal c’est ici
Andréa Bryand / @Seotastique