Micro-interactions: Des animations dans nos UI Donnez un petit coeur à notre interface

Que cherchons nous d’une application ou d’une page internet ?

Certes oui, une information ou une fonctionnalité, quelque chose qui va nous faire avancer dans une démarche, mais pour cela, nul grand besoin d’interfaces léchées, quelque chose de simple et fonctionnel devrait suffire.

Et pourtant l’humain est attiré par l’émotionnel, il a besoin d’être captivé, de se sentir en phase avec ce qu’on lui propose. Cela passe par une partie de design statique qui donne le ton, mais on peut aller plus loin et ajouter de l’animation dans ses interfaces c’est ce qu’on appelle les micro-interactions.

Nous allons voir que ces micro-interactions peuvent remplir différentes fonctions mais toutes ont une chose en commun, l’idée de connecter l’utilisateur à son interface.

1. Feedback

Dans le cas du feedback, on utilise l’animation pour confirmer l’action d’un l’utilisateur, un changement d’état ou une évolution.

 

2. Transition / flow

Ici l’animation permet de passer d’une partie de l’interface à une autre et sert de repaire pour l’utilisateur. Il sait d’où il vient et où il est arrivé ce qui simplifie le chemin inverse.

3. Mise en lumière

Dans ce cas, l’animation sert à créer une emphase sur une partie de l’interface. Si l’on veut faire comprendre à notre utilisateur quelles sont ses possibilité ou les actions l’action la plus essentielle à effectuer.

4. Delighters

Cette micro-interaction n’a pour seul but que de créer de l’émotion et une vrai personnalité à notre produit.

 

Il s’agira ainsi de mixer les concepts pour créer une interface intuitive avec de la personnalité.

No spam please !

Bien que les micro-interactions soient délicieusement attractive pour un designer, il faut savoir se ménager et les utiliser à bon escient.

Attention à ne pas fatiguer votre utilisateur. Pensons qu’un utilisateur va probablement revenir sur notre interface plusieurs fois, il va s’habituer à nos animations et va se fatiguer de perdre du temps du temps dessus.

Il faut faire un effort pour garder nos animations:
simples, en allant à l’essentiel, pas de triple rotations ou d’effet de rebond lourdaud sur une icone.
brèves, en général on conseille un maximum de 300 – 400 ms par animation.
pertinentes, il faut toujours se mettre à la place de son utilisateur, se demander si l’interaction ne va pas le freiner au lieu de l’aider.

Pour creuser le sujet et vous inspirer dribbble reste toujours une excellente source.  Je vous conseille également d’aller faire un tour sur littlebigdetails.com qui analyse certain détails de design intéressants trouvés sur les internets, tout n’est pas animé mais le site reste pertinent.

Bonne micro-interactions !

2 réflexions au sujet de « Micro-interactions: Des animations dans nos UI Donnez un petit coeur à notre interface »

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *