Tout le monde les connaît et les utilise tous les jours. Elles aident l’utilisateur à éviter les erreurs et transmettent l’état d’une application ou d’un site web.
Souvent, elles ne se remarquent pas, mais si elles n’existaient pas, l’interface serait incomprise. Il s’agit des micro-interactions. Celles-ci font la différence entre une bonne et une excellente expérience utilisateur.
Nous allons vous expliquer ce que sont exactement les micro-interactions, et vous donner 5 conseils pour vous aider à les créer.
Que sont les micro-interactions ?
Dans son livre “Microinteractions : Designing with Details” Dan Saffer décrit les micro-interactions comme des petites choses qui font qu’un bon produit numérique devient excellent.
De nombreuses interactions récurrentes avec les systèmes informatiques sont considérées comme des micro-interactions. Par exemple, elles indiquent l’état du système, aident à éviter les erreurs, attirent l’attention sur des saisies incomplètes ou signalent la réception d’un nouveau message. Il s’agit généralement de petites animations, de signaux acoustiques ou de retours haptiques.
Dan Saffer a analysé les 4 composantes d’une micro-interaction : déclencheurs, règles, feedback, boucles & modes.
Déclencheurs
Les déclencheurs sont les points de départ des micro-interactions. On peut citer l’exemple du bouton pour avancer rapidement dans un lecteur multimédia, ou encore un interrupteur pour choisir entre le ON ou le OFF.
Règles
Les règles définissent ce qui se passe lorsqu’un utilisateur a utilisé un déclencheur, comme la fonction “liker” d’une publication, d’une photo ou autre.
Elles contiennent l’ensemble des paramètres qui définissent le contrôle que l’utilisateur exerce sur une micro-interaction en cours.
Par exemple, dans le cadre d’une recherche, une règle pourrait stipuler que l’utilisateur doit saisir un terme complet dans le champ de recherche avant que le bouton “Rechercher” ne devienne actif. Les règles peuvent aussi permettre à l’utilisateur de contrôler une action automatique notamment pour annuler un téléchargement en cours.
Feedback
Le retour d’information est l’un des éléments les plus importants de toute micro-interaction. Il montre aux utilisateurs que quelque chose se passe ou s’est passé.
Les barres de chargement indiquent la progression. On peut également citer l’exemple du changement de couleur d’un composant pour indiquer que l’action souhaitée a été exécutée avec succès ou qu’une erreur s’est produite.
Boucles & Modes
Un mode, comme le mode édition d’un formulaire, est une partie spéciale d’une application dans laquelle l’application fonctionne différemment. Souvent, cela signifie que des actions telles que l’appui sur une touche peuvent avoir un effet différent de d’habitude.
Modes
Un mode est une déviation des règles, et doit être utilisé avec parcimonie. La plupart des micro-interactions devraient être exemptes de modes, mais ceux-ci sont parfois nécessaires.
Un mode assez connu est le mode paramètres, dans lequel l’utilisateur spécifie quelque chose à propos de la micro-interaction. Lorsque vous êtes en mode paramètres, vous n’effectuez généralement pas la tâche principale, vous vous contentez de la modifier. Cette tâche est séparée du reste de l’interaction.
On trouve ce cas dans les applications météo. Lorsque vous sélectionnez des villes, vous n’effectuez pas l’action principale de la micro-interaction ; il s’agit ici d’une déviation des règles qui vous éloigne afin d’effectuer une sous-tâche, avant de revenir au périmètre initial.
Boucles
Les boucles courtes, peuvent être utilisées pour s’assurer qu’une action ne dure pas longtemps ou pour mettre fin à un processus, voire à l’ensemble de la micro-interaction. Cela peut être utilisé pour des raisons de sécurité, par exemple, lorsqu’un site bancaire vous déconnecte automatiquement après quelques minutes d’inactivité. Ce type de fin automatique peut être gênant, il faut donc l’utiliser avec précaution.
Parfois, la simple répétition (une boucle ouverte) est suffisante. Mais les boucles les plus puissantes sont celles qui se déroulent sur de longues durées et/ou qui sont des boucles fermées qui s’adaptent au fil du temps au comportement de l’utilisateur. Ce sont les boucles longues.
Les boucles longues durent dans le temps et utilisent généralement les données. Elles peuvent tourner en boucle, parfois sans fin.
Les boucles peuvent produire ce que Brandon Schauer, stratège en design et PDG de la société de conseil en design Adaptive Path, appelle le “Long Wow”. Il s’agit d’offrir de nouvelles expériences ou fonctionnalités au fil du temps plutôt qu’en une seule fois, et ceci peut enrichir l’experience avec l’utilisateur. Dans le cas des micro-interactions, le Long Wow consiste à adapter la micro-interaction au fil du temps pour qu’elle donne l’impression d’être personnalisée, voire inédite. Cela nécessite une boucle aussi longue que la durée de vie de l’appareil dans lequel se trouve la micro-interaction ou même au-delà, si les données de l’utilisateur sont stockées à distance et peuvent transiter entre différents appareils.
On peut citer comme exemple de boucle longue : les rappels hebdomadaires ou encore les listes de souhaits. Lorsqu’un utilisateur revient sur la micro-interaction, son utilisation précédente est gardé en mémoire.
Les boucles à divulgation sont une autre utilisation des longues boucles. Au fur et à mesure que les utilisateurs s’habituent à un produit, des raccourcis ou des fonctions plus avancées peuvent être ajoutées à la micro-interaction.
Une autre option est la réduction progressive, dans laquelle la micro-interaction se simplifie au fil du temps, à mesure que l’utilisateur n’a plus besoin d’éléments pour se guider. Il faut toutefois faire attention : si l’utilisateur n’utilise pas le produit pendant un certain temps, la micro-interaction devra peut-être redevenir assistante. L’avantage pour les utilisateurs est une interface plus légère, qui récompense un usage constant de l’utilisateur avec le produit.
5 conseils pour concevoir des micro-interactions
Lorsque vous concevez des micro-interactions, vous devez toujours garder à l’esprit qu’elles doivent être insérées à des moments précis et ne pas perturber l’utilisateur.
Les 5 conseils suivants peuvent vous aider à concevoir les micro-interactions pour vos applications :
- Rester simple
Gardez un design simple. Si vos micro-interactions sont trop compliquées, les utilisateurs seront désorientés. D’autre part, ne vous contentez pas d’intégrer des micro-interactions insipides, mais réfléchissez bien à la valeur et au sens qu’elles vont communiquer à l’utilisateur. - Maintenir la cohérence du design
Les micro-interactions doivent être agréables pour l’utilisateur, ne cherchez pas à vouloir la rendre trop visible au détriment de la cohérence du design général. - Donner la priorité à l’objectif de l’utilisateur
Les micro-interactions ont un objectif : guider l’utilisateur et l’encourager à interagir à un endroit précis. Si vous créez une micro-interaction sous l’aspect du fun, de la convivialité, de l’effet wahoo, vous allez dégrader l’expérience utilisateur. L’utilisateur risque d’être troublé. - Tester vos micro-interactions
Une micro-interaction incomprise ne sert à rien. Le meilleur moyen d’éviter ça, est de la tester pour s’assurer qu’elle soit bien comprise. - Les micro-interactions doivent vivre longtemps
Les micro-interactions doivent vivre sur le long terme et être constamment agréables.
En conclusion
Les micro-interactions sont les détails qui transforment une application en une excellente application et que les utilisateurs aiment utiliser.
Elles ont le pouvoir de changer complètement l’expérience utilisateur et de faire en sorte que les gens se sentent à l’aise en utilisant votre produit.
Les petits détails jouent un rôle très important, concevez-les avec soin, sans réinventer la roue.
Pensez à la façon dont les gens vont utiliser votre application, l’attention portée à chaque détail est la clé du succès de votre application.
Et notre équipe UX-UI peut vous accompagner dans votre projet !