Illustration by Matthew Lyons

Introduction aux micro-interactions

“Details are not details, they make the design.” — Charles Eames

Cet article en français est le fruit d’un travail de recherche documenté. Retrouvez les sources en bas de l’article.

Les microinteractions tendent depuis quelques années à être de plus en plus au cœur de l’expérience utilisateur. Il s’agit d’une réaction réfléchie et naturelle de l’interface à une action directe ou indirecte de l’utilisateur.

Elles sont des éléments qui se conjuguent à une conception d’ensemble et qui permettent de sublimer cette dernière parce qu’elle se veut utile et créative. C’est une interaction dédié à une réaction ciblée et dédiée à un effet final précis. L’intérêt de la microinteraction repose essentiellement sur le fait qu’elle est utile et créative.

Son utilité repose essentiellement sur le fait qu’elle permet l’efficacité de l’action et garantit l’accessibilité de l’interface.

Elle veut rendre l’action naturelle et intuitive, et elle est efficiente (en permettant de ne pas rompre le fil naturel de l’expérience), elle crée une narration sensorielle.

La dimension créative de ce type d’interaction doit permettre une satisfaction subjective de l’utilisateur et peut permettre de transmettre un message sous-jacent, une idée, ou simplement de communiquer une émotion pour un design émotionnel lorsque l’utilisateur accomplit une action.

Principes de base / Schématique

