web-dev-qa-db-ja.com

サブツリーをコピーするための相互作用設計

これらの線に沿って、UIで2つのデータツリーAとBを視覚化するとします。

enter image description here

ユーザーは、強調表示されたサブツリーノードをAからBにコピーしたいと考えています。2つのツリーには、IDで示されているようにいくつかの共有ノードがあります。

このシナリオの相互作用をどのように設計しますか? 1つの可能なアプローチは、非共有ノードの隣にチェックボックスを配置し、2つのツリーの間に「実行」/「コピー」ボタンを配置することですが、これはドラッグアンドドロップでオプトアウトする場合の最良の解決策ですか?

代替案のアイデアはありますか?

6
agib

ツリーがrearrangeノードにドラッグアンドドロップできるのは自然なことです。ただし、階層を保持したいようですmerge結果...

したがって、アプリケーションが違いを識別し、ユーザーが各変更(挿入、更新、または削除)を選択/コミットできるようにすると役立つ場合があります。

1
Nescio

いくつかの制約を見逃していない限り、ドラッグアンドドロップを使用します。

1
Hisham

提案するようなオブジェクト選択アクション構文は、コピー以外のコマンド(削除、移動、プロパティなど)に拡張する場合に使用するとよい一般的な標準GUIアプローチです。これにより、シンプルで一貫性がありながら強力なUIが実現します。ただし、チェックボックスを選択することをお勧めするかどうかはわかりません。ユーザーが通常一度に1つの上位レベルのノードのみをコピーすると仮定すると、Windowsエクスプローラーなどのファイルマネージャーでの動作を模倣し、デフォルトで単一選択されているアイコンを使用しますが、メタキー(ShiftおよびCtrl)による複数選択をサポートします。ドラッグ選択。ノードを選択すると、そのノードとそのすべてのサブノードが強調表示され、ユーザーが何を選択しているかが明確になります。 OTOH、ユーザーが通常に複数の関連付けられていないノードをコピーする必要がある場合、特に標準のマルチに精通していることが確実でない場合は、チェックボックスが優先されることがあります。選択方法。

オブジェクト選択アクション構文の代わりに、各ノードに小さなコピーコントロールを含めるオブジェクト専用コントロールアプローチがあります。ワンクリックでコピーされます。これは、ユーザーがノードで実行できる唯一のことである場合に適しています。対照的に、ノードごとに個別のコピー、移動、削除、プロパティなどのコントロールがあると、混乱を招く可能性があります。 object-dedicated-controlを使用する場合は、Bに共有ノードがあるAのノードにのみコピーコントロールを提示して、何をコピーできるかを明確に示すことができます。

あなたの例では、コピー機能がツリー間の共有ノードへのコピーに制限されているようです。それは実際に許可できるすべてですか?宛先ツリーは常に1つしかありませんか?その場合は、おそらく1つの[コピー]ボタンが最適であり、ドラッグアンドドロップは避けてください。ドラッグアンドドロップは発見しにくく、単に[コピー]ボタンをクリックするよりも困難です。ドラッグアンドドロップは、ユーザーに任意のコピーを実行できると思わせる場合もあります(たとえば、Node 4をツリーAの下にNode 18をツリーBに配置するか、 withinの周りのノードB)。

ただし、任意のコピーをサポートすることが可能で有利な場合は、2つのボタンを使用してコピーと貼り付けのイディオムを使用することを検討してください(3番目のカットボタンを追加して移動をサポートします)。任意のコピーをサポートしている場合は、コピーと貼り付けのエキスパートショートカットとしてドラッグアンドドロップも検討する価値があります。

1