リストからちょうど2つの項目を選択するための適切なUIパターンは何ですか？
デスクトップソフトウェアには、約20個のアイテムがあります。
これらのアイテムは、画面に収まるリストに表示されます。
ユーザーはリストで2つの項目を選択できる必要があります。そうすると、リストの横のユーザーコントロールにdiffに似た結果が表示されます。
2つの項目を選択するために必要なアクションの数を最小限に抑えるために、ここではどのパターンが適していますか？
[〜＃〜]編集[〜＃〜]
共鳴とコメントの質問のために、ここでいくつかのコンテキスト。
プログラムは木を比較することです。
私の場合、ユーザーは通常ランダムなアイテムを選択しますが、どちらの場合も、2つのランダムなアイテムを選択するか、1つのアイテムを選択したまま他のアイテムを変更するという、素晴らしい解決策が欲しいです。
アイテム自体はツリーを表しますが、リストに表示されるアイテムごとに短いタグを使用できます。
差分の場合、両方のツリーが並んで表示され、他のツリーで欠落しているノードが強調表示されます。たとえば、次のようになります。
このプログラムは学界のコンピューター科学者によって使用される予定なので、高齢者や子供は問題になりません。
ラジオボタンの2つの行。ウィキペディア http://en.wikipedia.org/w/index.php?title=Wikipedia&action=history
ユーザーがリストから項目をドラッグできるソース領域（項目のリスト）とターゲット領域（ドロップゾーン）を使用できます。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
ドロップゾーンは、そこに配置する必要があるアイテムの数を明確に示す必要があります。アイテムの残りの数を強調するテキストメッセージを使用することをお勧めします。つまり、最初に番号を強調するか、それ以外の場合は大きいサイズで太字にしたり、他とは異なる色で強調表示したりします（簡単にスキャンできるようにします）。さらに、ターゲット領域のソースアイテムの形をした破線の四角形のように、視覚的なヒントを与えることもできます。
矢印のようなソース領域とターゲット領域の間のピクトグラム、何かまたは類似のものをドラッグする様式化された手は、ユーザーが必要とするアクションを暗示することがあります。
リスト全体を左側に配置します。最初のアイテムを選択すると、選択したアイテムが右上のウィンドウに表示されます。
2番目の項目を選択すると、2つの項目の比較を表示できます。
編集済み
コンポーネントリスト（ノードのコレクション）
ボックスA（Node Aの場合）
ボックスB（Node Bの場合）
任意のノード上にマウスを置くと、AまたはBを選択するオプションが表示されます（ノードが選択されているかどうかに関係なく、右側のスライドメニューで両方のオプションが要求されます）。
Cherryはこのアプローチに加えて、ユーザーがAまたはBの上にマウスを置くとすぐに、それぞれのボックスにツリーのプレビューを表示できます。
ノードが選択されたら、アイテムに対するラベルを表示します。
比較のために2つの項目の選択が必要な場合は、WinMergeを参考にするとよいと思います。
- アプリ内で「開く」アイコンをクリックすると、左と右のファイルを入力するための2つのテキストボックスを含むダイアログが起動します。
WinMergeはそれ自体をWindowsエクスプローラと統合し、右マウスボタンのコンテキストポップアップメニューに「WinMerge」エントリを配置します。
ゼロファイルを選択し、右クリックして[WinMerge]を選択すると、[左]フィールドに現在のディレクトリのパスが表示されたダイアログが開き、[右]フィールドは空のままになっているため、そこにディレクトリパスを入力する必要があります。
ファイル/フォルダーを1つだけ選択し、右クリックして[WinMerge]を選択すると、選択したファイル/フォルダーのパスが[左]フィールドにあるダイアログが開き、[右]フィールドは空のままになり、そこにファイル/フォルダのパス。
2つのファイル/フォルダーを選択し、右クリック> [WinMerge]を選択した場合、ダイアログは必要ないため表示されず、左と右のファイル/フォルダーが比較のためにメインウィンドウに直接読み込まれます。
3つ以上のファイル/フォルダーを選択し、右クリックすると、WinMergeオプションは意味をなさないため、単に無効になります。
あなたの特定のケースでは、私はこれを次のように実装すると思います：
リストと「Diff」ボタンのあるフォーム
ユーザーが正確に2つのエントリを選択すると、ボタンが有効になり、比較が実行されます。
それ以外の場合、ボタンは無効になって灰色になり、何もしません。
- 差分ツールは通常、垂直に配置されます。左側のアイテム1、右側のアイテム2。
- 「比較」とは何ですか？私にとっては、「最初のアイテムを選択」のようなもので、他の人と比較します。新しいアイテムの品質が向上したら、それに切り替えて、次のイテレーションを開始します。
- 私はおそらく私が好きないくつかのアイテムをマークし、これらのアイテムだけを比較するために反復されます。
- 画面を開くと、アイテム1とアイテム2がすでに選択されています
したがって、次のようになります。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
アイテムセレクター：
ここで既存の2つの答えを組み合わせます。
どちらも非常に優れています。しかし ドラッグアンドドロップリスト ：
- アイテムが2のアモルファスグループに追加されるだけなので、2つの異なるアイテムの概念は失われます。
- 選択を変更するには、既存のアイテムを明示的に削除する必要があります。このステップを排除するのは困難です（たとえば、既存のアイテムにドロップして変更することはできますが、最初の効果はすぐにはわからない可能性があり、選択したものだけを処理するかどうかを決定する必要があります） 1つのアイテムを特別なケースとして-ドロップ時に1つのアイテムを置き換えるか、常に2番目のアイテムを追加します。）
- 項目ごとに、高さの制限があるため（スクロールが必要な場合がある）、ドロップダウンリストを展開する、平凡で使い慣れた、まだ存在するステップが必要です。
2つの単純な組み合わせは、（私のmspaintを許して）のようなもので、リストから右側の2つの異なるボックスの1つにドラッグします。
これを変更すると、ユーザーはリスト内の選択をダブルクリックして、右側の最初の空きボックス/右側にクリックされた最後のボックスに配置することもできます（単独でユーザーがこのシステムと戦う可能性がありますが、ドラッグと組み合わせると、ユーザーがボックスに何を入れたいかを確信している場合、これは優れた「上級ユーザー」ショートカットになる可能性があります。
クリックの量を最小限に抑える別のオプションは、左クリックで選択を1つのボックスに配置し、右クリックで選択を別のボックスに配置することです。ただし、右クリックして選択することは特に直感的ではないため（タッチスクリーンにも対応していないため）、画面上での指示が必要になる場合があります。編集：しかし Dineshの設計 はこれのはるかに優れたバリエーションです。
私は次のようなことをします。ユーザーがリストから項目を選択できるようにしてから、それを入れたいボックスへの矢印をクリックします（何かがすでにそこにある場合、それは置き換えられます）。また、リストを中央に配置し、詳細をどちらかの側に配置すると、レイアウトがよりクリーンでシンプルになると思います。私は多くの異なるシナリオでこれを行いました。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
私はそれを単純に保ちます：2つのドロップダウンリスト。とにかくドロップダウンを使用するのは、リストに20項目あるのがもっともな理由です。
アイテムをそれ自体と比較しても意味がない場合、リストは既に選択されているアイテムを無効にすることができます。
このようなものはどうですか？私はそれがデスクトップとモバイルの両方でかなりうまくいくと思います、そしてそれはまたより少ないスクリーンスペースを使用します。これは、3つ以上のオプションにも適切に対応します。
項目が選択されていません。オプションのリストの横に、選択する必要があるオプションの数を視覚的に示す「トークン」のリストがあります。
1つの項目のみを選択します。オプションの1つを選択すると、その円が強調表示され、トークンの1つが削除されます。アイテムの選択を解除できます。その場合、トークンは最初の位置に戻ります。
両方のアイテムが選択されています。すべてのトークンが使い切られ、選択された2つのオプションが強調表示されます。
実装する良い点の1つは、既にアイテムに割り当てられているトークンを別のアイテムにクリックアンドドラッグして、選択をより簡単に変更できるようにすることです。
これはライブデモですを使用して、これがいかに簡単であるかを示します。
シンプルで使いやすいものにすることはおそらく良い考えなので、次のようなものを使用します。
簡潔でわかりやすい説明が上部にあり、何をしなければならないかはかなり明白です。これを操作すると、次のようになります。
アイテムをもう一度クリックして、選択を解除することもできます。これがどれほど簡単に使用できるかを確認するには、この投稿の上部にリンクされているデモを試してみてください。