web-dev-qa-db-fra.com

Conception d'interface utilisateur appropriée pour la matrice de croisement

je programme en php, javascript. Ce n'est pas une question de programmation mais plutôt une interface utilisateur/expérience. Supposons que je veuille créer un matrice de croisement pour les races de chiens. J'ai initialement créé un tableau où les éleveurs peuvent spécifier les parents comme lignes et colonnes.

Pour illustrer:

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

Ceci est ma conception de matrice de croisement ayant cases à cocher à l'intérieur des cellules du tablea qui sont se référant à la croix. Donc, la matrice ci-dessus signifie que j'ai croisé une femelle 'Bulldog' avec un mâle 'Doberman', un femelle 'Beagle' avec un mâle 'Husky' et ainsi de suite, vous avez l'idée.

c'est une interface utilisateur vraiment agréable, elle est conviviale, elle peut être facilement vue.

Cependant, je dois soutenir le croisement d'au moins 30 femmes et 30 hommes. et que diriez-vous 50 femmes et 50 hommes? compte tenu de la taille de la table, le nombre d'en-têtes. Quelle serait la taille de la table et quelle serait la difficulté pour l'éleveur?

Supposons que le doberman soit au 45e mâle et le caniche à la 32e femelle? J'ai besoin d'avoir une interface utilisateur alternative pour cela afin que je puisse conserver la convivialité. Des idées? Merci!

4
muffin

Le grand tableau présente des problèmes d'utilisation, car les en-têtes peuvent devenir invisibles.

enter image description here

Comme votre matrice est plutôt clairsemée, vous pouvez utiliser une table avec les paires appropriées. Le regroupement de quelque façon significative améliorera la perception. Pour statique vesion cela pourrait ressembler à ceci.
enter image description here

Pour version interactive la solution pourrait être encore meilleure.
enter image description here

5
Alexey Kolchenko

Il me semble que les informations seraient plus faciles à consommer et plus pratiques à gérer si vous deviez présenter les couples plus explicitement. L'interface ci-dessous pourrait en théorie prendre en charge un nombre illimité d'appariements.

enter image description here

2
Matt Obee