Comment gérer les info-bulles lors du déplacement d'un contrôle / objet?
Mon entreprise construit une carte en ligne qui affiche les objets en mouvement (véhicules) et les objets statiques (arrêts de bus).
Lorsque l'utilisateur survole un élément, une info-bulle contenant des informations supplémentaires sur tous les objets sous le curseur apparaît.
Comme les véhicules se déplacent, les objets situés sous le curseur peuvent changer dynamiquement. Le problème UX à résoudre est le suivant: comment l'infobulle devrait-elle réagir?
- Changez avec l'ensemble d'objets sous le pointeur de la souris. Problème de convivialité: Les utilisateurs pourraient ne pas avoir le temps de lire toutes les informations qui les intéressent avant qu'elles ne disparaissent.
- Ne modifiez pas l'info-bulle tant que la souris n'est pas déplacée. Problème de convivialité: L'info-bulle peut devenir incohérente par rapport au survol réel de la souris.
- Utilisez un délai d'expiration pendant lequel l'info-bulle est stable. Problème de convivialité: Les délais d'attente sont toujours inappropriés pour certains utilisateurs/cas d'utilisation.
Un problème supplémentaire est que les données sous-jacentes affichées dans l'info-bulle peuvent également changer dynamiquement. L'écart (retard par rapport à l'horaire) d'un bus peut changer, il peut terminer son trajet en cours et en commencer un nouveau, etc. Compte tenu des options 2 et 3, si l'info-bulle doit maintenir ces valeurs à jour ou simplement afficher l'instantané à partir du moment où la souris a initialement déclenché l'info-bulle?
Mon intuition est d'aller avec l'option 3 avec des données de mise à jour dynamiques dans l'info-bulle, mais je n'ai trouvé aucune preuve réelle de la recherche ou même des preuves anecdotiques pour aller dans un sens ou dans l'autre.
Modifier: De nombreuses réponses suggèrent que nous devrions supprimer les info-bulles en faveur d'une fenêtre de propriétés qui affiche des informations pour un véhicule sur lequel l'utilisateur a cliqué/sélectionné.
Nous pouvons déjà le faire dans notre interface utilisateur, mais à mon avis, ce n'est pas un substitut approprié pour une info-bulle. Le clic n'est pas aussi facile que le survol et aussi, il porte une intention différente (c'est-à-dire que l'utilisateur veut utiliser l'objet sélectionné d'une manière ou d'une autre), où le survol est plus "juste regarder, ne pas toucher" et moins impliqué.
Voici à quoi ressemble la sélection d'un véhicule dans notre interface utilisateur:
Cependant, si de nombreux objets se chevauchent au point de clic, l'utilisateur doit cliquer une deuxième fois pour résoudre le chevauchement et choisir le véhicule qui l'intéresse.
Cela ne me dérange pas un ou deux clics pour sélectionner le véhicule exact si l'utilisateur commence à exécuter une séquence de commandes en utilisant ce véhicule. Cependant, une info-bulle bien conçue nous permet d'avoir une interaction légère pour simplement regarder les informations très facilement.
J'espère que cela met les choses en contexte et motive pourquoi nous voudrions vraiment une interaction de vol stationnaire utilisable.
Problème intéressant.
Puisque vous utilisez une info-bulle, je suppose qu'il n'est pas nécessaire d'avoir plusieurs info-bulles visibles simultanément. Si cela est nécessaire, une info-bulle n'est pas la bonne commande.
Donc, mes réponses se concentrent sur le fait de ne pas avoir besoin de plusieurs info-bulles à la fois.
Je me demandais: pourquoi un utilisateur voudrait-il voir ce popup? Probablement parce qu'il est intéressé par des informations plus détaillées sur l'objet. Il/elle veut "inspecter" l'objet.
Alors que diriez-vous de ne plus déplacer l'objet une fois que l'utilisateur survole? Au lieu de cela, déplacez la carte sous l'objet. Une fois que l'utilisateur survole l'objet, revenez au comportement d'origine.
Quelques changements à ma réponse à la lumière des clarifications du PO; ils aimeraient qu'une info-bulle légère donne des informations en un coup d'œil et cette info-bulle resterait sur le curseur.
L'info-bulle affiche deux types d'informations.
- Ensemble d'objets
- Quelques données supplémentaires par rapport à un objet
Par définition, les objets statiques ne se déplaceront pas, donc afficher l'ensemble d'objets statiques sous le curseur n'est pas un problème.
Les objets en mouvement posent l'un des problèmes de l'OP, qui est qu'un objet en mouvement pourrait s'éloigner sous le curseur pendant que l'utilisateur regarde ses informations. C'est le premier problème
L'autre problème auquel l'OP est confronté est les données supplémentaires associées aux objets, qu'ils soient statiques ou en mouvement. Bien que dans les captures d'écran, l'OP n'affiche pas de données supplémentaires à côté des objets statiques, le problème et la solution des données supplémentaires sont les mêmes quelle que soit la mobilité de l'objet. C'est le deuxième problème
Objets se déplaçant sous le curseur
Je propose que lorsque vous survolez des objets, tous les objets sous le curseur soient mis en surbrillance et/ou que leur taille d'icône soit légèrement augmentée pour lier visuellement les données à afficher dans l'info-bulle avec les objets sur la carte. Si un objet en mouvement se déplace sous le curseur, ne mettez pas en surbrillance/ne modifiez pas la taille de l'icône et ne supprimez pas sa ligne de l'infobulle.
Considération: objets se déplaçant sous le curseur
Vous pouvez envisager d'ajouter un objet en mouvement à l'infobulle (et de le mettre en surbrillance) s'il se trouve sous le curseur. Bien que cela puisse potentiellement conduire à une info-bulle vraiment énorme si l'utilisateur laisse son curseur sur un emplacement occupé pendant longtemps.
Bien que ce ne soit peut-être pas un cas d'utilisation normal, nous devrions probablement y faire face. Nous pouvons définir une limite d'objets et commencer à supprimer les objets qui ne sont plus sous le curseur.
Mise à jour des données d'objets supplémentaires
Dans la capture d'écran de l'OP, les objets en mouvement ont des données supplémentaires qui sont assez importantes. Voir des informations obsolètes en gardant ces données statiques nuira à l'utilisateur. Ces données doivent donc être mises à jour à intervalles réguliers, disons cinq secondes.
Cette solution garantit qu'un utilisateur ne brouille pas après un objet en mouvement en gardant intacte la ligne de l'objet en mouvement dans l'info-bulle tant que le curseur n'a pas été déplacé. De plus, il s'assure que les données que l'utilisateur voit ne sont pas obsolètes.
Les deux premières options sont intenables
La première option implémente un temps de lecture minimal pour l'utilisateur, sur lequel vous n'avez aucun contrôle. Pire encore, il aurait besoin de déplacer le curseur pour afficher correctement les données. La deuxième option est mauvaise en raison de l'incohérence. De plus, l'événement mousemove déclenche trop souvent.
Problème de conception et solution
Je pense que c'est déjà un problème de conception pour afficher ces informations en survol. Tous vos problèmes pourraient être résolus en utilisant un click event et un fixed position pour l'info-bulle. Cependant, si vous voulez vraiment vous en tenir à cette logique, vous devez utiliser la troisième option. De plus, je proposerais une version modifiée de votre troisième solution.
- Affichez l'infobulle à une position fixe (coin supérieur gauche ou supérieur droit) et modifiez la visibilité si une autre info-bulle est ouverte ou si l'infobulle est fermée manuellement.
- Affichez l'info-bulle sur la position de la souris (fixe) et lancez un effet de fondu sur la souris. L'info-bulle peut toujours être à côté de l'icône et la zone de survol couvre également l'icône. De cette façon, l'utilisateur peut toujours contrôler la durée pendant laquelle il souhaite lire l'info-bulle. Donnez toujours la possibilité de le fermer manuellement.
Notez que le problème de l'option 2 est ce qui se passe si vous survolez plusieurs objets dans un court laps de temps, et probablement le même objet plusieurs fois.
Si vous avez plusieurs objets survolés en même temps (je suggère toujours de limiter le nombre d'une manière ou d'une autre), vous pouvez mettre en surbrillance ceux sélectionnés et afficher plusieurs info-bulles avec une référence (par exemple, la même couleur).
Je comprends parfaitement votre dilemme. Malgré les défis UX, les informations sur le survol sont une interface utilisateur intuitive, attendue et pratique pour l'utilisateur. Tant qu'il ne casse pas ;-)
Utilisez un léger délai avant de déclencher l'info (200-300 ms). Si les choses évoluent si rapidement que cela n'est pas possible, la boîte de pointage ne l'est pas non plus. Une fois activée, la zone de survol doit rester visible jusqu'à
- L'utilisateur déplace le curseur à une distance donnée de l'info ou de l'objet. Un curseur immobile ne devrait pas déclencher cela.
- L'objet passe hors de vue (donc la connexion ne peut pas être raisonnablement maintenue).
L'information mérite probablement d'être lue, vous ne voulez donc pas qu'elle bouge, ce qui nous amène à la question de la déconnexion de l'objet de préoccupation. Pour cela, vous pouvez utiliser un simple connecteur, comme illustré ci-dessous. L'objet se déplace comme il le souhaite, les informations restent dans leur position initiale et le connecteur maintient la relation en vie.
Une info-bulle statique qui a une flèche ou une ligne dynamique (ou une autre forme d'indication) la reliant à l'objet auquel elle se rapporte. L'infobulle reste en place mais au fur et à mesure que l'objet se déplace, l'indication se déplace avec lui de sorte qu'il reste toujours lié à l'infobulle.
Cependant, cela nécessiterait que l'info-bulle reste active lorsque le curseur n'est plus sur l'objet pour éviter à l'utilisateur de le suivre avec le curseur. Sinon, le déclencheur d'une info-bulle pourrait être un clic plutôt qu'un survol.
Si les info-bulles posent problème, pourquoi ne pas les utiliser?
Les info-bulles sont utiles lorsque vous affichez de petits textes d'informations contextuellement à côté de l'objet qui vous intéresse. Dans votre cas, les informations à afficher sont assez importantes et il est également important d'afficher les mises à jour des éléments sur la carte ci-dessous. Nous devrions donc envisager d'autres façons d'afficher les informations ...
Un volet d'informations peut être une meilleure solution
Mettez en surbrillance l'élément sélectionné, puis ouvrez un volet de détails sur le côté.
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Remarques: Cela suppose que vous avez affaire à une interface avec un espace d'écran suffisamment grand pour afficher à la fois la carte et les détails. Mais si vous êtes sur un appareil mobile, l'idée d'infobulle ne fonctionnerait pas très bien de toute façon.
Une idée pourrait être de verrouiller la position du bus et de déplacer la carte autour du bus lors du survol du point de bus. De cette façon, la position de l'infobulle peut être statique.
IMO ce n'est pas une info-bulle mais un panneau de propriétés flottant, car il n'est pas destiné à un coup d'œil rapide sur une seule info mais à présenter à l'utilisateur un ensemble de données connexes.
Ce n'est pas faux, c'est seulement différent. Je trouve qu'il est utile de caractériser les problèmes avant de les attaquer.
J'afficherais les données mises à jour dans une position fixe et lierais le bus en mouvement au volet fixe avec un connecteur mis à jour de manière dynamique.