ユーザーがアイテムをグループに割り当てるのに最適なUIパターン
問題：ユーザーは約5〜20個の未分類のアイテムのリストを持っているため、それらを2〜4個のグループに分類する必要があります。トリッキーな部分は、同じアイテムを複数のグループに配置できることです（これはEdgeケースですが、サポートする必要があります）。
私が見ることができるものから、当てはまる2つのデザインパターンがあります：
ドラッグアンドドロップ：
基本的に、ユーザーはドラッグ可能なアイテムのリストが提供され、そのリストをinotグループにバケット化できます
このパターンの主な問題は、同じアイテムを複数のグループに配置できるため、実際には「移動」操作ではないことを意味し、ユーザーがアイテムを分類できるようにするには、アイテムを未分類のリストに残す必要があります。また、別のカテゴリに配置します。この別の結果として、未分類のリストが縮小されることはないため、その中のどの項目がグループ化され、どれが未割り当てのままであるかがすぐにはわかりません。
上記の問題を処理しようとする可能性のある設計を次に示します。グループに割り当てられているアイテムは暗く表示されます。また、色（グループラベルの色に対応する色付きのドット）を使用して、アイテムが配置されているグループをユーザーが確認できるようにしています。
チェックボックステーブル：
グループの列のチェックボックスをオンにすることで、各アイテムをグループに割り当てることができるテーブルスタイルのUI。アイテムごとに複数のグループを割り当てる必要があるため、ラジオボタンではなくチェックボックスが使用されます。次に例を示します。
このUIで目にする主な欠点は、特定のグループに属しているアイテムを簡単に確認できないことです。また、割り当てられたグループ間でアイテムを移動するのは少し面倒です（2ステップのアクション：ユーザーは1つのチェックボックスをオフにし、別のチェックボックスをオンにする必要があります）。これは、割り当てテーブルUIの横にある各グループのアイテムの個別のリストを提供することで改善できます。このリストは、非インタラクティブにすることも、グループ間でアイテムを移動するためのドラッグアンドドロップをサポートすることもできます。例：
正直なところ、どちらの解決策にも完全には満足していません。誰かがこのデザインに対してより良いアイデアや改善を持っているかどうか疑問に思っていますか？
これは、マッピング全体を表示する必要があるかどうかという問題です。マッピング全体を一度に表示する必要がない場合は、別の可能性があります。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
マッピング全体が不可欠な場合、最善のアプローチは、人々がマッピング全体を表示できるようにするマトリックスを使用することです。
ドラッグアンドドロップUIの使用は便利ですが、ユーザーが繰り返し行う必要のあるアクションがある場合は面倒になる可能性があることに注意してください。
たくさん期待するアイテムとグループの数によって異なりますが存在するだけでなく、誰かが同時にアクティブに作業することを期待する数も異なります。
多数のグループとアイテムを操作する場合、最初のオプションは使用できなくなります。でも、数が少なくても遠ざける傾向にあります。
2番目のオプションは見栄えがよくないかもしれませんが、使用と理解の両方が簡単であると同時に、より多くのアイテムとグループにうまく調整できます。それがnewのやり方ではないという事実以外に、私はそれの大きな弱点を見ていません。しかし、それがその強みです。
3番目のオプションは、2番目のオプションの優れた改善ですが、グループとアイテムの数が少ない場合のみです。
オプション2にいくつか変更を加えることをお勧めします。任意の列（グループ）で並べ替える機能を追加し、右側に、項目が選択されているときに項目がどのグループにあるかを示す要約パネルを表示します。
2つを組み合わせませんか？ 2番目の初期表示を使用して、ユーザーがチェックボックスを選択できるようにします。 （チェックボックスの選択は、ドラッグアンドドロップよりもはるかに高速で簡単です。これにより、オプション1よりも優れています。）列を一目見ることで、特定のグループに含まれるアイテムを簡単に確認できるように、各チェックボックスをボタンに変えます。チェックされるとすぐに。 （このボタンは、オプション2bの右端にxが表示されているボタンのように見える場合があります。クリックすると、グループから項目を削除して、ボタンをチェックされていないチェックボックスに戻すことができます。）ユーザーはボタンをクリックアンドドラッグして1つの流体モーションでグループ間を移動できますが、直感的ではありますが、1つの列の選択を解除し、チェックボックスを使用して別の列で再選択するというわずかに遅いオプションがあります。
編集：これが私が何を意味するのかについての簡単なモックアップです。
両方のパラダイムは理にかなっていると思いますが、一度に提示すると意味がありません。
追加質問として：このアクティビティを単一のページで実行する必要がありますか？ （たとえば、フォームの一部ですか？）
このタスクが製品のコアであるアイテム管理エクスペリエンスの一部である場合、プレイリスト用のiTunesとサークル用のGoogle+で使用されている2ページのアプローチをお勧めします。
「アイテムのリスト」ページで、ユーザーは既存のすべてのグループのリストを表示し、アイテムをこれらのグループにドラッグアンドドロップできます。各グループは、追加されたアイテムの数を表示する場合があります。次に、各アイテムに追加されているグループの数を各アイテムにラベル付けします。アイテムを選択すると、そのアイテムが属するグループを強調表示できます。
グループが選択されると、ページの構造が変化して、選択されたグループの内外のアイテムを明確に区別します。次に、グループ外のアイテムをドラッグするか、複数選択して、選択したグループに移動します。
「自動提案」可能な選択リストでグループを表示するのはどうですか。これらのグループは、レスポンシブグリッドにさらに配置できます（レイアウトルールに応じて構成します）。
さらに、グループ＃3のようなコンポーネントのようなタグクラウドで選択したアイテムを表示できます
主なタスクは何ですか？
- グループへのアイテムの割り当て
- グループの比較
- グループ間のアイテムの移動
- 他に何か？
＃1はドラッグアンドドロップでサポートするのが最適だと思います。実際のこの良い例は google + circles です。 ＃2と＃3は、上に示したチェックボックスグリッドまたはその概念のいくつかのバリエーションでサポートするのがおそらく最善ですが、多数のアイテムまたはグループによる情報過負荷の問題が発生する可能性があると思います。これは、ターゲットユーザーグループの使用頻度に応じて、多かれ少なかれ問題になる可能性があります。他の人が述べたように、私はパターンを組み合わせることを避け、主なタスクを最もよくサポートするものに固執します。
2番目のオプションのバリエーションをお勧めしますが、ユーザーの混乱を最小限にするために、一度に1つのグループのみを表示します。多くの場合、より単純なメソッドが存在する場合、ドラッグアンドドロップはユーザーの作業を追加するだけです。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
上のモックアップでは、ドロップダウンボックスリストからグループが選択され、選択したグループに応じてチェックボックスが動的に変化します。保存ボタンはグループ選択の上にあり、1つではなくすべてのグループを保存することを示しています。ドロップダウンでグループを選択すると、グループの数に関係なく、このパターンは非常にスケーラブルになります。
これをWebインターフェースで行う場合は、これを段階的に強化されたソリューションとして使用できます。フォールバックは、すべてのグループが同時に表示され、一方が他方の上に表示されることです。
使用する作業の物理的なサイズを考慮する必要があります。このタスクが画面全体に広がっている場合、ドラッグアンドドロップが問題になります。私がフィードバックに取り組んだいくつかのシステムでは、マウスボタンを押しながら長いドラッグを行っていました（フィードバックは長いと言われていました）。ドラッグアンドドロップがクリック、手首のわずかな回転、ドロップの場合、ほとんどの人はそれを簡単に処理できます。
このチェックボックスは、ほぼすべてのサイズのグリッドに適したアイデアであり、マウスではなくキーボードを使用したいユーザーに適しています。
いつものように、両方の方法の組み合わせの提案は、ほとんどのユーザーに解決策を提供するため、私の投票に勝ちます。開発は多少長くなりますが、それはユーザーの懸念事項ではありません。
答えはすべて、アイテムを取得してグループに割り当てることに基づいているようです。私はアイテムとグループの相対的な重要性を理解していませんが、グループをプライマリソースとして使用し、リストからグループにアイテムを「プル」して、次のグループに移動することは理にかなっています。