4

i'm programming in php, javascript. This isn't a programming question but rather User Interface/Experience one. suppose i want to create a crossing matrix for dog breeds. I initially created a table where the breeders can specify parents as rows and columns.

To illustrate:

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

This is my crossing matrix design having checkboxes inside table cells that are referring to the cross. So the above matrix means that i crossed female 'Bulldog' with male 'Doberman', a female 'Beagle' with a male 'Husky' and so on, you get the idea.

it's a really nice user interface, it's user friendly, it can be easily seen.

However i need to support crossing of atleast 30 females and 30 males. and how about 50 females and 50 males? considering the size of the table, the number of headers. How big would the table be, and how hard it is for the breeder?

Say the doberman is in the 45th male , and poodle is at 32nd female? I need to have an alternate user interface for this so that i could retain the usability. Any ideas? thanks!

Improve this question
4
  • actually above isn't really practical.. but to demonstrate, i just used dogs, anyway i get the joke :)
    – muffin
    Oct 18, 2013 at 8:28
  • I stole the joke from Jeff Daniels though, hope he doesn't mind... =)
    – AndroidHustle
    Oct 18, 2013 at 8:34
  • Is the table required or just pair for some dog is searched?
    – Alexey Kolchenko
    Oct 18, 2013 at 8:38
  • @Aelexey Kolchenko : no, not really.. the table is an alternate UI, however if the table could be retained and just modified somehow then it's good
    – muffin
    Oct 18, 2013 at 8:48

2 Answers 2

Reset to default
6

Large table has usability issues, as headers could became invisible.

enter image description here

As you matrix is rather sparse, you could use table with appropriate pairs. Grouping in some meaninfgul way will enhance perception. For static vesion it could look like this.
enter image description here

For interactive version solution could be even better.
enter image description here

Improve this answer
1
  • this is actually good, thanks for the mockups btw..
    – muffin
    Oct 18, 2013 at 10:39
2

It seems to me that the information would be easier to consume and more practical to manage if you were to present the pairings more explicitly. The interface below could in theory support an unlimited number of pairings.

enter image description here

Improve this answer
2
  • if there are 50 males, however, and the user is scrolling for 50 items in the dropdown lits, wouldn't the dropdown be too long then?
    – muffin
    Oct 18, 2013 at 8:29
  • *lists , sorry typo error
    – muffin
    Oct 18, 2013 at 8:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.