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.
"},{"id":"text-2","type":"text","heading":"","plain_text":"Envie de gagner du temps ?\n\t\t \n Faites résumer cet article par l’IA en quelques secondes.\n \n \n \n Résumer avec l’IA\n \n \n \n Qu’est ce qu’une micro-interaction en UX ?\nCommenç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. »\nLa micro-interaction a pour objectif de guider l’utilisateur à travers le site en lui offrant la meilleure expérience utilisateur.\nLes 4 étapes du processus d’une micro-interaction\n– Déclencheur\nLe déclencheur est l’élément visuel ou l’impulsion qui initie l’action.\n– Règles\nLes règles sont les paramètres que suit la micro-interaction.\n– Feedback\nLe feedback est le retour physique pour l’utilisateur du résultat de la micro-interaction.\n– Boucles et modes\nLes 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.\nComme 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.\nCas pratique : la micro-interaction dans un ascenseurLe 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).\nQuelles sont les étapes à suivre pour créer une micro-interaction efficace ?\n• Avoir un temps de réponse rapide\n• Donner un feedback à l’utilisateur\n• Unifier les micro-interactions dans un seul thème\nSi l’on utilise le même call to action, garder une unité/harmonie sur TOUT le site\n• Concevoir sur la base de la recherche utilisateur\n• Utiliser ce qui est disponible\nNe pas réinventer tout. Utiliser les bibliothèques de fonctionnalités/micro-interactions déjà disponibles sur internet.\n• Concevoir pour une utilisation répétée\n• Utiliser une voix humaine\nPour rendre encore plus compréhensible (identification, proximité)\n• Keep it simple and stupid !\nDéfinir un parcours utilisateur utile pour l’utilisateur avec les micro-interactions\nDans 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.\nL’objectif est de demander un effort minimal à l’utilisateur est d’obtenir le résultat maximal.\n> effortless for user !\nLa 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.\nLa synergie entre l’UX et la psychologie\nL’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.”\nL’UX repose sur un certain nombre de lois toutes basées sur la psychologie :\n• Effet Von Restorff\nL’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é.\no Rendre les informations importantes ou les actions clés visuellement distinctes\n• Loi de Hick Hyman\nLe temps nécessaire pour prendre une décision augmente avec le nombre et la complexité des choix.\no Simplifier les choix en veillant à ce que les tâches complexes soient divisées en étapes plus petites.\n• Principe d’urgence\nUne 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.\no Le compte à rebours peut s’avérer utile…\n• Effet Zeigarnik\nL’utilisateur se rappelle plus facilement une tâche incomplète ou interrompue plutôt qu’une tâche complétée.\no 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\n• Loi de Jakob\nL’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à.\no Réduire le temps d’apprentissage pour les utilisateurs en leur fournissant des modèles d’interfaces familiers.\n• Loi de Fitts\nUne cible est d’autant plus facile à atteindre qu’elle est grande et proche\no Plus c’est évident, mieux c’est !\nEn connectant l’intention avec l’action, l’expérience devient homogène et sans accroc.\nLes facteurs clés d’une micro-interaction réussie avec l’exemple du menu\nLa micro-interaction pour qu’elle soit réussie doit obligatoirement établir une connexion entre deux états.\nL’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.\nÉtat activé ou désactivé de la navigation mobile avec burgerL’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.\nLa 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).\nEnfin, 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.\nTO DO/NOT TO DO d’une micro-interaction avec l’exemple du temps de chargement\nLoading skeleton screen : chargement minimal de la page\n. 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.\nLoading skeleton screen : chargement minimal de la pageLe 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)\n• Anticipation\n• Familiarisation de l’utilisateur avec la nouvelle future interface qui charge\nOn 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.\nBarre de progression de lecture d’un article (lié au scroll de la page)\nJakob 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.\nLes micro-interactions permettent de guider et de réassurer l’utilisateur à chaque étape de son parcours sur le site\n• Pourquoi utilisateur doit attendre ? objectif / résultat final\n• Combien de temps ?\no Information + transparence = perception améliorée\nBarre de loading time via SpotifyWarning : la boucle continue d’attente ne sert à rien sinon à frustrer l’utilisateur !!\nBoucle infinie de recherche de réseau\nLes tips et les choses à éviter avec les micro-interactions !\nChamps de formulaire sur mobile\nLa 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.\nLa 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).\nChamps de formulaire optimum\nRenseignement des données bancaires – CB\nIl existe deux freins majeurs au renseignement des données de CB pour un utilisateur à savoir :\n• Personne ne connait son numéro de CB par cœur !\n• Processus de saisie compliquée (champs + données)\nPour 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.\nPour 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.\nRenseigner ses données bancaires via une application ou un siteLa 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 !\nWarning : Icone land !\nCela 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).\nTemps de chargement :\nL’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.\nTrop d’animations tue l’animation :\nL’utilisateur lit de façon chaotique sur un site web que cela soit sur desktop ou sur mobile contrairement à un livre (de gauche à droite).\nComment mesurer l’intégration des micro-interactions ?\nVoici les bases pour suivre et monitorer les micro-interactions mis en place sur votre site :\n• Web analytics\n• Test à distance\n• AB testing\n• Heatmap\n• Recherche utilisateur\n• Enregistrement de visite (video de chaque utilisateur qui vient sur site)\nPour retrouver la présentation de MC Casal c’est ici\nAndréa Bryand / @Seotastique\nChatGPTPerplexityGoogle AIWhatsAppLinkedInX (Twitter)","html":"Envie de gagner du temps ?\n\t\t \n Faites résumer cet article par l’IA en quelques secondes.\n \n \n \n Résumer avec l’IA\n \n \n \n Qu’est ce qu’une micro-interaction en UX ?\nCommenç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. »\nLa micro-interaction a pour objectif de guider l’utilisateur à travers le site en lui offrant la meilleure expérience utilisateur.\nLes 4 étapes du processus d’une micro-interaction\n– Déclencheur\nLe déclencheur est l’élément visuel ou l’impulsion qui initie l’action.\n– Règles\nLes règles sont les paramètres que suit la micro-interaction.\n– Feedback\nLe feedback est le retour physique pour l’utilisateur du résultat de la micro-interaction.\n– Boucles et modes\nLes 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.\nComme 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.\nCas pratique : la micro-interaction dans un ascenseurLe 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).\nQuelles sont les étapes à suivre pour créer une micro-interaction efficace ?\n• Avoir un temps de réponse rapide\n• Donner un feedback à l’utilisateur\n• Unifier les micro-interactions dans un seul thème\nSi l’on utilise le même call to action, garder une unité/harmonie sur TOUT le site\n• Concevoir sur la base de la recherche utilisateur\n• Utiliser ce qui est disponible\nNe pas réinventer tout. Utiliser les bibliothèques de fonctionnalités/micro-interactions déjà disponibles sur internet.\n• Concevoir pour une utilisation répétée\n• Utiliser une voix humaine\nPour rendre encore plus compréhensible (identification, proximité)\n• Keep it simple and stupid !\nDéfinir un parcours utilisateur utile pour l’utilisateur avec les micro-interactions\nDans 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.\nL’objectif est de demander un effort minimal à l’utilisateur est d’obtenir le résultat maximal.\n> effortless for user !\nLa 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.\nLa synergie entre l’UX et la psychologie\nL’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.”\nL’UX repose sur un certain nombre de lois toutes basées sur la psychologie :\n• Effet Von Restorff\nL’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é.\no Rendre les informations importantes ou les actions clés visuellement distinctes\n• Loi de Hick Hyman\nLe temps nécessaire pour prendre une décision augmente avec le nombre et la complexité des choix.\no Simplifier les choix en veillant à ce que les tâches complexes soient divisées en étapes plus petites.\n• Principe d’urgence\nUne 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.\no Le compte à rebours peut s’avérer utile…\n• Effet Zeigarnik\nL’utilisateur se rappelle plus facilement une tâche incomplète ou interrompue plutôt qu’une tâche complétée.\no 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\n• Loi de Jakob\nL’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à.\no Réduire le temps d’apprentissage pour les utilisateurs en leur fournissant des modèles d’interfaces familiers.\n• Loi de Fitts\nUne cible est d’autant plus facile à atteindre qu’elle est grande et proche\no Plus c’est évident, mieux c’est !\nEn connectant l’intention avec l’action, l’expérience devient homogène et sans accroc.\nLes facteurs clés d’une micro-interaction réussie avec l’exemple du menu\nLa micro-interaction pour qu’elle soit réussie doit obligatoirement établir une connexion entre deux états.\nL’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.\nÉtat activé ou désactivé de la navigation mobile avec burgerL’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.\nLa 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).\nEnfin, 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.\nTO DO/NOT TO DO d’une micro-interaction avec l’exemple du temps de chargement\nLoading skeleton screen : chargement minimal de la page\n. 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.\nLoading skeleton screen : chargement minimal de la pageLe 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)\n• Anticipation\n• Familiarisation de l’utilisateur avec la nouvelle future interface qui charge\nOn 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.\nBarre de progression de lecture d’un article (lié au scroll de la page)\nJakob 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.\nLes micro-interactions permettent de guider et de réassurer l’utilisateur à chaque étape de son parcours sur le site\n• Pourquoi utilisateur doit attendre ? objectif / résultat final\n• Combien de temps ?\no Information + transparence = perception améliorée\nBarre de loading time via SpotifyWarning : la boucle continue d’attente ne sert à rien sinon à frustrer l’utilisateur !!\nBoucle infinie de recherche de réseau\nLes tips et les choses à éviter avec les micro-interactions !\nChamps de formulaire sur mobile\nLa 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.\nLa 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).\nChamps de formulaire optimum\nRenseignement des données bancaires – CB\nIl existe deux freins majeurs au renseignement des données de CB pour un utilisateur à savoir :\n• Personne ne connait son numéro de CB par cœur !\n• Processus de saisie compliquée (champs + données)\nPour 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.\nPour 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.\nRenseigner ses données bancaires via une application ou un siteLa 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 !\nWarning : Icone land !\nCela 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).\nTemps de chargement :\nL’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.\nTrop d’animations tue l’animation :\nL’utilisateur lit de façon chaotique sur un site web que cela soit sur desktop ou sur mobile contrairement à un livre (de gauche à droite).\nComment mesurer l’intégration des micro-interactions ?\nVoici les bases pour suivre et monitorer les micro-interactions mis en place sur votre site :\n• Web analytics\n• Test à distance\n• AB testing\n• Heatmap\n• Recherche utilisateur\n• Enregistrement de visite (video de chaque utilisateur qui vient sur site)\nPour retrouver la présentation de MC Casal c’est ici\nAndréa Bryand / @Seotastique\nChatGPTPerplexityGoogle AIWhatsAppLinkedInX (Twitter)
"}],"sections":[{"id":"text-1","heading":"Text","content":"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."},{"id":"text-2","heading":"Text","content":"Envie de gagner du temps ?\n\t\t \n Faites résumer cet article par l’IA en quelques secondes.\n \n \n \n Résumer avec l’IA\n \n \n \n Qu’est ce qu’une micro-interaction en UX ?\nCommenç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. »\nLa micro-interaction a pour objectif de guider l’utilisateur à travers le site en lui offrant la meilleure expérience utilisateur.\nLes 4 étapes du processus d’une micro-interaction\n– Déclencheur\nLe déclencheur est l’élément visuel ou l’impulsion qui initie l’action.\n– Règles\nLes règles sont les paramètres que suit la micro-interaction.\n– Feedback\nLe feedback est le retour physique pour l’utilisateur du résultat de la micro-interaction.\n– Boucles et modes\nLes 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.\nComme 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.\nCas pratique : la micro-interaction dans un ascenseurLe 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).\nQuelles sont les étapes à suivre pour créer une micro-interaction efficace ?\n• Avoir un temps de réponse rapide\n• Donner un feedback à l’utilisateur\n• Unifier les micro-interactions dans un seul thème\nSi l’on utilise le même call to action, garder une unité/harmonie sur TOUT le site\n• Concevoir sur la base de la recherche utilisateur\n• Utiliser ce qui est disponible\nNe pas réinventer tout. Utiliser les bibliothèques de fonctionnalités/micro-interactions déjà disponibles sur internet.\n• Concevoir pour une utilisation répétée\n• Utiliser une voix humaine\nPour rendre encore plus compréhensible (identification, proximité)\n• Keep it simple and stupid !\nDéfinir un parcours utilisateur utile pour l’utilisateur avec les micro-interactions\nDans 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.\nL’objectif est de demander un effort minimal à l’utilisateur est d’obtenir le résultat maximal.\n> effortless for user !\nLa 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.\nLa synergie entre l’UX et la psychologie\nL’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.”\nL’UX repose sur un certain nombre de lois toutes basées sur la psychologie :\n• Effet Von Restorff\nL’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é.\no Rendre les informations importantes ou les actions clés visuellement distinctes\n• Loi de Hick Hyman\nLe temps nécessaire pour prendre une décision augmente avec le nombre et la complexité des choix.\no Simplifier les choix en veillant à ce que les tâches complexes soient divisées en étapes plus petites.\n• Principe d’urgence\nUne 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.\no Le compte à rebours peut s’avérer utile…\n• Effet Zeigarnik\nL’utilisateur se rappelle plus facilement une tâche incomplète ou interrompue plutôt qu’une tâche complétée.\no 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\n• Loi de Jakob\nL’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à.\no Réduire le temps d’apprentissage pour les utilisateurs en leur fournissant des modèles d’interfaces familiers.\n• Loi de Fitts\nUne cible est d’autant plus facile à atteindre qu’elle est grande et proche\no Plus c’est évident, mieux c’est !\nEn connectant l’intention avec l’action, l’expérience devient homogène et sans accroc.\nLes facteurs clés d’une micro-interaction réussie avec l’exemple du menu\nLa micro-interaction pour qu’elle soit réussie doit obligatoirement établir une connexion entre deux états.\nL’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.\nÉtat activé ou désactivé de la navigation mobile avec burgerL’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.\nLa 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).\nEnfin, 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.\nTO DO/NOT TO DO d’une micro-interaction avec l’exemple du temps de chargement\nLoading skeleton screen : chargement minimal de la page\n. 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.\nLoading skeleton screen : chargement minimal de la pageLe 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)\n• Anticipation\n• Familiarisation de l’utilisateur avec la nouvelle future interface qui charge\nOn 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.\nBarre de progression de lecture d’un article (lié au scroll de la page)\nJakob 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.\nLes micro-interactions permettent de guider et de réassurer l’utilisateur à chaque étape de son parcours sur le site\n• Pourquoi utilisateur doit attendre ? objectif / résultat final\n• Combien de temps ?\no Information + transparence = perception améliorée\nBarre de loading time via SpotifyWarning : la boucle continue d’attente ne sert à rien sinon à frustrer l’utilisateur !!\nBoucle infinie de recherche de réseau\nLes tips et les choses à éviter avec les micro-interactions !\nChamps de formulaire sur mobile\nLa 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.\nLa 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).\nChamps de formulaire optimum\nRenseignement des données bancaires – CB\nIl existe deux freins majeurs au renseignement des données de CB pour un utilisateur à savoir :\n• Personne ne connait son numéro de CB par cœur !\n• Processus de saisie compliquée (champs + données)\nPour 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.\nPour 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.\nRenseigner ses données bancaires via une application ou un siteLa 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 !\nWarning : Icone land !\nCela 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).\nTemps de chargement :\nL’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.\nTrop d’animations tue l’animation :\nL’utilisateur lit de façon chaotique sur un site web que cela soit sur desktop ou sur mobile contrairement à un livre (de gauche à droite).\nComment mesurer l’intégration des micro-interactions ?\nVoici les bases pour suivre et monitorer les micro-interactions mis en place sur votre site :\n• Web analytics\n• Test à distance\n• AB testing\n• Heatmap\n• Recherche utilisateur\n• Enregistrement de visite (video de chaque utilisateur qui vient sur site)\nPour retrouver la présentation de MC Casal c’est ici\nAndréa Bryand / @Seotastique\nChatGPTPerplexityGoogle AIWhatsAppLinkedInX (Twitter)"}],"media":{"primary_image":""},"relations":[{"rel":"canonical","href":"https://peakace.fr/blog/seo/micro-interaction-ux-sxo/"},{"rel":"alternate","href":"https://peakace.fr/blog/seo/micro-interaction-ux-sxo/llm","type":"text/html"},{"rel":"alternate","href":"https://peakace.fr/blog/seo/micro-interaction-ux-sxo/llm.json","type":"application/json"},{"rel":"llm-manifest","href":"https://peakace.fr/llm-endpoints-manifest.json","type":"application/json"}],"http_headers":{"X-LLM-Friendly":"1","X-LLM-Schema":"1.1.0","Content-Security-Policy":"default-src 'none'; img-src * data:; style-src 'unsafe-inline'"},"license":"CC BY-ND 4.0","attribution_required":true,"allow_cors":false}