web-dev-qa-db-ja.com

フォームに20以上のチェックボックスを含める最良の方法は何ですか

ユーザー入力フォームのフィールドには、動的に拡大できる20（またはそれ以上）のチェックボックスがあります。これをユーザーに示すための最良の方法は何ですか。高さが固定されたdivでスクロールバーを使用できますか？または、ページ上のすべてのチェックボックスを直接表示する必要があります。

enter image description here

gui-designcheckboxesmulti-selectionscrollbarsfields
4
Kushal Bhabra

  • メインのスクロール可能なコンテナー内のすべてのチェックボックスを一緒に表示。それらをスクローラー内に配置すると、ユーザーはこのセカンダリスクローラーのオーバーフローで非表示になっているチェックボックスを見落とす可能性があります（現在の画像のように）。

  • チェックボックスをアルファベット順に並べ替えます（または他の意味のある順序）、この方法で簡単に見つけることができます。

  • ユーザーにそれほど多くのオプションを表示しない。可能であれば、それらをできるだけ減らしてください。

  • 2つのレベルのオプションを設定例：

。

□ dog   □ cat   □ falcon    □ flamingo  □ crocodile (...20+)

---

□ mammals   □ birds     □ reptiles (first selection between 6)

□ dog   □ cat (second selection much reduced)
5
Alvaro

人間工学的には、すべてのチェックボックスを一度に表示する高さのドロップダウンを作成するのが最善です。ただし、これは少し極端であり、水平方向に多くのスペースを取ります。それがページの主要なアクションであり、他のすべての要素が二次的に重要である場合にのみ、それを行う必要があります。

適切なコンポーネントを使用してください

すべてのオプションを一度に配置するのに十分な水平方向のスペースがない場合は、複数のチェックボックスを選択するために適切なコンポーネントを使用することが最善の方法です。検索機能と複数選択機能を備えたドロップダウンをお勧めします。
ここにインタラクティブな例（チェックボックスによる複数選択を参照）

enter image description here

検索機能により、大きなリスト（20以上のオプション）のオプションをより速く選択できます。

7
Kristiyan Lukanov

1つまたは複数の他の入力フィールドに影響を与える入力フィールドがあり、ロジック/関係が明確である場合、選択の結果としてユーザーインターフェイスがどのように変化するかを考えることが重要です。決定を比較検討する方法はいくつかあります。

  • さまざまな選択の発生頻度：最も一般的なケースの設計。影響を受けるユーザーが少なくなるようにします。
  • 最悪のシナリオの重大度：最悪のシナリオを使用することが不可能ではないように設計します。したがって、特定の割合のユーザーが合理的な方法でタスクを完了できないようにします。
  • フォームレイアウトの全体的な制約：フォームの一般的なレイアウトと構成が最小限にとどめられるように設計します。これは、デスクトップビューとモバイルビューの違いを考慮するときに重要です。

これらすべてのシナリオを説明することはできないかもしれませんが、特定の設計アプローチを適用することで、より多くの情報を収集したときに、テストを行ったり、戻って設計を調整したりできます。

0
Michael Lai