ユーザーが長いリストのアイテムを簡単にペアリングできるようにするにはどうすればよいですか？
私は、コンピューターの経験がほとんどまたはまったくないユーザーが2つの巨大なリスト（それぞれ約2000項目）からペアを作成できるようにするフレンドリーなUIを作成しようとしています。各リストの上に、表示されているアイテムを制限する検索フィールド（図にはありません）があります。
これは本当にユーザーフレンドリーではないと思うので立ち往生しています。プログラマーとして、私はそれが簡単だと思っています。
これらの2つのリストを提示し、ユーザーがそれらの間で接続できるようにするより良い方法はありますか？
単純なルール：アイテムがペアになると、再度選択することはできません。リストから削除することもできます。
このUIは、マウスなどが搭載されたマシンのWindowsアプリケーションに関するものです。タッチインターフェイス用ではありません。
編集：どちらのリストにも健康診断を説明するテキストが含まれているため、非常に長くなります。また、Juan Lanusは、ユーザーがデータをフィルタリングできるように、リストの上に検索ボックスをすでに追加していることを示唆しています。
すべての年齢とコンピューター使用能力を持つユーザーがこのUIを使用できるはずだとおっしゃいましたので、ここに私が思いついたシンプルで直感的なアプローチを示します。示唆に富むフローアイコン、指示用のコマンドテキストを利用し、ペアのアイテムからコンポーネントアイテムを視覚的に分離します。
私の経験では、経験の浅いユーザーに型破りなインタラクションパターンを導入すると、非常に効率的な場合があります。たとえば、iPhoneを見てください。すべてが新しいので、あらゆる種類のフォーカスグループの人々を引き付けることができます。電話をかけること以外に携帯電話に以前興味がなかった人々でさえ、それでその使用を見つけて魅了されました。
したがって、これらが経験の浅いユーザーであることを考えると、アクションボタンのある3つの個別のリストが行うことよりも現実の世界に関連するものを使用することをお勧めします。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
これは、ドラッグアンドドロップを利用したソリューションであり、仮想表現に慣れていないユーザーにとって非常に好評なインタラクティブ戦略である直接操作を利用した相互作用パターンです。ユーザーはリストの1つから1つのアイテムを引き出します。シルエットが後ろにくると、他のリストが点灯し（キューへのドロップ可能性）、ユーザーはそれを他のリストのアイテムにドロップします。ドロップすると、アイテムは隣接するリストの1つのアイテムに結合され、ペアリングされたアイテムが保持され、ペアリングされたことを視覚的に示します。
別の機能として、ペアリングされたアイテムが選択されたときに、ペアリングを解除するポップアップアクションを提供できます（その機能を含める場合）。
編集：ペアを解除/解除する別の方法は、ペアをペアリングするのと同じアクションを使用して、ペアコンテナの外にペアをドラッグすることです。
一度に1つのリストのみを表示することで同じことを実現できます。
リストのコンテンツが同じかどうかに応じて（おそらく同じですが、明示的に指定しませんでした）、表示されるリストのコンテンツは（もちろん）変更する必要があります。ユーザーは常にこれを段階的に（「最初の項目を検索」、「2番目の項目を検索」、ペアを作成）行うので、両方のリストを同時に表示する利点はありません。
ユーザーが不要なアイテムを選択する可能性がどの程度あるかに応じて、選択時またはリストの下部にあるボタンを使用して次のステップを呼び出すことができます。
すべてのオプションが有効であるように見え、私はそれらのすべてを（ほぼ）実装します。
1-ユーザーがデータを入力してリストを短くできるように、それぞれにテキストフィルターを備えた2つのリスト。 IMOの理想的なフィルターは、入力された文字を、アイテムテキストの先頭またはアイテムテキストの先頭ではなく、リストアイテムのどこにあるかを検出します。また、ユーザーが2つの単語（または部分的な単語）を入力した場合、フィルターは両方のテキストを含むすべてのアイテムを検索します。ユーザーがフィルターを入力すると、しばらくするとリストが短くなります。つまり、ユーザーが「検索」ボタンをクリックする必要はありません。リストが長いため、ユーザーが検索テキストを入力するテキスト入力は、Excelのヘッダー行を固定するときのように、固定された場所に配置する必要があります。
2-ユーザーが一方のリストのアイテムをクリックしてから、もう一方のアイテムをクリックすると、「ペアを作成」ボタンが光ります。ユーザーがクリックするとマッチが成立！
3-ユーザーが1つのリストのitenをクリックし、otharのアイテムをダブルクリックすると、ペアが作成されます。
4-ユーザーは、一方のリストのアイテムをドラッグし、もう一方のアイテムの上にスイープし、ペアをmacthesリストにドロップします。見えない場合は、「ここにドロップ」ターゲットが常に表示され、可能であれば常に同じ場所に配置されます。
5-一致したアイテムは、ソースリストからゆっくり消えます。 amimationは、ユーザーがどこに戻ったかをどこに探したかをユーザーに知らせます。
実際的な推奨事項として、jQuery UI Autocompleteは使用しないでください。昨日1300個のアイテムリストを試してみましたが、表示に時間がかかりすぎます。昨年、私は今覚えていない、よりシンプルで応答性の高い別のコントロールを使用しました。情報が必要な場合は後で連絡してください。
私は数年前に同じ問題に対処しました。私はこれを行うための良い方法を探して次々と検索を行い、ついに手動でこの作業をしている人々を観察することに決めました。
彼らは、リストAを1つずつ定規で1つずつ調べ、リストBを指でスクロールして、最も一致するものを見つけます。以下のUIでそのプロセスを複製してみました。
上部のフライウェイトはリストAの現在のアイテムです。ヘッダーの下のアイテムは、リストBの上位の重み付き一致です。各列は、大文字と小文字を無視して完全一致の場合は100、空白をすべて削除して完全一致の場合は80と重み付けされています。また、1つの値が他の値に完全に含まれている場合は30。表示されている場合、重量がゼロより大きいアイテムのみ。
一致ボタンの1つを押すと、リストAの次のエントリに移動し、一致したエントリの両方をリストAとリストBから削除します。
上記のように、元に戻すボタンが必要でした。私は非常に速く進み、一致しないときに一番上の一致ボタンを押したことに気づきました。
色は、各列の一致タイプを示しています。 