web-dev-qa-db-ja.com

チェックボックスマトリックスの代替

ユーザーが特定の構成オプションを選択できるようにするUIの一部を設計している開発者です。

構成できるセクションは4つあります。

  1. 国を選択してから、その国の言語を選択します。これは複数選択です。したがって、[{US、en-US}、{CA、fr-CA}、{CA、en-CA}]を選択できます
  2. 実行するタスクを選択します（選択したタスクのみが実行されるように、15の異なる可能なタスクが含まれます）。
  3. 実行するオブジェクトのタイプ。これは基本的にはデータのフィルターのセットです。 filter out all male fish that are alive, all female cats that are spayed, and all female dogs that are not spayedに沿って考えることができます。これにはペットショッププログラムではありませんが、8種類のオブジェクト（魚、猫、犬など）があり、それぞれに10のフラグ（吐かれた、生きている、男性/女性など）があります。 。
  4. 含める/無視する特定のアイテム（セクション3の選択肢と一致するかどうかに関係なく、これらのアイテムにはタスクが含まれる/除外されます）

私の最初のアイデアはチェックボックスのマトリックスを持つことでしたが、ビジネスはいつでもそれをいずれかの方向（タイプまたはフラグ）に拡張することを要求する可能性があり、それは醜く速くなる可能性があります。

別のアイデアはアコーディオンでしたが、その後アコーディオンのアコーディオンになりましたが、それははるかに優れているようには見えません。

他にどのような選択肢がありますか？

編集：セクション3の例

mockup

download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム

gui-designcheckboxesaccordion
5
user83018

チェックボックスグリッド/マトリックス

チェックボックスグリッドを使用して、順調に進んでいると思います。改善が必要なのはあなたのデザインだけです。テーブルのヘッダーとしてオブジェクトを使用し、行として属性を使用します。

利点

  • オブジェクトと対応する使用可能な属性がはっきりと見える
  • 選択された属性は明白です-必要に応じてセルの追加のスタイリングによって強調されます
  • 使いやすい/直感的-展開や折りたたみなし-ユーザーからの選択/選択解除のみ必要
  • 柔軟性-さらにオブジェクトを追加する場合は、列を追加するだけで、テーブルを水平方向にスクロールできるようになります。さらに属性を追加する場合は、行を追加するだけです

モックアップ

enter image description here

4
Dave Haigh

チェックボックスのマトリックスが見苦しくなってしまうのは正しいことです:)また、小さい画面に拡張することもできません（それが問題である場合）。

いくつかの解決策が思い浮かびます：

MultiSelect

これは、複数選択の優れた使用例のようです。利点は、ほぼすべての潜在的なオプションにスケーラブルであり、選択されたオプションのみが表示され、検索可能であるため、ユーザーが探しているものを知っている場合は非常に高速です。

以下の例はReactと呼ばれるコンポーネント React Select なので、残念ながら標準のHTML要素ではありません。これはReact以外の多くの要素で実装できます。

enter image description here

標準HTML選択（複数）

標準のHTML要素に限定されている場合は、<select>要素とmultiple属性：

enter image description here

ツリー選択

この特定のケースでは、ツリー選択が最良のソリューションである可能性があります。ツリー選択により、ユーザーはさまざまな選択オプションをドリルダウンできます。これにより、互換性のないコンボが選択されなくなります。

enter image description here

6
Brett DeWoody