micro.jpg

Comment les micro-interactions d’une application réenchantent l’UX

Dans une application mobile, comme sur n’importe quel site internet, on retrouve plusieurs composants indispensables à son fonctionnement et à sa qualité : les caractéristiques techniques ou fonctionnelles, l’esthétique, et ce que l’on nommera « les détails ». Les micro-interactions sont ces détails qui vont créer de l’émotion chez l’utilisateur, améliorer son expérience en apportant plus de vie, voire de l’humanité, aux interfaces numériques. Pour faire simple, à chaque fois qu’un appareil quel qu’il soit (smartphone, ordinateur, tablette, etc.) répond à une action effectuée par un utilisateur, on parle de micro-interaction. Elles peuvent être à la fois essentielles au fonctionnement et à la bonne compréhension de l’application ou n’être que ludiques et sympathiques.

Les micro-interactions contribuent largement à la conception d’une expérience positive et réellement centrée sur l’utilisateur.

 

Micro-interactions et usages

À l’image de la gamification, les micro-interactions ne datent pas d’hier. Leur utilisation a véritablement explosé avec la démocratisation des interfaces web et nous sommes aujourd’hui tous habitués à vivre avec. À force de les rencontrer, l’utilisateur ne se rend plus compte de l’importance qu’elles ont dans le processus de navigation. Leur faculté d’être parfois si discrètes qu’elles passent inaperçues, rend les micro-interactions très intéressantes pour l’expérience utilisateur. Petit à petit, elles créent de nouvelles règles ergonomiques, de nouvelles habitudes gestuelles et de nouveaux réflexes d’utilisation. Exemples : Le changement de couleur du lien hypertexte lorsque l’utilisateur clique dessus, le rollover, le switch on/off, le pull to refresh (scroll de l’écran pour rafraîchir la page)… Tous ces exemples sont désormais ancrés dans les usages et ne soulèvent plus de questionnements quant à leur légitimité. Les utilisateurs apprécient d’autant plus qu’on leur facilite la vie en leur inculquant des tâches qu’ils reproduiront plus tard machinalement. Prenons pour exemple certaines micro-interactions devenues de réelles marques de fabrique pour leurs concepteurs. On pense au bouton « Démarrer » de Windows ou au fameux « Like » de Facebook qui a initié l’ère de la recommandation sociale.  

À la recherche de l’effet WAOUH !

Dans un contexte ultra-concurrentiel, les micro-interactions peuvent être considérées comme la valeur ajoutée qui va permettre une meilleure différenciation de l’application mobile. Lorsqu’elles sont bien réalisées et efficacement mises en place, elles créent une expérience utilisateur attirante au fort potentiel addictif et viral. Les utilisateurs auront alors tendance à utiliser l’application de façon régulière, mais aussi à la diffuser autour d’eux, à la recommander. Le but est aussi de créer la surprise avec une micro-interaction originale et « magique ». Il s’agit alors du fameux effet Waouh tant recherché par les marques ; lorsque l’utilisateur en action se dit « trop fort ce truc !». Par exemple, les applications de messagerie Skype ou iMessages matérialisent le fait que la personne avec laquelle nous discutons est en train de taper, par la présence d’une petite bulle grisée.   application skype micro-interaction   Dans les conversations de l’application Messenger (Facebook), le Like envoyé grossit en fonction du temps passé à appuyer sur l’icone.   application messenger micro-interactions

Habitués au fonctionnement des interfaces digitales, les utilisateurs sont entrés dans une routine de navigation et n’éprouvent plus de réel plaisir. Avec chaque micro-interaction naît l’opportunité de créer à nouveau ce sentiment chez l’utilisateur, de le distraire. Finalement, les micro-interactions procurent à l’application une image positive et encourage la rétention. Par exemple, Apple a depuis longtemps compris que pour rendre ses utilisateurs heureux, le sens du détail était primordial. On peut aujourd’hui s’en rendre compte sur la page de présentation du dernier iPhone 6 Plus. Au scroll, les smartphones semblent flotter et évoluer en fonction de la lumière. On observe l’apparition de reflets, notamment sur le capteur caméra ainsi que sur la pomme au dos de l’iPhone. application iphone micro-interactions   LittleBigDetails Le titre de ce site parle de lui même. Il regroupe tout un tas d’animations et de micro-interactions astucieuses, originales et parfois surprenantes repérées au sein d’applications mobiles ou de sites web connus. L’objectif : vous montrer que ces détails qui peuvent paraître insignifiants font en réalité toute la force et la qualité de l’application.    

Processus de micro-interactions

Utiliser les micro-interactions dans son application mobile revient à comprendre le fonctionnement du processus, divisé en quatre étapes distinctes.  

1. Trigger

Comme nous avions pu le voir en étudiant le modèle de Hook, de nombreux processus UX commencent par un déclencheur. Dans le cas des micro-interactions, il peut être manuel ou provenant du système. Le déclencheur manuel représente les actions effectuées par l’utilisateur (survol d’un élément, clic sur un bouton, switch, etc.) lorsque le déclencheur système regroupe celles initiées par l’application en fonction du contexte, du temps ou de capteurs. Prenons l’exemple d’une réunion à laquelle vous assistez. Si vous décidez spontanément de passer votre smartphone en mode silencieux, il s’agit d’un déclencheur manuel. Si vous aviez spécifié dans votre agenda que vous assistiez à cette réunion, l’application peut vous proposer d’actionner le mode en question.  

