web-dev-qa-db-fra.com

Combien de temps doit s'écouler le délai avant qu'une info-bulle n'apparaisse?

Je travaille sur un site Web dans lequel un sous-menu "ruban" apparaît dès que la souris touche l'un des éléments du menu principal. J'essaie d'expliquer au concepteur qu'il doit attendre que le curseur se soit posé sur l'élément de menu, et ne pas apparaître lorsque la souris passe juste dessus. Je ne sais pas combien de temps (en millisecondes) cette attente devrait être.

Je ne peux pas créer de lien vers le site Web en question, mais je pense que le même principe s'applique aux info-bulles standard. Combien de temps faut-il pour qu'une info-bulle s'affiche?

21
Patrick McElhaney

Si quelqu'un cherche toujours des réponses à jour sur ce sujet, Nielsen Norman a un excellent article sur le sujet: https://www.nngroup.com/articles/timing-exposing-content/

  1. Le curseur de la souris entre dans la zone cible: affiche un retour visuel dans les 0,1 secondes.
  2. Attendez 0,3 à 0,5 seconde.
  3. Si le curseur reste arrêté dans la zone cible, affichez le contenu masqué correspondant dans les 0,1 secondes.
  4. Continuez à afficher l'élément de contenu exposé jusqu'à ce que le curseur ait quitté la zone cible de déclenchement ou le contenu exposé pendant plus de 0,5 seconde.

La pause de 300 à 500 millisecondes est destinée à garantir que l'intention de l'utilisateur est de voir ce qui se cache derrière le menu ou l'infobulle et non de passer à autre chose.

13
bentheben

Je n'ai trouvé aucune convention à ce sujet, mais j'ai trouvé quelques bibliothèques où l'info-bulle semble être définie sur une valeur par défaut de 500 ms , qui semble tout à fait raisonnable.

Quoi qu'il en soit, je pense que vous devriez partir de là et l'ajuster jusqu'à ce que ça vous semble bien. Vous pouvez l'essayer avec quelques utilisateurs et évaluer leurs commentaires.

http://msdn.Microsoft.com/en-us/library/ms531435%28VS.85%29.aspx

http://www.jinsight.com/jetchart/api/com/jinsight/jetchart/ToolTip.html

https://www.Adobe.com/livedocs/flex/201/html/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Book_Parts&file=tooltips_074_10.html

13
Nacho

SI vous fondez lentement l'infobulle, vous pouvez commencer dès que la souris repose sur le point chaud. N'oubliez pas d'annuler l'animation lorsque la souris se déplace de cette façon si la souris ne glisse qu'une seconde, l'info-bulle ne s'affichera pas et si l'utilisateur s'arrête mais continue, vous n'avez pas d'infobulle affichée sur le mauvais partie de la page.

5
Sruly

Cela dépend vraiment à quoi servent vos info-bulles.

Nous avons beaucoup de commandes et de boutons dans la barre d'outils qui utilisent simplement Material Icon Icon set sans texte. La plupart d'entre elles sont explicites, mais nous avons ajouté des info-bulles avec des descriptions qui affichent également les raccourcis clavier lorsqu'ils sont disponibles.

Lorsque nous n'avons eu aucun retard, c'était très ennuyeux pour les utilisateurs qui avaient appris le logiciel et n'avaient plus besoin des info-bulles. Déplacer la souris sur quelques boutons afficherait immédiatement les info-bulles.

Nous avons opté pour un délai d'une seconde car il est suffisamment lent pour ne pas apparaître en utilisation normale et lorsque vous voulez voir ce que le bouton attend, attendez un peu.

4
Tim

Si la décision d'utiliser une info-bulle est bien pensée et que l'info-bulle est utile et importante. Ne mettez pas de retard dessus.

Un retard peut ajouter de la confusion, vous ne voulez pas que l'utilisateur pose la même question que vous posez ici car il utilise votre site ou votre application.

Si vous pensez que les informations de l'info-bulle ne sont pas obligatoires mais peuvent aider un utilisateur s'il est bloqué, utilisez une petite icône de point d'interrogation et laissez-le cliquer dessus s'il a besoin de plus d'informations.

2
Jason

Il y a bien sûr toujours une option pour le rendre basé sur les clics. Je pense que cela fonctionnerait mieux et rendrait l'application universellement utilisable (mobiles et tablettes).

Il y a aussi un projet en JavaScript que vous pourriez vous inspirer dans ce domaine, le projet hoverIntent

http://cherne.net/brian/resources/jquery.hoverIntent.html

HTH

2
mare

Pour ajouter à la réponse de @Nacho, j'ai cité une raison pour laquelle les délais très courts ou l'apparence instantanée devraient être évités pour les info-bulles:

Les info-bulles, les annonces expand et les incitations à l'action ou les zones d'informations qui apparaissent sur les éléments de la liste (comme les zones de vue rapide sur les miniatures des pages de liste de produits) sont d'autres exemples d'éléments communs avec des interactions de survol qui peuvent s'avérer ennuyeux pour les utilisateurs s'ils sont également déclenchés. avec sensibilité.

Une réponse instantanée n'est pas souhaitable pour ce qui devrait être des informations facultatives, si une info-bulle est considérée comme le contexte d'affichage approprié. L'article fournit également des directives de synchronisation:

l'intention de l'utilisateur d'exposer tout contenu caché correspondant peut être supposée soit immédiatement après un clic ou un toucher, soit après que le curseur de la souris ait interrompu le mouvement et est resté dans la zone cible pendant environ 0,3 à 0,5 seconde, moment auquel le contenu caché peut être animé en toute sécurité la page

Source: NNGroup

1
Remy