web-dev-qa-db-ja.com

長さが異なる可能性のある多数のチェックボックスのリストをレイアウトする方法は?

ヘッダータイトルの下にチェックボックスのリストがあります(少なくとも3つ、そのうちの1つにサブヘッダーがあり、すべて1ページにあります)。

enter image description here

問題は、これらのチェックボックスはグループごとに10要素になる可能性があることです。ユーザーフレンドリーにするための方法がわからないのですが、何かアイデアがありますか?

検索ボックスの他の質問で提案された方法を使用して、選択を別のボックスに移動することはできません。1つのグループが多すぎます...次に、要素はかなり明確に定義され、データベース主導であり、検索は必要ありません。 .. 3番目に、10から15要素のみです。

7
Ayyash

情報アーキテクチャやユーザーのワークフローについて何も知らないまま、yourの提案を出発点として取り上げ、 ゲシュタルトの原則 と視覚的な階層。

次に、メインのグループ化にはヘッダーに下線を付けずに(近接性/グループ化の法則により)行う必要があり、サブタイトルには(類似性の法則により)若干異なるフォントが必要です。

例えば:
enter image description here

10

クラシックファセットナビゲーションデザインの問題。これが私たちが行ったいくつかのことです:

  • グループごとに最初の5つの要素をデフォルトで表示し、[詳細...]オプションを使用してリストを拡張してすべての要素を表示します。表示する5を選択するのは困難です。 「最初の」5を表示することを好みます。アルファベット順ではありますが、ビジネス目標によっては、「最も使用されている」5または同様のものが表示される場合があります。
  • 個々のカテゴリに関連付けられている結果が多すぎない場合は、1つ上のレベルに移動し、このレベルの選択を削除します。例えば。サブグループのチェックボックスを作成し、「固形剤形」、「液体」などを取り除きます。
  • アルファベット順に並べ替え、スキャンしやすさと読みやすさを向上させます。現在、リストを確認すると、どのような種類の並べ替えに基づいてどこに配置されるかを予測できないため、何も見つけることが困難です。アルファベット順で並べ替えるのは、それがすぐにわかるため( "A ... B .. oh!")、スケールが変わるためです。
  • JørnE. Angeltveitが提供するすべてのヒントを使用して、色、タイポグラフィ、サイズなどを変更することで視覚デザインを改善します。
  • ファセットを選択したら、ユーザーにリストをもう一度選択して選択を解除するのではなく、UIのどこかに「選択したもの」のリストを保持して、そこで選択を解除できるようにします。
6
Rahul