大量のオプションのマルチオプションを表示する方法
ユーザーが400以上のオプションから選択する必要があるWebアプリケーションを作成しています。これは、B2Bソフトウェアの場合と同様に、絶対に必須です。
カテゴリー分けしたい。ただし、各カテゴリに25〜50のオプションがある30近くのカテゴリがある場合があります。これは長いドロップダウンを作成しますが、ユーザーが利用できるオプションの数を減らします。
他の人がこの種の問題をどのように処理したかについてのアドバイス、批評、または考えられる例を探しています。
潜在的に数百の入力を処理することは決して単純ではありません。ドメイン固有の問題に応じて、ユーザーが簡単かつ安全な方法で選択できるようにする必要があります。
チェックボックスのグループ化されたセットを表示するための非常に一般的な解決策は、折りたたみツリーです。オプションのカテゴリを完全に表示し、ユーザーがグループを展開および折りたたむことができます。オプションの。
チェックボックスは3つの状態を処理できる必要があります。
- チェックボックスが選択されていません
- チェックボックスが選択されました
- 「部分的に選択」チェックボックス（1つ以上の選択されたオプションを含むカテゴリに関連付ける必要があります）
（ソース： https://www.jqwidgets.com/jquery-tree-with-checkboxes/ 、 https://zedt.eu/tech/windows/installing-an-ipp -printer-in-windows-10 / ）
ファイルブラウザに似たUIはどうですか？
ここに例があります：http://elliottregan.com/experiments/arise-testing/tmp/education-center.html =
検索対象を正確に知っているユーザーが検索できるようにするだけでなく、カテゴリを2列のレイアウトで表示します。選択ドロップダウンで2列のレイアウトを使用すると、ユーザーはすべてのカテゴリをスキャンしてすばやくクリックし、各カテゴリに探している情報が含まれているかどうかを確認できます。
ドロップダウンよりもクリック数が少ない。
オプションは、さらに複数のカテゴリに分類できます。ドロップダウンでカテゴリ（ファッション、食料品、電化製品など）を描いた添付のスクリーンショットを確認してください。ファッションのカテゴリはさらにメンズ、レディース、キッズなどに分類され、フォーマル、カジュアル、パーティー、ナイトドレスなどにも分類されます。
カテゴリ固有の検索機能を追加して、ユーザーがより使いやすくすることができます。
選択したオプションは、これまでと同じように表すことができます。
参考までに、ドロップダウンの経験則：カテゴリは10を超えないようにしてください。カテゴリがさらにある場合は、検索を追加します。
あなたがすべてをすぐに見えるようにすべきかどうかを再考するかもしれません。代替のUXの1つは、Stack Exchangeの場合と同様に、タグ付きの検索フィールドです。 SEでは、400を超えるオプションから選択できます。タグ/オプションの例とともに、検索フィールドでプレースホルダーを使用できます。
