長いリストから多くの要素を選択する
「ユーザーの作成」ダイアログに非常に長いオプションのリストがあり、ユーザーが多くを選択する必要があるシナリオがあります。プロジェクトマネージャーは、「デュアルリスト」アプローチを提案しました。ユーザーが選択できるチェックボックスの長い（スクロールされた）リストの後に、現在選択されているすべてのオプションのリストが続きます。 2番目のリストは、ユーザーが最初のリストでそれらをクリックするときに「自動更新」されます。
首相によって提案されたように、それは次のようになります：
（上記のモックアップのやや機能的な「デモ」 here 。アプリケーション自体の実際のモックアップは、ほぼ同じくらい単純で醜いです。）
問題は、この例のスクリーンショットには15ほどのオプションしかなく、そのうちのいくつかしか選択されていないにもかかわらず、実際のアプリケーションには数百のオプションがあり、ユーザーは50以上を選択する必要がある場合があるということです。たとえば、ユーザーは常に50回クリックする必要がありますが、ユーザーエクスペリエンスの観点からこれを行うための最良の方法は何でしょうか。
プロジェクトマネージャーは、「すべて選択」オプションを提案し、リストをアルファベット順に保持し、「同期」しました（チェックボックスの選択/選択解除により、選択したリストが自動的に更新されます）。PMユーザーの観点からすると、すべてのオプションを選択した後、すべてのオプションを取得したことを確認するために何らかの方法で「チェック」する必要があります。PMは、スクロールするという意見です何百ものオプションの長いチェックボックスのリストを使用すると、ユーザーが行うのは面倒であり、そのようにオプションを見逃すのは簡単です。
重要なポイント：
- （おそらく）数百のオプションのリスト
- ユーザーはおそらくすべてではなく多くのオプションを選択します
- ユーザーは、変更をコミットする前に、この画面で選択内容を確認する必要があります
これは、それがどのように実装されていても、疲労の多い作業になるでしょう。私は、不格好または醜いインターフェースでユーザーをイライラさせない方法、および/またはプロセスをできるだけ合理化する方法を探しています。
これは、この質問に非常に密接に関連しています： 長いリストから一連のアイテムを選択するためのデュアルリストの代替？ および 長いリストでアイテムのサブセットを選択する最良の方法？ 。これらの質問は一般的なケースに焦点を当てていますが、私は「丸ごとクリック」のケースを検討しています。
リストビルダーを使用することもできます。 （「 Designing Interfaces by Jenifer Tidwell ad the MicrosoftからのUXガイドライン 」をご覧ください）。
誰かが ライブデモ も作成しました...
左側のリストにフィルター、検索、およびグループを追加できるため、特定のグループまたは検索結果から「すべてのアイテム」を簡単に選択できます...
KeyRemap4Macbookはこれを非常にうまく行います。
彼らは文字通り何百ものオプションを選択できるので、彼らがしたことはcheckboxがあり、"show enabled only"ができることです。これは非常にsimple、spaceefficient、およびeffectiveです。
これが本当にユースケースに適合するかどうかはわかりませんが、 chosen library はクールな複数選択ドロップダウンウィジェットを実装します。
オプション全体をグループごとにグループ化すると、グループ全体を選択/選択解除できるため、この作業がはるかに簡単になります。
また、色を使用して、選択したオプションと選択していないオプションを区別することもできます。
あなたの商品は分類可能ですか？次に、親のリストと子のリストを作成できます。親のリストには、すべての子アイテムを選択するためのチェックボックスを含めることもできます。