Comment expliquer aux utilisateurs sur lesquels ils peuvent cliquer
Je suis conscient qu'il existe de nombreux plugins et scripts riches en info-bulles flottant sur github, etc., mais j'ai décidé de créer les miens pour des raisons éducatives. Je suis assez satisfait de la position actuelle du code et j'ai invité certains utilisateurs à l'essayer.
Les info-bulles suivront le curseur à moins que l'utilisateur ne clique pour "verrouiller" l'infobulle là où elle se trouve, permettant au curseur d'interagir ensuite avec le contenu de l'infobulle, que ce soit un lien ou une image avec une fonction de zoom, ou autre chose.
J'ai constaté qu'une majorité d'utilisateurs l'ont trouvée facile à utiliser et à comprendre, et ont en effet apprécié d'utiliser ces info-bulles. Cependant, dans plus de la moitié des cas, l'utilisateur n'a pas déterminé qu'il peut cliquer pour verrouiller l'info-bulle sans être informé.
Comment puis-je rendre plus évident sans explication que l'info-bulle verrouillera la position une fois que l'utilisateur aura cliqué?
J'ai envisagé de changer le curseur, mais cela n'aurait pas de sens car le curseur par défaut se rapporte généralement à être sur quelque chose cliquable, et l'utilisateur peut passer le curseur sur autre chose sur le parent qui nécessite un curseur différent.
J'ai également pensé à un très petit texte "cliquez pour verrouiller" sur l'infobulle elle-même, mais le principal problème qui me paraît évident est que pour être suffisamment petit pour ne pas envahir et submerger l'info-bulle elle-même, le texte devrait être très petit au point d'être probablement illisible. En second lieu, je ne peux penser à aucun libellé qui puisse convenablement indiquer que ce n'est pas l'info-bulle elle-même qui doit être cliquée, ce qui serait impossible car elle suit le curseur! Je ne veux plus dérouter les gens.
Il y a un exemple de travail de ceci si vous voulez le voir en action par vous-même ici http://fbvm.co.uk/tooltip
Le code est également sur codereview.SE ici https://codereview.stackexchange.com/questions/159017/javascript-jquery-tooltip-management/15902
Je sais qu'il s'agit d'un affichage croisé limite, mais je pense que les questions sont suffisamment différentes. Si vous n'êtes pas d'accord, veuillez m'aider à améliorer ou à modifier cette question.
Ceci est délicat car vous créez un décalage entre ce à quoi les utilisateurs sont généralement habitués et ce qu'ils obtiennent avec votre prototype.
Les fenêtres contextuelles standard sont historiquement des éléments extrêmement "tactiles" en termes d'interaction. Ils vont et viennent par eux-mêmes, un à la fois, généralement avec un retard et un fondu soigneusement réglés et dynamiques, parsemant le contenu des utilisateurs avec un peu d'informations contextuelles supplémentaires qui peuvent être utiles ou non. Dans le modèle mental des utilisateurs, ils existent généralement sur leur propre "couche", totalement séparée du contenu ou d'une autre interface utilisateur. Ils sont très faciles à ignorer, ce qui leur confère un "profil mental" très faible en ce qui concerne la façon dont un utilisateur doit être conscient d'eux. Et une grande partie de cela est parce que, à de très rares exceptions près, ils ne nécessitent ni même invitent à cliquer.
Vous créez essentiellement un élément hybride: il ressemble à une fenêtre contextuelle de style ballon, mais il fonctionne comme un ensemble d'éléments déroulants/dépliants sur lesquels vous cliquez pour développer/réduire individuellement. Cela va être un défi parce que vous nagez à contre-courant de l'expérience quotidienne actuelle et demandez à vos utilisateurs de faire de même.
De plus, votre conception actuelle nécessite une ouverture et une fermeture manuelle de chacun, ce qui est un peu lourd pour une info-bulle. Lorsque plusieurs bulles sont ouvertes en même temps, elles se chevauchent et, peut-être de manière plus critique, commencent à masquer les informations primaires sous-jacentes sur lesquelles elles "apparaissent". J'ai trouvé que ces problèmes doivent être résolus et résolus afin de faire un pop-up personnalisé dans une solution réalisable et évolutive.
De manière générale, l'ajout de la possibilité d'interaction là où se trouvent les utilisateurs (au lieu de les y faire accéder) est une bonne approche pour résoudre les problèmes d'interface utilisateur. Et les pop-ups, en raison de leur apparence près de la position existante du curseur, quel que soit le lieu de l'invocation, offrent beaucoup de potentiel pour le faire.
De plus, l'une des bonnes choses à propos du déplacement de l'interaction dans les fenêtres pop-up est qu'elles peuvent permettre moins de modalité dans vos interfaces. C'est à dire. avec les pop-ups, un utilisateur n'a pas à faire autant pour ouvrir/fermer + déplacer manuellement l'interface utilisateur tout le temps. Il est invoqué, il apparaît, traite avec l'utilisateur et disparaît. Bing Bang Boom. Ils sont parfaits pour les transactions d'entrée et de sortie rapides ... Plus c'est automatique, mieux c'est.
De plus, je ne veux certainement pas vous décourager de créer des éléments d'interface utilisateur qui fonctionnent de manière novatrice (l'innovation est bonne! Et nécessaire!) Mais d'après mon expérience, vous devez faire attention à la façon dont vous la présentez. S'il fonctionne différemment de ce que les gens savent déjà, il devra très souvent (mais pas toujours!) Être différent de ce qu'ils savent déjà.
Je suis d'accord que votre problème n'est probablement pas mieux résolu avec un texte explicatif.
Je pense que vous devez vraiment vous demander si ce que vous voulez est une info-bulle d'information ou plus d'une boîte de dialogue contextuelle complexe. Si c'est une info-bulle, je la garderais conventionnelle. Peut-être que dans votre cas, un élément de style panneau extensible plus conventionnel serait mieux? Si vous êtes déterminé à avoir plusieurs ouvertures simultanées avec une adhérence manuelle complète, peut-être que les faire ressembler davantage à ces éléments est l'endroit où vous souhaitez explorer? Je pense que cela dépend peut-être beaucoup de ce que vous prévoyez d'ajouter en termes de complexité au-delà d'un simple lien hypertexte.
Si vous êtes réglé sur le pop-up et les avantages qu'ils offrent, vous pourriez peut-être essayer l'animation comme signal à vos utilisateurs: "Hé, ce truc est un peu différent de ce que vous avez utilisé auparavant!" Cela peut être un changement de mouvement ou de transparence ou de couleur, etc. Ou peut-être des combinaisons de ce qui précède?
Ou une autre approche peut être de faire des "promotions par étapes". C'est à dire. Un utilisateur survole ou sélectionne une chose, il obtient une info-bulle fixe de son curseur, et s'il survole ensuite le dessus de l'outil, son cadre passe d'une bulle à un rectangle avec une petite icône en forme de punaise pour indiquer l'adhérence. Si cette icône est cliquée, la bulle devient collante. Sinon, la bulle reste une info-bulle et si la souris avance sans cliquer, elle disparaît d'elle-même. Cela sépare également les interactions de la souris avec le pop-up de celles avec le widget sous-jacent, ce qui permet au widget de continuer à accepter les clics pour lui-même. C'est inévitablement quelque chose que vous devrez prévoir lorsque vous déploierez un élément comme celui-ci plus complètement.
Un exemple intéressant à considérer est la "barre d'outils de contexte de décoloration" dans Microsoft Office. Lorsque vous sélectionnez quelque chose, une icône décolorée apparaît près du curseur. C'est généralement discret, mais lorsque vous vous en approchez, il commence à apparaître/disparaître avec la distance. Lorsque vous passez la souris dessus, il apparaît avec des options contextuelles, qui dans ce cas sont une mini barre d'outils et un menu. Les utilisateurs peuvent ajuster les choses directement. Il disparaît de lui-même si l'utilisateur s'éloigne ou interagit avec lui, puis passe à autre chose. Ils ont réussi à fourrer une tonne de choses là-dedans, toutes très, très proches du curseur à tout moment. Mais vous remarquerez que la façon dont il apparaît et disparaît en fondu est très soigneusement réglée. Il y a plus de complexité d'état que ce qui est apparent à la surface. Mais cela fonctionne, je pense, car il est toujours rapide et automatique, et semble juste assez différent (et juste le même) pour ne pas confondre les attentes. De plus, aucun clic supplémentaire pour le gérer, ce qui est toujours très, très bienvenu dans les systèmes HCI.
Quoi qu'il en soit, cela devient verbeux. J'ai trouvé que la conception avec des pop-ups était extrêmement difficile mais aussi très enrichissante. J'espère que certaines de ces informations peuvent être informatives si elles ne sont pas utiles. À votre santé!