L'interface utilisateur est essentielle à la façon dont les utilisateurs interagissent avec nos marques et les perçoivent. Plus nous comprenons nos utilisateurs, plus nous sommes en mesure de leur donner ce dont ils ont besoin de la manière dont ils le souhaitent et l'attendent. À mesure que la technologie progresse, on attend des fournisseurs qu'ils rendent le parcours du client plus simple et plus agréable à chaque étape, et souvent sans le savoir, pour l'utilisateur, ces petits détails de conception de l'interaction font la différence entre un produit acceptable ou fonctionnel et un produit formidable.
Qu'est-ce que les micro-interactions ?
Selon le groupe Nielsen Norman,
Micro-interactions sont des paires déclencheur-rétroaction dans lesquelles (1) le déclencheur peut être une action de l'utilisateur ou une modification de l'état du système ; (2) la rétroaction est une réponse étroitement ciblée au déclencheur et est communiquée par de petites modifications très contextuelles (généralement visuelles) de l'interface utilisateur.
Les micro-interactions sont (généralement) de petites animations subtiles qui rendent les applications numériques plus intéressantes, plus intuitives, plus engageantes et plus efficaces. Elles améliorent la qualité de l'expérience utilisateur, en validant les actions et en offrant souvent un divertissement qui renforce la force de la marque.
Il ne s'agit pas toujours d'animations visuelles ; elles peuvent être haptiques ou sonores. Votre montre de sport peut émettre un signal sonore à l'approche d'un virage ou lorsque vous entrez dans une zone de fréquence cardiaque différente, ou vos notifications émettent des sons reconnaissables que vous associez à des applications de messagerie, à des comptes de messagerie ou à des réalisations particulières.
Avantages des micro-interactions
Bien qu'ils aient l'air de petites touches qui permettent au créateur de "se montrer" un peu, les avantages sont nombreux et d'une valeur réelle. Nous faisons l'expérience de centaines de ces petites touches soignées tout au long de notre vie quotidienne, la plupart du temps sans les remarquer.
- Encourager l'engagement
- Augmenter la satisfaction des utilisateurs
- Réduire la frustration
- Fournir un retour d'information sur le système
- Informer les utilisateurs en temps réel
- Affichage de l'état du système ou du processus
- Améliorer la convivialité
- Rendre les produits plus intuitifs et interactifs
- Réduire les défauts d'utilisation
- Introduire des interactions plus fluides avec l'interface utilisateur
- Accélérer le parcours du client
- Prévenir les erreurs d'utilisation
- Simplifier les tâches complexes
- Gamifier les processus, les rendre plus amusants, plus attractifs et plus intéressants, afin d'améliorer la rétention du personnel.
- Respecter le thème, la voix et le ton de la marque
Meilleures pratiques en matière de conception de micro-interactions
Identifier et comprendre le problème de l'utilisateur
Tout bon produit, expérience ou service est conçu pour résoudre un problème. Lors de la conception de micro-interactions, la définition de ces problèmes et la manière de les résoudre peuvent sembler évidentes, mais elles sont plus susceptibles d'être révélées au cours d'une étude d'utilisateurs.
Garder les micro-interactions naturelles
Les concepteurs doivent éviter les animations étranges qui compliquent ou embrouillent le processus. Les micro-interactions sont naturelles et fluides, elles fournissent un retour d'information visuel simple et ajoutent de la valeur au processus. Elles ne doivent jamais être trop compliquées, détourner l'attention ou comporter des détails inutiles. Plus important encore, elles doivent se concentrer sur une seule tâche.
Tester et adapter les résultats de la recherche sur les utilisateurs
La phase d'étude des utilisateurs est l'occasion idéale d'identifier les problèmes et les opportunités et de garantir les meilleurs résultats. En tant que spécialistes de la recherche UX, nous ne pouvons que souligner l'importance de cette partie du processus UX.
Déconstruction de la conception de la micro-interaction
Structure de la micro-interaction
Bien que notre définition précédente du Nielsen Norman Group suggère que les micro-interactions sont un système en deux étapes, chaque interaction comporte quatre parties cruciales.
- Déclencheurs ? Qu'il soit déclenché par l'utilisateur ou par le système, c'est la première partie du processus, qui alerte l'utilisateur sur un outil, une action ou une information importante. A déclenchement par l'utilisateur est déclenché par une demande de l'utilisateur, implicitement par un clic, un glissement ou autre. A déclenchement par le système se déclenche lorsque le logiciel détecte que certaines conditions sont remplies.
- Règles ? La règle détermine ce qui se passe après le déclenchement initial. Si l'utilisateur clique, glisse, tape ou parle, une animation sera-t-elle jouée, un processus utile sera-t-il lancé, un rappel sera-t-il établi ou un article sera-t-il ajouté au panier ?
- Retour d'information ? En informant les utilisateurs, on s'assure qu'ils se sentent en sécurité et que leur demande est traitée. La validation et la sécurité sont des facteurs psychologiques importants dans l'expérience de l'utilisateur, c'est pourquoi le fait de tenir tout le monde informé à chaque étape permet d'obtenir une mise à jour de l'état du système et un petit coup de dopamine qui rend les utilisateurs heureux.
- Boucles et modes ? La dernière étape détermine si l'acte est répétable ou s'il s'agit d'une transaction unique. Les boucles et les modes déterminent les méta-règles de chaque mircrointeraction : un geste pour recharger une page ou demander à Siri de répondre à vos questions peut être effectué autant de fois que nécessaire (boucles), alors que l'ajout d'un article à un panier ne se fait qu'une seule fois (à moins, bien sûr, que vous n'ajoutiez une option "acheter un autre article" ou "modifier les détails de l'achat").
Exemples de micro-interactions
Notre sélection d'exemples n'est en aucun cas exhaustive ; il s'agit simplement d'un éventail d'utilisations courantes. Il s'agit simplement de quelques-uns des éléments numériques que vous êtes susceptible de rencontrer chaque jour et qui ajoutent de la valeur à votre expérience en ligne, tout en étant le plus souvent considérés comme allant de soi.
Barre de défilement
Dans les premières années de l'internet, la barre de défilement avait une fonction physique : il fallait la saisir et la déplacer pour naviguer dans la page. Aujourd'hui, il s'agit d'une fonction animée qui nous indique où nous nous trouvons sur la page et quelle est la quantité de contenu supplémentaire qu'elle contient.
Tirer pour rafraîchir l'animation
Couramment utilisée sur les smartphones, la micro-interaction "pull-to-refresh" permet de recharger une page, de recevoir de nouveaux courriels, de mettre à jour les prévisions météorologiques, et bien d'autres choses encore. Une roue qui tourne, un gif de marque ou une barre de progression nous indiquent que l'application a reconnu notre demande et qu'elle est en train de la traiter.
Animation par balayage
Que seraient les applications de rencontres sans le fameux "swipe" ? L'animation d'une croix, d'une coche ou d'un battement de cœur fournit un retour d'information en temps réel sur nos décisions.
Alarme numérique
Exemple de réponse auditive à un déclencheur initié par le système : à une heure précise, votre alarme se déclenche. Cependant, sur votre smartphone, votre tablette ou votre ordinateur, elle est accompagnée d'un retour d'information visuel exigeant une réponse à l'achèvement de la tâche.
Notification
Il en va de même pour les notifications. Le feedback audio et visuel fournit des mises à jour et des alertes concernant les événements, les options ou les promotions demandés (et souvent, pour ceux pour lesquels vous ne pensiez pas vous être inscrit !), conçues pour attirer un utilisateur désengagé.
Erreur de mot de passe
Au lieu de passer à une nouvelle page d'erreur vous obligeant à remplir les champs de saisie à plusieurs reprises, la validation en ligne permet d'économiser du temps et de la frustration. De même, la création de nouveaux comptes peut être rationalisée grâce à la remontée en ligne des erreurs de mot de passe, par exemple en s'assurant que le nombre de lettres, de chiffres et de caractères spéciaux est correct.
Points névralgiques de l'accueil
L'exploration d'un nouveau logiciel ou d'une nouvelle plateforme est riche d'enseignements. Qu'il s'agisse d'un minuscule point pulsé ou d'une bulle bien placée, l'utilisateur sait instantanément comment suivre ce didacticiel initié par le système. Trop d'animations à la fois sur la page seraient écrasantes et maladroites. En suivant un chemin défini, les nouveaux utilisateurs apprennent à naviguer dans les fonctionnalités et à les assimiler de la manière la plus simple possible, une par une.
Statut du chat et de la messagerie en ligne
Donner un retour visuel aux utilisateurs d'une application de messagerie est un excellent exemple de la manière dont on peut rendre une application attrayante. Avec trois points qui rebondissent, nous savons immédiatement que le destinataire a lu notre message et qu'il est en train d'y répondre. Dans WhatsApp, par exemple, le retour d'information visuel se trouve en haut de la page et indique si le destinataire est en ligne, absent ou en train de taper. Qu'on les aime ou qu'on les déteste, ces doubles coches bleues fournissent des informations immédiates sur votre message.
De nombreux sites web ont de grandes quantités d'informations à partager, ce qui nécessite une architecture de l'information bien structurée et facile à naviguer. Avec une telle quantité d'informations et un seul écran disponible, souvent minuscule, le fait de les ranger soigneusement derrière une icône reconnaissable (les trois lignes horizontales connues sous le nom de hamburger) peut être animé pour qu'elles s'affichent au fur et à mesure que l'utilisateur clique sur chaque catégorie, afin de rendre la recherche plus simple et plus directe.
Rendre les processus de remplissage de formulaires et de paiement plus efficaces
Recevoir un message d'erreur inattendu peut être incroyablement frustrant. C'est pourquoi de nombreux formulaires et caisses en ligne disposent de micro-interactions déclenchées par l'utilisateur afin de prévenir les erreurs et de simplifier leurs processus. Qu'il s'agisse de la validation en ligne des formats de courrier électronique, des suggestions de champs obligatoires ou de l'introduction de cases de calendrier pour spécifier des dates précises, tous ces éléments sont conçus pour nous permettre d'atteindre la ligne d'arrivée sans avoir à revenir pour rectifier des erreurs que nous aurions pu négliger. Cette technique permet également de rationaliser le processus de création de compte, ce qui facilite les inscriptions et réduit le risque d'abandon de la part des utilisateurs.
Effets de survol de la souris et changements de curseur
Nous avons l'habitude de passer la souris sur les images, les boîtes d'information et les diapositives pour vérifier si elles sont cliquables, mais le fait d'y intégrer une instruction - "cliquez pour visiter notre page de contact" ou "maintenez et déplacez pour réorganiser vos choix" - donne à l'utilisateur engagé le type exact de retour d'information qu'il recherche.
Extension de la boîte de recherche
Un champ de recherche extensible avec des options prédéfinies ou présentant automatiquement des suggestions au fur et à mesure que vous tapez est un autre bon exemple d'ajout de fonction et de valeur à l'UX de vos produits et de vos utilisateurs.
Humanisation de la boîte de dialogue
Pour créer une expérience de chatbox plus émotionnelle, l'animation de sa réponse est chronométrée pour être efficace mais aussi pour représenter le comportement humain. Lorsqu'un utilisateur envoie une question ou une demande, il voit les trois points qui rebondissent et qui suggèrent que quelqu'un est en train de taper, même s'il s'agit d'une réponse de l'IA. En dotant votre chatbox d'un avatar humain, vous créez le même lien émotionnel que vous ressentiriez pour une personne.
Des façons astucieuses d'utiliser l'animation
L'ajout d'informations, de promotions ou d'informations sur les écrans d'attente lorsque vos barres de progression se développent, tournent ou rebondissent sur l'écran ajoute de la valeur à vos utilisateurs. Il s'agit d'une excellente occasion de proposer des produits d'appel ou d'informer les acheteurs, les utilisateurs ou les membres sur des produits qu'ils n'ont peut-être pas encore explorés.
Si cela correspond à votre marque, ajoutez une fantaisie ou une blague (nous avons tous vu une page 404 amusante et de bon goût qui nous a fait sourire). Cela n'ajoutera peut-être rien d'immédiat à la visite de votre utilisateur, mais renforcera votre relation avec lui, ce qui contribuera à le fidéliser.
Des exemples de micro-interactions réussies pour vous inspirer
Nous savons tous quels sont les éléments des sites web et des applications qui nous impressionnent le plus, qui ajoutent de la valeur à nos expériences en rendant nos interactions plus faciles, plus amusantes et, en fin de compte, plus gratifiantes. En voici quelques-uns qui ont changé de manière significative la façon dont nous utilisons nos produits numériques.
La fonctionnalité Facebook React
Lorsque Facebook a remplacé son bouton "J'aime" par un choix de réactions - en appuyant sur l'icône originale et en la maintenant enfoncée -, chaque nouvelle option émotionnelle a été dotée d'une petite icône et d'une animation uniques. Il ne fait aucun doute que cela a changé notre façon de faire savoir aux autres ce que nous ressentons, de la manière la plus rapide et la plus simple qui soit.
La solution d'Apple et de Google à la commande vocale
Apple et Google avaient tous deux besoin de faire savoir aux utilisateurs que leurs demandes de contrôle vocal étaient prises en compte. L'ensemble du processus s'effectue avec un retour d'information visuel minimal, mais simple et intelligent.
Lorsque vous formulez votre demande, les points flottants de l'assistant Google apparaissent pour vous indiquer qu'il vous écoute ; les points se transforment en ondes sonores pour vous indiquer qu'il capte votre voix au fur et à mesure que vous parlez, et il vous transmet le retour d'information avec sa réponse. Siri fait la même chose, mais avec son image de marque abstraite, en vibrant et en changeant de forme pour vous montrer qu'il a capté votre voix.
Résumé
La création d'interactions fluides qui réduisent la frustration et permettent aux utilisateurs de passer d'un état ou d'une étape à l'autre de manière transparente est essentielle pour une expérience utilisateur idéale. C'est précisément ce que permettent des micro-interactions bien conçues et bien réalisées.
En tant que chercheurs UX, notre rôle est de déterminer la version idéale pour ceux qui conçoivent des micro-interactions. La recherche et les tests auprès des utilisateurs nous permettent d'affiner les meilleures performances grâce aux tests A-B et aux tests de prototypes. La phase de recherche sur les utilisateurs permet de réduire les défauts de livraison de la même manière que de nombreuses micro-interactions qui se retrouvent dans nos formulaires et nos processus de paiement.
Si vous souhaitez en savoir plus sur la recherche sur les utilisateurs, qui peut vous aider à découvrir des opportunités d'innovation pour améliorer vos micro-interactions et votre conception de l'expérience utilisateur, envoyez-nous un courriel à l'adresse suivante hello@ux247.com.
[...] a récemment publié une page explorant les micro-interactions dans le design UX, car nous pensons qu'il s'agit d'éléments importants pour l'utilisateur [...]
[...] Les animations de confirmation et certaines micro-interactions [...]