web-dev-qa-db-ja.com

クロスマトリックスの適切なUI設計

私はphp、javascriptでプログラミングしています。これはプログラミングの問題ではなく、ユーザーインターフェイス/エクスペリエンスの問題です。犬種用に交差行列を作成するとします。ブリーダーが親を行と列として指定できるテーブルを最初に作成しました。

説明する：

Female/Male | Doberman | Husky | German Shepherd | 
----------------------------------------------------
Poodle      |          |       |        x        | 
----------------------------------------------------
Bulldog     |    x     |   x   |                 | 
----------------------------------------------------
Beagle      |          |   x   |        x        |
----------------------------------------------------

これはテーブルセル内のチェックボックスクロスを参照のある交差行列の設計です。したがって、上記のマトリックスは、女性の「ブルドッグ」を男性の「ドーベルマン」と交配したことを意味します女性の「ビーグル」と男性の「ハスキー」など。

それは本当に素晴らしいユーザーインターフェースで、ユーザーフレンドリーで、簡単に見ることができます。

ただし、少なくとも30人の女性と30人の男性の交配をサポートする必要があります。また、テーブルのサイズ、ヘッダーの数を考慮して、50人の女性と50人の男性？についてはどうでしょうか。テーブルはどれくらい大きく、ブリーダーにとってどれくらい難しいですか？

ドーベルマンは45番目の男性で、プードルは32番目の女性であるとしましょう。使いやすさを維持できるように、このための代替ユーザーインターフェイスが必要です。何か案は？ありがとう！

gui-designtablescheckboxesheaderuser-centered-design
4
muffin

ヘッダーが非表示になる可能性があるため、大きなテーブルには使いやすさの問題があります。

enter image description here

マトリックスはかなりスパースなので、適切なペアでテーブルを使用できます。何らかの意味のある方法でグループ化すると、知覚が向上します。 static vesionの場合、次のようになります。
enter image description here

インタラクティブバージョンの場合、ソリューションはさらに優れている可能性があります。
enter image description here

5
Alexey Kolchenko

ペアリングをより明確に提示した方が、情報が使いやすくなり、管理がより実用的になるようです。以下のインターフェースは理論的には無制限のペアリングをサポートできます。

enter image description here

2
Matt Obee