web-dev-qa-db-fra.com

Modification d'un objet visuel lors de son déplacement

Imaginez que vous ayez une interface avec deux volets principaux: une carte et une chronologie. Nous voulons permettre à notre utilisateur de pouvoir sélectionner un travail affiché sur la carte (par exemple, "réparer la machine à laver à un endroit") et le faire glisser vers la chronologie, le transformant ainsi en événement ("faire réparer à un moment donné" ") dont la durée peut être représentée par un rectangle.

Parce que l'opération de glissement en effet "convertit" un objet visuel en un autre au fur et à mesure, je pense que l'utilisateur pourrait être dérouté par la transition.

Bien sûr, je prévois d'exécuter des tests utilisateur, mais je voulais juste demander si d'autres considèrent cela comme une préoccupation légitime et, si oui, si quelqu'un peut me diriger vers de bonnes solutions à ce problème?

3
Phil Parry

Je voudrais:

Lorsque l'élément est glissé, définissez la transparence sur X%:

Transparence de glissement de Windows 7

Windows 7 Dragging transparency

Mettez en surbrillance la zone "largable" jusqu'à ce que la souris entre

GMail Drag Drop Target GMail Drag Drop Target

Une fois que la souris entre, convertissez l'objet déplacé en son aspect final (par exemple, un rectangle) et maintenez la transparence. De plus, lorsque la souris entre dans la zone de largage, supprimez la surbrillance et affichez la position/les détails finaux de l'objet créé si la souris est relâchée.

2
bendataclear

La transition d'une forme à une autre peut être effectuée par étapes pour atténuer la confusion. Vous avez 2 formes, une forme initiale et une forme de destination. Lorsque le glissement commence, étape 1, la forme est la forme initiale. À un moment donné (lorsque la traînée entre dans une région importante), la forme devient une combinaison de superposition de la forme initiale et de la forme de destination (étape 2). Lors de la chute, la forme initiale s'estompe, ne laissant que la forme de destination (étape 3).

Espérons que cette transition en 3 étapes indiquera à l'utilisateur la transformation conceptuelle qui se produit.

2
obelia