合計セットの一部にすぎないグリッド上の複数のアイテムを選択する

Question

ユーザーにN個のアイテムのセットを表示する必要がありますが、快適にレンダリングできるのはMのみです（M〜20、N〜1000）。次に、ユーザーはこれらの項目の1つ以上を選択して、次のステージに進むことができます。すでに選択されている項目を表示できるようにする必要があります。

頭に浮かぶアプローチの1つは、友達の中から選択する必要がある場合にFacebookが実行することです。選択した友達のコレクションが小さなコンテナに表示されます。

これをページネーションなしでエレガントに行う方法についてのアイデアはありますか？

Erics · Accepted Answer

リストビルダーのパターンを使用できます。最も単純な形式は@JonnyBoats describes ですが、そこには非常に多くのオプションとバリエーションがあります（非常に醜いことがたくさんあります）。

ユースケースでは、ソースリストをスクロールでナビゲート可能、ツリーナビゲート可能、またはフィルター可能にすることができます。

これは、いくつかのツリーナビゲーションを備えたフィルター可能なリストのモックアップです。
ugly
フィルターテキスト用の「書き込み」オプションも含まれています-そのオプションはおそらく必要なものではありません。ほとんどのユーザーは既にチェックボックスの機能を知っており、クリックは2回ではなく1回だけなので、通常の「装飾されていない行をクリックして移動ボタンをクリックする」メカニズムの代わりにチェックボックスを使用します。

重要なポイントは、使用可能な品質と属性、およびユーザーにとって意味のあるものに従って候補プール（左側のリスト）を設計することです。 1000以上の候補が自然に階層構造になり、ユーザーがその階層に慣れている場合は、左側にツリーナビゲーターを提供します。 1000を超える候補者に自然な階層はないが、キーワードでフィルタリングできる場合は、ライブフィルターメカニズムを提供します。データセットにキーワードはないが、多数の固定値属性がある場合は、候補リストをフィルターするスイッチのセットを提供します。

「2つのサイドバイサイドリスト」のビジュアルデザインも再設計できるようになっています。 Googleプラスのサークルと同じように、より大きな候補プールを小さなサマリーリストやコレクターバケットの上に置くこともできます。

ここに大きな大きなリストがあります醜さデザインバリエーション。

JonnyBoats · Answer

私が使いやすいと思う1つのインターフェイスは、垂直スクロールバーのある2つのリストです。左側は選択可能なアイテムのリストで、右側は選択したアイテムのリストです。次に、マウス（またはキーボード）を使用して、アイテムを片側から反対側に移動できます。

したがって、たとえば、画面は次のように開始されます。

Bob Mary Sam Fred Jane

ユーザーがサムとジェーンを左から右に動かすと、画面は次のようになります。

Bob Sam Mary Jane Fred