Éléments clignotants, rebondissants et clignotants
Je suis responsable de l'interface utilisateur/UX dans une entreprise de développement de logiciels.
Pendant mon absence, certains développeurs ont décidé de mettre en œuvre un effet de "rebond" sur un bouton d'un site Web qui, selon eux, devrait avoir plus de visibilité.
Fondamentalement, vous verrez ce bouton sauter toutes les 10 secondes, attirant votre attention. Le bouton pointe vers le contenu d'aide du logiciel.
Je suis généralement contre les animations intrusives et ennuyeuses, mais j'aimerais en savoir plus sur ce sujet. Je pense personnellement que cette solution est très intrusive et distrayante.
Comment dois-je gérer les effets de clignotement, de rebond, de rotation et de zoom? Existe-t-il des meilleures pratiques?
Dans mon livre, toutes les animations des éléments de contrôle doivent être déclenchées uniquement par des actions de l'utilisateur. Par exemple, dans des formulaires volumineux ou des flux de travail en plein écran, les animations peuvent être utilisées comme repères visuels supplémentaires pour l'étape suivante une fois que quelque chose est terminé. Si This Than That (ifttt.com) est un bon exemple ici - la page défile automatiquement à l'étape suivante lorsque vous cliquez sur Next .
Les animations aléatoires distraient les utilisateurs de la tâche en cours et cassent leur flux mental . Cela concerne en particulier les éléments qui n'ont aucun effet sur le flux de travail de la tâche en cours (comme le bouton d'aide dans votre exemple).
Comme l'a dit JoJo dans les commentaires, il y a quelque chose de fondamentalement mauvais si vous devez attirer l'attention de vos utilisateurs sur un bouton qui renvoie au système d'aide. Le fait que vous ayez un bouton proéminent - pas seulement un lien - pour aider les pages est une indication des problèmes dans l'expérience utilisateur, et le fait que quelqu'un pense qu'il doit être plus proéminent - trémousser comme un adolescent ayant besoin Ritalin - indique que quelque part, quelque chose est gravement cassé.
En ce qui concerne la question plus large, oui, le mouvement est un capteur d'attention valide - j'ai mis en place un bouton de clignotement, pour attirer l'attention sur celui-ci, dans un cas. Cependant, le problème de la cécité des bannières est crucial ici - la plupart des utilisateurs réguliers du Web supposent qu'un bouton qui bouge est une annonce, et donc ne cliquez pas dessus. Et la même chose s'applique à de nombreuses techniques d'animation "intelligentes" - elles peuvent être très bonnes et appropriées, mais l'utilisateur s'attend à ce qu'elles fassent de la publicité pour quelque chose.
OMI, où un lien valide et approprié pour aider - ou plutôt, des informations supplémentaires pertinentes pour la tâche à accomplir - doit être mis en évidence, en utilisant une couleur ou une taille différente, ou même changer brièvement la couleur est probablement mieux adapté à l'objectif.
Je suis principalement d'accord avec dnbrv, mais je pense qu'il y a peut-être une place pour une animation non déclenchée si la personnalité du produit est "vivante", ou frénétique et incontrôlée. Vous pourriez avoir un bouton de page suivante dans un livre pour enfants animé qui ressemble à de la respiration ou des contractions si cela convient à la scène, par exemple, ou peut-être sur un site pour un jeu télévisé pour enfants impliquant beaucoup de mouvements frénétiques et de distraction. Dans ces cas, il ne peut pas distraire du flux mental, car il ajoute en fait au caractère ambiant du produit. Je ne le mettrais certainement pas sur un bouton d'aide, sauf, sauf peut-être un petit Twitch subtil s'il y a une bonne raison de penser que l'utilisateur pourrait être bloqué et qu'il y a d'autres aspects de l'interface avec personnalité - pas une fois toutes les 10 secondes.
Au moins, arrêtez de rebondir après que l'utilisateur ait cliqué dessus une fois. Il donne aux utilisateurs la possibilité de l'arrêter s'il s'agit d'une distraction pour eux.
Cependant, je ne peux pas imaginer que le contenu de l'aide soit si important que vous auriez besoin que tout le monde clique dessus. S'il y a quelque chose que tout le monde doit lire, pourquoi ne pas le mettre directement sur la page?
Tout dépend. Je peux imaginer un scénario dans lequel un bouton légèrement rebondissant peut être approprié.
Il existe trois mécanismes psychologiques de base qui peuvent aider à attirer l'attention sur un élément spécifique de l'interface utilisateur:
- mouvement soudain
- contraste
- taille
Nous connaissons bien les deux derniers ... pourquoi ne pas utiliser le premier dans certains cas?
Lequel convient à votre cas? C'est une question pour les tests qualitatifs et quantitatifs. Je ne le rejetterais pas sur la base d'hypothèses et de stéréotypes.
juste pour compléter les réponses ci-dessus, les éléments d'interface utilisateur animés peuvent être discrets !, J'écoutais le podcast de Paul Boag sur la façon dont Boagworlds utilise des animations CSS presque imperceptibles et a trouvé le podcast assez intéressant