Micro-interactions #DicoUX

On ne le répète plus; l’expérience utilisateur est primordiale pour tout site qui veut fonctionner correctement. Aujourd’hui nous nous intéressons à un aspect spécifique du thème susmentionné: l’interaction. Cela comprend tous ces petits instants où l’utilisateur interagit avec le site et qui vont grandement contribuer aux émotions et à la satisfaction qu’il ressent lors de sa navigation. On parle alors de micro-interactions.

Qu’est-ce que sont les micro-interactions?

Le terme a été créé par Dan Saffer, designer d’interaction et de produit. Il est défini dans son livre Microinteractions comme suit:

« 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. »

Concrètement, les micro-interactions visent à rendre une interaction plus engageante, accueillante et humaine. Mais elle doit au final toujours apporter des informations à l’utilisateur. Par exemple signaler une erreur, informer d’un temps de traitement, etc…

Une micro-interaction sert de lien entre deux états en nous tenant informé sur notre progression, qu’elle soit réussie ou non.

Pourquoi sont-elles importantes?

Comme leur nom l’indique, les micro-interactions ne sont que de minuscules éléments sur l’entier d’un site. Pourquoi devrait-on alors s’en préoccuper?

Il faut comprendre que la micro-interaction peut tout changer pour l’utilisateur. L’attention aux détails et ce qui fait toute la différence entre un site ordinaire et fantastique.

Les micro-interactions sont bien parce qu’elles:

  • améliorent la navigation et l’interaction sur le site;
  • donnent un retour immédiat et pertinent sur les actions de l’utilisateur;
  • fournissent des conseils;
  • rendent l’expérience de l’utilisateur beaucoup plus gratifiante;
  • attirent l’attention;
  • augmentent bigrement l’impact émotionnel du site.

Quelques exemples de micro-interactions basiques pour briller en société

Sont des micro-interactions:

  • la scrollbar du navigateur;
  • tirer pour rafraîchir;
  • Swipe.

Ne sont pas des micro-interactions:

  • des GIFs;
  • un lecteur de vidéo (les contrôles de la vidéo, cependant, le sont).

Les quatre étapes d’une bonne micro-interaction

La réussite d’une micro-interaction est déterminée par quatre critères:

  • Le déclencheur: on détermine ce qui va lancer la micro-interaction: un clique, un scroll, le chargement de contenu.
  • Les règles: on explicite les conditions qui peuvent mener au déclenchement de la micro-interaction (ajout d’un produit au panier, erreur dans un formulaire).
  • Le retour d’information: la réponse fournie par l’interface pour l’utilisateur (une animation, un son, apparition d’un message,…)
  • Les boucles et les modes: on détermine la façon dont la micro-interaction peut/va évoluer. Peut-elle se déclencher plusieurs fois, peut-on l’annuler?

Exemples visuels de micro-interactions

Loader

behance.net

Loader avec pourcentage
Chargement avec pourcentage indiqué
dribbble.com

Erreur formulaire
Message d'erreur dans un formulaire
Infomaniak

Ajouter un média
Bouton pour ajouter un média
dribble.com

Pour conclure

On a tous tendance à rechercher la gratification immédiate. S’il est facile de négliger les micro-interactions du côté des développeurs, elles n’en restent pas moins importantes pour accrocher les utilisateurs. Le diable est dans les détails, vous dis-je. Créer une micro-interaction, c’est un petit pas pour le développeur, un bond de géant pour l’utilisateur.

Image de couverture @dibbble.com

Commentaires