2. Rules

Il s’agit de l’ensemble des règles déterminant les réactions de la micro-interaction suite à l’activation du déclencheur. Le but est d’envisager tous les scenarii de parcours possibles et d’indiquer ce qu’il convient de faire dans chacun des cas. L’anticipation permet d’éviter les erreurs et favorise la surprise de l’utilisateur.  

3. Feedback

L’utilisateur reçoit ici un retour de la micro-interaction. L’application lui fait savoir qu’elle a compris sa demande et qu’elle réagit. C’est ici que votre imagination peut s’exprimer : animations diverses, messages textuels, pop-up, etc…  

4. Loops/Modes

Les modes complètent les règles établies en amont mais ne concernent que les actions occasionnelles et plutôt rares. Par exemple, modifier sa ville dans l’application Météo d’Apple est une action que l’utilisateur n’effectuera pratiquement jamais. La règle est alors de cacher ces réglages plutôt que de les afficher en permanence. Les loops (boucles) sont l’ensemble des variables telles que la vitesse de l’animation, sa répétition et son évolution dans le temps. Il va s’agir ici de choisir la durée d’affichage d’un message ou le nombre de fois qu’une animation va se répéter. La pop-up proposant à l’utilisateur de noter l’application mobile est un bon exemple. Il est possible de préciser la récurrence du message en fonction des différentes connexions (rappel tous les 72h, tous les mois, au bon moment, etc.).   application process micro-interactions  

Principes et techniques ergonomiques

Les micro-interactions doivent être employées, non pas uniquement pour leur capacité esthétique et attractive, mais pour être profitables à l’utilisateur. Au-delà du sentiment de surprise ou d’admiration qu’elles peuvent engendrer, elles ont plusieurs rôles dont celui de devoir communiquer sur une situation ou sur une réaction de l’appareil suite à une action effectuée. C’est ce que Jakob Nielsen, expert en ergonomie informatique, avait démontré en étudiant des listes de problèmes rencontrés sur de nombreuses interfaces logicielles. Parmi ses 10 grands principes heuristiques, on retrouve : visibilité du statut du système, aide et documentation, prévention des erreurs, esthétique et design minimaliste…  

L’évaluation heuristique consiste à inspecter chacune des interfaces et à juger si elles respectent ou non les principes d’utilisabilité définis par Jakob Nielsen en 1994.


  Même si son ergonomie et sa gestuelle sont bien différentes de celles d’une interface web, l’interface mobile se base sur les mêmes principes d’utilisabilité. Ainsi, le rôle premier d’une micro-interaction est d’informer l’utilisateur. Il doit savoir où est-ce qu’il en est dans sa navigation. À n’importe quel moment, il doit pouvoir sentir qu’il garde le contrôle de l’application et visualiser directement le résultat de l’action qu’il vient d’effectuer. Tout l’enjeu est aussi dans la maîtrise des temps de chargement. Même si l’application a besoin d’un certain délai pour récupérer des éléments externes et les charger, l’utilisateur n’aime pas attendre. Sa perception du temps n’est pas identique à la mesure réelle et passé 1 seconde, son attention faiblit, sa volonté d’abandon augmente. C’est à ce moment que les micro-interactions interviennent. Ajouter une barre de progression classique, une icône interactive, une accroche humoristique ou une animation illustrée, permet de détourner l’attention et déconcentrer l’utilisateur de son attente.  

Bonnes pratiques et attractivité

Lorsque l’on conçoit une application mobile, les micro-interactions sont évidemment présentes par défaut mais sont souvent négligées. La façon dont il est possible de les mettre en valeur peut totalement varier d’un concepteur à l’autre. L’enjeu est de trouver le juste milieu en cherchant à peaufiner les détails, à rendre subtile et efficace la micro-interaction. Il est primordial de se documenter sur les différents profils utilisateurs et se mettre à leur place.

La compréhension de leurs parcours avant-pendant-après l’application ainsi que l’étude de leurs intérêts et de leurs désirs, donneront un réel sens émotionnel à vos micro-interactions.

Il faut également savoir tirer partie des micro-interactions existantes, celles qui ont déjà prouvé leur efficacité, et s’en servir pour améliorer l’expérience utilisateur de votre application. Attention tout de même à ne pas en abuser. Par exemple, une animation peut être amusante au début et devenir lassante et redondante à force de répétition.   Voici plusieurs exemples de micro-interactions aux rôles complètement différents mais servant toutes la même quête d’optimisation de l’expérience utilisateur :
  • Indiquer un changement d’état, un téléchargement en cours.
  • Pousser l’utilisateur à explorer l’application, à effectuer une action (call-to-action).
  • Transformer des tâches rébarbatives en tâches amusantes.
  application etat micro-interactions   application call micro-interactions   application taches micro-interactions  
Sources : Schema, Dribble, Pinterest
IdéineComment les micro-interactions d’une application réenchantent l’UX
Share this post

Join the conversation

À lire aussi