đŹ Les Micro-interactions au service de lâUI đ (ou plutĂŽt UX)
Une grande partie de lâassimilation par lâutilisateur provient de la clartĂ© de lâexpĂ©rience⊠et une bonne expĂ©rience passe par un design rĂ©flĂ©chi. Naturellement, lâUX nĂ©cessite un appui par lâUI.
Cependant, lorsque graphiquement lâobjectif est assimilĂ©, la plupart du temps la machine Ă dĂ©velopper est lancĂ©e et lâinterface est construite sur le tas. Câest donc assez souvent, et ce par faute de temps, de synergie dâĂ©quipe/R.O.I etc. quâune partie importante du design est omise lors de la conception, entre lâUX et lâUI :
đŹ la micro-interaction đŹ
Lâinteraction est dĂ©finie par lâaction de lâutilisateur au sein de lâinterface, mais la MICRO-interaction est la traduction visuelle de ce que fait lâutilisateur (scroller, changer de page, cliquer sur un bouton, etc.) dans le contexte produit. Elle est le dĂ©tail qui va crĂ©er de lâĂ©motion chez lâutilisateur, amĂ©liorer son expĂ©rience en apportant plus de vie aux interfaces.
Je ne vais pas forcĂ©ment mâĂ©tendre sur lâUI mais plutĂŽt recentrer le sujet sur lâUX avec les quelques points/questions quâil faut toujours avoir en tĂȘte lorsque lâon travaille des micro-interactions :
Est-ce une animation âprincipaleâ reprise dans diffĂ©rentes parties de lâinterface) ou âsecondaireâ (un seul endroit, pour un message unique) ?
đŁ Mon animation doit TOUJOURS ĂȘtre fonctionnelle, justifiĂ©e et ne raconter quâune seule âpartie de lâhistoireâ .
Ce quâil faut comprendre par cela est que lâon ne crĂ©e pas une animation pour âfaire joliâ, mais plutĂŽt pour raconter un moment dâune histoire quâest notre interface. Câest une traduction de lâinteraction de lâutilisateur, protagoniste de cette histoire.
Il est possible que le message que lâanimation vĂ©hicule Ă lâutilisateur soit utilisĂ© Ă plusieurs endroits, mais il faut impĂ©rativement quâil soit vĂ©hiculĂ© avec la mĂȘme volontĂ©.
Câest un peu comme si vous racontiez une histoire Ă un enfant. Quâil la connaisse dĂ©jĂ ou non, vous vous attardez sur certains passages clĂ©s. Vous abordez avec diffĂ©rents tons les diffĂ©rents passages de lâhistoire : la joie ne se confond pas avec la peur et chaque intention reste Ă sa place pour une histoire claire.
Et dans tout cela, quâest-ce que mon animation raconte ?
Pour plus de prĂ©cision dans votre narration de lâhistoire Ă cet enfant, vous accentuez les Ă©motions, exagĂ©rerez les expressions de votre visage, changez votre voix, afin que lâenfant comprenne lâaction ou lâintrigue en cours et quâil se sente accompagnĂ©. Et bien pour une interface câest pareil, on accompagne lâutilisateur avec des animations, parfois exagĂ©rĂ©es, pour que lâutilisateur soit confortĂ© sur ses choix.
Lâexemple qui me vient tout de suite est celui du âplace holderâ : Si lâinterface nĂ©cessite un temps de chargement pour accĂ©der Ă une information, Ă dĂ©faut de lâexpliquer exprimons-le visuellement !
Pour cela, il ne suffit pas ici de placer un loader lambda sur la maquette ou de laisser charger la page au fur et Ă mesure, mais de donner Ă lâutilisateur, via une interaction, lâimpression quâil ne perd pas son temps Ă attendre et quâil ai un aperçu ce qui lâattend.
Si vous mâavez bien suivi , vous lâaurez compris : la micro-interaction est avant tout une affaire dâexpĂ©rience utilisateur, et de volontĂ©. Lâaccompagnement est au centre de cette expĂ©rience, la narration y joue un rĂŽle essentiel et le dĂ©tail y est identitaire.
Tout doit-il forcĂ©ment ĂȘtre utile dans mes animations ?
Il y a une partie de luxe parfois accessible tant en quantitĂ© quâen qualitĂ© mais cela reste souvent subjectif : celle de rajouter des touches dâanimation visuelle que je vais vulgariser dâinutile. Tout designer souhaite rajouter sa patte et faire de belles choses, personne ne le niera. Il faut juste le faire sans trop en faire pour lâutilisateur. Ă mon avis, il vaut mieux travailler en deux temps. Rester simple au dĂ©but, et tenter dâĂ©toffer dans un second temps.
â ïž Tips and tricks Ă garder en tĂȘte :
- Des interactions, oui mais pas trop : ne pas non plus tomber dans le âtoo muchâ, qui risque de produire lâeffet inverse sur les utilisateurs. Les utilisateurs agacĂ©s, eux, reviennent rarement. En micro-interaction moins est plus.
- Le top est de faire en sorte que les interactions durent au maximum 300â400 millisecondes avec une fluiditĂ© bien traitĂ©e.
- Faire des animation (dans les interactions) dâun seul mouvement. Si vous ĂȘtes amenĂ© Ă dĂ©couper lâanimation ou Ă lâexpliquer, essayez de simplifier.
- Le dĂ©tail donne lâidentitĂ© produit. Tout dĂ©tail est une opportunitĂ© pour prouver que votre interface est reconnaissable, forte et se dĂ©marque.
- Utiliser lâhumour : Lâhumour dans lâinteraction, quelle que soit lâĂ©chelle, est un moyen sĂ»r dâapporter des rĂ©actions Ă©motionnelles dans lâexpĂ©rience utilisateur. Par exemple MailChimp, un service dâenvoi et de crĂ©ation de mail, rend lâexpĂ©rience beaucoup plus interessante pour les utilisateurs en ajoutant de lâhumour et de la positivitĂ© tout au long du processus (enfin pas forcĂ©ment chez âPFGâ).
- Gardez la longĂ©vitĂ© dans lâesprit. Lâanimation deviendra t-elle toujours agaçante Ă la 100e utilisation ou est-elle Ă lâinverse claire et discrĂšte?
Et voilĂ ! Je ne demanderai que deux derniĂšre choses de votre part :
- Allez faire un tour sur la plateforme medium de france tĂ©lĂ©visions ! đđ»đđ»
2. Si vous avez aimĂ© cette article, une 50aine de claps đđ»đđ»đđ» pas plus đ
MERCI pour lâattention !!