web-dev-qa-db-fra.com

Info-bulle avec copie dans le presse-papiers

Je voudrais montrer un chemin de la source de données d'un objet (diagramme avec données csv) et donner à l'utilisateur la possibilité de copier le chemin dans le presse-papiers. J'ai fait différentes approches.

Une idée était de savoir si je pouvais utiliser une info-bulle qui montre le chemin. De plus, j'ajouterais un bouton Copier/Copier dans le presse-papiers. Cette approche n'a pas besoin de plus d'éléments différents qu'un plan (illustré par le survol et l'activation) et les interactions. Il a besoin d'un simple survol plus d'un clic pour la copie dans le presse-papiers, mais je ne suis pas sûr que ce soit contre diverses règles d'interface.

Mock with a additional copy button

Voici un bouton à l'intérieur de l'infobulle, mais je ne suis pas sûr de ce qui se passe si l'utilisateur laisse le canevas sensible (diagramme) à utiliser pour le bouton. L'info-bulle est au-dessus du diagramme. Je suppose qu'il a besoin de commentaires techniques et de règles spéciales pour le comportement de l'infobulle. Par exemple. quand l'info-bulle disparaîtra si l'utilisateur se déploie avec la souris.

enter image description here

Ma question est, puis-je mélanger une info-bulle avec un élément d'interaction comme un bouton? Je n'ai jamais vu un tel cas.

1

Bien qu'il ne s'agisse pas techniquement d'une info-bulle, Microsoft Office a inclus des boutons de contexte sur la sélection et le survol pendant un certain temps. Ci-dessous, une capture d'écran de MS Word 2013 avec les actions "pop-up" qui peuvent être prises sur une sélection de texte. Cela apparaît lorsque vous survolez le texte sélectionné.

enter image description here

Si vous deviez implémenter l'action de manière à ce que l'info-bulle ne disparaisse pas lors de la mise au point, vous pouvez conserver votre "info-bulle" active pendant que l'utilisateur navigue et sélectionne dans l'info-bulle.

De même, Eclipse (l'IDE) permet aux utilisateurs de se concentrer sur une zone de type info-bulle qui la convertit en une fenêtre flottante. Cela permet à l'utilisateur d'interagir avec le contenu de l'infobulle.

enter image description here

enter image description here

Ce genre de chose a déjà été fait et fonctionne bien pour UX.

3
mawcsco

Je ne sais pas qui est votre groupe cible et ce que votre application fait exactement, ce qui peut rendre certaines des choses que je dis ci-dessous plus ou moins pertinentes.

D'après mon expérience, les info-bulles peuvent souffrir d'un manque de découverte, en particulier lorsqu'il n'y a pas d'indication visuelle claire dans la conception que vous offrez plus d'informations à l'utilisateur. Je pense que vos deux suggestions souffrent toutes deux d'un manque de découvrabilité. Serait-il possible d'avoir à la place un bouton déclenchant l'action disponible dans une barre d'outils ou à côté du nom du graphique par exemple. Selon l'importance de la fonctionnalité et le niveau de connaissance de vos utilisateurs, je craindrais que les gens ne trouvent jamais comment trouver la fonctionnalité.

De plus, toutes ces actions en vol stationnaire ne sont vraiment bonnes que lorsque vos utilisateurs utilisent une souris pour interagir avec votre produit. vos utilisateurs tactiles hors de l'utilisation de la fonctionnalité (ou du moins ils ne risquent pas de tomber dessus car ils n'auront pas de souris pour se déplacer)

2
Niels

Mettez strictement un "ToolTip" devrait conventionnellement contenir des informations sur l'élément que vous survolez.

Cependant, les menus contextuels et les menus contextuels qui sont activés au survol peuvent certainement contenir des contrôles utilisateur sans rompre les conventions ou les attentes. Pour un exemple de travail, passez simplement la souris sur votre nom d'utilisateur SE.

Il se déclenche de la même manière qu'une info-bulle, mais devrait techniquement être appelé un menu contextuel.

J'irais avec le dernier de vos exemples car cela correspond plus clairement au chemin plutôt qu'au graphique lui-même, sans induire l'utilisateur en erreur en pensant que c'est une image du graphique qui est copiée. Et en ce qui concerne votre souci de garder le menu ouvert après que l'utilisateur quitte l'élément avec le curseur, cela peut être assez facilement réalisé en utilisant JavaScript (en supposant qu'il s'agit d'une application Web).

0
AndroidHustle