web-dev-qa-db-fra.com

Conception d'interaction pour copier des sous-arbres

Supposons que nous ayons deux arbres de données A et B visualisés dans l'interface utilisateur le long de ces lignes:

enter image description here

L'utilisateur souhaite copier les nœuds de sous-arborescence mis en évidence de A vers B. Les deux arborescences ont des nœuds partagés comme indiqué par les identifiants.

Comment concevriez-vous l'interaction pour ce scénario? Une approche possible serait de placer des cases à cocher à côté des nœuds non partagés et un bouton "exécuter"/"copier" entre les deux arborescences, mais est-ce la meilleure solution lors de la désactivation du drag'n'drop?

Avez-vous des idées de designs alternatifs?

6
agib

Il est naturel que les arbres vous permettent de glisser-déposer vers réorganiser nœuds; cependant, vous semblez vouloir garder la hiérarchie et juste fusionner les résultats ...

Par conséquent, il peut être utile pour l'application d'identifier simplement les différences, puis d'autoriser l'utilisateur à sélectionner/valider chaque modification (insérer, mettre à jour ou supprimer).

1
Nescio

À moins que je manque une contrainte, j'utiliserais le glisser-déposer.

1
Hisham

Une syntaxe d'action de sélection d'objet comme vous le suggérez est une approche GUI standard courante qui est utile à utiliser si vous l'étendez à des commandes autres que la copie (par exemple, suppression, déplacement, propriétés). Cela en fait une interface utilisateur simple, cohérente et puissante. Cependant, je ne suis pas sûr de recommander des cases à cocher pour la sélection. En supposant que les utilisateurs ne copient généralement qu'un seul nœud de niveau supérieur à la fois, j'imiterais le comportement des gestionnaires de fichiers comme l'Explorateur Windows et utiliserais des icônes qui sont sélectionnées par défaut, mais prennent en charge la sélection multiple via metakeys (Shift et Ctrl) et glisser-sélection. La sélection d'un nœud doit mettre en évidence ce nœud et tous ses sous-nœuds pour aider à clarifier ce que l'utilisateur sélectionne. OTOH, les cases à cocher peuvent être préférées si les utilisateurs généralement doivent copier plusieurs nœuds non associés, surtout si vous ne pouvez pas être sûr qu'ils connaissent les méthodes de sélection multiple standard.

L'alternative à la syntaxe de sélection d'objet-action est l'approche de contrôle dédié à l'objet où vous incluez un petit contrôle de copie pour chaque nœud. Un clic et c'est copié. Cela peut être préférable si la copie est la seule chose que l'utilisateur peut faire avec les nœuds. En revanche, avoir des contrôles séparés Copier, Déplacer, Supprimer, Propriétés, etc. pour chaque nœud serait probablement trop encombrant. Si vous optez pour un contrôle dédié aux objets, vous pouvez présenter un contrôle de copie uniquement pour les nœuds de A qui ont des nœuds partagés de B, fournissant une indication claire sur ce qui peut être copié.

Dans votre exemple, il semble que votre fonction de copie se limite à la copie vers des nœuds partagés entre les arborescences. Est-ce vraiment tout ce qui peut être autorisé? N'y a-t-il pas toujours plus d'un arbre de destination? Si c'est le cas, votre seul bouton Copier est probablement le meilleur, et vous avez raison de rester à l'écart du glisser-déposer. Le glisser-déposer est peu détectable et plus difficile à faire que de simplement cliquer sur un bouton Copier. Le glisser-déposer peut également inciter les utilisateurs à penser qu'ils peuvent effectuer une copie arbitraire (par exemple, mettre Node 4 dans l'arborescence A sous Node 18 dans l'arborescence B, ou même déplacer nœuds autour à l'intérieur Arbre B).

Si, toutefois, il est possible et avantageux de prendre en charge la copie arbitraire, envisagez d’avoir deux boutons pour utiliser l’idiome Copier et Coller (ajoutez un troisième bouton Couper pour prendre en charge le déplacement). Si vous prenez en charge la copie arbitraire, il vaut la peine d'envisager également le glisser-déposer en tant que raccourci expert vers Copier et Coller.

1
Michael Zuschlag