Utilisation de boutons et d'effets animés sur l'expérience utilisateur
Je vois de plus en plus de boutons animés dans les applications Web orientées services, notamment lors de l'inscription et de la réalisation d'une action. Dans la littérature de psychologie persuasive, les objets en mouvement sont utilisés pour attirer l'attention de l'utilisateur pour des raisons particulières.
Dans le projet en cours, je n'ai pas assez d'utilisateurs pour mener une étude et j'aimerais en savoir plus sur ce sujet. Avez-vous une étude, de préférence des tests A/B, montrant si les animations sont utiles pour:
- Augmenter le nombre d'utilisateurs enregistrés
- Augmentation des taux de conversion
- Terminer une action d'achat non liée
J'ai eu quelques séances d'entrevue et certains participants ont déclaré qu'ils trouvaient cela un peu ennuyeux, ce qui pouvait avoir un effet négatif sur le flux global.
Voici des exemples des boutons animés que j'ai utilisés lors de mon entretien:
Les animations des boutons ont un objectif différent
Observations:
- Le but de l'animation n'est pas d'attirer l'attention de l'utilisateur, mais plutôt de fournir une rétroaction à l'utilisateur.
- Ceci est parfois appelé un clunk : un accusé de réception clair pour assurer aux utilisateurs que vous avez remarqué l'interaction.
- Dans le monde physique dans lequel vivent les utilisateurs, les interactions fournissent des commentaires (fermer une porte, appuyer sur un bouton, soulever une fourche) et, sans commentaires, les utilisateurs se sentent désorientés.
- Une fois que vous comprenez cela, alors les animations peuvent être conçues correctement pour une intention comportementale, résultant en des micro-interactions plus naturelles.
- Par exemple, un bouton peut se mettre en surbrillance ou augmenter (en utilisant des ombres portées) en survol, pour fournir aux utilisateurs des informations indiquant que le bouton est, en fait, cliquable.
- Un bouton peut clignoter, onduler ou enfoncer lorsque l'utilisateur clique pour fournir une rétroaction "clunk".
- Dans tous les cas, la rétroaction animée doit être conçue pour obtenir la rétroaction souhaitée, et non pour attirer l'attention.
- Ainsi, un bouton clignotant au clic est plus susceptible de sembler étrange à un utilisateur qu'une simple ondulation ou une dépression.
Dans cet esprit, il y a plusieurs raisons pour lesquelles votre étude peut avoir conduit à des résultats incorrects:
- Dans le panneau que vous avez utilisé, vous avez plusieurs boutons de couleurs différentes avec différentes interactions dans le même panneau. Comme il n'y a pas de cohérence des interactions entre les boutons, les utilisateurs sont susceptibles de se sentir désorientés en raison de l'imprévisibilité. Donc toute animation serait bizarre.
- Si vos animations ont été conçues sans intention de communication pour fournir des commentaires clunk naturels, il n'est pas surprenant qu'elles ne semblent pas naturelles pour les utilisateurs.
Google Material Design a une belle explication de la façon dont l'animation des boutons est utilisée pour communiquer avec les utilisateurs.
Certains boutons de démo Material Design avec de bonnes animations clunk sont ici .
Il est très peu probable qu'il existe des études accessibles au public sur le lien entre les boutons animés et les conversions. Mais il existe de nombreuses études sur le contrôle des micro-interactions, et avec une bonne compréhension de la finalité des animations, il devrait être beaucoup plus facile de comprendre pourquoi des entreprises comme Google (qui effectuent des tests utilisateur approfondis) ont choisi d'utiliser des animations naturelles pour les boutons.