ツリー構造の「カットアンドペースト」

Question

3Dモデルを生成するためのビジュアルプログラミング環境を提供するWebアプリに取り組んでいます- Mobius

Mobius

コーディングの行を追加してパラメーターを編集するだけでスクリプトを作成する必要があります。以下の画像のように、コード構造を表すツリーを生成するために angular-tree-component を使用しています

Procedure-Tree

コード行はドラッグ可能ですが、ツリーが大きくなるにつれて、ドラッグアンドドロップが面倒になります。したがって、ユーザーがコード行を選択して切り取り、どこかに貼り付けることができるカットアンドペースト機能を追加することを考えていました。

この機能を実装する最もユーザーフレンドリーな方法は何でしょうか？

Ctrl + X、Ctrl + Vショートカットを追加するのも1つの方法ですが、この機能が以前に存在していなかったことを考えると、それが見つかるかどうかはわかりません。この場合、どのようなマイクロインタラクションを処理する必要がありますか？

キーボードショートカット以外にこれを実装するより良い方法はありますか？各線には、線がフォーカスされているときに表示される一連のボタンがあります。別のボタンを追加するのが良いアイデアかどうかわからない？

Andrew Martin · Answer

キーボードコマンドの問題を修正するには：通常、Microsoftソフトウェアでは、ユーザーは3つの異なる方法で物事を達成できます。キーボードショートカット（既に特定済み）、メニューバーの選択（コマンドの横にキーボードショートカットが表示されることが多い）、および表示されるツールバーボタン（多くの場合、コマンドとそれに対応するキーボードを示すツールチップが表示されます）。

ただし、コードのブロックの再利用について話している場合は、個々のコマンドと同じ方法でコードの本体にドラッグして戻すことができるコードのチャンクをスローできるパレットをユーザーに与えてみませんか。親ブロックをドラッグする場合は、その子もドラッグする必要があるため、ユーザーはネストされたコードのチャンクをパレットにドラッグし、ブロックに名前を付けて、何度でも必要に応じて再び引き出します。

本当に賢いシステムの場合、このブロックが使用された場所を追跡し、パレットの「マスター」ブロックが編集されたときはいつでも、変更が他のすべてのインスタンス（スケッチ記号ライブラリなど）に表示されることを確認できます。

staccato · Answer

IMOの最もユーザーフレンドリーなソリューションは、CTRL + C、CTRL + Vの両方をサポートすることです。これらはほとんどのユーザーにとって最も直感的であり、他のボタンに対しても同様です。

UIのスペースが限られている場合は、あまり使用されないアクションの一部をボタンセットからアクセスできるメニューにまとめることを検討できます。

Ctrl + X、Ctrl + Vショートカットを追加するのも1つの方法ですが、この機能が以前に存在していなかったことを考えると、それが見つかるかどうかはわかりません。この場合、どのようなマイクロインタラクションを処理する必要がありますか？

新しい機能が見つからないことが心配な場合は、製品の新しい機能を強調するウォークスルー/チュートリアルを追加することを検討してください。 Bootstrap Tour および IntroJS は、このための優れたJavaScriptプラグインです。

chrisdwells_ · Answer

行の1つに、プリンター、チェックマーク、ゴミ箱のように見える3つの小さなアイコンが表示されます。それらがその行で実行できるコマンドである場合、それらにカット、コピー、およびペーストコマンドを追加することは可能ですか？あるいはもっと良いことに、それらを右クリックで表示されるコンテキストメニューにバンドルできますか？カーソルを合わせると表示される各行にメニューアイコンを表示することで、コマンドが利用可能であることをユーザーに示す視覚的なアフォーダンスについて心配している場合は、

Luke Smith · Answer

...ユーザーがコード行を選択してカットし、別の場所に貼り付けることができるカットアンドペースト機能を追加することを考えていました。この機能を実装する最もユーザーフレンドリーな方法は何でしょうか？

私が考える質問は、「ユーザーフレンドリー」と見なされるものに影響します。

ユーザーは誰ですか？主な対象読者は、プログラマーやビジュアルデザイナーのようなものですか？彼らは現在、他にどのようなプログラムを開いていますか、そして彼らはそれらを使って何をしていますか？（注：重要なものを1つまたは2つ選択する必要がある場合でも、可能な限りすべてのユーザータイプについて質問しているわけではありません。）
それらは何に使用されていますか？具体的には、これらのコピーアンドペーストまたはコードスニペット操作に関しては？比較の基準として使用されているものに基づいて構築できますか？

例：デザイナーとして、Illustratorでアイテムをドラッグして複製 Option-クリック-その後ドラッグでそれらを作成できることを知っています。 Axure RP7を使い始めたとき、同じ入力コマンドで同じ機能をサポートしていることに気づき、驚きました。

したがって、理論は、同じターゲットユーザーが使い慣れているツールの経験に基づいて構築すると、新しいツールの学習曲線が低下するということです

このスレッドで提供されるすべての戦術的なアイデアは、確かに成功する可能性があります。最初に検討する限り、継続性とユーザーの期待との一貫性 "推測"で十分です。