Toutes les microinteractions suivent le même schéma.

  • Elles débutent par un TRIGGER, c’est l’élément déclencheur de la microinteraction. Il peut être le résultat d’une volonté utilisateur ou du système. Le trigger (ou 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 avez spécifié dans votre agenda que vous assistiez à cette réunion, l’application peut vous proposer d’actionner le mode en question.
  • S’ensuit une succession de RULES (ou règles) qui encadrent et déterminent les réactions de la microinteraction suite à l’activation du déclencheur. L’intérêt est d’envisager tous les scénarios de parcours possibles et d’indiquer ce qu’il convient de faire dans chacun des cas. C’est cette anticipation permet d’éviter les erreurs et favorise la surprise de l’utilisateur.
  • Le FEEDBACK (un retour) de la microinteraction. Le système fait savoir à l’utilisateur qu’il a compris sa demande et réagit. L’expression de ce feedback peut prendre plusieurs formes selon le contexte : animation, vibrations, pop-up, etc.
  • 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.

Aussi, les microinteractions sont un outil d’accessibilité. Cela permet de gagner du temps en communiquant instantanément les informations de manière à ne pas ennuyer ou à distraire l’utilisateur. On capte ainsi l’attention de l’utilisateur de la même façon qu’un clin d’œil, discret mais quasi imperceptible mais le message est passé. Connaître vos utilisateurs et le contexte derrière les microinteractions, rendra l’experience plus précise et efficace.

Les microinteractions doivent survivre à une utilisation à long terme. Ce qui semble amusant la première fois peut devenir ennuyeux après la 100eme utilisation. Elle doivent aussi participer à rendre l’expérience la plus humaine possible et favoriser l’harmonie visuelle. Le mouvement doit être fluide et réfléchie pour que la microinteraction prenne vie.

Champ d’utilisation

Que ce soit pour un blog ou un site de commerce, ces petites interactions servent une variété de fonctions communes à presque tous les sites Web:

Accomplir une tâche — Cela comprend une action simple comme la connexion, l’ajout d’une mise à jour de statut ou régler une alarme.

Eléments de raccordement — Synchroniser deux points crée un microinteraction entre deux appareils ou des sites Web, que ce soit des jeux multijoueurs / apps qui se synchronisent d’un appareil à ou écouteurs Bluetooth simples pour votre smartphone.

Faire un ajustement — Toute modification apportée à un paramètre de site Web (comme couper le volume sur une application ou en baissant le volume sur un lecteur de musique) et le retour visuel (et audio) correspondant une microinteraction. Certaines d’entre elle sont si discrète que l’utilisateur ne s’en rend même pas compte et c’est là que l’on se rend compte de l’importance de soigner les interactions pour ne pas être trop intrusif.

Changement d’état — Transformer un site ou d’une fonction à l’intérieur, ou désactiver modifie l’état et complète une petite action.

Interaction de données unique — Ceci fait référence à obtenir une donnée spécifique, telles que la vérification de la météo ou la circulation dans votre région, à la suite d’une action directe comme l’ouverture d’une application ou le contrôle d’un site Web avec des outils de localisation.

Une action lance chacune des actions ci-dessus; l’utilisateur fait quelque chose dans un site Web ou application pour démarrer le processus (même si elle se poursuit après la première étape). Cela fait suite à une demande d’appel à l’action d’un utilisateur, des règles d’engagement tel que déterminé par l’interface (ce qui se passera et comment), les commentaires de l’utilisateur (a t-il fonctionné ou non) et des motifs ou des boucles (l’action arrive une fois ou répéter sur un calendrier).

Quelques Règles d’or

Les micro interactions intègrent des retours visuels importants qui se traduisent par des animations complexes et chorégraphiées qui sont au centre de nos intérêts tout au long de la conception en UX.

Ces chorégraphies créent le sens des microinteractions. Il est aussi nécessaire de maîtriser les usages de ces animations. Pour ce faire, il existe quelques règles et principes de bases qui, aujourd’hui, permettent d’arriver à un rendu qui permet de composer des chorégraphies qualitatives dans l’idée d’appliquer correctement les principes énoncés plus haut.

1 / Responsive

Au sens du material design, cette règles est importante pour conforter un sentiment de rapidité des interactions. Il s’agit d’avoir des vitesses d’animations proportionnelles à la distance du tracé. Aussi, des animations avec des parcours courts évoluent autour des 150–200ms tandis que les plus longs peuvent engendrer des durée de 300–400ms.

2 / Naturel

Pour donner l’impression d’un rendu naturel, il convient de dégrader la vitesse de l’animation en début et fin de parcours à la façon d’un ease-in/ease-out.

3 / Rapide

L’animation ne doit pas rajouter du temps à l’expérience utilisateur En somme elle ne doit pas donner l’impression de devoir attendre pour accéder à la suite de l’expérience.

4 / Compréhensible

Une structure simple et cohérente de l’animation pour faciliter la compréhension de l’action déclenchée et des effets de cette dernière très rapidement et ne pas rompre une dynamique.

5 / Impliqué

L’animation est au service d’une expérience intuitive et non l’inverse. Par exemple, elle peut reléguer le chargement en coulisses pour donner l’illusion d’une expérience intuitive ou dans le pire des cas, faire patienter l’utilisateur de façon ludique.

6 / Intégrée

L’animation doit prendre en considération les guidelines du support dans lequel elle évolue. Concrètement, les guidelines Material sur Android, les Guidelines d’Apple pour IOS ou les règles de l’interface Metro sur Windows.

7 / Interpolée

L’animation doit limiter les déplacements linéaires et préférer les animations en courbe pour renforcer un aspect naturel et organique, plus proche de notre vie réelle et donc plus agréable à visionner.

8 / Simple

Les triggers et autres interactions proposée au cours d’une microinteractions de doivent pas uniquement reposer sur des interactions très spécifique et encore moins se concentrer autour de ce même point névralgique comme ce peut être le cas avec un FAB button. Il est préférable de d’aller au plus simple concernant les hotspots avant de songer à complexifier l’interaction.

9 / Composée

La micro interaction doit être enchaînement successif réfléchis et ne pas faire partir l’ensemble des éléments dynamiques au même moment. Typiquement, deux ou trois éléments ne peuvent pas se déplacer au même moment.

10 / Anticipatrice

La micro interaction préparer et informer des conséquences des actions de l’utilisateurs. L’utilisateur doit pouvoir ainsi anticiper une ouverture d’une page, un déplacement, ou tout autres un feedback .

11 / Utile

Quelque soit l’animation, elle se doit d’abord d’être utile et nécessaire. Puis belle. Une mauvaise animation sera toujours pire que pas d’animation du tout, c’est pourquoi elles ne doivent jamais être réalisés à la va-vite.

De plus, ce qui peut sembler agréable et joli pour le concepteur ne sera pas accueillis de la même façon pour l’utilisateur. Il peut s’en lasser, ou même perdre la compréhension de l’utilisateur.

12 / Contextualisée

Il s’agit d’aider les utilisateurs à s’orienter avec leur environnement et de clarifier les relations entre tous les éléments en leur proposant une expérience qui s’inscrit dans une cadre multidimensionnel soigné. Cela peut passer par l’utilisation intelligente des axes x, y et z dans l’animation.

13 / Personnelle

La personnalisation est actuellement un grand thème dans la conception UX, et c’est entre autre parce qu’il est plus facile que jamais de fournir d’un point de vue technique. Il y a maintenant un niveau d’attente de l’utilisateur vers cette touche personnelle dans leurs expériences numériques.

Cependant, la véritable personnalisation va plus loin que le simple ajout de prénom de l’utilisateur ou la recommandation des produits basés sur leurs habitudes précédentes. Il fournit un contexte et un sens à leurs interactions en prenant par exemple la localisation, les données horaires, le device …

14 / Rassurant

Entrer les détails de paiement ou de livraison sont des moments classiques d’anxiété et de douleur pour de nombreux utilisateurs. Identifier et réduire la friction de ces expériences peuvent être des moments pour ravir les utilisateurs et dépasser leurs attentes. C’est lors de ces points de friction que les microinteractions peuvent jouer un rôle très important.

Sources et ressources:

La référence en librairie: Microinteractions: Full Color Edition: Designing with Details

Ailleurs sur le web :

https://www.fastcodesign.com/1672922/the-future-of-ux-design-tiny-humanizing-details

http://thenextweb.com/dd/2015/05/20/new-web-trends-immersive-interaction-design/

https://www.uxpin.com/studio/ebooks/interaction-design-best-practices-intangibles/

https://blog.prototypr.io/common-material-design-bad-practices-to-avoid-b7995f251329

https://uxplanet.org/how-to-use-animation-to-improve-ux-338819e93bdb

https://design.google.com/articles/making-motion-meaningful/

https://medium.com/@pasql/transitional-interfaces-926eb80d64e3

http://www.smashingmagazine.com/2015/05/14/functional-ux-design-animations/

http://www.smashingmagazine.com/2015/06/08/practical-techniques-on-designing-animatio

https://medium.freecodecamp.com/the-principles-of-ux-choreography-69c91c2cbc2a

https://la-cascade.io/5-facons-danimer-de-maniere-responsable/

https://medium.com/@pasql/transitional-interfaces-926eb80d64e3

http://www.smashingmagazine.com/2013/10/23/smart-transitions-in-user-experience-design/

http://www.ux-republic.com/comparatif-4-outils-prototypage-interactifs/

https://speckyboy.com/ux-motion-design/?utm_content=buffer0c405&utm_medium=social&utm_source=twitter.com&utm_campaign=buffer

http://nlevin.com/framer/#29

https://blog.alexmaccaw.com/css-transitions

https://medium.com/@thin.martian/delighting-users-adding-magic-to-everyday-interactions-178d25c9a45a#.4dz93c2ek

https://www.distilled.net/resources/expecting-the-unexpected-edge-cases-in-ui-design/

Illustration : Matthew Lions (matthew-lions.com)

Wladimir Delenclos

Written by

Digital Engineer @Thales | Co-Founder @Smapps | PWA Developer, digital thinking

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade