長いリストの選択のための小さな不動産
これは教育機関向け製品であるというコンテキストを考えると、教育者が学生を管理できるようにするWebアプリです。 UIの設計方法には、ユーザーが事前定義されたリストから生徒を追加できるポップアップがあります。
私の目標は、できる限り簡単にすることです。
- A.学生を簡単に検索できます
- B.複数選択の生徒機能を許可する
- C.選択した生徒を表示します
圧倒される可能性のあるリストの小さな不動産制約内で複数選択機能を使用するためのベストプラクティスはありますか？フローはシームレスで簡単でなければなりません。これはWebアプリの大きなコンポーネントですが、プロセスの一部を管理するための方法にすぎないため、別の画面にすることはできません。これは、サイトの特定の領域をクリックしたときにアクティブになる単純なポップアップです。
この機能のワイヤーフレームUIを表す以下の画像を提供しました。
本当にスペースが限られている場合、私はあなたが正しい軌道に乗っていると思います。個人的に、私はAndroidHustleとLouiseの回答に示されている2リストアプローチのファンではありません。見つけた：
- スペースがかかりすぎる
- 操作が多すぎます（最初にアイテムを選択してから、ボタンをクリックしてください）
- どのペインが何であるかを確認するには、常に努力が必要です。最近、この問題に関する質問がありました。ペインをどの順序で表示する必要がありますか？
私が彼らのために見る唯一の良いユースケースは、例えばツールバーを構成するために、アイテムのリストを手動で並べ替えることができる必要がある場合です。順序が無関係またはすでに暗黙的である単純な選択の場合、それらは私にはやり過ぎのように見えます。
私は少しの追加で、あなたの解決策はすでにかなり良いと思います。必要なのは、すでに選択したアイテムの数に関するフィードバックを提供し、選択したアイテムのみにリストを簡単にフィルターして戻すことです。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
このデザインでは、選択のサイズについて常にフィードバックがあり、シングルクリックでアイテムを選択でき、シングルクリックで選択を確認できます（およびアイテムを削除できます）。多くのスペースを取らずに、すべてのことができます。検索バーに入力すると、すぐにリストがフィルターで戻されます。
追加のボーナスとして、結果が1つしかなく、Enterキーを押した場合に、その1つの結果を確認して、作成されたフィルターを選択するようにすることもできます。これにより、キーボードから手を離さずに項目をすばやく選択できます。
通常、おそらく圧倒される可能性のあるリストから選択するために、ある種のデュアルリスト（リストビルダーまたはアキュムレーターとも呼ばれることもあります）を調べます。これは、よく目にするユーザーインターフェイスパターンです（たとえば、Windowsでは、これを使用していくつかのツールバーをカスタマイズできます）。このパターンを説明するWebサイトがいくつかあります（現時点で古いリンクは見つかりませんが、- here はGoogleで見つけたばかりです）。基本的には次のように動作します：
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
ニーズに合わせて調整する詳細はたくさんあります。ソースと選択リストの両方に追加のフィルターがある場合とない場合があります。リストは、実際にはテーブルやアイコンなど何でもかまいません。項目をクリックするとすぐにアイテムの入れ替えが発生する可能性があります（または、モックアップの専用ボタンのように）、最初に1つ以上のマークを付けてから入れ替えることもできます（AndroidHustleの回答を参照）。など...など...
あなたのケースに関して：あなたの画像はリストビルダーの左側をほとんど表しているので、あなたのタスクに関しては、それはアイテムの選択をうまく処理します。ただし、すでに選択したものを追跡するための便利な方法はまだ提供されていません。フィルターがクリアされている場合は、アイテムのリスト全体（一部はチェック済み、一部はチェックなし）のみをスキャンして、リストに既に誰が存在するかを知ることができます。
デュアルリストアプローチの2番目のパネルはこの仕事をあなたに代わって行います。選択されたものを追跡し、この選択を常に表示および編集可能にします。さらに、アイテムを移動することでユーザーのアクションに明確に応答するため、クリックするたびにフィードバックが得られます。チェックボックスとビューの変更（フィルタリングによる）を使用するアプローチでは、一部のユーザーは、ボックスをチェックすると選択がコミットされてビューの変更後も続くかどうか、またはコミットするために追加のボタンを押す必要があるかどうかがわからない場合があります。変更を受け入れallして、ダイアログを終了するボタンのラベルは、現在のビューステートに変更を保存することを示唆するものと混同しないでください（ 「OK」や「Accept」など）。
全体として、画面領域の制約について述べたように、トレードオフを考慮する必要があります。明らかに、リストビルダーはより多くのスペースを使用します。この場合、André（現在上記の答え）は、追加のスペースを必要とせずに、2番目のパネルの機能の多くを組み込む（たとえば、既存の選択を利用可能にして編集可能にする）ための適切なアプローチを提供しました。この効果を実現する他の方法を検討することもできます。選択したリストが長いと予想されない場合は、下または上に追加するか、表示/展開ボタンをクリックしてリストをスライドします。あるいは、電子メールの受信者を選択するのと同様に、 select-with-tokensアプローチ を使用することもできます。
古いマントラを覚えておいてください。ユーザーがこの選択プロセスをどのように行っているかを調べる必要があります。ほとんどのデザインパターンの説明の言語：
次の場合は、二重リストパターンを調べます。
- すでに選択したものは次に選択するものに影響するため、すでに取得したものを使用可能なオプションと比較する必要があります。 （私の意見では、二重リストを作成するためのキラー基準です。）
- ユーザーは選択したアイテムをなんらかの方法で調整（順序またはグループ化）する必要があります
- ユーザーはアイテムの選択を頻繁に修正する必要があるため、アイテムの選択を解除します。
以下の場合、単一のパネルに移動します（選択されたリストをすばやく表示するためのメカニズムが追加されています）。
- スペースがあまりありません
- すでに選択されているものは、次のステップでは重要ではありません。ユーザーは事前に何を選択したいかをよく知っています
- 選択を大幅に変更する必要はありません
全体として、a）すべてのオプションを手動でオフにすることなくダイアログから抜け出すために提案にキャンセルオプションを追加し、b）「すべて表示に戻る」の動作を明確にする（前の画面に戻る）ことも検討する必要があります。それともフィルターをクリアしますか？）
お役に立てれば。乾杯、ルイーズ
作業しなければならないスペースがどれほど小さいか明確に述べていないので、私の提案は大きすぎるかもしれません。ただし、検索結果を操作し、同時に選択セットを追跡する場合は、それらを2つのリストに分割すると、ユーザーがタスクの焦点を失うことなく生徒を追加および削除できます。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
この提案では、ユーザーは選択後に新しいフィルターを自由に入力し、新しい検索中に生徒を除外することができます。