リストから複数選択するための最良のUIは何ですか？
Webフォームがあり、フィールドの1つは複数選択リストです。オプションは次のとおりです。
- チェックボックスのリスト
- リストビュー（選択ボックスが複数選択可能）
リストに100を超える項目が含まれている場合、どちらも少し醜く扱いにくいようです。
そのような場合により良い他のUIソリューションはありますか？
別の解決策は、facebookのような「複数選択バー」です。 （正確な名前はわかりません）
here の例を見つけることができます。基本的にはテキスト入力フィールドのようなものですが、選択されたアイテムは「タグ」に変わります。リンクしたページで試してみてください。
あなたが持っているUIとスペースレイアウトに依存します。リストのアイテム数とユーザーが選択する必要のあるアイテムの平均数にも依存します。興味深い解決策の1つは、ドロップダウンリストとチェックボックスです。 
http://dropdown-check-list.googlecode.com/svn/trunk/doc/dropdownchecklist.html
存在するアイテムが多ければ多いほど、ドロップダウンの適合性は低くなります（ユーザーがドロップダウン内でスクロールするのはあまり良くありません）。そして、ここで、リストを整理/構造化する方法を理解する必要があります。
オプションの数によっては、次のようなグラフィックドロップダウンリストオプションを使用できます。タップ/クリックすると、そのアイテムが選択されているかどうかが切り替わります。
ただし、これは非常に長いリストではうまく機能しません。
私はこのパーティーに少し遅れましたが、私が最近よく使用しているソリューションを追加したいと思いました：動的テキスト予測機能を備えた単一のテキスト入力（Googleのメイン検索フォームを考えてください）。
ユーザーがドロップダウンで「結果」を選択すると、リストが入力の下に表示され、できれば各選択を削除する方法の明確なオプションを使用できます。この機能の例として、WordPressまたはDeliciousなどのタグ付きコンテンツを要求するサイトを考えてみてください。
この解決策は、あなたとユーザーがより大きなリストの内容についていくらかシンパティコであることが必要ですが、私はそれが多くの不安とページの不動産を節約することがわかりました。
私はこれにかなり遅れているように見えますが、私の会社でも同様の問題がありました。
必然的に、これを2つの個別の要件（検索、選択）に分割してから、UIに戻す必要がありました。
検索が単純な場合は、オートコンプリートを使用したより単純な方法でうまくいくはずです（例 http://quasipartikel.at/multiselect/ でわかります）。
チェックボックスは理解しやすいイディオムです。
「すべてチェック」および「チェックなし」ボタンが必要です。隣接するアイテムを多数チェックする必要がある場合は、「選択したアイテムをチェック」ボタン（複数のアイテムが選択されている場合のみ有効）
これもオプションとして見ました。チェックされた項目を移動・移動するチェックボックスリストです。 2つの間のハイブリッドソリューション。
[ ] item 1
[ ] item 2
[ ] item 3
[ ] item 4
[ ] item n
いずれかを選択した後：
[ ] item 1 X item 2
[ ] item 3
[ ] item 4
[ ] item n
選択した項目を右に移動するか（おそらく固定divを使用して、オプションのリストを下にスクロールしても表示され続ける）、またはリストの上部に移動できます。
リストのオプション1または2を使用するかどうかは、他の要因と同様に、何らかの理由で選択を永続的にするかどうかに関係します。以下に、従うべき方法を選択する際に考慮に入れることができるいくつかの事項をリストします。
ドラッグアンドドロップ
アイテムのドラッグアンドドロップによる並べ替えを許可する場合、チェックボックスを使用すると、ユーザーがプロセスの選択状態を失わないようにするのが簡単になります。ドラッグアンドドロップの並べ替えを許可しない場合、または処理中に選択状態が失われても構わない場合は、Ctrlキーを使用して複数選択を使用することもできます。
長期持続性
行われている選択を後で保存し、後続のセッションまたはアプリケーションの実行中に再度呼び出す場合は、チェックボックスまたはダブルリストボックスパラダイムの使用を検討してください。ハイライトされたアイテムの表示は、一時的な選択状態のために予約されているためです。
拡張機能としての複数選択
ユーザーにとってマルチセレクションがまれに必要であると予想される場合、チェックボックスでユーザーに負担をかけることは、ユーザーがほとんどの場合それらを使用する可能性が低いため、最善のオプションではありません。このような場合は、特別な複数選択モードにしてチェックボックスを表示するか、高度な複数選択のCtrlキーを使用する方法をそのまま使用することをお勧めします。 Edgeの場合、ユーザーが選択と順序付け、および画面の不動産を非常に細かく制御する必要がある場合、それほど心配する必要はありません。Bevanが彼の回答で2つの個別のリストを使用して提案した方法を使用することも、適切なオプションです。
Windowsエクスプローラーは通常、ファイル/フォルダーの高度な複数選択のためにCtrlキーの方法に従いますが、チェックボックスを使用して選択を表すように構成できます。私は一度試してみて、元に戻しましたが、ほとんどの人はその機能にさえ気付いていません。
私はパーティーにとても遅れています。しかし、私は自分のソリューションを提供したいと思います。
つまり、ポップアップウィンドウ（別名オーバーレイ、モーダル）を使用してチェックボックスを表示し、ユーザーが複数の値を選択できるようにします。
ユーザーがメインフォームの編集リンクをクリックすると、ポップアップウィンドウが開きます。
値の選択が完了したら、クリックイベントのある[完了]ボタンをクリックできます。これは、チェックされた値を収集してメインフォームの非表示フィールドや表示フィールドを更新するJavaScriptメソッドです（例：読み取り専用テキスト領域、またはメインフォームのスパンまたはdiv要素）。また、ユーザーがメインの送信ボタンをクリックすると、非表示フィールドまたは表示フィールドがサーバーに送信され、永続化されます。
選択するチェックボックスが多数ある場合、チェックボックスを表示すると画面が非常に大きくなるため、ポップアップウィンドウを整然とスタイル設定して、ユーザーの注意を集中させることができます。終了したら、ウィンドウを閉じることができます。
もちろん、複数のステップも意味があります。しかし、私の解決策は単一の送信フォーム用です。
この方法についてどう思いますか？すでに使用されているパターンですか？
ありがとうございました